ARIA の役割と属性: 比較した最良の選択

ARIA のロールと属性（W3C の WAI-ARIA 1.2 仕様）は 100 を超えますが、少数のロールで XHTML や CSS ウィジェットのアクセシビリティ問題の大部分を解決できます。ロールは要素が「何であるか」を定義し、属性はその「状態」や「関係」を定義しますが、ARIA はブラウザの動作を変更しません。ロールを追加するたびに、JavaScript によるインタラクションの実装が必要になります。

Accessible Rich Internet Applications (ARIA) は、ネイティブ形式ではセマンティクスを持たない HTML 要素にセマンティクスを追加する W3C 仕様です。ロールは要素（button、tab、dialog など）が 何であるか を記述し、属性はその * 状態* または * 関係 * (aria-expanded、aria-controls、aria-labelledby) を記述します。 W3C が ARIA の使用 で公開した ARIA の最初のルールは、単刀直入です。すでにその役割を果たしているネイティブ HTML 要素がある場合は、それを使用し、ARIA を追加しないでください。

その理由は、ARIA がブラウザーの動作を変更しないためです。 <div role="button"> は Tab キーでフォーカスを受け取らず、Enter キーまたはスペースに応答せず、フォームで送信されません。支援技術が発表する内容が変わるだけです。すべての対話は JavaScript で実装し、慎重に管理する必要があります。 HTML が静的で JS が最小限である XHTML/CSS プロジェクトでは、追加される aria の役割と属性のそれぞれが、コードが果たさなければならない約束であることを意味します。

ARIA の 2 番目のルールは、不可欠でない限り、ネイティブ セマンティクスを変更しないことを求めています。 「

」 は見出しの構造を壊し、領域ごとに移動するスクリーン リーダーを混乱させます。 3 番目のルールでは、すべての ARIA コントロールがキーボードで操作可能であることが必要です。 4 番目は、フォーカスを受け取る要素で aria-hidden="true" を使用しないように求めます。 5 番目の、そして最も忘れられているものですが、インタラクティブな要素にはアクセス可能な名前が必要であることを思い出させます。ラベルのない役割はミュート ボタンです。

選択方法: リストの前の基準

役割や属性の選択は好みの問題ではありません。これらの基準を順番に適用すると、aria の役割と属性に関するほとんどのエラーが回避されます。

関連: accessiBe — 48 時間で IA が WCAG に最高の瞬間をもたらす.

1. ネイティブ HTML 要素はありますか? ある場合は、それを使用します。 <button>、<details>、<dialog>、<input type="checkbox"> は、人々が思っているよりも多くのケースをカバーします。
2. ウィジェットには動的な状態が必要ですか? ウィジェットが開いている/閉じている、選択されている/選択されていない、展開されている/折りたたまれている間で変化する場合は、状態属性 (aria-expanded、aria-selected、aria-pressed) が必要です。
3. 要素間の関係は必要ですか? 関係属性 (aria-controls、aria-labelledby、aria-describedby、aria-owns) は、アクセシビリティ ツリーが DOM から推測できない部分を接続します。
4. ライブアナウンスは必要ですか? ライブ領域 (aria-live、role="status"、role="alert") は、フォーカスを移動せずに更新を解決します。
5. 保守できますか? キーボードやスクリーン リーダーのテストがない複雑な ARIA パターンは、何もないよりも悪いです。

メンテナンスコストは最も無視される基準です。適切に作成された role="tablist" には、矢印キーの管理、tabindex の回転、aria-selected と aria-controls の同期、および非アクティブなパネルの正しい非表示が必要です。チームがそれに対応できない場合は、アンカー付きのリンクのセットの方がアクセスしやすく、安価です。

ARIA での役割の比較

次の表は、実際の監査で繰り返し登場するロールと、対応するネイティブ要素、およびよくある落とし穴をまとめたものです。

