アクセシビリティ: alt、見出しの階層、ARIA

代替テキスト、スクリーンリーダーが実際にたどれる見出しの階層、そしてネイティブのHTMLでは足りない場面に限定したARIAの使い方をマスターします。

9 分 · 3 問

アクセシビリティは、プロジェクトの最後に取ってつけたような見た目のレイヤーではありません。それはあなたのHTMLの構造的な性質です。まずは alt 属性から。優れた代替テキストは、画像がその文脈で持つ機能を説明するものであり、ピクセル単位の見た目を描写するものではありません。売上グラフは「青い棒グラフ」ではなく、それが伝える情報で説明します。そして純粋に装飾的な画像には空の alt="" を与えなければなりません。これは、スクリーンリーダーにその画像を読み飛ばすよう指示する明示的なシグナルです。属性そのものを省略するのが最悪の選択です。なぜならスクリーンリーダーはファイル名を読み上げてしまうからです。

<img src="sales-chart.png"
     alt="2025 sales: +18% in the last quarter">

<img src="divider-ornament.png" alt="">

2つ目の作業: 見出しの階層です。スクリーンリーダーの利用者は、圧倒的に見出しから見出しへとジャンプしてページの心的地図を組み立てます。したがって h1 → h2 → h3 のアウトラインは、たまたま欲しかった視覚的な大きさではなく、内容の論理構造を反映しなければなりません。譲れない2つのルール: 1ページにつき h1 は1つだけ、そしてレベルを飛ばさないこと(h2 の直下に h4 を置かない)。見出しが「大きすぎる」なら、意味的なレベルを下げるのではなく、CSSで直します。

<h1>Dashboard</h1>
<section>
  <h2>Statistics</h2>
  <h3>Monthly visits</h3>
  <h3>Conversion rate</h3>
</section>
<section>
  <h2>Exportable reports</h2>
</section>

ARIAが正当になるのは、ネイティブのHTMLが動的な状態を表現できないときです。開いているか閉じているかのメニュー、ライブで更新される領域、アクティブなタブなどです。重要な属性は aria-expanded(開閉の状態)、aria-controls(制御対象の要素へのリンク)、aria-live(更新の通知)です。原則を覚えておきましょう: ネイティブのHTMLがロールを提供し、ARIAはJavaScriptが時間とともに変化させる状態やプロパティを補います。

<button aria-expanded="false" aria-controls="menu">
  Menu
</button>
<ul id="menu" hidden>
  <li><a href="/profile">Profile</a></li>
  <li><a href="/settings">Settings</a></li>
</ul>

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. 純粋に装飾的な画像はどう扱うべきですか?
   • alt="ornament" のような説明的なaltを付ける
   • 空のalt属性を付ける: alt=""
   • alt属性を完全に取り除く
   • altの代わりにtitleを使う
2. h2の下に、見た目は控えめな小見出しを置きたいとします。どうしますか?
   • h5。既定でサイズが小さいから
   • CSSでサイズを縮めたh3
   • 見出し用のクラスを付けたdiv
3. ARIA属性を追加するのが適切なのはいつですか?
   • 念のため、すべてのインタラクティブな要素に
   • 必要なロールや状態を表現できるネイティブのHTML要素がないとき
   • ページの検索順位を上げるため