アクセシビリティキャンプ東京 第1回に行ってきた

総理大臣(www.kantei.go.jp)や記者会見(www.kantei.go.jp)などのページには、h2の見出しにアイコン画像があるのですが、その代替テキストが alt="矢印" になっています。

このアイコンは単なる装飾画像で、画像非表示の環境やスクリーンリーダーなどでは無視されても構わないものでしょう。Techniques for WCAG 2.0の不適合事例 F39では、このような場合は代替テキストを空にすべきとあります。

• アクセシビリティとは関係ありませんが、先に挙げた2つのページではアイコンはアンカー（a要素）に含まれていないのに、資料集(www.kantei.go.jp)では含まれているなど、サイト内で統一感が無いのは気になります。アロー装飾自体も、種類によってテキスト（▶）やimg要素だったり、CSSのbackground-imageで指定されていたりと、実装がバラバラですね。

また、記者会見(www.kantei.go.jp)ページの上部には、会見場の写真がページ幅いっぱいに掲載されており、ここは alt="記者会見イメージ" となっています。これは意見が分かれるところかもしれませんが、この写真もあくまでページの雰囲気演出のためにある（見えなくても内容の理解や操作には影響がない）と考えると、やはり空で良いと思われます。

この他、達成基準7.1.1.1とは直接関係ないことですが、トップページの新着情報などにある「動画」や「写真」のアイコン、リンクに関連する内容にもかかわらずアンカーに含まれていません。スクリーンリーダーを使ってTab移動しながらリンクを読み上げる場合は、アンカー外のテキストや画像altは読み上げられないので、これは含めたほうが良いでしょう。なお、アイコンの代替テキストは "動画", "写真", "別窓" となっていますが、「動画ページです」「別窓で開きます」などにした方が良いかという点については、実際のスクリーンリーダー利用者はこの程度は理解できるので、過度に親切にする必要はないとの意見がありました。とくにページ内で頻出する画像に長い代替テキストを付けると、むしろうざく感じてしまうでしょうね。

記者会見(www.kantei.go.jp)内のページでは、動画による配信が成されています。

「大臣就任会見」などは政府インターネットテレビ(nettv.gov-online.go.jp)という別ドメインのサイトで配信されていますが、次のような問題があります。

• 総理などが演説するシーンでは動画内の下部に内容が文字で記されるが、アナウンサーが説明する場面では、文字が無かったり、音声とは別の文言が表示される。
• 動画エリアの直後にはテキストによる説明文があるが、あくまでひと段落の概略しかない。

すなわち、聴覚障がい者やスピーカーが無い環境では動画の内容を理解することができません。

• あと、個人的にはスクリプト無効環境で再生できないのが残念です。

Understanding WCAG 2.0には、まさに記者会見の事例として達成例が載っているので、日本語訳のものを引用します。

実は、kantei.go.jpドメインで配信される動画（例: 平成24年4月17日 岡田副総理記者会見要旨(www.kantei.go.jp)）は会見内容のテキストも用意されています。ただ「喝采、笑い」は省略されていますね。これがなくとも会見内容の理解に問題はないと思うのですが、このあたりも完璧にしないと達成基準7.1.2.1を満たしたことにはならないのでしょうか?

トップページをはじめとしてtable要素をレイアウト目的で使っている箇所があるのですが、<table summary="サムネイル"> のようなsummary属性が指定されています。

テーブルレイアウトを使う場合、空でないsummary属性やth要素、caption要素などの構造化を行うと、Techniques for WCAG 2.0のF46に書かれているように達成基準7.1.3.1に不適合となります。

• そもそも、この程度のレイアウトは（IE6であっても）CSSで実装可能ですね。WCAG2.0でもテーブルレイアウトは禁止こそされていないものの、CSSレイアウトが推奨されています。

この達成基準では、テキストと画像化文字に 4.5:1 以上のコントラスト比（18pt以上または14pt以上の太字は 3:1 以上）を持たせることが求められていますが、トップページの「復興に向けて」という緑色の画像文字は 1.9:1 しかないなど、ところどころ満たしていない箇所が見られます。

ディスカッションでは、背景に単色でない画像がある場合、どの部分でコントラスト比を図るべきかという疑問が挙がりました。私はもっともコントラスト比が低い場所でも達成するようになっていればよいと考えていますが、背景が写真の場合は計測が難しいですね。

