WAI-ARIAとは何ですか？

Webページの要素に「役割」や「状態」の情報を付け足して、スクリーンリーダーなどの支援技術がコンテンツを正しく理解できるようにする仕様。HTMLだけでは伝えきれない意味を補う技術。

WAI-ARIAのポイントは？

role・aria-label・aria-hiddenなどの属性で、要素の役割や状態を支援技術に伝える。タブやモーダル、ツリーメニューなどHTMLにないUIパターンをアクセシブルにする。視覚的な見た目には影響せず、支援技術向けの「裏の情報」として機能する。原則として、ネイティブHTMLの要素で表現できるならARIAは使わないのがベストプラクティス

【ワイアリア】

WAI-ARIA とは？

💡 HTMLが語れない「意味」を、属性ひとつで届ける翻訳者

📌 このページのポイント

role・aria-label・aria-hiddenなどの属性で、要素の役割や状態を支援技術に伝える
タブやモーダル、ツリーメニューなどHTMLにないUIパターンをアクセシブルにする
視覚的な見た目には影響せず、支援技術向けの「裏の情報」として機能する
原則として、ネイティブHTMLの要素で表現できるならARIAは使わないのがベストプラクティス

WAI-ARIAのイメージ

ひよこ

WAI-ARIAって名前が長いけど、何のためにあるの？

ペンギン先生

HTMLの要素だけだと伝えきれない「意味」を、支援技術に教えるための仕組みだよ。たとえばdivで作ったタブUIは、目が見える人には「タブだな」と分かるけど、スクリーンリーダーには単なる文字列にしか見えない。そこにrole="tab"って付けると「これはタブだよ」と伝わるんだ

ひよこ

どんな属性があるの？

ペンギン先生

大きく3種類あるよ。roleは要素の「役割」、aria-labelは「名前」、aria-expandedやaria-selectedは「状態」を表す。たとえばアコーディオンメニューにaria-expanded="false"を付けると「今は閉じている」ということが支援技術に伝わるんだ

ひよこ

じゃあ全部のHTMLにARIAを付ければ最強？

ペンギン先生

実はARIAの第一原則は「ネイティブHTMLで表現できるなら、ARIAを使わない」なんだ。buttonタグに改めてrole="button"を付ける必要はないし、むしろ付けすぎると混乱の元になる。HTMLのセマンティクスでは足りないときだけ使うのがベストだよ

ひよこ

aria-hiddenっていうのも見るけど、あれは何？

ペンギン先生

aria-hidden="true"を付けると、その要素を支援技術から「見えない」状態にできるよ。装飾用のアイコンとか、視覚的には意味があっても読み上げる必要がないものに使うんだ。逆に言えば、重要なコンテンツに間違って付けると大問題になるから注意が必要だね

ひよこ

ライブリージョンって聞いたことあるけど、ARIAと関係ある？

ペンギン先生

aria-live属性のことだね。ページの一部が動的に更新されたとき、スクリーンリーダーに「ここ変わったよ」と通知する仕組みだよ。チャットの新着メッセージやフォームのエラー表示に使われるんだ。politeだと読み上げ中の文を待ってから通知、assertiveだと即座に割り込んで通知するという違いがあるよ

まとめ：ざっくりこれだけ覚えればOK！

「WAI-ARIA」って出てきたら「HTMLの意味を補強して支援技術に伝える仕組み」と思えばだいたいOK！

📖 おまけ：英語の意味

「Web Accessibility Initiative - Accessible Rich Internet Applications」＝ Webアクセシビリティ推進のためのリッチインターネットアプリケーション仕様

💬 W3CのWAI（ウェブアクセシビリティ・イニシアティブ）が策定した仕様で、ARIAは「リッチなWebアプリをアクセシブルに」という意味が込められているよ

← 用語集にもどる