要約には識別可能なテキストが必要です
ルールID:
summary-name
ルールセット:
axe-core 4.10
ユーザーへの影響:
ガイドライン:
WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549
Start building more accessible experiences
Axe DevTools Pro helps dev teams find and fix up to 80% of accessibility issues while coding. No experience required. Get started with your free trial today.
Compliance Data & Impact
Disabilities Affected
- 盲目
- 盲ろう者
Standard(s)
- WCAG 2.1 (A)
- WCAG 2.0 (A)
- WCAG 2.2 (A)
- Section 508
- Trusted Tester
- EN 301 549
WCAG 達成基準 [WCAG 2.1 (A)]
- 4.1.2: Name, Role, Value
WCAG 達成基準 [WCAG 2.0 (A)]
- 4.1.2: Name, Role, Value
WCAG 達成基準 [WCAG 2.2 (A)]
- 4.1.2: Name, Role, Value
Section 508 ガイドライン
- 1194.22: Web based intranet and Internet Information & Applications
- 1194.22 (a): A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)
Trusted Tester 指南
- 6.A: The purpose of each link or button can be determined from any combination of the link/button text, accessible name, accessible description, and/or programmatically determined link/button context.
EN 301 549 指南
- 9.4.1.2: Name, Role, Value
修正方法
正しいマークアップソリューション
summary-nameのすべてのチェックに合格する方法はいくつかあります。アクセシブルなサマリー要素を作成する最も信頼性の高い方法は、サマリー要素内にテキストを配置することです。
<details>
<summary id="text">Name</summary>
...
</details>代替方法
サマリー要素に隠し代替テキストを指定することも可能です。これは、CSS背景画像を使用する場合など、サマリーに表示可能なテキストがない場合に使用できます。隠れた代替手段を提供する方法には次のようなものがあります。
-
aria-label="text alternative here"属性を使用します。 -
aria-labelledby="id-to-element-with-text"属性を使用します。 -
title="tooltip alternative here"属性を使用します。
なぜ重要なのか
スクリーン リーダーのユーザーは、アクセス可能な名前を持たない summary 要素の目的を判別できません。これにより、コントロールの目的を理解できず、 details 要素に隠された情報を見つけられない可能性が高くなります。
ルールの説明
サマリー要素は、 details 要素を展開および折りたたむためのコントロールとして使用されます。これらの summary 要素には、コントロールの使用時に表示される情報のトピックまたは目的を明確に示す識別可能なテキストが必要です。
summary-name ルールは、 button-name ルールから機能を分離します。なぜなら、 summary 要素は button 要素とは異なる固有のセマンティクスを持つからです。
仕組みについて (簡単に言うと)
summary 要素のコントロールとして使用されるすべての details 要素をチェックし、識別可能でアクセス可能な名前が付けられていることを確認します。
リソース
Deque University コースのページ (要登録)
関連するコース情報はありません。
axe 4.10 ルールの一覧 を参照する
この情報は役に立ちましたか?
すでにフィードバックをいただきました、ありがとうございます。.
あなたの回答は次のとおりです。
この情報は役に立ちましたか?
フィードバックが提出された日付/時刻:
フィードバックが提出された日付/時刻: