矛盾する ARIA ロール

Silktide は、明示的なロールを宣言している要素について、HTML ですでに持っている意味と照合してチェックします。その要素で許可されていないロールと、要素がすでに持っている意味を単に繰り返しているロールを報告します。

<!-- 問題: nav 要素を button にすることはできません -->
<nav role="button">…</nav>

<!-- 問題: 冗長です。nav にはすでにこのロールがあります -->
<nav role="navigation">…</nav>

<!-- 修正: 要素本来の意味に任せます -->
<nav>…</nav>

重要な理由

すべての要素には、が利用する組み込みの意味があります。その意味と矛盾するロールを指定すると、見た目はあるものなのに別のものとして通知される要素が生じます。たとえば、実際にはボタンのように動作し、キーボードショートカットや操作上の期待もボタンに基づいているものが、のユーザーには「リンク」と聞こえる可能性があります。冗長なロールは害が少ないものの、ノイズを増やし、将来のミスを招き、必要のない場所で ARIA が使われていることを示します。

修正方法

矛盾するロールの場合は、ロールを削除するか、必要な意味を本当に持つ要素に切り替えます。ボタンとして動作させるべき場合は、<button> を使用します。
<nav role="navigation"> や <button role="button"> のような冗長なロールの場合は、ロール属性を削除します。要素自体がそのロールをすでに公開しています。

Silktide によるチェック方法

ページ上の role 属性を持つすべての要素を検出します。ただし、不明なロールまたは抽象ロールは除外します（これらは無効な ARIA ロールによって報告されます）。
ARIA in HTML 仕様でその要素に許可されている組み合わせとロールを比較し、要素に許可されていないロールを報告します。
要素自身の暗黙的なロールと重複するロールを報告します。
role 属性に複数のロールが列挙されている場合は、最初のロールだけを考慮します。

検出結果ではこの 2 つのケースを区別するため、冗長性よりも矛盾を優先して対応できます。

トラブルシューティング

古いブラウザー向けに冗長なロールを指定しています

role="navigation" のような明示的なランドマークロールは、かつて古い支援技術向けの安全策として推奨されていました。ネイティブ要素への対応は何年も前から普遍的になっており、現在では重複したロールを維持するコストのほうが得られる効果を上回ります。削除するか、サポートポリシー上そのロールを維持する必要がある場合は、検出結果をしてください。

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

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