button-name-present

ボタンにはアクセシブルな名前があります

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

ボタンが空でないアクセシブルな名前を公開していることを確認します。

適用範囲:<button>、<input type="button">、<input type="submit">、<input type="reset">、およびrole属性がbuttonに解決される要素(既知で抽象的でない最初のトークンを、大文字と小文字を区別せずに用います。そのためrole="foo button"は該当し、role="link button"は該当しません)のうち、アクセシビリティツリーに含まれるものに適用されます。role="presentation"/"none"を指定した要素は対象外になります。ただし、プレゼンテーショナルロールの競合解決に従い、グローバルなARIA属性やフォーカス可能であることによってロールが復元される場合は除きます。ElementInternalsによってbuttonロールを与えられたカスタム要素(this.attachInternals().role)も、別のロールを示すrole属性がなければ、そのロールを持つネイティブ要素と同じように扱われます。

期待される結果:要素が空でないアクセシブルな名前を持っています。まずプログラムによる名前(aria-labelledby、aria-label、関連付けられた<label>、title)を使います。それがない場合、<input>のボタンはvalue属性を使い、type="submit"/type="reset"はユーザーエージェント自身の既定値である「Submit」/「Reset」を使います。そのため、この2つが名前を欠くことはありません。どちらもない場合、内容から名前を得るロールのボタンはサブツリーのテキストを使い、テキストノードだけでなく各子孫自身の名前(<img alt>、aria-label、<svg>の子要素の<title>、またはtitle)も数えます。

検出結果が報告する内容:

  • refs.accessibleName:プログラムによる名前(aria-labelledby、aria-label、<label>、title)を探した結果です。mechanismは探索が止まったソースで、ない場合はnoneです。flagsは、存在する名前付け属性から名前が得られなかった理由を示します(例:aria-label-empty、aria-labelledby-empty-or-unresolvable)。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

pass
<button>Save</button>

ボタンのテキストコンテンツがアクセシブルな名前になっています。

fail
<button></button>

ボタンにはテキストコンテンツもaria-labelもaria-labelledbyもありません。

確認方法

このルールが判断できない場合は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を満たしません。

ソースコードを見る