ARIAの役割は要素に適切である必要があります
修正方法
role=""
に指定されたすべての値が妥当な WAI-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, 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
なぜ重要なのか
親要素に指定されたWAI-ARIA role 値が有効でない場合、開発者が意図した支援技術の挙動は有効化されません。
スクリーン・リーダーや他の支援技術が web ページ上の各要素のロールを把握できなかった場合、知的なやりとりをできませんし、ロールをユーザーに伝えることもできません。ロールの値が有効ではない場合、HTML 要素の機能、プロパティ、そして方法を支援技術に伝える手段がありません。
ルールの説明
WAI-ARIA role 属性に指定された値は有効であるべきです。これは、値のスペリングが正しくなければならず、存在する ARIA role
値に一致しなければならず、そして要素の目的を正しく伝えるために抽象ロールであってはならないことを意味します。
仕組みについて (簡単に言うと)
WAI-ARIA role 属性を含むすべての要素を確認し、role 値が有効であることを保証します。ドキュメントの文脈において、role 値が要素に対して適切であることを保証しなければなりません。