ウェブ・アクセシビリティ・クックブック

第7章. サイトをナビゲートする

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

このの章では、Webサイトのメインナビゲーションの作成について見ていく。この章では、可能な限りシンプルな解決策から始めるが、レシピを作るごとに、体験と関数を徐々に改善していく。各要素と属性の責任と、ネストされた大きな階層を扱うためのさまざまなアプローチについて学ぶ。 この章の終わりには、なぜARIA属性を使いすぎたり、間違って使ったりすると、良いことよりも悪いことの方が多くなるのかがわかるだろう。

7.1 メインナビゲーションを作成する

問題

Webサイトのメインナビゲーションを構築するには、さまざまな方法がある。過剰に設計された関数もあれば、ユーザに十分な機能と情報を提供しない関数もある。HTMLとARIAはユーザ体験を向上させる多くのツールを提供するが、セマンティックに乏しい、あるいはリッチすぎるマークアップを書くと、使い方が複雑になる。

解決策

Webサイトが一定の規模に達すると、ページを大きなセクションに整理し、アクセスしやすい中心的な場所にリンクさせる。これらのセクションはさまざまな形をとることができ、私たちは通常、ナビゲーションやメニューと呼んでいる。

Webサイトのメイン・ナビゲーションは、例7-1に示すように、ハイパーリンクを並べただけのシンプルなものにすることができる。

例7-1. メイン・ナビゲーションの最も単純な実装。

<a href="/home">Home</a>
<a href="/products">Products</a>
<a href="/team">Team</a>
<a href="/contact">Contact</a>

中小規模のWebサイトでは、マウス、キーボード、スクリーン・リーダーのどれでアクセスしているかにかかわらず、ほとんどのユーザにとってうまく機能するため、このシンプルなパターンで十分である。エクスペリエンスは十分なはずだが、HTMLとCSSを使って改善することもできる。

この基本的なソリューションにどれだけの関数を追加するかは、ナビゲーションのサイズと複雑さによって決まる（考察を参照）。HTML、CSS、JavaScriptにおけるいくつかの可能性を見てみよう。

HTML

HTML例7-2に示すように、ユーザはナビゲーション内のコンテンツにアクセスする方法を追加でき、ナビゲーションの目的と構造をより理解しやすくなる。

例7-2. 基本的なナビゲーション・パターンの、意味的に豊かなバリエーション

<nav aria-label="Main">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/products" aria-current="page">Products</a></li>
    <li><a href="/team">Team</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

例7-2やレシピ7.2、7.3、7.4で追加した利点について説明する。

CSS

アンカー要素<a> は、意味的な情報と提供する関数（第3章参照）という点では素晴らしい仕事をしているが、そのデフォルトのスタイルは単純すぎる。CSSは読みやすさを改善し、ターゲットサイズを大きくし、キーボードナビゲーションを強化することができる。 ...