WAI-ARIAとは
WAI-ARIA（Accessible Rich Internet Applications）は、W3Cが定めるアクセシビリティのための仕様です。HTMLの要素に属性を追加することで、その要素が「何であるか」「いまどんな状態か」を支援技術に伝えます。
たとえばdivやspanで作ったカスタムUIは、見た目はボタンやタブでも、支援技術にはただの箱としか認識されません。ARIAはこうした要素に役割や状態の情報を補い、スクリーンリーダー利用者にも操作できるようにします。
ARIAは見た目や動作そのものを変えるものではなく、あくまで「意味の情報」を追加する仕組みである点が重要です。
role・property・stateの3要素
ARIAの属性は大きく3種類に分かれます。roleは要素の役割を示し、buttonやtab、dialogなどを指定して「これはボタンだ」と伝えます。
property（プロパティ）はあまり変化しない特性を表し、たとえばaria-labelで名前を与えるなどに使います。state（状態）は操作で変わる状態を表し、aria-expandedで開閉、aria-checkedで選択状態などを示します。
この3つを組み合わせることで、動的に変わるUIの状態まで支援技術へ正確に伝えられます。
実務ではどこで関係する？
WAI-ARIAは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。
WAI-ARIAについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。
- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める
ARIA利用の第一原則
ARIAの世界には「使わないで済むなら使わない方がよい」という第一原則があります。意外に聞こえますが、これはとても重要な指針です。
buttonやnav、入力フォームなど、ネイティブのHTML要素は最初から適切な役割と状態を持っています。これらを使えば、ARIAを書かなくても支援技術に正しく伝わります。標準要素で表現できることは、まず標準要素で実装するのが基本です。
ARIAが必要になるのは、標準HTMLでは表現しきれないリッチなUIを自作する場合などに限られます。
ARIAを使うときの手順
カスタムUIにARIAを適用する際の基本的な流れは次のとおりです。誤用を避けるため、順を追って確認します。
ARIAは属性を足すだけでなく、操作や状態の更新まで実装して初めて意味を持ちます。役割の付与と挙動の実装をセットで考えることが大切です。
- まず標準HTML要素で実装できないか検討する
- 自作が必要なら、その部品の役割に合うroleを調べて指定する
- 状態が変わる部品にはstate属性（aria-expandedなど）を付け、操作に合わせて値を更新する
- キーボードだけで操作できるよう、フォーカスとキー操作も実装する
- スクリーンリーダーで読み上げと操作を実際に確認する
よくある誤用
ARIAは正しく使えば助けになりますが、誤用すると逆に利用者を混乱させます。たとえばroleを付けただけでキーボード操作を実装しないと、見えないボタンが操作できない状態になります。
また、状態を表すstate属性を動的に更新し忘れると、開いているのにaria-expandedがfalseのまま、といった食い違いが生まれます。間違ったARIAは、ARIAがないより悪い結果を招くこともあるため、設定したら必ず実機で検証することが欠かせません。
確認結果を関係者と共有する
アクセシビリティの検証は、開発者だけでなくデザイナーや担当者とも認識を合わせたい工程です。スクリーンリーダーでの読み上げ結果や挙動を、その場で再現できる形で見てもらえると確認が進みます。
検証用のHTMLを一時的なURLで共有したいときは、ギガサイト便にHTMLやZIPをドロップすれば共有URLが発行できます。認証や公開期限も選べるので、関係者だけにレビューを依頼する一時共有として扱いやすい仕組みです。
よくある質問
WAI-ARIAとアクセシビリティは同じ意味ですか？
同じではありません。アクセシビリティは誰もが使える状態を目指す広い考え方で、WAI-ARIAはその一部を実現する技術仕様です。ARIAは標準HTMLで足りない部分を補うものであり、ARIAを使うことだけがアクセシビリティ対応ではありません。
ARIAを付ければ見た目も変わりますか？
変わりません。ARIAは支援技術に伝える意味情報を追加するだけで、画面上の見た目や標準の動作には影響しません。キーボード操作などの挙動は別途JavaScriptなどで実装する必要があります。
roleはどんな要素にも付けてよいですか？
技術的には付けられますが、推奨されません。標準要素が持つ役割を上書きすると混乱を招きます。第一原則のとおり、まず標準HTML要素で表現できないかを検討し、自作UIなど必要な場面に限って適切なroleを指定します。
ARIAの効果はどう確認すればよいですか？
もっとも確実なのは、実際にスクリーンリーダーで読み上げと操作を試すことです。自動チェックツールも誤りの発見に役立ちますが、文脈の妥当性までは判断しきれないため、最終的には実機での確認が望ましいです。
実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？
細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。