インタラクティブ要素に付与された presentation ロール

Silktide は、ボタン、リンク、フォームフィールドなどのインタラクティブ要素に、純粋に装飾目的であることを示すマークが付いていないかチェックします。このようにインタラクティブ要素をマークすると、画面上ではクリックできるままなのに、支援技術にとっての意味が失われます。

<!-- 問題: ボタンは機能するものの、何もないものとして読み上げられる -->
<button role="presentation">Delete</button>

<!-- 修正: ロールを削除する -->
<button>Delete</button>

重要な理由

の presentation ロールと none ロールは、要素に意味がないことをに伝えます。これらは、レイアウト用のテーブルなどからセマンティクスを取り除くために存在します。インタラクティブ要素に適用すると、最も深刻な障壁が生じます。それは、視覚的にマウスを使えるユーザーが毎日クリックしているコントロールを、が操作できないコンテンツとして提示したり、完全にスキップしたりすることです。ユーザーは、そこにボタンが存在することさえ知る方法がありません。

修正方法

インタラクティブ要素から role="presentation" または role="none" を削除します。ネイティブ要素は、ロールを指定しなくても正しい意味をすでに公開しています。
その要素が本当にインタラクティブであるべきでない場合は、そうなるようにします。<div> などのインタラクティブでない要素に置き換え、tabindex も削除します。
ラッパーの意味を抑制しようとしていた場合（たとえば、コントロールを囲むレイアウト用テーブルなど）は、ロールを内部のコントロールではなくラッパーに付与します。

Silktide のチェック方法

ページ上で role="presentation" または role="none" が付与されたすべての要素を探します。
その要素がインタラクティブかどうかを判定します。対象は、ボタン、リンクまたは href を持つイメージマップ領域、フォームフィールド、あるいは tabindex が 0 以上でキーボードのタブ移動順序に含まれる要素です。
プレゼンテーション用ロールが付与された各インタラクティブ要素を報告します。

負の tabindex によってタブ移動順序から外された要素は報告されません。また、画像や SVG グラフィックなどの装飾要素も報告されません。

トラブルシューティング

フレームワークまたはライブラリによってロールが追加された

一部の UI ライブラリは、内部ラッパーに role="presentation" を適用し、場合によっては誤った要素に適用することがあります。報告された要素を調べてください。マウスでは実際に操作できるのに、支援技術では無音になっている場合、修正はライブラリの使用方法または上流のコードに行う必要があります。

検出結果があるはずなのに、このチェックで何も報告されない

ARIA のテストはウェブサイトごとに無効にできます。ウェブサイトの詳細設定を確認してください。