HTMLアクセシビリティ入門 — 読み上げやキーボード操作に強い構造 - HTML入門 — Webページの構造とタグのチートシート

アクセシビリティは、障害の有無や利用環境にかかわらず、情報や機能にアクセスしやすくする考え方です。HTMLを正しく書くことは、アクセシビリティの出発点です。

アクセシビリティ対応は、あとから特別な属性を足す作業ではありません。まず正しいHTML要素を選ぶことから始まります。

アクセシビリティ観点のチートシート

<a href="/books">教科書一覧へ</a>
<button type="button">メニューを開く</button>

html

見た目がボタンでも、移動なら a、操作なら button です。

学習者

CSSで見た目を同じにできるなら、a と button はどちらでもよくないですか？

先生

見た目は同じでも、キーボード操作や読み上げでの意味が変わります。移動か操作かでHTMLを選びます。

アイコンだけのボタンなど、見えるテキストがない場合は aria-label で名前を付けます。

<button type="button" aria-label="メニューを開く">
  ☰
</button>

html

構文： aria-label="支援技術に伝える名前"

属性	説明
`aria-label`	画面上のテキストでは不足する名前を補う

戻り値： HTML属性なので戻り値はありません。アクセシブルネームとして支援技術に利用されます。

次章では、HTMLが正しい構文になっているかを確認するバリデーションを学びます。