ネイティブHTMLの力

アクセシビリティ対応の第一歩は、 「正しいHTMLタグを使うこと」 です。 ブラウザ標準のタグには、アクセシビリティ機能が最初から備わっています。

• ボタン機能なら <button> : クリック可能で、Enter/Spaceキーで実行でき、フォーカスを受け取れます。<div> にクリックイベントをつけても、これらの機能は自分で実装しなければなりません。
• リンクなら <a> : ページ遷移するための要素です。
• 見出しなら <h1> 〜 <h6> : 文書構造を表します。スクリーンリーダーユーザーは、見出しだけを拾い読み（ジャンプ）してページの内容を把握します。

ランドマークロール

ページの大まかな構造を示すタグを使いましょう。

• <header>: ヘッダー
• <nav>: ナビゲーション
• <main>: メインコンテンツ
• <footer>: フッター これにより、支援技術のユーザーは興味のあるセクションに素早く移動できます。

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)

ARIAは、HTMLだけでは表現できない複雑な状態や役割を定義するための属性です。 しかし、大原則があります。 「HTMLで表現できるなら、ARIAは使うな（No ARIA is better than Bad ARIA）」

よく使うARIA属性

どうしても必要な場合の例です。

• aria-label : ボタンの中にテキストがなく、アイコンしかない場合に使います。

  <button aria-label="メニューを閉じる">✖️</button>
  

• aria-expanded : アコーディオンやメニューが開いているか閉じているかを示します。

  <button aria-expanded="true">詳細を見る</button>
  

• aria-hidden : 装飾用のアイコンなど、読み上げる必要のない要素を隠します。

  <span aria-hidden="true">➡️</span>