alt属性にスペースを分割しないスクリーンリーダー

StackOverflow https://stackoverflow.com/questions/1610860

  •  05-07-2019
  •  | 
  •  

質問

altテキストが提供されない限り、デフォルトで画像タグにalt属性を生成しない画像にCMSを使用しています。

空のスペースを提供できます＆quot; ＆quot; altタグに挿入して生成します：

<img src="../.." alt=" "/>

これはスクリーンリーダーとWebアクセシビリティの問題ですか？

役に立ちましたか？

解決

altテキストを使用していない場合は、 alt 属性を使用しなくてもかまいません。検証はしませんが、物事を変えることはなく、まったく同じように動作します。あなたはただバリデータを喜ばせています。

スペースを使用しても問題はありません 。

他のヒント

HTML作成者が画像にALTテキストを書き込む方法は3つあります：

  1. ALT属性が指定されていない
  2. 読み取り可能な文字を含まないALT属性を使用
  3. 読み取り可能なALT属性を使用

これらはさまざまな方法で処理されます。

次のようなALT属性のない画像の場合：

<img src="fruit.png" width="100" height="100" />

...デフォルトのスクリーンリーダーの動作は、SRC属性を読み上げます。したがって、この画像がexample.comの images フォルダーでホストされているとすると、スクリーンリーダーは次のように表示します。 Graphic：h ttp：//www.example.com/images/fruit。 png 。視覚障害の訪問者は無関係な大量の意味不明な言葉をかき分けなければならないため、ALT属性を省略するのは悪い習慣です。

次の2つのいずれかのような読み取り可能な情報を含まないALT属性を持つ画像の場合：

<img src="fruit.png" width="100" height="100" alt="" />
<img src="fruit.png" width="100" height="100" alt=" " />

...デフォルトの動作は、そのイメージを静かに渡すことです。スクリーンリーダーは、スペースまたは空の文字列を発音できません。そしてそれは何も言わない。これは、純粋に装飾的な画像の発表を抑制する正しい方法です。ただし、最新のWebAIMスクリーンリーダーの使用調査では、ほとんどの視覚障害者が画像を知りたいことがわかっています。たとえそれが彼らに多くを伝えないとしても、。したがって、空の代替テキストを含む画像を非表示にするには慎重になります。画像によって伝えられる情報が実際にゼロの場合にのみ使用してください。

最後に、もちろん、通常の代替テキストがあります：

<img src="fruit.png" width="100" height="100" alt="Photo of apples." />

この場合、スクリーンリーダーは「グラフィック：リンゴの写真」と表示します。ピリオドを入れると、ALTテキストの最後でスクリーンリーダーが一時停止します。

適切なALTテキストを選択することは重要であり、難しい場合があります。一般的に、画像にテキストの画像が含まれる場合、ALTテキストでそのテキスト（またはその適切な省略形）を再現する必要があります。イラストや写真の場合、ALTテキストは写真の内容を簡潔に説明するものでなければなりません。ダイアグラムのような複雑な画像の場合は、ALTテキストを使用して、ページ内の他の場所でより完全な説明にユーザーを誘導する必要があります。 （LONGDESC属性はこの目的のために設計されましたが、スクリーンリーダーでは広くサポートされていません。）

画像もリンクである場合、賢明なALTテキストを持つことが絶対に不可欠です。そうしないと、盲目の訪問者はリンクが何をするのか分からなくなります。

スクリーンリーダー（オープンソースであるNVDAなど）を入手してテストすることをお勧めします。それは-悪いしゃれを許す-目を見張るものになります。

唯一の問題は、顧客がサイトにXHTML準拠であることを表明したいということです。したがって、検証するページが必要です：（

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top