ブラウザセラーは基準を歪め、ルールに従わずに自分で物事を行います。これは、いくつかの問題を引き起こすか、少なくとも混乱を引き起こします。 1つの例は、Windowsに多数のユーザーを搭載したIEブラウザなど、一部のブラウザがALT属性(通常はALTタグとは間違っていると呼ばれる)を扱う方法です。
ALTテキストはツールのヒントとして使用されていません。むしろ、画像に追加の指示を提供しません。それどころか、タイトル属性を使用して、要素に追加の説明情報を提供する必要があります。この情報は、ほとんどの画像ブラウザでツールのヒントとして表示されますが、メーカーは他の方法を使用してタイトル属性のテキストをレンダリングできます。
多くの人々はこれら2つの属性に混乱しているように見えます(最近のWeb Standards Groupメーリングリストでは質問がより一般的になりました)ので、それらの使用方法についての考えを書き留めました。
alt属性画像、フォーム、またはアプレットを表示できないユーザーエージェント(UA)の場合、ALT属性は代替テキストを指定するために使用されます。交換テキストの言語は、Lang属性によって指定されます。出典:代替テキストを指定する方法。
ALT属性(「タグ」ではなく「属性」に焦点を当てる)には、画像や画像ホットスポットに必要な交換手順が含まれます。 IMG、エリア、および入力要素(アプレット要素を含む)でのみ使用できます。入力要素の場合、ALT属性は、送信ボタンの画像を置き換えることを目的としています。例:<入力型= "画像" src = "image.gif" />。
ALT属性を使用して、ドキュメント内の画像を表示できない視聴者にテキストの説明を提供します。これには、画像表示や画像表示がオフになっているブラウザを使用しているユーザー、視覚障害のあるユーザー、スクリーンリーダーを使用するユーザーが含まれます。代替テキストは、追加のキャプションを提供するのではなく、画像を置き換えるために使用されます。
交換用のテキストを書く前に慎重に考えて、これらの単語が画像を見ていない人やコンテキストで意味をなさない人に説明的な情報を提供していることを確認してください。装飾的な画像の場合、「青い弾丸」や「spacer.gif」などの無関係な代替品を使用する代わりに、空の値(alt = "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "を使用する)を使用しってきます。それを無視しないでください。それを無視すると、一部の画面リーダーは画像ファイルのファイル名を直接読み取り、Lynxなどのテキストブラウザは画像ファイルのファイル名を表示します。これはブラウザにほとんど役に立ちません。
テキストを含む画像に交換テキストを設定するのが最も簡単です。画像に含まれるテキストは、通常、ALT属性値として使用できます。
交換テキストの長さについては、WCAG 2.0(Webサイトコンテンツユーザビリティガイド2.0)が書いていることを参照してください。
ALT属性値は100人未満である必要があります。または、ユーザーは、交換テキストが可能な限り短いことを確認する必要があります。
私はそれを「できるだけ長く、できるだけ短い」と理解しています。
ツールのヒントとして表示したい場合でも、テキスト要素のALT属性を使用しないでください。これはその使用法ではありません。私の知る限り、それはWindows IEブラウザと古代のNetscape 4.*(Windowsバージョン)でのみ機能します。 Macのブラウザはツールのヒントとして表示されません。
ブラウザが交換テキストをツールのヒントとして表示すると、ALT属性を誤って使用する動作も奨励されます。一部の人々は、画像を表示できない代替品ではなく、追加の幻想情報だと考える傾向があるため、意味のない代替テキストを書き始めます。他の人は、ツールのヒントを表示したくない場合があり、Alt属性値の書き込みを完全に無視します。これらの間違った慣行は、画像を見ることができない視聴者に困難を引き起こしました。
追加の手順と非必須情報については、タイトル属性を使用してください。
タイトル属性タイトル属性は、この属性を設定する要素の提案を提供します。出典:タイトル属性。
タイトル属性は、ベース、BaseFont、Head、HTML、Meta、Param、Scrip、およびTitleを除くすべてのタグで使用できます。しかし、それは必要ありません。たぶんそれが多くの人がいつそれを使うべきか理解していない理由です。
タイトル属性を使用して、必須以外の追加情報を提供します。ほとんどのビジュアルブラウザは、マウスが特定の要素に吊り下げられているときにツールのヒントとしてタイトルテキストを表示しますが、これはタイトルテキストをレンダリングする方法を決定するためのメーカー次第です。一部のブラウザは、ステータスバーにタイトルテキストを表示します。たとえば、Safariブラウザの以前のバージョン。
タイトル属性には良い目的があります。これは、リンク自体がリンクの目的を非常に明確に表現していない場合、リンクに説明的なテキストを追加することです。これにより、訪問者はこれらのリンクがそれらを採用する場所を知ることができ、完全に好ましくないページをロードすることはできません。別の潜在的なアプリケーションは、日付やその他の非必須情報などの画像に追加の実例情報を提供することです。
タイトル属性値は、ALT属性値よりも長くなる場合があります。ただし、一部のブラウザはあまりにも長いテキスト(ツールチップなど)を切り捨てていることに注意する必要があります。たとえば、Mozillaのコアブラウザは最初の60文字のみを表示できます。これは、注意を払う必要があるモジラのバグと見なされます。
使用する前に検討してください私のアドバイスは、交換テキストが不可欠であることを確認することです。ほとんどのアプリケーションでは、空白のままにする必要があります。Alt= ""(2つの引用にはスペースがないことに注意してください)。それらの画像、それらのビューが提供する情報、それを説明するためにどのようなテキストを使用すべきか、または画像を見ない人に提供する情報を提供するものについて考えてください。交換テキストを「写真:建物の外に立って、灰色のスーツと黒いネクタイを着て、空を見ている」と書くことは、画像を見ることができない人にとって本当に役に立ちますか?あなたがそう思うなら、あなたはそれを書くことができます。多くの場合、交換用のテキストを空白のままにする方が良いと思います。
タイトル属性の場合、厳格な指示を与えることは困難です。私の使用のほとんどは、同じページ上の同じリンクテキストや異なるリンクページなど、自明ではないリンク上にあります。一部のボタンまたはフォーム要素には、より多くのキャプションテキストが提供される場合があります。
より長い説明画像がより長い説明を必要とし、ALT属性の制限を超える場合、いくつかのオプションがあります。
LongDESCプロパティを使用して、画像のテキスト説明を含む別のページへのリンクを提供できます。これは、視聴者を別のページにリンクすることを意味します。これは、理解の難しさを引き起こす可能性があります。さらに、LongDESC属性のブラウザサポートも一貫性がなく、あまり良くありません。
LongDESCプロパティには、別のページにリンクする代わりに、現在のドキュメント(アンカーポイント)の別の部分へのリンクを含めることができます。アクセシビリティの脚注で、アンディクラークはそれを非常によく適用する方法を説明します。
説明リンク(Dリンク)を使用して、LongDescを補完できます。説明リンクは、代替テキストを含むページに接続する通常のリンクです。リンクは画像の隣に配置されており、すべてのブラウザでOKです。人々はその有効性について多くの異なる意見を持っています、そして、私はこれが私の個人的な意見にあまり焦点を合わせたくありません。 WCAGはまた、WCAG 2.0の作業ドラフトHTML手法では、説明リンクが「不承認」です。
画像の長い説明が視聴者に役立つ場合は、他のページにリンクしたり隠しているのではなく、同じドキュメントに表示するだけで表示することを検討する必要があります。これにより、誰もがそれを読むことができます。これはシンプルでローテクな方法です。