svg-text-alternative-quality

<svg>のテキストによる代替は適切である必要があります(手動レビュー)

manualWCAG 1.1.1 (A)確度:medium重大度:minorperceivable

テキストによる代替が検出された対象の<svg>グラフィックを、適切さを人がレビューするために検出します。

適用範囲:すでにテキストによる代替(空でない<title>または<desc>のテキスト、空でないaria-label、または空でないテキストに解決されるaria-labelledby)を持つインラインの<svg>要素に適用されます。<desc>はアクセシブルな名前には決して寄与しませんが、ここではレビュー対象として数えます。その区別はsvg-text-alternative-presentが扱います。要素はアクセシビリティツリーに含まれている必要があり、role="presentation"/"none"を持つ要素は対象外です。ただし、フォーカス可能な場合はロールが復元されるため対象になります。

期待される結果:提供されているテキストによる代替が正確かつ適切であることを確認するには、人によるレビューが必要です。

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

  • hasNonEmptyTitle:<svg>内の最初の<title>にテキストがある場合にtrueです。
  • hasNonEmptyDesc:<svg>内の最初の<desc>にテキストがある場合にtrueです。
  • ariaLabel:aria-labelの値です。ない場合はnullです。
  • ariaLabelledBy:aria-labelledbyの値、つまりそれが指すidです。ない場合はnullです。
  • ariaLabelledByText:aria-labelledbyが指す要素のテキストで、最大120文字です。aria-labelがない場合にだけ参照し、それ以外の場合や何も解決されない場合はnullです。
  • reasonCode:<svg>がリンクやボタンの唯一の内容である(テキストもほかの画像もない)ため、そのテキストによる代替がコントロールの名前になる場合はIMAGE_ONLY_CONTROL_CONTENTで、controlContentがコントロールのロール(linkまたはbutton)を示します。それ以外はTEXT_ALTERNATIVE_REVIEWです。

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

例

can't tell
<svg role="img" viewBox="0 0 24 24"><title>Growth chart</title><path d="M0 0h24v24H0z"/></svg>

<title>があります。「Growth chart」が、単にグラフであることだけでなく、グラフが実際に何を示しているかを説明しているかを確認する価値があります。

n/a
<svg role="img" viewBox="0 0 24 24"><path d="M0 0h24v24H0z"/></svg>

レビュー対象となる<title>/<desc>のテキスト、aria-label、解決済みのaria-labelledbyがありません。その場合はsvg-text-alternative-presentのfailになります。

確認方法

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

IMAGE_ONLY_CONTROL_CONTENT

  1. レポートに示されたリンクまたはボタンを見つけてください。その唯一のコンテンツはこのsvgです。
  2. コントロールを操作し、その働きまたはリンク先を控えてください。
  3. 開発者ツールのアクセシビリティペインでコントロールの名前(svgのテキストによる代替から得られます)を読むか、スクリーンリーダーでTabキーを使ってそこに移動してください。
  4. 比べてください。名前はアイコンの見た目(「虫眼鏡」)だけでなく、コントロールの働き(「検索」「メニューを閉じる」)を伝えていますか。

満たす場合:コントロールの名前がその働きまたはリンク先を伝えています。

満たさない場合:名前が絵を説明しているか、あいまいか、操作に対して誤っているため、WCAG 1.1.1を満たしません(またコントロールの目的が不明確になります)。

TEXT_ALTERNATIVE_REVIEW

  1. レポートに示されたグラフィックを確認し、何を表示しているか(アイコン、ロゴ、グラフとそのデータ)を控えてください。
  2. そのテキストによる代替(title、desc、aria-label、またはaria-labelledbyのテキスト)をレポートで読むか、開発者ツールのアクセシビリティペインで読んでください。
  3. テキストによる代替が、グラフや図によくあるようにグラフィックの名前を示すだけの場合、詳細は別の場所(隣のキャプション、テキスト、表、またはすぐ横のリンク)にあるかもしれません。スクリーンリーダーの利用者がグラフィックからそれを見つけられ、グラフィックが示すすべてを伝えている場合にだけ、それを認めます。
  4. 比べてください。テキストはグラフィックが表示している内容や意味を伝えていますか。グラフィックが装飾的であれば、代わりに隠す(aria-hidden="true")必要があります。

満たす場合:テキストによる代替がグラフィックの示す内容を伝えているか、名前を示し、スクリーンリーダーの利用者がたどれる説明が残りを伝えているか、装飾的なグラフィックが支援技術から隠されています。

満たさない場合:テキストによる代替が誤っている、曖昧(「画像」「アイコン」など)、またはグラフィックが伝える内容を欠いており、たどれる説明もそれを伝えていないため、WCAG 1.1.1を満たしません。

関連するルール

ソースコードを見る