メルマガ第100号を発行しました!

こんにちは!2016年10月26日(水)にメルマガ第100号を発行しました!

[連載]植木 真の「こんなブログ記事見つけました!」
第54回:地図の代替テキストを考える
[寄稿]なんばクエスト~はじめてのなんば一人出張~
伊敷政英

[連載]植木 真の「こんなブログ記事見つけました!」
第54回:地図の代替テキストを考える

今回取り上げるのは「Togetterまとめ」!

先日、ポッドキャストの収録のときに知ったのですが、こんなTogetterまとめが今週トゥギャられています。

このメルマガの読者の皆さんなら、既にご存知かもしれませんね。ワタクシ、最近はTwitterを見るのは移動中くらいで、そんなに頻繁に目を通していないので、この流れには一切気づいていませんでした(汗)

事の発端は、10月22日に発売された雑誌「WEB+DB PRESS Vol.95」でのアクセシビリティ特集記事。いやあ、こうして雑誌の表紙のど真ん中に「アクセシビリティ」とデカデカと書かれるなんて、これは快挙ではないでしょうかね(笑)

しかも、特集と謳っているだけあって、ページ数や記事のボリュームも相当なものです。執筆されたのは、ミツエーリンクスの黒澤さんと小出さん。おつかれさまでした!

そして、トゥギャられているツイートは、その雑誌の中で事例を交えて解説されている地図の画像の代替テキストについて。

そもそも、地図の代替テキストって難しいですよね。地図といっても、いろいろな用途があります。

  • ある建物の所在地を示している地図
  • ある地点からある地点までのルートを示している地図
  • 複数の最寄り駅からのルートを示している地図
  • バスの運行ルートを示している地図
  • マラソン大会のコースを示している地図
  • 日本全体の中での位置を示している地図
  • ある都道府県の中での位置を示している地図 などなど

地図とはちょっと違うかもしれませんが、ショッピングモールのフロアマップなんかもありますね。フロアマップ系は、正直どうやって代替テキストを書けばいいのか悩むこともしばしば...。

図4 地図とテキストの組み合わせ

さて、話を本題に戻しましょう。トゥギャられているツイートは、雑誌で言うと27ページに掲載されている図4の事例のことですね。

簡単に紹介すると、左側に所在地、交通、道順のテキストがあって、その右側に地図の画像があるという感じです。雑誌の記事中では、地図が示していることをテキストで説明してあるので、地図画像の代替テキスト、つまりalt属性値は空にしてあるというふうに書かれています。

それについての議論がTwitter上で行われていたというわけですね。このTogetterに登場しているツイートの顔ぶれを見ると、実に濃厚なアクセシビリティシャンの方々ですね(笑) それでもいろいろな意見があるところがまた興味深いというか、奥が深いというか。

個人的には、少なくともそのページに地図があることが分かるように、alt属性には少なくとも「地図」と書く派です。中根さんが「画面が見える人と見えない人の間で同じページを見ながらコミュニケーションを図る時など、何らかの情報がある要素が伝わらないのは致命的な場合があると思います」とツイートしているのに同意です。

これによく似たケースは、写真の画像ですね。いわゆるイメージ画像というか、デコレーションというか、装飾の役割しか果たしていない写真は、alt属性値を空にするでいいと思うんですが、そうでない場合は写真であることが分かるように代替テキストを書く必要があると考えています。

例えば「○○○の写真」とか「写真:○○○」のような感じ。スクリーンリーダーを使っている全盲の人の場合、本人はその写真を見ることができなくても、そのページに写真があることが分かれば、誰かに見てもらうことができます。

地図や写真の存在をマシンリーダブルにする

アクセシビリティを確保する基本の1つを表すキーワードに「マシンリーダビリティ(機械可読性)」というのがありますが、こういった代替テキストの書き方にもまさに地図や写真の存在をマシンリーダブルにするという意味があるように思います。

テキストが太字で文字サイズもやや大きく、見た目にはページ上で見出しの役割を果たしている場合、見た目だけではなく、そのテキストをh要素でマークアップすることによって、見出しであることをマシンリーダブルにするのと似たような感覚かもしれませんね。そういえば、動画にキャプションをつけるのも、動画のコンテンツをマシンリーダブルにするという意味がありますよね。YouTubeなんかでは手軽にキャプションを付与できるようになっていますし、HTML5で登場したvideo要素ではXMLファイルなんかでキャプションのテキストデータを付与できるようになっています。

そういう形でキャプションを提供すれば、動画再生時にキャプションを表示できるばかりでなく、例えば検索クローラーがテキストデータを取得できるようになるから、検索エンジン最適化という意味でもメリットがあると思ったり、思わなかったり、ラジバンダリ。

第2章 画像や色の代替コンテンツ

さて、せっかくなので、雑誌の中身もちょっと見てみましょうか。話題になった地図画像の事例が紹介されていたのは「第2章 画像や色の代替コンテンツ」。そう、この特集、なんと第1章から第6章まであって、総ページ数は扉ページも入れて32ページというボリュームなのであります。その中から第2章を拾い読みしてみましょうかね。

つづきはメルマガで……。

comments powered by Disqus