input-image-alt-quality

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

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

空でないテキストによる代替(alt、aria-label、aria-labelledby、またはtitle)を持つ<input type="image">要素を、内容が適切かどうかの人によるレビュー対象として報告します。名前がファイル名、URL、プレースホルダー、「image of」のような書き出しに見える場合や、非常に長い場合は、その旨も示します。

適用範囲:いずれかの取得元から空でないテキストによる代替を得る<input type="image">要素に適用されます。取得元はaria-labelledby(テキストに解決されるもの)、aria-label、alt、titleです。altがあっても空の要素は、そのケースを確認するinput-image-alt-decorativeに任せます。要素はアクセシビリティツリーに含まれている必要があり、role="presentation"/"none"は、フォーカス可能でロールが復元される場合を除き、要素を対象外にします。

期待される結果:提供されている代替テキストが正確かつ適切であることを、人がレビューして確認する必要があります。各検出箇所は存在するすべての取得元を一覧にする(data.details.sources)ため、レビューする人はそれぞれを確認します。名前については、img-alt-qualityルールがaltについて確認するのと同じ点も確認します(helpers.getTextAlternativeSignal)。ファイル名、URL、記号のみ、プレースホルダーや汎用的な語、画像であることを述べる書き出し、150文字を超える長さです。そのような名前には専用の概要とヒントが付きますが、検出結果はcantTellのままです。

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

  • reasonCode:手がかりにかかわらずTEXT_ALTERNATIVE_REVIEWです。
  • name:読み上げられるコントロールのテキストによる代替で、それを与える最初のソースから取られます。
  • sources:空でないテキストによる代替を与えるすべてのソースで、名前に使われる順です。各項目はaria-labelledby、aria-label、alt、titleのいずれかです。
  • altSignal、およびtoo-longの場合のlengthとlimit:img-alt-qualityと同様に、名前が説明以外のものに見えた理由です。名前が通常のものである場合はありません。
  • alt(空でないaltを持つコントロール):altのテキストです。

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

例

can't tell
<input type="image" src="submit.png" alt="Submit order">

この画像ボタンには空でないaltがあります。「Submit order」がボタンの実際の動作と合っているかを確認する価値があります。aria-label、aria-labelledby、titleだけで名前が付いた画像ボタンも確認対象です。

n/a
<input type="image" src="submit.png" alt="" title="Submit order">

機能を持つコントロールの空のaltは、このルールではなくinput-image-alt-decorativeが扱う問題です。

確認方法

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

TEXT_ALTERNATIVE_REVIEW

  1. レポートに示された画像ボタンを見つけ、それが与える名前を読んでください。示された各情報源(alt、aria-label、aria-labelledby、title)を確認してください。
  2. ボタンを押すかフォームを読んで、その働きを把握してください。
  3. 読み上げられる名前がボタンの働きを伝えているか、またほかの情報源がそれと矛盾していないかを判断してください。

満たす場合:名前は「注文を確定」や「検索」のように、ボタンの動作を示しています。

満たさない場合:名前がファイル名、アドレス、汎用的な言葉、記号などであり、ボタンの働きを伝えていないため、WCAG 1.1.1を満たしません(H36、F30)。

関連するルール

ソースコードを見る