各ページのヘッダーには文字サイズ変更ボタンがあります。達成基準7.1.4.4では、UAの初期設定を基準として200%までサイズ変更できることが求められていますが、この機能では、「大」を選択した場合でも120%[2]しか拡大できません。

最近のPCブラウザは200%以上拡大できる機能をデフォルトで装備しているので、わざわざ文字サイズ変更ボタンを用意する必要はないと思いますが、要件でIE6でもレベルAAに準拠することが求められるような場合には必要でしょう。いずれにしても、首相官邸サイトは120%しか拡大できないので駄目ですが…。

各ページのヘッダーやフッターのリンク、あるいは「ページの先頭へ戻る」などは画像化文字となっています。

画像化文字は「文字サイズ変更ボタン」で拡大できなかったり、ブラウザの機能で拡大すると荒く表示されたりといった問題があります。また、ブラウザの設定で背景や文字色を変更している場合も、画像化文字には適用されません。

達成基準7.1.4.5では、カスタマイズ可能な場合またはロゴなど必要不可欠な場合をのぞき、画像化文字を使ってはいけないとされています。「カスタマイズ可能」とは抽象的すぎてよく分かりませんが、WCAG2.0解説書の当該事例(waic.jp)を読むと、スクリプトを用いて動的に画像を生成するような場合を指しているものと思います。技術的には可能でしょうが、このような実装例は見たことがありません。

現実的には、画像と一体になった文字やロゴ以外は画像化文字を使わないという対応になるでしょうね。

トップページのグローバルナビゲーションの下には、左側に大きな画像、右側に説明文のあるエリアがありますが、ここはJavaScriptによって5秒ごとに内容が切り替わります。このような機能は次のような問題があります。

• 説明文を5秒以内に読まないと切り替わってしまう。人によっては読み切れないかもしれない。
• 「詳細はこちら」のリンクを押す瞬間に切り替わると、意図したものとは違うページに遷移してしまう。

達成基準7.2.2.2では、自動更新を行う際に満たなさければならない事項として次のことが書かれています。

実はトップの切り替えを止める方法はあって、4つ並んだサムネイル画像のいずれかにマウスカーソルを合わせると切り替えが行われなくなります。とはいえ、このような隠し機能（あるいはバグかもしれませんが）では達成したことにならないでしょう。分かりやすい停止ボタンを設けるか、そもそも自動切り替えを止めるべきです。

• 達成基準7.2.2.2とは関係ありませんが、この部分はリンク画像の代替テキストが空だったり、サムネイル画像の代替テキストが分かりにくかったり、またスクリプト無効で画像が表示される環境ではサムネイル画像をクリックしたときの遷移先が分からなかったり（写真から推測するしかない）と、ほかにもいろいろ問題がありますね。

FirefoxとOperaだけの事象ですが、Tabキーでフォーカス移動を行うと、「文字サイズ変更ボタン」を通過するところで（Enterキーを押さなくても）文字サイズが切り替わってしまいます。

ディスカッションではブラウザのバグでは? という意見もありましたが、該当ソースを見るとこんな感じになっています。

<a href="javascript:void(0);" tabindex="6" onkeypress="fontsizeEnter(2)" onclick="fontsizeEnter(2)"><img src="/jp/n2-common/images/header_utility_fontsize_large.jpg" width="24" height="16" alt="大" class="changeBtn" /></a>

onkeypressとonclickで fontsizeEnter() 関数を指定していますね。IEやGoogle Chrome, Safariは、Tabキーではonkeypress属性が反応しないために発動しないのでしょう。

FirefoxとOperaに対応するには、fontsizeEnter() 関数の中でイベントのkeyCodeを取得し、Enterキーの場合のみ処理を実行するという条件分岐の追加が必要です[3]。

• 達成基準7.3.2.1について話し合ったところで時間切れになってしまったので、これはディスカッションの内容ではなく単に私が気付いたことを記すものとなります。

サイト内検索機能がありますが、検索結果ページ(p-search.kantei.go.jp)の「表示設定」のラジオボタンを変更すると、submitボタンを押さなくても検索が実行されてしまいます。通常、フォームコントロールを変更するだけで画面遷移が起こることはないため、これは「予測可能」でない「状況の変化」といえます。

事前の説明もないので、達成基準7.3.2.2を満たしていないといえるでしょう。