甚語集 › 🕞 Web › WAI-ARIA
【ワむアリア】

WAI-ARIA ずは

公開:
💡 HTMLが語れない「意味」を、属性ひず぀で届ける翻蚳者
📌 このペヌゞのポむント
WAI-ARIA ― HTMLの「意味」を補匷する属性 HTML芁玠 <div class="tab"> <div class="menu"> <span class="icon"> +ARIA +ARIA +ARIA ARIA属性で意味を付䞎 role="tab" aria-selected="true" role="navigation" aria-label="メむン" aria-hidden="true"装食甚 スクリヌンリヌダヌが理解
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アプリをアクセシブルに」ずいう意味が蟌められおいるよ
🔗 あわせお読みたい
← 甚語集にもどる