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

公開日:

アクセシビリティキャンプ東京#1(www.facebook.com)が開催されたので参加してきました。

開催場所は池尻大橋駅近くの「住友不動産 青葉台タワー」だったのですが、間違って「住友不動産 渋谷ガーデンタワー」に行ってしまい、工事中で変な場所からしか入れないし、どうも人気が無いし…、と迷っていたら少し遅れてしまいました。

それはさておき、今回の進行はあらかじめ決めたテーマごとにチームに分かれてディスカッションを行い、最後にその内容を10分で発表するというもの。テーマはこの3つです。

  • 首相官邸を採点する
  • スキップリンクネタ
  • フォームのエラー通知

スキップリンクとフォームももちろん気になったのですが、首相官邸は今しかできないネタだろうと思い、私はこのチームに入りました。というわけで、以下は首相官邸チームに関することをだらだらと書いていきます。

首相官邸サイトのリニューアルについて

一応おさらい。

今年4月2日に首相官邸サイト(www.kantei.go.jp)がリニューアルされました。このリニューアルに約4,500万円の費用が掛かったということで、一部で非難の声が挙がっていたようですね。4,500万という金額が、リニューアルのどの範囲までのものか分からないので何とも判断しかねるのですが、明らかにCMSを導入していますし[1]、その導入費用まで含めてこの規模のサイトを作ると決して高くはないのでは、と個人的には思っています。

今回は金額の妥当性は置いておき、同サイトのアクセシビリティ面にツッコミどころが多いので、ネタになってもらおうというものです。

ディスカッション

ディスカッションの進行は発案者のただただし さん(@tdtds)(Twitter)ばけら さん(@bakera)(Twitter)。実際に首相官邸サイトを見つつ、JIS X8341-3:2010の各ガイドラインに沿って問題点を挙げてゆく形式で進められました。

両名ともブログで既に問題点を挙げておられます。

重複する内容も多いですが、ディスカッションで挙がったものを紹介してゆきます。

すべてはメモしきれていないので、不足があるかもしれません。また個人的な主観も含んでいます。お気づきの点や反論などありましたら連絡ください。

7.1.1.1 非テキストコンテンツに関する達成基準 (等級A)

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

図1:「総理大臣」ページのh2見出し部分

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

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

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

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

図2:トップページの新着情報部分

7.1.2.1 収録済みの音声しか含まないメディア及び収録済みの映像しか含まないメディアに関する達成基準 (等級A)

記者会見(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を満たしたことにはならないのでしょうか?

7.1.3.1 情報及び関係性に関する達成基準 (等級A)

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

図3:トップページのメイン画像切り替え部分のHTMLコード

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

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

7.1.4.3 最低限のコントラストに関する達成基準 (等級AA)

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

図拡大
図4:トップページの「復興に向けて」バナー

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

7.1.4.4 テキストのサイズ変更に関する達成基準 (等級AA)

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

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

7.1.4.5 画像化された文字に関する達成基準 (等級AA)

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

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

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

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

7.2.2.2 一時停止,停止及び非表示に関する達成基準 (等級A)

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

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

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

自動更新する情報が,自動的に開始し,その他のコンテンツと並行して提示される場合,利用者がそれを一時停止,停止若しくは非表示にする,又はその更新頻度を調整することのできるメカニズムがある。ただし,その自動更新が必要不可欠な動作の一部である場合は除く。

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

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

7.3.2.1 オンフォーカスに関する達成基準 (等級A)

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.2 ユーザインタフェースコンポーネントによる状況の変化に関する達成基準 (等級A)

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

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

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

と、このように実例を見つつ、JIS X8341-3:2010やWCAG2.0、またアクセシビリティそのものについて理解を深めることができたのではないかと思います。もっと時間をかければ他にもボロボロ出てきそうですが、disることが目的ではないためこの程度でちょうど良かったのかもしれません。

~追伸~ 「Web標準対策」(www.kantei.go.jp)ネタはありませんでした。

[1]画像のディレクトリ名に /__icsFiles/ が含まれているので、NOREN(noren.ashisuto.co.jp)を使っているものと思われます。

[2]拡大率は http://www.kantei.go.jp/jp/n2-common/js/l_scripts.js より

[3]Tabキー以外は実行しない、では不十分です。Operaは通常 Ctrl + 上下矢印 でフォーカス移動が行われ、シングルショートカットキーが有効な場合は A と Q も有効です。このようにTabキー以外でフォーカスする場合もあるため、Enterキーのみを受け入れる方が良いでしょう。

当記事内に掲載している写真は、一部例外を除き自由に転載することができます。詳細は写真や図の転載についてを参照ください。