img-alt-decorative

除外された<img>/<canvas>/<svg>は装飾である必要があります(手動レビュー)

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

アクセシビリティツリーから除外された<img>、<canvas>、<svg>要素(aria-hidden、role="none"/"presentation"、空のalt、またはラベルのないsvg/canvas)を、純粋な装飾かどうかの人によるレビュー対象として報告します。

適用範囲:次のいずれかによってアクセシビリティツリーから除外された、表示されている<img>、<canvas>、<svg>要素に適用されます。要素自身または祖先のaria-hidden、フォーカス可能性によって打ち消されていない明示的なrole="none"/"presentation"、<img alt="">(ネイティブの装飾マーカーで、フォーカス可能性による打ち消しも同様です。文字どおり空のaltだけが該当し、alt=" "は該当しません)、暗黙のロールがgraphics-documentであるラベルのない<svg>(img/graphics-symbolのロールの再指定、ARIAによる名前、テキストを持つ直接の子要素の<title>/<desc>(子要素の中での位置は問わない)、フォーカス可能性のいずれもないもの)、または明示的なロールをまったく持たないラベルのない<canvas>です。名前が内容を表す祖先が作成者による名前(aria-label、aria-labelledby、title、または関連付けられた<label>)を持つ場合、その要素はスキップします。その名前が、画像が伝えたはずのことに置き換わるためです(よくある例:aria-labelで名前が付いたアイコンだけのボタン)。そうした祖先とは、内容から名前が付けられるロール(link、button、heading、cell、option、tab、treeitem、menuitemなど)や、子がプレゼンテーショナルになるロール(img、slider、progressbarなど)を持つものです。ACT e88epeは作成者による名前を持つどの祖先の下でも要素をスキップしますが、このルールは、名前の付いたランドマーク、figure、group、region、dialog、複合ウィジェット(listbox、menu、gridなど)の下では引き続き確認を求めます。それらの名前はコンテナーのラベルであり、その中の画像が何を示すかについては何も伝えないためです。<figure aria-label="Photo: DR">は写真のクレジットです。テキストで名前が付いたリンクやボタンも、テキストの横にある画像を対象外にはしません。ファイル形式、外部リンク、評価のアイコンはテキストにないことを伝えることがあり、ACTもそれを適用対象としています。[inert]なサブツリー内の要素、または開いているモーダルダイアログの背後にある要素は、img-alt-presentと同じく、ほかの隠されたコンテンツと同様に除外します。操作を受け付けず、どの支援技術にも伝わらないためです。

期待される結果:除外された要素が純粋な装飾であり、ユーザーがそれがないと見逃してしまう情報を何も伝えていないことを、人がレビューして確認する必要があります。

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

  • element:img、svg、canvasのいずれかです。
  • sameImageCount:この結果の検出結果のうち、同じ画像を表示しているものの数で、この検出結果も含みます。同じ画像とは、同じ現在のソース(currentSrc、なければsrc)を持つ<img>、または描画を変えるルートの属性(viewBox、width、height、class、style、fill、stroke、color)とマークアップが同じインラインの<svg>です。canvas、比較するソースやマークアップのない画像、data:のプレースホルダーがdata-srcやdata-srcsetの代わりになっている遅延読み込みの<img>では1です。
  • sameImageFirst:そのうち文書の順序で最初のものでtrueです。レビューする人は1つを確認し、残りは数えるだけで済みます。
  • reasonCode:画像がリンクやボタンの唯一の内容である(テキストもほかの画像もない)場合はIMAGE_ONLY_CONTROL_CONTENTです。その場合、装飾かどうかにかかわらず、コントロールはその画像から名前を得られません。controlContentがコントロールのロール(linkまたはbutton)を示します。それ以外はEXCLUDED_ELEMENT_REVIEWです。

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

例

can't tell
<img src="quarterly-trend.png" alt="">

alt=""で装飾としてマークされていますが、「quarterly-trend」のようなファイル名からすると、実際には装飾ではなく情報を伝えるグラフかもしれません。

n/a
<button aria-label="Close"><img src="x-icon.png" alt=""></button>

ボタン自身のaria-labelがすでにアクセシブルな名前を提供しています。アイコンが除外されていることは、この要素について装飾かどうかをレビューすべき問題ではありません。

確認方法

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

EXCLUDED_ELEMENT_REVIEW

  1. レポートに示された画像、svg、またはcanvasを見つけ、ページ上で確認してください。
  2. それを取り除いた場合に利用者が失うもの(情報、ラベル、グラフのデータ、または何もない)を検討してください。
  3. 何かを伝えている場合は、近くの表示テキストがすでに同じことを伝えているか確認してください。

満たす場合:画像は純粋に装飾的なもの(スペーサー、区切り線、飾り、またはテキストがすでに内容を伝えている絵)であるため、隠しても何も失われません。

満たさない場合:画像はページ上のほかの何にもない情報を伝えているのに支援技術から隠されているため、WCAG 1.1.1を満たしません。

IMAGE_ONLY_CONTROL_CONTENT

  1. レポートに示されたリンクまたはボタンを見つけてください。その唯一のコンテンツは隠された画像です。
  2. アクセシビリティペインでコントロールの算出された名前を読むか、スクリーンリーダーでそこに移動して聞いてください。
  3. 読み上げられる内容とコントロールの働きを比べてください。

満たす場合:コントロールは引き続き、その働きを伝える名前とともに読み上げられます。

満たさない場合:唯一の画像が隠されているため、コントロールは名前なしで、またはアドレスだけで読み上げられ、WCAG 1.1.1を満たしません(F89)。

関連するルール

ソースコードを見る