web-dev-qa-db-ja.com

Images Maps SEOとアクセシビリティ

今日の私の質問は、イメージマップとアクセシビリティに関するものです。

Imgタグ内でaltタグを使用するときはいつでも、視覚障害のある人や、何らかの理由で画像のレンダリングを無効にしたばかりの人のユーザーエクスペリエンスを向上させる画像を記述することを理解しています。

ここで、このロジックはイメージマップでは機能しないようです。これについては例を示します。

<img alt="Image Map of Bits and Bobs" usemap="#imgmap" src="bits-and-bobs">
  <map name="imgmap">
    <area shape="poly" coords="" href="" alt="Spanner" title="Guitars Repairs"/>
    <area shape="poly" coords="" href="" alt="Dollar" title="Guitars for Sale"/>
    <area shape="poly" coords="" href="" alt="eLearning" title="Learning about Guitars"/>
    <area shape="poly" coords="" href="" alt="String" title="How to tune a Guitar"/>
  </map>

見やすくするために有効なHrefと座標を削除...

上の画像でわかるように、画像をクリックした場合の結果ではなく、画像の領域を説明しています。だから私の質問は簡単です。

リンクを含むイメージマップ内で、イメージを説明するのではなく、リンクの結果を説明します。たとえば、文字列を使用したスト​​リングのイメージは、ギターのチューニング方法に関するリンクを示しませんが、タイトルタグは示します。

htmlimagesaccessibility
7
Simon Hayter

一般に、リンクに画像のみが含まれる場合、その画像の alt属性はnotであるが、リンクターゲット 。

イメージマップでも同じです。

alt要素のimg属性は、画像全体を記述する必要があります（画像自体はリンクされていないため）。

alt要素のarea属性は、その目的を記述する必要があります（この画像領域はリンクされているため、画像ではなくリンクが重要です）。

参照： HTML5（2013-08-06のCR）：area→alt ：

It [the alt attribute]は、ハイパーリンクのテキストを指定します。その値は、画像マップの他のハイパーリンクに指定されたテキストと、画像の代替テキストが表示されたときに、画像自体がなくても、ハイパーリンクと同じ種類の選択肢をユーザーに提供するテキストでなければなりませんテキストなしで使用し、その形状を画像に適用した場合。

FWIW、 WCAGの手法H37 （情報提供、規範的ではない）には、img-_altの例があり、領域を選択する指示も含まれています。

Webサイト上の画像は、建物のフロアプランを表しています。画像は、各部屋にインタラクティブなマップエリアがあるイメージマップです。代替テキストは「建物のフロアプランです。部屋を選択すると、部屋の目的や内容に関する詳細が表示されます。」です。 「部屋を選択する」という指示は、画像がインタラクティブであることを示しています。

個人的には、これについてはよくわかりません。このような指示が必要な場合は、イメージマップの近くのprosaテキストの一部である必要があります。

したがって、この例では、title属性のコンテンツをaltコンテンツとして使用する必要があります（おそらく、このコンテンツを繰り返さないようにtitle属性を削除する必要があります）。

私はあなたの画像を見なかったので、ここでしか推測できませんが、画像はテキストラベルのない4つのアイコンで構成されていると思います。その場合、 アイコン画像のガイドライン がここに適用される可能性があります。

アイコンは通常、プログラム、アクション、データファイル、または概念を表す単純な画像です。

この場合、img-altは、アイコンの（美しさ）を説明するのではなく、アイコンが表すものを記述する必要があります。

私の仮定が正しい場合、これはイメージマップの完全な候補ではないようですが、まあ、clients。

6
unor