ロール	パラケサーベ	オルタナティバ・ナティバ	トランパ周波数
ボタン	アクションを制御します。 <ボタン>	tabindex="0" に Enter/Espacio を追加する必要はありません
リンク	オトラ URL を操作する	<a href>	Usarlo para acciones que no navegan
ダイアログ	Ventana モーダルまたはモーダルなし	<ダイアログ>	問題を解決するための情報はありません
タブリスト / タブ / タブパネル	インターファス・デ・ペスターニャス	ニングナ ディレクタ	sincronizar aria-selected コントロール パネルが表示されません。
メニュー / メニュー項目	アプリケーションのメニュー	<select> をリストに追加	Web ナビゲーション メニューを使用
警告	緊急の連絡手段	role="status" 緊急の必要はありません	パンタラの芸術家を紹介
ステータス	実際の情報	<出力>	実際に DOM を挿入する必要はありません。
プログレスバー	プログレソ デ ウナ タレア	<進行状況>	現実的なものはありません aria-valuenow
ツールチップ	緊急の説明	タイトル (制限)	「aria-descriptionby」に関する関連性はありません
コンボボックス	カンポ・コン・リスタ・デ・スゲレンシアス	<データリスト> (制限)	結果の発表はありません

role="alert" と role="status" の選択は、aria の役割と属性に関するニュアンスを伴う決定の良い例です。 「alert」は、現在のスクリーン リーダーの読み取りを中断します。 status はユーザーが終了するのを待ちます。フォーム検証エラーの場合は、「alert」が適切です。ユーザーが書き込み中の「3 件の結果が見つかりました」の場合、「ステータス」は正しく、「アラート」は煩わしい結果になります。

一見の価値があります: UserWay — 簡単な操作で計画を立てるためのウィジェットを無料で利用できます.

不可欠な ARIA 属性とその組み合わせ方

属性は 4 つのファミリーに関連付けられており、それぞれが異なる問題を解決します。

ラベル付け aria-label は、表示されるテキストがない場合に名前を提供します。 aria-labelledby は別の要素の id を参照し、テキストが画面上にすでに存在する場合に推奨されます。これは、単一の真実の情報源を維持するためです。 aria-descriptionby は、フィールドのヘルプ テキストなどの長い説明を追加します。違いは重要です。名前は、ユーザーが焦点を合わせたときに聞こえるものです。説明は、中断できる追加のコンテキストです。

状態。 アコーディオンとドロップダウン メニューの aria-expanded (true/false)。タブとオプションの「aria-selected」。カスタム チェックボックスの場合は aria-checked、トライステート状態の場合は値 mixed を使用します。トグルボタンの場合は aria-pressed。ネイティブ属性 disabled とは対照的に、要素がまだフォーカス可能だが操作できない場合の aria-disabled は、要素をタブ オーダーから削除します。

関係 aria-controls は、ボタンがどの要素を制御するかを示します。 aria-owns は、DOM が視覚的な関係を反映していない場合にアクセシビリティ ツリーを再編成します。 aria-activedescendant を使用すると、コンテナがアクティブな要素を通知している間、コンテナにフォーカスを維持できます。これはコンボボックスの一般的なパターンです。

ライブ リージョン。 aria-live="polite" または "assertive" は緊急性を定義します。 aria-atomic="true" を指定すると、変更された部分だけではなくブロック全体が通知されます。変更が発表される「aria-relevant」フィルター。

見落とされがちな詳細: ARIA 属性は、有効な役割を持つ要素に対してのみ機能します。ロールのない <div> 上の aria-expanded はアナウンスされません。また、ARIA のブール値はテキスト文字列 ("true"、"false") であり、JavaScript のブール値ではありません。 aria-expanded="false" をブール型プロパティとして記述すると、一貫性のない結果が生成されます。

関連: Deque axe DevTools Pro — 産業のテストを継続的に受けられるようになる.

