HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

【HTML】area要素のalt属性とは？代替テキストの設定方法をわかりやすく解説

HTMLの<area>要素におけるalt属性は、イメージマップ内の各領域（クリック可能なエリア）に対して代替テキストを設定するための属性です。ネットワークの不具合や読み込みエラーなど、何らかの理由で画像が表示されなかった場合に、代わりにこのテキストが表示されます。また、スクリーンリーダーを利用する視覚障害のあるユーザーへの配慮など、Webアクセシビリティの向上にも欠かせない要素です。

alt属性の基本構文

<area alt="text">

「text」の部分に、実際に表示させたい代替テキストを指定します。

実装サンプル

それでは、<area>要素のalt属性を実際に実装した例を見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<h2>Learning</h2>
<p>Learn these technologies with ease....</p>
<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>
<map name = "tutorials">
   <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
   href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />
   <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
   href = "/html/index.htm" target = "_blank" />
   <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
   href = "/php/index.htm" target = "_blank" />
</map>
</body>
</html>

出力結果

【HTML】area要素のalt属性とは？代替テキストの設定方法をわかりやすく解説

コードのポイント解説

上記の例では、まず<img>タグのusemap属性を使って、画像とマップを関連付けています。

<img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>

続いて、<map>要素でマップを定義し、その内部に多角形（poly）、矩形（rect）、円形（circle）という3種類の形状を持つ<area>要素を配置しています。これにより、1枚の画像の中に複数のクリック可能なリンク領域を作成できます。

<map name = "tutorials">
   <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
   href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />
   <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
   href = "/html/index.htm" target = "_blank" />
   <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
   href = "/php/index.htm" target = "_blank" />
</map>

各領域を定義する際、alt属性を使って代替テキストも同時に設定しています。以下は多角形の領域に対してalt属性を指定している部分です。

<area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27" href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />

まとめ

alt属性は、href属性を指定した<area>要素において必須となる重要な属性です。画像が正しく表示されない環境でもユーザーがリンク先の内容を把握できるようになるだけでなく、SEOやスクリーンリーダー対応といった観点からも、内容を的確に表す分かりやすい代替テキストを設定することを心がけましょう。

  1. HTMLのstyle属性とは？構文と使い方をサンプルコード付きで解説

    HTMLのstyle属性は、ドキュメント内の個々の要素に対してインラインスタイルを直接指定するための属性です。style属性はグローバル属性に分類されるため、すべてのHTML要素で使用できるのが特徴です。 style属性の基本 style属性の値には、「プロパティ名: 値;」という形式でCSSを記述します。複数のスタイルを同時に指定したい場合は、セミコロン（;）で区切って並べることで、1つの要素にまとめてスタイルを適用できます。 構文 style属性の基本的な構文は次のとおりです。 <タグ名 style="CSSプロパティ: 値;"></タグ名> そ

  2. HTMLのstart属性とは？順序付きリストの開始番号を指定する方法

    HTMLのstart属性は、順序付きリスト（<ol>要素）において、最初のリスト項目に付与される番号（開始値）を指定するための属性です。通常、順序付きリストは「1」から自動的に採番されますが、start属性を使うことで、任意の番号からリストを開始させることができます。 構文 start属性の基本的な構文は以下のとおりです。 <ol start="number"></ol> start属性の値には正の整数を指定します。例えば「5」を指定すれば、リストは「5、6、7…」というように採番されます。 使用例 それでは、HTMLのstart属性を使