送信ボタンの代替テキスト

Silktide は、代替テキストがボタンの動作を説明していないように見える画像ボタンを検出します。ファイル名や一般的な単語でラベル付けされたボタンは、見えない人にその目的を何も伝えません。

<!-- 問題: ファイル名はラベルになりません -->
<input type="image" src="button.png" alt="button.png">

<!-- 問題: 一般的なテキストには意味がありません -->
<input type="image" src="go.png" alt="image">

<!-- 修正後: 代替テキストがアクションを示しています -->
<input type="image" src="button.png" alt="メッセージを送信">

重要な理由

画像ボタンのは、が読み上げる名前です。スクリーンリーダーは、そのコントロールがボタンであることをすでに読み上げるため、代替テキストではボタンを押すと何が起こるのかを伝える必要があります。「button.png」や「image」では、聞いている人は何をすればよいのか分かりません。そのため、サイト上でもっとも価値のある操作であることが多いフォームが、の利用者にとって遅く、不確かなものになります。

修正方法

代替テキストを、「検索」、「メッセージを送信」、「カートに追加」のような、短くアクションに焦点を当てたラベルに置き換えます。
画像ではなくアクションを説明します。ボタンがどのように見えるかよりも、何をするものかが重要です。
既存のテキストがボタンの目的を本当に説明していることを確認できた場合は、その検出結果をします。

Silktide によるチェック方法

各ページ上のすべての画像ボタン（<input type="image">）を見つけます。
スクリーンリーダーから隠されているボタン、および代替テキストがないか空であるボタンは除外します。これらは代わりに画像ボタンの代替テキストで報告されます。
代替テキストが役に立たないように見えるボタンを報告します。具体的には、ファイル名や URL、「image」や「logo」のような一般的な単語、人間が読めるテキストではないもの、または文字や数字をまったく含まないものです。

この検出はパターンに基づいているため、検出結果は確定的な問題ではなく、確認が必要な問題である可能性があります。

トラブルシューティング

代替テキストが説明的なのに検出される

非常に短いラベルや、句読点の使い方が一般的でないラベルは、パターンマッチングに引っかかることがあります。テキストが本当にボタンの動作を聞いている人に伝えている場合は、検出結果を承認してください。