［連載］徹底解説！インクルーシブHTML + CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン (8)

こんにちは、freeeの伊原です。そろそろ今年もあの季節がやってきましたね。そう、Global Accessibility Awareness Day、そして毎年この日に開催される「アクセシビリティの祭典」のことです。私も毎年参加させてもらっており、去年と同じく、今年もトークバトルのレフェリー役をつとめます。去年のトークバトルの登壇者はみんな受託のウェブ制作会社所属でしたが、今年は「禁断の対決！サイバーエージェント vs サイボウズ」となっており、またレフェリーが転職したこともあって、今度はみんな事業会社所属という面白い展開になっています。というわけできっと私にも流れ弾が飛んでくると思いますが、そのあたりも含めてお楽しみいただければと思います。みなさまのご参加をお待ちしております！

また、先日Inside Frontendで登壇した際の様子をログミーで書き起こし頂きました。事業会社の中でアクセシビリティに取り組んでいく際のケーススタディとして、またありがちなアクセシビリティ上の課題の事例として、ぜひご覧ください。実際、プロダクト内にはこの連載のテーマである「インクルーシブHTML + CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン」で取り上げているような課題がいろいろ含まれていました。逆に言えば、それは解決策がわかっているわけで、あとは地道に取り組んでいけば良くなっていくばかり......のはずです。社内でもアクセシビリティ改善プロジェクトが本格的にキックオフしました。今後もこういった場で取り組みの状況を伝えていければと思います！

それでは今回も、書籍から内容をダイジェストでご紹介いたします！

9章：商品リスト

この章では、プリント写真を購入するECサイトを題材に、そこで並ぶ商品のリストの実装方法を学びます。「4章：ブログ記事」では静的なページにおけるベーシックなコンテンツを扱いましたが、それに対応するように、この章はWebアプリケーションにおけるベーシックなコンテンツを扱う章というわけです。ブログ記事と同様、毎日何気なく見かけているシンプルなインターフェースですが、いざ作るとなると考えるべきことがいろいろあります。

まずは商品リストのベースを作る

まずは「商品リスト」というぐらいですから、商品が並ぶリストを作ります。リストの項目内には商品のタイトルと作者名を書き、商品詳細ページへのリンクを含んだ形の見出しを置きます。

<li>
    <h3>
        ガソリンスタンドにたたずむ裸の男
        <a href="/photographer/kenny-mulbarton">by <cite>ケニー・マルバートン</cite></a>
    </h3>
</li>

このように書くと、スクリーンリーダーにはページ内にリストが何項目あるかが伝わります。また、ショートカットキーをつかってリスト項目を切り替えることができます。さらに見出しがあることで、特定の見出しにジャンプすることもできるようになります。ここは見出しレベル3なので、スクリーンリーダーではたとえばHキーや3キーなどでジャンプ可能です。マークアップが適切であるだけでユーザーの操作を具体的に補助できるのが、HTMLの面白さのひとつですね。

次に概要をつける

次は商品の項目ごとに概要をつけます。ここではdl要素を使っています。dl要素もスクリーンリーダーにはリストとして扱われますので、項目と内容というペアになる構造があれば、dl要素を使っていきましょう。

<li>
    <h3>
        ガソリンスタンドにたたずむ裸の男
        <a href="/artist/kenny-mulbarton">by <cite>ケニー・マルバートン</cite></a>
    </h3>
    <dl>
        <dt>サイズ：</dt>
        <dd>90cm × 30cm</dd>
        <dt>価格：</dt>
        <dd>35.95ユーロ</dd>
        <dt>評価:</dt>
        <dd><img src="/images/rating_4_5.svg" alt="">(5つ星のうち4)</dd>
    </dl>
</li>

ちなみにdl>dtにするか見出しにするかで迷うというマークアップあるあるネタがありますが、私は「スクリーンリーダーで見出しにジャンプして後続のものを読みたそうな構造なら見出し（＝見出しのあとにある程度の固まりをもった内容が来るなら見出し）」というふうに判断しています。

サムネイルを置くときは

そして、商品リストと言えばサムネイルです。サムネイルは意味のある画像なのでimg要素として置きつつ、適切なalt属性値を用意します。

<li>
    <h3>
        ガソリンスタンドにたたずむ裸の男
        <a href="/artist/kenny-mulbarton">by <cite>ケニー・マルバートン</cite></a>
    </h3>
    <img src="/images/naked-forecourt-man.jpg" alt="裸の男性が何食わぬ顔で給油ポンプにもたれかかっている、ハイコントラストの白黒写真。" />
    <dl>
        <dt>サイズ:</dt>
        <dd>90cm × 30cm</dd>
        <dt>価格:</dt>
        <dd>35.95ユーロ</dd>
        <dt>評価:</dt>
        <dd><img src="/images/rating_4_5.svg" alt="">(5つ星のうち4)</dd>
    </dl>
</li>

altに関してはもう20年ほど前からずっと「画像には適切なaltをつけましょう」と言われ続けています。一説によればスクリーンリーダーにおけるアクセシビリティ問題の5割を占めるとの声もあります。マークアップで要素の選択が不適切な場合はそれなりに切り抜けることが可能でも、代替テキストがおかしかったり付与されてなかったりするケースでは情報そのものが間違っているため真っ当に認知できないからです。ここは頑張りどころですね。

altの付け方はAn alt Decision Treeというコンテンツが参考になります。質問に答えていけばどういうaltを書くべきかを示してくれるというものです。たとえばこの例では以下のようになることを、書籍の訳注で示しています。

この例を "An alt Decision Tree" に沿って見ていくと、「画像にテキストが含まれているか?」→No、「画像がリンクやボタンで使われていて、取り除くと意味が通じなくなるか?」→No、「この画像は現在のページやコンテキストに意味を提供しているか？」→Yes、「シンプルなグラフィックや写真か?」→Yes、となって「Informative Images」に該当し、この中の「Example 4: Images conveying an impression or emotion」にあてはまります。ここでは写真の印象などを表す簡潔な代替テキストを指定すれば良いことになっています。

書籍ではこの他にも、画像の遅延読み込みや要素を使う例なども取り上げています。読み込み速度（パフォーマンス）もアクセシビリティの一環として取り扱っているところが、本書のユニークなところでしょう。アクセシビリティガイドラインとは関係がなくても、ユーザーからすれば低速回線時に内容が出なければそれは「アクセスできていない」ことになるわけで、まとめて扱うことは理にかなっていると感じます。

つづきはメルマガで……。