本文へジャンプ

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

Posted by MMR

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

インクルーシブとは

インクルーシブ(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>

まとめ

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

参考資料

Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
すべてのコンテンツ/プラットフォームを、ひとつのコンテンツ管理システムで。