svg-text-alternative-present

<svg>にはテキストによる代替がある必要があります

automaticWCAG 1.1.1 (A)確度:high重大度:seriousperceivable

インラインの<svg>要素が、<title>要素またはARIAによる名前によって、テキストによる代替を提供していることを確認します(<desc>要素だけでは有効になりません)。

適用範囲:支援技術に公開され、かつ情報を伝えることを意図していると見られるインラインの<svg>要素に適用されます。「情報を伝えることを意図している」かどうかは、次の少なくとも1つに当てはまるかどうかで決定論的に近似します。

  • SVGのルート要素自体にrole="img"、role="graphics-symbol"、またはrole="graphics-document"がある(imgと並ぶWAI-ARIA Graphics Moduleのロール)。<svg>内に入れ子になった任意のrole="img"/"graphics-symbol"/"graphics-document"の子孫要素には適用されません。このチェックの範囲は<svg>ルートだけです。他のすべての要素(入れ子になったSVGの図形を含む)にある同じ3つのロールは、role-img-text-alternative-presentが扱います(ACT 7d6734自身のfailの例:入れ子になった<circle role="graphics-symbol">を持つ、何も付いていない<svg>ルート)。
  • 空白だけでないaria-label / aria-labelledbyがある(aria-label=""は何も名前を付けず、意図の手がかりにもなりません)
  • 直接の子要素として<title>または<desc>がある(子要素の中での位置は問いません。SVG-AAM)。それぞれ最初のものが数に入ります(descは適用範囲の手がかりにすぎません。@expectationを参照)
  • フォーカス可能/タブで移動可能である(例:tabindex、ネイティブのフォーカス可能性)

role="presentation"またはrole="none"を持つ画像は、フォーカス可能でない場合に限り除外します。それ以外の理由でアクセシビリティツリーから隠されている要素も、タブで移動可能かつフォーカス可能であるか、IDREFの関係で参照されている場合は、引き続き対象になります(エンジンの対象判定による)。

期待される結果:対象となる各<svg>要素が、次のいずれかによってテキストによる代替を提供しています。

  • 子要素の中での位置にかかわらず、最初の直接の子要素<title>にある空でないテキスト(最初の<title>が空の場合は何も名前を付けません)、または
  • ARIAによる名前(aria-label / aria-labelledby)。

<desc>要素だけではこれを満たしません。SVG Accessibility API Mappings仕様の§7.1によれば、<desc>が寄与するのはアクセシブルな説明(DESCRIPTION)だけであり、アクセシブルな名前(NAME)には決して寄与しないためです。<desc>だけを持ち、<title>/ARIAによる名前がない<svg>も「適用対象」ではあります(descは作成者の意図を示すため)が、failになります。

例

pass
<svg role="img"><title>Close</title></svg>

明示的なimgロールを持つSVGで、<title>がアクセシブルな名前を提供しています。

fail
<svg role="img"></svg>

<title>もARIAによる名前もありません。<desc>だけでは足りません。画像を説明するもので、名前を付けるものではないためです。

関連するルール

ソースコードを見る