MD-Blog_Web Creative

インクルーシブなナビゲーションの実装（1）

2019.07.05 Fri.

ウェブサイトやアプリケーションはさまざまな要素やコンテンツで構成されていますが、中でもサイトの骨組みとなるのはナビゲーションだと考えています。
今回はそんなナビゲーションを、インクルーシブに実装していきたいと思います。

インクルーシブとは

インクルーシブ（inclusive）とは「包摂的な、すべてを含む」という意味の英単語です。反対語のexclusive（排他的な、閉鎖的な）と合わせて考えると少しわかりやすいかもしれません。
アクセシビリティとほぼ同義ですが、「特定の人を除外しない、誰でも使える」のような意味で使用されています。

実装：マークアップ

「.global-nav」という命名の要素を用意しました。今回はこのMD-Blogのナビゲーションを例に実装していきます。

<div class="global-nav"></div>

role属性と<nav>要素

role属性とはWAI-ARIAで定義されている仕様で、要素の役割を明示するものです。マークアップ言語であるHTMLには役割をもつ要素はありますが、それだけでは足りない役割をrole属性で補うことができます。
ロール（role）はいくつかに分類されており、ナビゲーションを表す role="navigation" はランドマークロールというウェブサイトの構成を表すロールに分類されます。

<div class="global-nav" role="navigation"></div>

これで本来意味をもたない<div>要素の「.global-nav」はナビゲーションを明示する要素になりました。
そして、<nav>要素には暗黙的に role="navigation" が割り当てられる仕様になっています。

<nav class="global-nav"></nav>

<div>要素に role="navigation" を付与した「.global-nav」と<nav>要素の「.global-nav」は同義ですが、role属性はあくまでも役割を補うものなので、理由がない限り基本は<nav>要素のように暗黙的に役割をもつ要素を使用しましょう。

順序なしリスト要素

順序なしリスト（<ul>要素）を使用してナビゲーションを作成します。リストを使用することで、リンク同士が同じグループの項目であることを明示します。

<ul>
    <li><a href="/about/">ABOUT</a></li>
    <li><a href="/service/">SERVICE</a></li>
    <li><a href="/project/">PROJECT</a></li>
    <li><a href="/job/">RECRUIT</a></li>
    <li><a href="/blog/">BLOG</a></li>
    <li><a href="/contact/">CONTACT</a></li>
</ul>

スクリーンリーダーの読み上げ

スクリーンリーダーという画面の表示内容を読み上げるソフトを使い、聴覚的にウェブサイトを閲覧するユーザーもいます。
ひとつめのリンク「ABOUT」を視覚的に英単語だと認識して「アバウト」と読めたとしても、スクリーンリーダーはこれをただのアルファベットと認識し「エー・ビー・オー・ユー・ティー」と読み上げてしまいます。
これを英単語だとスクリーンリーダーに教えるには最初の文字以外を小文字にする必要があります。ただし見た目は大文字にしたいので、CSSで text-transform: uppercase; を指定しましょう。

<ul>
    <li><a href="/about/">About</a></li>
    <li><a href="/service/">Service</a></li>
    <li><a href="/project/">Project</a></li>
    <li><a href="/job/">Recruit</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li><a href="/contact/">Contact</a></li>
</ul>

さらに<ul>要素を<nav>要素で囲うことで、スクリーンリーダーを使用して最初のリンクにフォーカスしたとき「ナビゲーションランドマーク、リスト5項目、About リンク」と読み上げられます。
これで視覚的な情報が無い場合でも、自分が今ナビゲーションにいること、Aboutのリンクにフォーカスしていること、リンクの項目が5つあることを知ることができます。

<nav class="global-nav">
    <ul>
        <li><a href="/about/">About</a></li>
        <li><a href="/service/">Service</a></li>
        <li><a href="/project/">Project</a></li>
        <li><a href="/job/">Recruit</a></li>
        <li><a href="/blog/">Blog</a></li>
        <li><a href="/contact/">Contact</a></li>
    </ul>
</nav>

まとめ

今回はインクルーシブなナビゲーションのマークアップを実装しました。
すごく当たり前な内容だと感じる方が多いと思いますが、文書を構造化し、文脈を読み取り、その内容によって意味や役割を付与することがマークアップです。そしてその土台の元に装飾や操作性が積み上がり、よりよいユーザー体験につながると考えています。
誰もが同じ情報を受け取ることができる、インクルーシブなナビゲーションには当たり前なマークアップが必要なのです。

参考資料

ヘイドン・ピカリング著，太田良典・伊原力也訳（2017）『インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン』，株式会社ボーンデジタル．
多様なユーザーニーズに応えるフロントエンドデザインパターン〜ベーシック編〜
ARIA: navigation ロール - アクセシビリティ | MDN
Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳

Recent Entries

MD EVENT REPORT

What's Hot?

株式会社MONSTER DIVE