コンテンツの不一致によるラベルと名前
Accessibility testing for dev teams - No experience required
Compliance Data & Impact
Disabilities Affected
- 視覚障害
- ロービジョン
- 視聴覚障害
- 運動障害
Standard(s)
- WCAG 2.1 Experimental
- EN 301 549
WCAG 達成基準 [WCAG 2.1 Experimental]
- 2.5.3: 必須: Label in Name
修正方法
aria-label などのアクセシブルな名前に可視ラベルのテキストが出現する順序と同じ順序で含まれていることを保証することで問題を修正します。可視ラベルとアクセシブルな名前が完全に一致することは必須ではないものの、アクセシブルな名前が可視テキストから始まることがベストプラクティスです。
次の例はラベルとコンテンツからの名前が一致しないルールに合格します:
文末の空白が削除されると、可視ラベルとアクセシブルな名前が一致する:
<div role="link" aria-label="next page ">next page</div>可視ラベルとアクセシブルな名前の大文字・小文字の区別をしない。
<div role="link" aria-label="Next Page">next page</div>可視ラベル全体がアクセシブルな名前に含まれている。
<button name="link" aria-label="Next Page in the list">Next Page</button>
次の例はラベルとコンテンツからの名前が一致しないルールに失敗します:
可視ラベルがアクセシブルな名前に一致しない。
<div role="link" aria-label="OK">Next</div>可視ラベルのすべてがアクセシブルな名前に含まれていない。
<button name="link" aria-label="the full">The full label</button>
なぜ重要なのか
このルールは次のあらゆる要素に適用されます:
コンテンツからの名前に対応するウィジェットのセマンティックロール、そして
可視のテキストコンテンツ、そして
aria-labelまたはaria-labelledby属性。
注記: コンテンツからの名前に対応するウィジェットロールは: button, checkbox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, searchbox, switch, tab, treeitem.
期待されること
対象の要素の完全な可視のテキストコンテンツは、アクセシブルな名前と一致するか、含まれているかのどちらかです。
注記: 文頭および文末の空白と大文字・小文字の区別は無視されるべきです。
音声入力ユーザーは画面上のメニュー、リンク、そしてボタンの可視のテキストラベルを発話することで web ページとやりとりできます。コンポーネントのアクセシブルな (プログラムによる) 名前が可視ラベルと一致しないことで、音声入力ユーザーが見ている可視のテキストラベルを発しても音声コマンドが動作しなければ、混乱をまねきます。実際のテキストか、文字画像かに関わらず、ユーザーインターフェースコンポーネントが可視のテキストラベルを持っている場合、そのテキストはコンポーネントのアクセシブルな (プログラムによる) 名前にも存在しなければなりません。インタラクティブなコンポーネントの可視ラベルとアクセシブルな (プログラムによる) 名前が同期している場合、音声入力ユーザーはそれらのコンポーネントと効果的にやりとりできます。
ルールの説明
コンテンツによりラベル付けされたインタラクティブな要素は可視のラベルをアクセシブルな名前の一部として持たなければなりません。
仕組みについて (簡単に言うと)
可視のテキストラベルを含む各ユーザーインターフェースコンポーネントのアクセシブルな名前は、ラベル内の可視のテキストと一致しなければなりません (または含まなければなりません)。
リソース
axe 4.10 ルールの一覧 を参照する
この情報は役に立ちましたか?
あなたの回答は次のとおりです。
フィードバックが提出された日付/時刻: