WAI-ARIA Patterns

HTMLだけで表現できない高度なUI（タブ、モーダル、アコーディオン）のための架け橋。

WAI-ARIA
標準のHTMLだけでは表現できない意味や状態を、支援技術に伝えるための属性群（role, aria-label等）。

The First Rule of ARIA

"No ARIA is better than Bad ARIA."

もしHTMLタグ（button, nav, main）で表現できるなら、絶対にそれを使うこと。ARIAは最後の手段。

Common Attributes

  • aria-label : 見た目にラベルがない要素（アイコンボタンなど）に名前をつける。
  • aria-expanded : アコーディオンやメニューが開いているか閉じているかを示す。
  • aria-hidden="true" : 装飾用のアイコンなどを、読み上げから隠す。
  • role="alert" : エラーメッセージなど、すぐに読み上げてほしい情報。

Example: Modal

<div role="dialog" aria-labelledby="modal-title" aria-modal="true">
  <h2 id="modal-title">Settings</h2>
  <!-- Content -->
</div>