ウィジェットのアクセシビリティを損なうエラー

ARIA の HTML 構造化に関するエラーが発生しました。 すでに <nav> が利用可能であるのに <div> に role="navigation" を追加すると、リージョンが重複し、ランドマークナビゲーションを混乱させます。

2 番目のエラーはフォーカスです。開いたときにフォーカスを移動せず、開いている間はフォーカスをトラップせず、閉じるときにフォーカスをトリガーに戻さないモーダル ウィジェットでは、キーボード ユーザーが非表示のコンテンツをナビゲートすることになります。ネイティブの <dialog> 要素はこの問題の一部を解決しますが、すべてを解決するわけではありません。フォーカスを返すのは依然として開発者の責任です。

エルターサーエラーは、「アリア隠蔽」要素を含む視覚的なエラーです。 Un menuú cerrado con aria-hidden="true" pero sin display: none or visibility: hidden mantiene sus enlaces en el orden de tabulación, y el usuario enfoca elementos que no puede ver.目の視覚を組み合わせて修正し、状況に合わせてアクセスできます。

ショッピングの場合: IAAP CPACC / WAS Certification — La certificación que acredita tu experiencia en accesibilidad.

4 番目のエラーは、アクセス可能な名前が存在しないことです。単一の SVG アイコンを持つ <button> には、aria-label またはテキストを含む <span class="visually-hidden"> が必要です。装飾 SVG には aria-hidden="true" と focusable="false" が必要なので、Internet Explorer および一部の古いブラウザーではタブ オーダーにそれが含まれません。

ARIA ロールと属性をテストするためのツール

実際のスクリーン リーダーを使用したテストに代わるツールはありませんが、さまざまなツールを組み合わせることで、aria のロールと属性のほとんどの障害を検出できます。

静的検証。 W3C ARIA バリデーター (Nu HTML Checker の一部) は、存在しないロール、不適切に記述された属性、および禁止されている組み合わせを検出します。 ax DevTools と Lighthouse は、アクセス可能な名前がなく、必須属性が欠落しているロールを指摘します。

アクセシビリティ ツリーの検査。 Chrome および Firefox DevTools を使用すると、支援技術によって受け取られたとおりにアクセシビリティ ツリーを表示できます。これは、ロールが実際に適用されたかどうか、およびブラウザーが計算したアクセシビリティ対応の名前を確認する最も速い方法です。

手動テスト。 ウィジェット全体をキーボード (Tab、Shift+Tab、矢印、Enter、スペース、エスケープ) でのみ操作し、Windows では NVDA、利用可能な場合は JAWS、または macOS および iOS では VoiceOver を使用して操作します。デスクトップ リーダーとモバイル リーダーの組み合わせで、実際のケースの大部分をカバーできます。

参考ドキュメント。 W3C ARIA オーサリング プラクティス ガイド (APG) には、キーボードとコードの例を含む包括的なパターンが含まれています。これは、新しいパターンを考案する前に参照する必要がある情報源です。

実際の XHTML/CSS プロジェクトでの決定方法

軽量の CSS と JavaScript を使用した XHTML サイトでは、最も費用対効果の高い戦略は、ネイティブ HTML から始めて、ネイティブが到達しない場所にのみ ARIA を追加することです。正しい <label>、<fieldset>、および <legend> を含むフォームには、ARIA はほとんど必要ありません。 <th scope> を持つデータテーブルも同様ではありません。 ARIA の役割は、タブ、アコーディオン、フィルタリングを備えたコンボボックス、モーダル ダイアログ、動的通知など、HTML ではカバーできないパターンが出現したときに使用されます。

ARIA のロールと属性の各使用法をコード自体で文書化し、その理由を説明するコメントを付けることをお勧めします。誰かが 6 か月後にコンポーネントをリファクタリングすると、「aria-controls」がまだ必要か、それとも孤立したかがわかります。孤立した ARIA 属性 (もう存在しない「ID」を指す) は、バリデーターが確実に検出できない、サイレントな障害の原因となります。

