【areaタグ】イメージマップに複数のクリック可能なリンク領域を設定してみよう！

2022年12月15日 2022年10月31日

nobreco

★<area>タグの特徴

・タグのカテゴリ ―― 空要素。

・コンテンツモデル ―― フローコンテンツ・フレージングコンテンツ。

・タグの省略 ―― 不可。（開始タグは必須、終了タグは必要ない）

・使用可能な親要素 ―― フレージングコンテンツを許容するすべての親要素。（area要素の祖先が<map>要素の必要がある）

・グローバル属性を持つ。

・ARIAロール ―― 標準でのARIAロールは無し。（href属性が存在する場合はlinkロールを持つ）

<area>の説明

<area>とは

イメージマップ内に複数のクリック可能な領域を指定するためのタグです。

<map>要素の中だけで使用するもので、画像内の領域を複数のリンクと関連付けすることで、クリッカブルマップ（クリック可能な）としての機能を持たすことができるようになります。

■使用目的

主に<map>要素内で使用し、<img>要素などで用意した画像内に直接リンクを埋め込みたいときに使います。画像内の様々なオブジェクトに対して、個別にそれぞれ複数のリンクを埋め込んで使えます。

リンクを埋め込むことで、その画像のオブジェクトを直接クリックすることができるようになり、クリックした場所によって違うリンク先の情報を提示するという使い方があります。

■使われる属性

・alt
・coords
・download
・href
・hreflang
・ping
・referrerpolicy
・rel
・shape
・target

使用上の注意点

① href属性を持たない場合

この場合は、<area>要素に、alt属性、rel属性、target属性、download属性、refarrerpolicy属性、ping属性を指定してはいけません。

② href属性を持っている場合

この場合は、画像内のオブジェクトにリンク機能が設定されているので、alt属性の指定もしておいた方がよい。反対にhref属性が無い場合は、alt属性を省略すること。

③ <area>要素にitemprop属性が指定されている場合は、href属性も指定することが必要。

④ 指定できる領域の形状は4つ。

四角形の「rect」、丸の「circle」、多角形の「poly」、全体画像を領域とする「default」です。

全体画像がクリック対象になる「default」が指定された<area>要素は、他の四角や丸や多角形を指定した<area>要素よりも後に記述すること。これは「default」が一番上に重なるとクリック対象が全体化してしまい、他の形状を消えてしまうため。

⑤ rect、circle、polyを指定するのであれば、coords属性が必須。

内容モデル

<area>要素の内容モデルは空要素なのでありません。

空要素のため、開始タグは必要だが、終了タグを記述してはならない。

アクセシビリティでの注意点

リンク付きイメージマップはユーザーの視覚情報に大きく頼っているため、ブラウザのスクリーンが見えない、また利用できないなどの状況での使用は難しいことに注意が必要です。

上記のように画像が表示されなければ、リンク内容を把握するのは難しいですよね、もしも画像表示がされない場合などの対処法として、<area>要素にalt属性を指定することで、適切なリンクテキストを記述しておくことができます。これにより、画像が無い場合でもリンク内容が伝わりやすく利用されやすい状態にできます。

こういった問題もあることから、ナビゲーション部分などの重要な部分にリンクを使用する場合には、イメージマップだけでなくa要素も使って記述することを検討してください。