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

もう1月後半ですが、あけましておめでとうございます！freeeの伊原です。最近、freeeの社内で「インクルーシブHTML + CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン」の輪読会を始めました。アクセシビリティの本ではありつつも「これって真っ当にフロントエンドをやる本じゃないか！」みたいな感想が多く、おかげさまで好評です。この本を読みつつ、本に出てきた視点をその都度自社プロダクトに照らして見てみると、いろんなものが見つかるのでオススメですよ...!

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

6章：ナビゲーション領域

前回「4章：ブログ記事」では、メインコンテンツの出し方を考えました。私たちは概ねWebページ単体ではなくWebサイトやWebアプリケーションというまとまりを作っているので、そうなると今度は特定のコンテンツにたどり着けるようにする必要があります。ということで、今回はそのために必要なナビゲーションを考えていきましょう。

ナビゲーションのお作法：マークアップ編

Webにおいては、コンテンツとなるHTML内に、ナビゲーションとなる部分とメインコンテンツになる部分が共存していることがほとんどです。なので、メインコンテンツはmain要素で、ナビゲーションはnav要素として表現しましょう。そのようにしておけば、スクリーンリーダーでもナビゲーションとコンテンツのあいだを自由に行き来することができるからです。

この<nav>（あるいはrole="navigation"）ランドマークと<main>を組み合わせれば、ランドマークをたどりながら領域単位でページ内を移動できます――たとえば、NVDAスクリーンリーダーではDキーを使います。また、NVDA、JAWS、VoiceOverでは、ランドマークを一覧表示することができ、それぞれの領域に直接行き来することができます。

そしてナビゲーションを実際に作っていくわけですが、まずはプログレッシブ・エンハンスメント。HTMLだけで構造がちゃんと解るように書くところから始めます。具体的には、この例だとul/liを使っていますね。

<nav>
    <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/about">企業情報</a></li>
        <li><a href="/products">製品情報</a></li>
        <li><a href="/contact">お問い合わせ us</a></li>
        <li><a href="/login">ログイン</a></li>
    </ul>
</nav>

このようにすれば、それがナビゲーションであること、複数項目があるリストであること（そしてその項目の何番目であるかということ）、その中にリンクがあることが、スクリーンリーダーにもきちんと伝わります。スクリーンリーダーはHTMLを直接UIとして扱っている感じに近いことが、この例でもよく分かると思います。

ナビゲーションのお作法：デザイン編

ナビゲーションは、それを誰が見てもナビゲーションだと解るようにデザインすべきです。割と当たり前のように思える話ですが、アクセシビリティという文脈でも（いや、その文脈だからこそ）それが重要になってくる、ということがこの本では述べられています。

デザインにおいては、特定のふるまいを期待させるように見せることで、ユーザーの認知のキャッシュを最大限に活用できるようにします。言い換えると、ユーザーに考えさせるな、ということです。これはよく知られたユーザビリティの原則ですが、あらためて取り上げる価値があります――特にインクルーシブデザインの文脈では、認知障害に対応しようとする際に重要になるからです。

では、どのようにすると多くの人にわかるナビゲーションデザインとなるのでしょうか。この本では以下のようなプラクティスを示しています。

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