［新連載］植木 真の「"勝手に" ＆ "こっそり" Webアクセシビリティ診断」
第1回：●●●ホームページ

さあ、いよいよ始まりました、新連載の記念すべき第1回目です！

まず、改めまして、この新連載の主旨から簡単にお伝えしておきましょう。「Webアクセシビリティ診断」というタイトルからも察しがつくかと思いますが、Webアクセシビリティを診断してレポートするという企画です。「Web」と付いていますので、対象となるのはWebコンテンツ。メインは、Webサイトになると思いますが、もしかしたらWebアプリなんかも題材にすることがあるかもしれません。

そして、連載タイトルに「"勝手に" ＆ "こっそり"」と入っています。このメールマガジンは、有料で提供しております。残念ながら、読者数はまだ多いとはいえません。つまり、インターネット上のWebコンテンツとは異なり、クローズドな世界であるという現状を逆手にとって、文字通り「"勝手に" ＆ "こっそり"」と診断させていただこうではないかと考えた次第です（笑）

この連載に関しては、ワタクシが普段お仕事で提供している詳細なレポートとは異なり、サイト内の数ページをチェックして気がついたことの中から、特に皆さんとシェアしておきたいと思ったことを中心にお届けしていこうと思います。若干ゆるめの診断レポートとしてご覧いただけたらと。

なお、この連載記事については、無断での転載等はお断り申し上げます。というか、そうさせてください。でないと、言いたいことも言えなくなってしまうかもしれませんので（苦笑）　読者の皆さまのご理解とご協力のほど、よろしくお願い申し上げます！

「●●●ホームページ」の概要

今回の診断対象は、以下の通りです。

• サイト名：●●●ホームページ
• 今回チェックしたページ：HOMEページをはじめとする主要なページ群（20〜30ページ程度）

全体の総評としては、アクセシビリティ確保をしっかりと実践しているサイトだなという印象を持ちました。サイト内にある「Webアクセシビリティ」というページを見ると、CMS管理下にあるウェブページのみを対象としていたり、PDFファイルなどを対象外にしていたりしますが、まずは出来るところからJISに対応していくことを目標にしているようです。

ただ、「目標達成期限」として、2017年9月30日までに「等級 AAに一部準拠」するとあります。対象範囲を限定しているにしては、3年半以上も先の話になっているのが気になるところではあります。●●●ホームページですからね...。もっとスピード感が欲しいところです。少なくとも上位階層やアクセス数の多いページをはじめとする主要なページ群については、もっと細かく「目標達成期限」を定めて、マイルストーンを設定してほしいですね。と言いつつも、中の人はそういうプランを描いておられるものと信じておりますが･･･。

さて、今回の診断結果から、皆さんとシェアしたいポイントはこの三つです。

• 画像の代替テキスト
• 文字画像の背景透過
• 文字サイズ変更ボタン

では、ポイントを順番に見ていきましょう。

画像の代替テキスト

まず、画像の代替テキストについて。画像などの非テキストコンテンツに代替テキストを提供することは、コンテンツをマシンリーダブルにするための基本中の基本といえるポイントです。この●●●ホームページ、ざっとチェックしたかぎりでは、代替テキストが必要な画像には、きちんと代替テキストが提供されているようです。ただ、改善の余地はまだあります。

例えば、「HOMEページ」を例に挙げると、ページ上部にある大きな写真を使ったカルーセル（スライドショー）がありますが、その右下にあるサムネイル画像です。ここには、カルーセルで使用している四枚の大きな写真のサムネイルが並んでいます。それらの代替テキストの冒頭にすべて「サムネイル：」と入っています。そもそも「サムネイル」という用語自体、一般の人の多くには馴染みのないものだと思いますが、それは置いておいて、このサムネイル画像はどれもリンクです。ここでは、サムネイルであることを代替テキストに記述する必要はさほどないように思われます。

もっといえば、このカルーセルでは、同じリンクのラベルが、大きな写真、その脇の大きなリンクテキスト、そしてこのサムネイルと三回出てきますので、スクリーンリーダーのユーザーにとってはやや冗長な感もあります。その点も考慮すると、カルーセルのつくり自体も一稿の余地がありそうですね。

それから、「特集ページ」という見出しの下の方に、太線で囲った三つの画像リンクがあります。代替テキストでは、「防災の手引き」、「感染症」、そして「クイズやゲームで楽しく学べる」と記述されています。どれも画像にある文字が省略されてしまっています。ここは画像にある文字をそのまま全て代替テキストに記述したほうがよいでしょう。特に、二つめと三つめは、リンク先がどういうページなのかが分かりにくくなってしまっています。「いろんな災害を知って備えよう 防災の手引き」、「感染症対策特集　様々な感染症から身を守りましょう」、そして「クイズやゲームで楽しく学べる　●●● for Kids」というふうに、そのまましっかりと記述すればリンク先も分かりやすくなります。こういったリンク画像は、基本通りに、画像にある文字をそのまま代替テキストとして記述したいところです。

また、「●●●の一日」のページでは、「平成26年」というセクションに並んでいるテキストリンクの脇に、それぞれ小さい写真画像があります。これはリンクではなく、テキストリンクのリンク先のページにある写真のこれこそサムネイルのようです。

それらの代替テキストを見ると、「あいさつする●●●」とか「あいさつする●●● 1」という記述が繰り返し用いられています。この写真画像に代替テキストを提供すべきかどうかも迷うところかもしれません。もし記述するなら、まず写真であることがわかるように、代替テキストの冒頭に「写真：」と付けたほうがよさそうです。そして、写真が違うのであれば、代替テキストの文言もそれぞれの違いが分かるように、もう少し言葉を補ったほうがよいでしょう。

とはいえ、このようなサムネイルだと、それも難しいケースがあるかもしれませんね。例えば、似たようなレイアウトのページで、「記者会見」などのようなページもいくつかあります。それらのページでは、装飾を目的にした画像という扱いにしてalt属性を空にしています。これは中根さんの意見も聞いてみたいところですが、これだけ小さいサムネイル画像であれば、リンク先のページではきちんと写真の説明をすることを前提に、テキストリンクの脇にある小さいサムネイルは装飾を目的にしたアイコンとみなしてalt属性を空にするというのでもよいかもしれません。

全体としては、きちんと代替テキストを提供しようという姿勢が感じられるので、好感が持てます。

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