画像の代替テキストを作成して、スクリーン リーダーや目の不自由なユーザーが画像の内容を理解できるようにする方法は? また、Alt テキストを使用している場合、メニュー画像などの特別なケースで両方を使用している場合は、Title="text" に何を入れる必要がありますか?
3 に答える
私はスクリーン リーダーのユーザーであり、良い例と悪い例の両方として Stack Overflow を使用します。
Alt タグは簡潔で説明的なものにする必要があります。たとえば、スタック オーバーフローのalt
賛成票と反対票のオプションのタグは、読むのに時間がかからず、すぐに要点に到達するので便利です。悪い alt タグの例は、この質問をお気に入りにして、この回答を受け入れることです。どちらのタグも説明的ではありません。お気に入りのタグは " *
" であり、応答タグを受け入れるのは " check
" です。それらが何であるかを知る唯一の方法は、ソースを読むか、誰かに目撃してもらい、その目的を教えてもらうことです。
属性に関する限り、title
あまりアドバイスはありません。私のスクリーン リーダーはデフォルトでは読み上げないので、通常は使用しません。役立つ可能性のあるものの例として、追加情報があります。たとえば、回答の受け入れ率が非常に低い理由は、質問に対する回答を受け入れたかどうかを判断する方法がないためです。この回答を受け入れるグラフィックのタイトル属性が、回答が受け入れられなかった場合は「クリックしてこの回答を受け入れる」、受け入れられた回答である場合は「クリックしてこの回答を受け入れられた回答として削除する」のように表示されるとよいでしょう。.
視覚障害のあるユーザーに、画像が何であるかを理解させてはなりません。目の不自由な人にとって、画像は実質的に存在せず、テキストだけが存在します。
テキストはalt
、画像に置き換えることができる単一の文/段落として機能し、同じコンテンツを伝え、隣接するコンテンツのコンテキストで意味をなす必要があります。
画像が GUI の一部である場合、alt
テキストはアクション (動詞)、line upvote、answer this、またはlogout を伝える必要があります。
でサイトにアクセスし、サイトlinks
を理解しようとする必要があります。たとえば円グラフがある場合、そのalt
テキストはパーセンテージの小さな要約でなければなりません。ブログ投稿の横にきれいな花がある場合は、blogpost #324 の花の画像コンパニオンやさらに悪いflower.jpgalt
のような非常識なテキストを付けないでください。
alt
画像がナビゲーションや情報取得にとって重要な場合は、画像がなくてもサイトが機能するテキストを与えるようにしてください。画像がプレゼンテーションのみの場合は、空のalt
テキストを指定してください。
title
、私の知る限り、ホバーしたときにのみ表示する必要があるため、画像に追加情報を提供する必要があるため、情報の無用な複製は避ける必要があります。スクリーン リーダーの場合、サポートと構成がユーザーによって大きく異なる可能性があるため、これは少し注意が必要です。
いくつかの経験的データtitle
は役に立たないことを示しています:
- 画面読み取りソフトウェアのほとんどのユーザーは、リンクの TITLE 属性情報にアクセスするためにデフォルト設定を変更しません。
- ほとんどの画面読み上げソフトウェアは、既定でフォーム コントロールの TITLE 属性コンテンツにアクセスできます。
- 一部の画面読み上げソフトウェアでは、TITLE 属性情報にアクセスできません。
- 画面拡大鏡のユーザーは、低い倍率レベルで TITLE 属性のテキストを読むことができます。
- 画面拡大鏡のユーザーは、1 つまたは 2 つ以上の単語を含む TITLE 属性テキストをより高い拡大レベルで読み取ることができません。
ここに良いアドバイスがあります、私ができるよりもうまく言えます
これを使用して、必須ではない追加情報を提供します。ほとんどのビジュアル ブラウザは、要素にカーソルを合わせるとツール ヒントとしてタイトル テキストを表示しますが、タイトル テキストの表示方法はブラウザの製造元が決定します。代わりにステータスバーにテキストを表示するものもあります。たとえば、初期のバージョンの Safari ではこれが行われていました。
title 属性の有効な使い方の 1 つは、特にリンク テキスト自体がリンク先を明確に説明していない場合に、説明テキストをリンクに追加することです。こうすることで、訪問者がリンク先の場所を知ることができるようになり、ページを読み込んで、興味のあるものではなかったことに気付くのを防ぐことができます。必須ではない可能性が高い日付またはその他の情報。
longdesc
属性はテキストではなく、詳細情報へのリンクであることを忘れないでください。誤用する人もいます。
alt 属性と title 属性に同じコンテンツを入れるのがベストプラクティスだと思います。
「何を書くか」については、写真に写っている内容を一言で言うと簡単です。
alt 属性がよく説明されているこの記事を確認してください: http://www.cs.tut.fi/~jkorpela/html/alt.html