スクリーンリーダーとARIAの第一のルール

ARIAの第一のルールは、ARIAを使わないことです。button のように、その仕事をするHTMLのネイティブ要素がすでにあるなら、div にロールを付けるのではなく、その要素を使います。

スクリーンリーダーが何をもとに動くか

スクリーンリーダーは画素を読みません。ブラウザーはHTMLからアクセシビリティツリーを作ります。これはページを簡単にした写しで、大事な要素にはそれぞれロール（ボタン、リンク、見出し、チェックボックス）と名前（それを特定するテキスト）があり、状態（チェック済み、展開、無効）を持つこともあります。スクリーンリーダーはそのツリーを読み上げたり、点字ディスプレイに送ったりします。WCAG 2.2のレベルAの達成基準4.1.2「名前（name）・役割（role）及び値（value）」は、ページのすべてのコントロールがこの3つを公開することを求めています。

利用者がページを上から下まで聞くことはめったにありません。主なOSに組みこまれたスクリーンリーダーや、インストールできる無料のスクリーンリーダーでは、見出し、リンク、ランドマークの一覧を出したり、次のフォームの入力欄へ飛んだり、1行ずつ読んだりできます。だからこそ、これまでのユニットがとても大切なのです。本物の見出し、ラベルの付いた入力欄、本当にボタンであるボタン、代替テキストは、どれもそのツリーに直接入ります。html 要素の lang 属性も大切です。達成基準3.1.1「ページの言語」がこれを求めており、スクリーンリーダーはこれを使って正しい音声と発音を選びます。

ARIAが加えるもの

WAI-ARIA（Accessible Rich Internet Applications）は、アクセシビリティツリーに入るものを変える属性のセットです。role はロールを、aria-label などの属性は名前を、aria-checked や aria-expanded などは状態を設定します。ARIAが変えるのは、読み上げられる内容だけです。要素をフォーカスできるようにはせず、キーボードの動作も加えず、見た目も変えません。W3CのARIAオーサリング・プラクティス・ガイドは、これを見出しにしています。「悪いARIAよりARIAなしのほうがよい」。まちがったARIAは、スクリーンリーダーの利用者にページについてうそを伝えます。

ARIAの使い方のルール

W3Cの文書『Using ARIA』は、あちこちで引用される短いルールを示しています（2026年2月に作業を中止した草案という扱いになりましたが、ルールそのものは変わっていません）。ルール1：必要な意味と動作がすでに組みこまれたHTMLのネイティブ要素や属性を使えるなら、ARIAでほかの要素を転用せずに、それを使う。ルール2：本当に必要でない限り、ネイティブのセマンティクスを変えない。ルール3：ARIAで作った操作できるコントロールは、すべてキーボードで使えるようにする。ルール4：フォーカスを受けられる要素に role="presentation" や aria-hidden="true" を付けない。付けると、「何もないもの」にたどり着いてしまう利用者が出ます。

ARIAが本当に役立つのは、HTMLでは埋められないすき間を埋めるときです。アイコンだけが入ったボタンにはテキストがないので、名前もありません。aria-label="Close" で名前を付けられます。見えるテキストの隣にあるSVGのアイコンは飾りなので、svg に aria-hidden="true" を付けてツリーから外します。初心者に必要なのは、たいていこの2つの属性です。タブやメニューのようなウィジェット全体は、自分で考え出さずに、オーサリング・プラクティス・ガイドの対応するパターンに従いましょう。