SVG画像とグラフィックにはアクセス可能なテキストが必要です
Build more accessible websites with axe DevTools Pro
コンプライアンスデータと影響
影響を受ける障害
- 視覚障害
- 視聴覚障害
- 運動障害
規格
- WCAG 2.1 (A)
- WCAG 2.0 (A)
- WCAG 2.2 (A)
- Section 508
- Trusted Tester
- EN 301 549
WCAG 達成基準 [WCAG 2.1 (A)]
- 1.1.1: 必須: Non-text Content
WCAG 達成基準 [WCAG 2.0 (A)]
- 1.1.1: 必須: Non-text Content
WCAG 達成基準 [WCAG 2.2 (A)]
- 1.1.1: 必須: Non-text Content
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 Guidelines
- 7.A: 必須: The accessible name and accessible description for a meaningful image provides an equivalent description of the image.
修正方法
Ensure that all SVG elements that are added as markup into the HTML, one or a combination of the below methods are used to provide an accessible name for the SVG.
Using the <title> attribute
Example:
<svg role="img" title="A brown circle">
<circle
cx="30"
cy="30"
r="10"
fill="brown"
></circle>
</svg>
Using the SVG <title> element
The <title> element provides an accessible, short-text description of any SVG container element or graphics element.
Example:
<svg role="img">
<title>A descriptive title for the SVG element</title>
<path d="...." />
</svg>
Using the `aria-label` attribute
Example:
<svg xmlns="https://www.w3.org/2000/svg">
<circle role="img" cx="50" cy="50" r="40" stroke="black" fill="red" aria-label="A red circle with black border">
</circle>
</svg>
Using the `aria-labelledby` attribute
Example:
<div id="first">First</div>
<div id="name">Name</div>
<svg role="img" aria-labelledby="first name">
<path d="...." />
</svg>
なぜ重要なのか
The intent of Success Criterion 1.1.1 is to make information conveyed by non-text content (including SVG images) accessible through the use of a text alternative. Text alternatives are a primary way for making information accessible because they can be rendered through any sensory modality (for example, visual, auditory or tactile) to match the needs of the user. Providing text alternatives allows the information to be rendered in a variety of ways by a variety of user agents. For example, a person who cannot see a picture can have the text alternative read aloud using synthesized speech. A person who cannot hear an audio file can have the text alternative displayed so that he or she can read it. In the future, text alternatives will also allow information to be more easily translated into sign language or into a simpler form of the same language.
ルールの説明
Ensures SVG elements with an <img>, graphics-document or
graphics-symbol role have an accessible text alternative.
仕組みについて (簡単に言うと)
The algorithm for this rule returns:
-
True if the element has a
<title>code child<svg id="target"><title>Time II: Party</title></svg> -
True if the
<title>child has text nested in another element.<svg id="target"><title><g>Time II: Party</g></title></svg> -
False if the element has no
<title>child.<svg id="target"></svg> -
False if the
<title>child is empty.<svg id="target"><title></title></svg> -
False if the
<title>is a grandchild.<svg id="target"><circle><title>Time II: Party</title></circle></svg> -
False if the
<title>child has only whitespace.<svg id="target"><title> \t\r\n </title></svg> -
False if there are multiple titles and the first is empty.
<svg id="target"><title></title><title>Time II: Party</title></svg>
リソース
Deque University コースのページ (要登録)
関連するコース情報はありません。
axe 4.8 ルールの一覧 を参照する
この情報は役に立ちましたか？
回答内容は以下の通りです:
フィードバックが送信された日時: