menuitem-name-present

メニュー項目にアクセシブルな名前があります

automaticWCAG 4.1.2 (A)確度:high重大度:seriousrobust

メニュー項目(checkbox/radioの派生を含むrole="menuitem*")が空でないアクセシブルな名前を公開していることを確認します。

適用範囲:アクセシビリティツリーに含まれ、role属性がmenuitem、menuitemcheckbox、menuitemradioのいずれかに解決される要素に適用されます(既知のロールを指す最初のトークンを大文字と小文字を区別せずに照合するため、role="foo menuitem"やrole="MENUITEM"も該当します)。ElementInternalsによってこれらのロールのいずれかを与えられたカスタム要素(this.attachInternals().role)も、別のロールを示すrole属性がなければ対象です。それがその要素の既定のロールであり、ほかにそれを確認するルールはないためです。

期待される結果:要素が、aria-label、空でないテキストに解決されるaria-labelledby、title、または自身のサブツリーのテキストから、空でないアクセシブルな名前を得ています。3つのロールはいずれも名前をコンテンツから算出するため、サブツリーのテキストも有効です。その際、子孫要素自身の名前(<img alt>、aria-label、title)は、テキストノードだけでなく、その子孫要素が寄与する名前として数えます。

例

pass
<div role="menuitem" tabindex="0">Cut</div>

表示されているテキスト内容は、role="menuitem"の名前の有効な提供元です。

fail
<div role="menuitem" tabindex="0"></div>

名前も内容もありません。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

name_closedContent

  1. レポートに示されたメニュー項目を見つけ、画面に表示されているテキストまたはアイコンを控えてください。
  2. ブラウザーの開発者ツールでアクセシビリティペインを開き、スクリプトからは読めない内容からブラウザーが求めた、要素のアクセシブルな名前を読んでください。
  3. スクリーンリーダーで要素に移動し、読み上げられる名前を聞いてください。

満たす場合:アクセシビリティツリーに、内容から得たメニュー項目の名前が表示され、スクリーンリーダーがそれを読み上げます。

満たさない場合:内容から名前が得られず、メニュー項目にはアクセシビリティツリー上の名前がないため、WCAG 4.1.2を満たしません。

name_contentTooDeep

  1. レポートに示されたメニュー項目を見つけ、画面に表示されているテキストを控えてください。
  2. ブラウザーの開発者ツールでアクセシビリティペインを開き、入れ子になった内容全体からブラウザーが求めた、要素のアクセシブルな名前を読んでください。
  3. スクリーンリーダーで要素に移動し、読み上げられる名前を聞いてください。

満たす場合:アクセシビリティツリーに、入れ子の内容から得たメニュー項目の名前が表示され、スクリーンリーダーがそれを読み上げます。

満たさない場合:内容から名前が得られず、メニュー項目にはアクセシビリティツリー上の名前がないため、WCAG 4.1.2を満たしません。

name_internals

  1. レポートに示されたメニュー項目を調べ、カスタム要素であることとそのロールを控えてください。
  2. ブラウザーの開発者ツールでアクセシビリティペインを開き、要素のアクセシブルな名前を読んでください。
  3. スクリーンリーダーで要素に移動し、読み上げられる名前を聞いてください。

満たす場合:アクセシビリティツリーにメニュー項目の名前が表示され(internalsで設定されたものでも、それ以外でもかまいません)、スクリーンリーダーがそれを読み上げます。

満たさない場合:メニュー項目にはアクセシビリティツリー上の名前がなく、スクリーンリーダーはロールしか読み上げないため、WCAG 4.1.2を満たしません。

ソースコードを見る