使用されるARIAロールは、有効な値に準拠している必要があります
ルールID:
aria-roles
ルールセット:
axe-core 4.10
ユーザーへの影響:
緊急
ガイドライン:
WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), EN 301 549
修正方法
role=""
に指定されたすべての値が妥当な ARIA ロールに一致することを確認してください。
提供されているタイプ別ロールは以下の通りです:
- ランドマーク: article, banner, complementary, main, navigation, region, search, contentinfo
- ウィジェット: alert, alertdialog, application, dialog, group, log, marquee, menu, menubar, menuitem, menuitemcheckbox, menuitemradio, progressbar, separator, slider, spinbutton, status, tab, tablist, tabpanel, timer, toolbar, tooltip, tree, treegrid, treeitem
- 疑似 HTML: button, button, checkbox, columnheader, combobox, contentinfo, form, grid, gridcell, heading, img, link, listbox, listitem, option, radio, radiogroup, row, rowgroup, rowheader, scrollbar, textbox
- 文書: document (document リージョンを他のタイプのリージョンの中で作成する場合)
- アプリケーション: application (ページ内のコンテンツに通常のキーボードショートカットを有効にするため、ウィジェットにのみ)
- プレゼンテーション: presentation (要素の従来のロールをキャンセルするため)
- その他セマンティック: math, definition, note, directory
- 抽象: command, composite, input, landmark, range, section, sectionhead, select, structure, widget
なぜ重要なのか
有効ではない ARIA ロール値を指定された要素は、開発者が意図したようには支援技術に解釈されません。
スクリーン・リーダーや他の支援技術が web ページ上の各要素のロールを把握できなかった場合、合理的にやりとりできませんし、そのロールをユーザーに伝えることもできません。ロール値が有効ではない場合、要素の機能、プロパティ、そしてユーザーに、および/またはユーザーから情報を伝える方法は支援技術を通して伝えることができません。
ルールの説明
ARIA ロール値に指定された値は有効でなければなりません。要素の目的を正しく公開するために、ロール値のスペリングは正しくなければならず、存在する ARIA role
値に一致し、そして抽象ロールであってはなりません。
仕組みについて (簡単に言うと)
WAI-ARIA ロール属性を含むすべての要素を確認し、ロールの値が妥当であることを確認します。