ARIA ロールのリスト: 比較した最良のリファレンス

W3CのWAI-ARIA 1.2仕様で定義されているARIAロールの完全なリストは82個あり、文書、ランドマーク、ウィジェット、構造、ウィンドウ、抽象状態の6つの機能カテゴリに分類されています。クイックリファレンス表が必要か、コード例付きのドキュメントが必要か、あるいは各ロールを適用するタイミングに関する決定ガイドが必要かによって、適切な参照先を選択してください。

重要なポイント

• WAI-ARIA 1.2では82のロールが定義されていますが、アクセシブルなXHTML/CSSサイトの実務で日常的に使用されるのはその一部のみです。
• ARIAの第一原則は今も変わりません。必要なセマンティクスを持つネイティブHTML要素が存在する場合は、ロールを追加するのではなく、その要素を使用してください。
• 抽象ロール（role="widget"やrole="input"など）をマークアップに記述してはいけません。これらは分類上のベースとしてのみ機能します。
• フロントエンドにとって有用なリファレンスには、ロール、必須のARIA属性、許可される状態、および実際のマークアップ例が含まれている必要があります。
• ランドマークロールとウィジェットロールは、axe-coreやLighthouseなどの自動監査ツールで検出されるエラーの大部分を占めています。

ARIAロールとは何か、なぜ信頼できるリストが必要なのか

ARIA の役割は、コンポーネントの代表者としてのコミュニケーションにおける中央の要素の「役割」を決定します。ブラウザはそのロールをアクセシビリティツリーを通じて公開し、NVDA、JAWS、VoiceOverなどのスクリーンリーダーがそれを「ボタン」「タブ」「リージョン」「ダイアログ」といった具体的なアナウンスに変換します。

WAI-ARIA の特定、W3C のグループ管理 ARIA に関する管理は、最新の属性と管理許可を定義します。実際の推奨バージョンは 1.2 です。ARIA 1.3 は最新版です。 XHTML と CSS を参照して、カタログの装飾に使用されている役割の一覧を表示します。 紛争の主要な要素と宣言の範囲内で、さまざまな用途に使用され、安全な紛争の形式を確認します。

ARIA と MDN (Mozilla Developer Network) の役割に関する公式ドキュメントは、スペイン語と英語で参照され、詳細に参照されます。参照、パトロネス、および検証の必要性を明確に示す情報が存在します。これらを比較することで、自分のワークフローに最適なものを選択できます。

ARIA の役割の分類

公式のタクソノミーでは、ロールがその機能に基づいてグループ化されています。カテゴリを把握しておくことで、間違ったリストを探す手間を省けます。

ドキュメントの役割。 セクションの構造の説明: article、document、feed、Heading、img、list、listitem、math、none、note、presentation、row、separator、table、term、 「ツールバー」、「ツールチップ」。 多くはネイティブHTML要素と重複しているため、手動で記述されることは滅多にありません。

関連: UserWay — 簡単な操作で計画を立てるためのウィジェットを無料で利用できます.

ランドマークの役割。 ページのナビゲーション可能な領域を定義します: banner、complementary、contentinfo、form、main、navigation、region、search。これは、HTML セマンティクスが不完全なサイトで最もよく使用されるものです。

ウィジェットの役割。 インタラクティブ コントロールを表します: button、checkbox、gridcell、link、menuitem、menuitemcheckbox、menuitemradio、option、progressbar、radio、scrollbar、searchbox、slider、spinbutton、switch、 タブ、タブパネル、テキストボックス、ツリーアイテム。フォーカスとキーボードの管理が必要です。

構造の役割。 組織ウィジェットには次が含まれます: application、grid、group、listbox、menu、menubar、radiogroup、tablist、tree、treegrid、rowgroup、columnheader、rowheader。

一見の価値があります: AudioEye — Accesibilidad gestionada: 人間性の見直しと自動化の組み合わせ.

ウィンドウの役割。 重ね合わせまたはモーダルのコンテンツ管理: alertdialog、dialog。

抽象ロール。 マークアップには要素は書き込まれません: command、composite、input、landmark、range、roletype、section、sectionhead、select、struct、widget、window。ロール間でプロパティを継承する仕様が求められました。

比較: ARIA の役割参照

以下の表では、スペイン語圏の開発者がよく使用するリファレンスを実用的な基準で比較しています。

参照	ティポ	イディオーマ	コードの例	理想的なパラ
MDN Web ドキュメント (ロール ARIA)	公式ドキュメント	多言語 (スペイン語を含む)	シ、ポルロール	詳細について問い合わせる
WAI-ARIA 1.2 (W3C)	特定の基準	イングレス	いいえ	正確な検証
WAI-ARIA オーサリング実践ガイド	ギア・デ・パトロネス	イングレス	Sí、パトロネス・コンプリート	技術的なウィジェットの実装
参照情報チートシート	タブラ再開	イングレス	ミニモス	エディターでの迅速な対応
accessibility.build (ARIA 参照)	参考資料	イングレス	シ	コメントを投稿する
アウディトレス (斧芯、灯台)	エラミエンタ	多言語	いいえ	検出器の役割は無効です

瞬間に応じて選択します。マルカドのデュランテは、安全な情報をコンパクトにまとめ、ベロシダードを実現します。ウィジェットの情報はなく、W3C の特定の情報や、WAI のパトロネスの情報が表示されます。

適用される決定事項: 実践基準

ARIA を修正して決定してください。以下の基準を順番に適用することで、ほとんどのエラーを回避できます。