最後に、アクセシビリティを後続の監査としてではなく、コンポーネントの「完了」の定義の一部として扱います。最初のコミットからキーボードとスクリーン リーダーを使用してテストされた ARIA ロールを持つウィジェットのコストは、監査後に修復されたウィジェットよりもはるかに低くなります。

重要なポイント

• ARIA のロールと属性は動作を追加しません。キーボードとフォーカスの管理がないロールは、何も持たないより悪いです。
• ARIA の最初のルールは、ネイティブ HTML が存在する場合は常にそれを使用することです。 <button>、<dialog>、および <details> は、思っているよりも多くのケースをカバーします。
• 属性は、ラベル付け、状態、関係、およびライブ領域にグループ化されます。各家族は異なる問題を解決します。
• role="alert" は中断し、role="status" は待機します。誤って選択すると、スクリーン リーダー ユーザーが飽和状態になります。
• ARIA ブール値は文字列 ("true"/"false") であり、属性は有効な役割を持つ要素でのみ機能します。
• キーボードと実際のスクリーン リーダーを使用したテストは必須です。バリデーターは失敗の一部のみを検出します。

出典と詳細情報

• WAI-ARIA — Wikipedia: Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) は、World Wide Web Consortium (W3C) によって発行された技術仕様です。

よくある質問

ARIA のロールと属性の違いは何ですか？

ロールは、「role=“tab”」や「role=“dialog”」など、支援技術の要素が何であるかを定義します。属性は、「aria-expanded」や「aria-labelledby」など、その状態またはその関係を記述します。役割は、コンポーネントを表す要素に適用されます。属性は通常、同じ要素、またはそれに関連する要素に適用されます。

ネイティブ HTML の代わりに ARIA を使用すべきなのはいつですか？

パターンをカバーする HTML 要素がない場合のみ。 W3C ARIA の最初のルールは明示的です。ネイティブ要素がある場合はそれを使用します。 ARIA ロールは、タブ、アコーディオン、フィルタリングおよびモーダル ダイアログを備えたコンボボックスなど、HTML だけでは実装できないパターンに必要です。

「アクセシブルな名前」とはどういう意味ですか？

アクセシブルな名前は、要素にフォーカスしたときにスクリーン リーダーが読み上げるテキストです。これは、仕様で定義された優先順位に従って、コンテンツ、aria-label、aria-labelledby、または関連する <label> から計算されます。アクセス可能な名前のない対話型ロールは、ユーザーが識別できないコントロールです。

なぜ role="button" がキーボードに反応しないのですか？

ARIAは動作を追加しないからです。<div role="button">がフォーカスを受け取るにはtabindex="0"が必要で、EnterキーとSpaceキーのkeydownハンドラーも必要です。最もシンプルで堅牢な解決策は、ネイティブの<button>要素を使うことです。これにはフォーカス、キーボードによる操作、フォーム送信がすでに含まれています。

aria-hidden="true"を使うのは悪いことですか？

装飾的なコンテンツや重複したコンテンツをアクセシビリティツリーから隠すことは正しいですが、フォーカスを受け取る要素に適用してはいけません。フォーカス可能な要素にaria-hidden="true"が残っていると、キーボードユーザーはスクリーンリーダーが読み上げないものにフォーカスする可能性があります。常に実際の視覚的な非表示と組み合わせてください。

ARIAのロールと属性を検証するツールは何ですか？

W3C Nu HTML CheckerはARIAのロールと属性の検証を含み、存在しないロールや禁止された組み合わせを検出します。axe DevToolsとLighthouseは、アクセシブルな名前のないロールや必須属性の欠落を指摘します。最終結果を確認するには、ブラウザのDevToolsにあるアクセシビリティツリーインスペクターが、支援技術が実際に受け取る内容を正確に表示します。