みなさんはアクセシビリティ対策はきちんと出来ていますでしょうか？
Webサイトでのアクセシビリティとは、高齢者や障害のある方なども含めあらゆる人がWebサイトで提供されている情報やサービスを利用できる事を指します。
今回は、GoogleMapの埋め込みなどで使用するiframeに対するアクセシビリティ対策について解説していきます。
「iframe」とは
iframeとはHTMLタグ(要素)の1つで、ページの中に別のページやコンテンツを埋め込み表示させる事ができるタグとなります。昔は頻繁に使用されていましたが、現在はGoogle MapやYoutubeの埋め込み、特定のASPの使用時などでしか使われていない印象です。
「iframe」とはinline frame(インラインフレーム)の略称でインラインフレームやアイフレームと呼ばれています。
iframeでのアクセシビリティ対策とtitle属性について
今回は例としてGoogle Mapの埋め込み(場所は東京駅を指定)を使用します。
埋め込み用のコードを取得すると、以下のようなコードが出力されます。これをそのまま貼り付ける事が多いとは思うのですが、アクセシビリティ対策として不十分となります。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.831946129612!2d139.76448647578775!3d35.6811397725873!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1744679451401!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>不十分な理由としては、音声での読み上げソフト等でこのままのコードでは認識できず、ユーザーに情報を伝える事ができないからです。
これを認識させるにはtitle属性を付ける事が必要となります。
title属性とは
title属性とは、その要素がどういった情報を示すかの補足情報・ラベル付となります。
※一部のHTML要素ではtitle属性を付ける事で特別な意味を持つ要素もあります。
title属性を付けると、カーソルを重ねるとツールチップで表示されたりもしますが、現在では主にiframeの情報を示す為に使用される事が多いかと思います。
title属性を加えたiframe
先程のGoogle Mapのiframeにtitle属性を付けてみます。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.831946129612!2d139.76448647578775!3d35.6811397725873!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1744679451401!5m2!1sja!2sjp" title="東京駅のGoogle Map" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>どのようにtitle属性を入れたらいいかと思い調べてみたら、「Google Map」でいいという内容が結構出てきましたが、個人的には情報をきちんと伝えるために、もう少し詳しく記述する必要があるのではないかと思いました。
ですので、今回は「東京駅のGoogle Map」と記述しています。
このようにtitle属性を付け加える事で、きちんとした情報を伝える事ができますので忘れずに記述しましょう。
さいごに
いかがでしたでしょうか。
今回は、Google Mapなどのiframeに対するアクセシビリティ対策とtitle属性について解説しました。
アクセシビリティ対策は年々重要になってきていますので、忘れずに行うようにしましょう。