1. 1. ネイティブHTML要素が存在するか？ <button> はすでに button の暗黙的な役割を持っています。 「role=“button”」 の追加は冗長であり、競合が発生する可能性があります。
2. 2. ロールに必須属性が必要か？ role="checkbox" には aria-checked が必要です。 「role=“slider”」には「aria-valuenow」、「aria-valuemin」、「aria-valuemax」が必要です。これらの状態を維持できない場合、その役割は役立つどころか害を及ぼすことになります。
3. 3. ロールにキーボード操作の管理が伴うか？ ウィジェット ロールでは、パターンに応じて矢印、Home、End、Esc によるナビゲーションが必要です。矢印処理のない role="tablist" は、矢印処理がないことよりも悪いです。
4. 4. そのロールは抽象ロールか？ 抽象ロールのリストにある場合は、記述しないでください。
5. 5. そのロールは廃止または不使用になっていないか？ 一部の値は ARIA 1.0 と 1.2 の間で変更されました。常に現在のバージョンを参照してください。

W3C テクニック ガイドで認められている ARIA を使用するための最初のルールは、可能な限りネイティブ HTML を使用するという原則です。 ARIA は HTML が不十分な場合のパッチであり、代替品ではありません。

関連: IAAP CPACC / WAS Certification — La certificación que acredita tu experiencia en accesibilidad.

相談者や役割のリストにエラーが頻繁に発生します

誤った習慣的なコピーは、必要な属性と比較して参照されないようにしてください。 role="combobox" は ARIA 1.2 と 1.0 の互換性を持ち、aria-expanded と listbox 中間の aria-controls との関係を維持します。アンティグアロンペのバージョンと実際のレクチャーの情報を提供します。

また、場合によってはその子も含め、アクセシビリティ ツリーから要素が削除されることを理解せずに、セマンティクスを「クリーンアップ」するために role="presentation" または role="none" を使用することもよくあります。これは「role=“application”」の頻度でも表示され、すべてのキーボード制御がウィジェットに転送され、スクリーン リーダーのショートカットが無効になります。これはフォーム用ではなく、複雑な Web アプリケーション用に予約されています。

ランドマークの重複の役割が一般的に混乱しています: role="main" の誤ったページ、または role="banner" の dentro de un <article>、一貫性のない地域のナビゲーションが生成されます。斧コアの有効性を確認し、さまざまな情報を検出し、実際のパンタラ コントロールを自動的に検出します。

ショッピングの場合: accessiBe — 48 時間で IA が WCAG に最高の瞬間をもたらす.

マルカドでの有効な役割を評価する

手動検査と自動化の役割を組み合わせます。 Chrome と Firefox の DevTools には、さまざまなシステムの操作、計算の実行など、さまざまな機能を備えたパネルが含まれています。安全性を宣言するための直接的な方法や、安全性を保証するための機能。

斧のコア、ライトハウスと可処分性の共同延長、マルカの役割は無効であり、属性の義務と組み合わせの矛盾があります。 Web 向けの Accessibility Insights を拡張し、規制を強化し、互換性を確保します。正確な検証結果を確認するために、Windows および macOS で NVDA を使用すると、状況に応じて妥当な結果を確認できます。

MDN のドキュメントと、WAI-ARIA の W3C のパトロネスを参照し、安全な期間で安全に使用できるようにします。 La primera explica cada roll;コンポーネントを組み合わせた完全な組み合わせ。

出典と詳細情報

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

よくある質問

¿Cuántos の役割 ARIA は存在しますか?

W3C WAI-ARIA 1.2 仕様では、ドキュメント、ランドマーク、ウィジェット、構造、ウィンドウ、および抽象ロールに分かれた、合計 82 のロールが定義されています。このコンテキストでは、通常の開発では一部のみが使用されます。抽象ロールは決して記述されず、多くのドキュメント ロールはネイティブ HTML 要素を複製します。

¿ARIA と ARIA の違いは何ですか?

ARIA をアンロールすると、要素、属性、属性に関する ARIA の詳細が説明されます。たとえば、role="checkbox" はコンポーネントを識別し、aria-checked="true" はチェックされているかどうかを伝えます。役割を失うと、「役割」という属性が割り当てられます。 los estados y propiedades usan el prefijo aria-。

¿ARIA を使用して HTML セマンティコを使用しますか?

ほとんどの場合、いいえ。セマンティック HTML はすでに暗黙のロールを公開しています。<nav> は role="navigation" と同等であり、<main> は role="main" と同等です。ロールを明示的に追加すると冗長となり、競合が発生する可能性があります。 ARIA は、タブ、ツリー、複雑なメニューなど、HTML がカバーしていないコンポーネント用に予約されています。

¿ARIA の役割はどのようなものですか?

抽象ロールは決して出現してはなりません: command、composite、input、landmark、range、roletype、section、sectionhead、select、struct、widget、window。これらは、ロール間のプロパティの継承を定義する仕様のためにのみ存在します。これらを書き込むと、バリデーターがフラグを立てる無効なロールが生成されます。

¿ARIA 機能の修正を確認できますか?

この検証では、ブラウザの DevTools でアクセシビリティ ツリーを検査して計算された役割を確認する、欠落している必須属性を検出するために axe-core などのバリデータを渡す、NVDA や VoiceOver などの実際のスクリーン リーダーを使用してテストするという 3 つのステップが組み合わされます。最後のステップでのみ、アナウンスが人に理解できるかどうかが確認されます。

¿特定のバージョンの ARIA カンビアンの役割はありませんか?

シ。 ARIA 1.1 は、「フィード」と「スイッチ」、および ARIA 1.2 の「コンボボックス」の変更と統合の役割を備えています。 ARIA 1.3 の開発。特定のバージョンの情報を参照して、最新の形式を解釈する必要があります。