2012年4月3日(火曜日)
首相官邸サイトリニューアル、しかしすぐに再リニューアルが必要
公開: 2012年4月8日16時40分頃
首相官邸 (www.kantei.go.jp)のサイトがリニューアルしたそうで。
4500万円かかったと報じられていますが、何をやったのかが分からないので、高いか安いかは評価のしようがないですね。単純に規模から「やるべき事」を考えてみると、CMS抜きで4500万円かかっても不思議ではないと思います。戦略をみっちりやったり、それなりなCMSを入れたりすれば足りなくなるかもしれません。
そして実際にサイトを見てみると、まず、見た目だけで以下のような点が気になるわけです。
- 背景にうっすらと写真が敷かれていますが、肝心な部分がコンテンツの下敷きになってよく見えない上に、「首相官邸」というタイトルまわりが読みにくくなってしまっています。プロがこういう中途半端な写真の使い方をすることはまずありません。写真を見せたいならちゃんと見せるでしょうし、見せなくても良いなら使わないようにするでしょう。
- グリッドの設計がきちんとしておらず、ページによって要素の配置が異なります。たとえば、記者会見 (www.kantei.go.jp)のページと国の政策 (www.kantei.go.jp)のページは、いずれも下部が左右に2分割されていますが、この左右の間隔が、記者会見は10px、国の政策は15pxで微妙に異なっています (これはCSSの設定値ではなく、画面キャプチャから実測した値です)。同様に、トップページと資料集 (www.kantei.go.jp)のページは下部がだいたい2:1に分割されていますが、トップページの「新着情報」エリアと「国の政策」エリアの間隔が35pxなのに対して、資料集ページの「資料集」という見出しと「国の政策」エリアとの間隔は43pxです。見ている方は間隔なんて気にしない、という方もいらっしゃるでしょうが、プロはこういう仕事はしないものです。
- マージンの設計も怪しいです。たとえばトップページのコンテンツに「総理大臣」というエリアがありますが、上マージンが16px、下マージンが19pxとなっています (CSSの設定値ではなく、画面キャプチャから実測した値です)。上下のマージンには意図的に変化をつけることもありますが、違うのか違わないのか分からないような微妙な違いをつけることはまずありません。テキストの上下のマージンはうまく調整できない場合もありますが、これはそういう話ではないはずです。トップページの「ページの先頭に戻る」の右マージンも中途半端ですし、全体的にマージンがきちんとしていない印象を受けます。
- ヘッダ・フッタのユーティリティ系のリンクがすべて画像になっています。昔はこういうやり方もありましたが、最近ではテキストにするのが普通です (理由は後述)。
見た目からして、あまりプロらしさが感じられません。
しかし、このサイトの最大の問題点は、ビジュアルではありません。
国及び地方公共団体が運営するサイトに対して、総務省は「みんなの公共サイト運用モデル」という基準を公開しています。現在の最新である「2010年度版」は、2011年の4月に公開されています。
- みんなの公共サイト運用モデル改定版（２０１０年度）」 (www.soumu.go.jp)
この対象となるサイトについて、「みんなの公共サイト運用モデル（2010 年度改定版）～ウェブアクセシビリティ対応の手引き～」の5ページには以下のように書かれています。
公式ホームページをはじめ、各団体が提供する全てのウェブコンテンツが取組みの対象です。
首相官邸のサイトは、内閣官房内閣広報室が提供しているサイトですから、このモデルの対象になるでしょう。
対象となるサイトが何をするのかというと、単純に JIS X 8341-3:2010 の達成等級AAに準拠する必要があります。ただし、すぐにということではなく、以下のようなスケジュール感です。
＜期限と達成等級の目安＞
- 既に提供しているホームページ等
- 2012 年度末まで 「ウェブアクセシビリティ方針」策定・公開
- 2013 年度末まで JIS X 8341-3:2010 の等級A に準拠（試験結果の公開）
- 2014 年度末まで JIS X 8341-3:2010 の等級AA に準拠（試験結果の公開）
- ホームページ等を新規構築する場合
- 構築前に 「ウェブアクセシビリティ方針」策定
- 構築時に JIS X 8341-3:2010 の等級AA に準拠（試験結果の公開）
既存のサイトはすぐには変えられないでしょうから、2013年度の年末までに等級A、2014年度の末までに等級AAに準拠すれば良いことになっています。新規に構築する場合には、最初から等級AAに準拠して作るように求められています。
常識的に考えると、2011年4月以降に大規模なリニューアルプロジェクトがスタートしたならば、等級AAに準拠したものを作るべきでしょう。そうしなければ、すぐにまたリニューアルしなければならないことになってしまいます。
このことを踏まえて、今回リニューアルされた首相官邸サイトを見ていくと、ざっと見ただけでも以下のような問題があります。
コントラスト不足 (7.1.4.3 最低限のコントラストに関する達成基準)
トップページ中央に「復興に向けて」という緑色の文字がありますが、見た瞬間に読みにくく感じます。
計測してみると背景色 #fff に対して前景色が #9acc35 で、コントラスト比を計算すると1.9:1しかありません。これはJIS X 8341-3:2010の7.1.4.3を満たしません。
7.1.4.3 最低限のコントラストに関する達成基準
テキスト及び画像化された文字の視覚的な表現には，少なくとも4.5:1 のコントラスト比がなければならない。ただし，次の場合は除く。
(～中略～)
注記 この達成基準は，等級AA の達成基準である。
以上、JIS X 8341-3:2010 7.1.4.3 より
除かれている「次の場合」というのは、大きな文字の場合、付随的なものの場合などですが、いずれにも該当しません。仮に「大きな文字」であっても3:1のコントラストが必要なので達成できていません。
不適切な代替テキスト (7.1.1.1 非テキストコンテンツに関する達成基準)
「総理大臣 (www.kantei.go.jp)」のページの各見出しには矢印のようなアイコンがついていますが、そのマークアップはこのようになっています。
<h2><img src="/jp/n2-common/images/linku_yaji.gif" width="15" height="15" alt="矢印" /> 総理の発表</h2>
この矢印のアイコンは見出しの内容ではなく、装飾するものに過ぎません。このようなアイコンに「矢印」という代替テキストをつけるのは不適切です。別の言い方をすると、この見出しは「矢印総理の発表」という見出しではないはずだ、ということです。
※ファイル名の linku_yaji.gif というのもちょっとどうかと思いますが、まあアクセシビリティ上の問題はありません。
要件を満たさない文字サイズ変更ボタン (7.1.4.4 テキストのサイズ変更に関する達成基準)
このサイトには文字サイズ変更ボタンがあります。そしてJIS X 8341-3:2010には以下のような達成基準があります。
7.1.4.4 テキストのサイズ変更に関する達成基準
コンテンツ又は機能を損なうことなく，テキストを支援技術なしで200 %までサイズ変更できなければならない。ただし，キャプション及び画像化された文字は除く。
注記1 サイズ変更は，ユーザエージェントの初期設定を基準とする。200 %は，幅及び高さを2 倍にすることである。
注記2 この達成基準は，等級AA の達成基準である。
実は、この達成基準はブラウザのズーム機能で拡大できれば良いとされています。ですから、達成するために文字サイズ変更ボタンを設ける必要はそもそもありません。
しかし、明示的に文字サイズ変更ボタンを設ければ、利用者はこのボタンで文字を拡大できると期待するでしょう。設置するのであれば、JIS X 8341-3:2010が求める機能をしっかり備えたものを設置するべきです。
そして、このサイトの文字サイズ変更ボタンは、文字サイズを120%にしか拡大できません (小・中・大がそれぞれ90%、100%、120%)。このような中途半端なものを設置するべきではありません。
必要のない画像化文字 (7.1.4.5 画像化された文字に関する達成基準)
ヘッダ・フッタにあるのユーティリティ系のリンク、たとえば「ご意見・ご感想」「サイトマップ」などは画像になっています。これは画像にする必要がないものでしょう。
7.1.4.5 画像化された文字に関する達成基準
使用しているウェブコンテンツ技術で意図した視覚的な表現が可能である場合は，画像化された文字ではなくテキストを用いて情報を伝えなければならない。ただし，次に挙げる場合を除く。
(～中略～)
注記3 この達成基準は，等級AA の達成基準である。
以上、JIS X 8341-3:2010 7.1.4.5 より
「意図した視覚的な表現」についてはWCAG Nextの話にもありましたが、これはテキストのままで良い典型的な例だと思います。
ちなみに最近では、ビジュアルデザインの観点からも、こういった画像化文字は使われなくなってきています。
昔は画像にしていたケースが結構あったものですが、それはテキストだとフォントが汚く、画像にしなければアンチエイリアスがかけられない、という理由によるものでした。
しかし最近では、テキストにアンチエイリアスがかかる環境も増えました。また、タブレットやスマートフォンでは簡単に画面を拡大することができます。テキストはきれいに拡大されますが、ビットマップ画像は拡大すると汚くなってしまうわけで、画像にした方が汚いという逆転現象が起きます。
不適切なsummaryのつけられたレイアウトテーブル (7.1.3.1 情報及び関係性に関する達成基準)
こういう達成基準があります。
7.1.3.1 情報及び関係性に関する達成基準
表現を通じて伝達されている情報，構造及び関係性は，プログラムが解釈可能でなければならない。プログラムが解釈可能にすることができないウェブコンテンツ技術を用いる場合は，それらはテキストで提供されていなければならない。
注記1 構造とは，ウェブページの各部が相互関係によって整理された有様，及び一連のウェブページが整理された有様である。
注記2 関係性とは，コンテンツの異なる部分間における意味のある関係のことである。
注記3 この達成基準は，等級A の達成基準である。
以上、JIS X 8341-3:2010 7.1.3.1 より
そしてトップページのソースを見ると、明らかなレイアウトテーブルが使用されています。
<table summary="スライドショー" class="home_main_right_table_01">
<table summary="テキスト" class="home_main_right_table_02">
<table summary="サムネイル">
実はレイアウトテーブルそのものは禁止されていないのですが、レイアウトテーブルにsummary属性をつけることはNGです。これは明確に不適合事例として挙げられています。
ちなみに、トップページには以下のようなsummaryのついたtableもあります。
<h2>新着情報</h2>(～中略～)
<table summary="新着情報">
これは明確な違反ではありませんが、無意味です。すぐ上に見出しがあるわけで、それと同じ値を指定しても意味はありません。
そしてHTML5では、summary属性はなくなる予定です。つまり、今やsummary属性自体が推奨されていません。HTML5の4.9.1.1 Techniques for describing tables (www.w3.org)では、summary属性を使用せずにtableの説明をする方法がいろいろ挙げられています。HTML5の新要素を使用しない例もありますので、HTML5を採用しない場合でも見ておくと良いと思います。
※WCAG1.0のころはデータ表にsummary属性をつけることは推奨されていたので、時代を感じる話です。引退した人が10年ぶりくらいに復活してマークアップしたのではないか、というような微妙な印象を受けますね。
余談: 唐突な別ウィンドウ (JIS X 8341-3:2010 7.3.2.5)
これは余談です。
トップページの「復興に向けて」などをクリックすると、唐突に別のタブが開きます。
JIS X 8341-3:2010 7.3.2.5には以下のような達成基準があります。
7.3.2.5 利用者の要求による状況の変化に関する達成基準
状況の変化は利用者の要求によってだけ生じるか，又はそのような変化を止めるメカニズムが利用可能でなければならない。
注記 この達成基準は，等級AAA の達成基準である。
以上、JIS X 8341-3:2010 7.3.2.5 より
これだけだとよく分からないと思いますが、これを達成するための実装方法の一つが以下に挙げられています。
つまり、いきなり新しいウィンドウが開くのはNGで、テキストで「新しいウィンドウが開きます」のように書いて予告しなさいという話です。
これを満たせていないという話ですが、この達成基準は等級AAAなので、「みんなの公共サイト運用モデル」で必須とされる範囲には入りません。
面白いのは、このサイトで読まれている blank.js というスクリプトに以下のようなコメントが書かれているということです。
/* =====================================================
File name :
blank.js
Summary :
target="_blank"を使用せず、class="blank"を指定して別Windowリンクを実現する（Web標準対策）
Last modified :
2012年 2月 23日
===================================================== */
首相官邸のサイトはXHTML1.0 Transitionalなのでtarget属性は使用できますが……。いや、それ以前に、根本的なところで何か大きな勘違いをされているのではないかという気がします。
しかも、このJSを読んでおきながら、HTMLでは平然と target="_blank" を使っています。スクリプト無効でも平然と別タブが開きます。何がしたいのかよく分からないですね。
と、ぱっと目についた問題点を挙げてみましたが、これだけでも明らかにJIS X 8341-3:2010の達成等級AAを満たせていません。ちゃんと試験をすれば、もっとたくさん出てくるでしょう。
「みんなの公共サイト運用モデル」では、2013年度末までに等級A、2014年度末までに等級AAに準拠することが求められています。等級Aへの対応は小規模な改修で済ませられるかもしれませんが、AAへの対応にはビジュアルデザインの見直しも必要で、そんなに簡単ではないでしょう。
つまりこのサイトは、あと2～3年でもう一度リニューアルしなければならないということになります。
長くなったのでまとめますと、こういうことです。
- 首相官邸のサイトがリニューアルしたらしい
- 実際にサイトを見ると、デザインのクオリティが低い上、アクセシビリティにも問題がある
- 「みんなの公共サイト運用モデル」で要求されるアクセシビリティ基準を満たせていないため、2014年度末までにもう一度リニューアルする必要がある
こうなってしまった原因はよく分かりませんが、ビジュアルデザインを見ても、アクセシビリティ面を見ても、きちんとした制作会社が受注しているようには思えません。お金が足りなくて、ちゃんとしたところに発注できなかったという可能性がありそうです。安くあげたつもりなのかもしれませんが、2回リニューアルするよりも、1回でしっかりやった方が結局は安く済むはずで、長い目で見れば無駄遣いになっているのではないでしょうか。
※何をやったのかが不明なので、足りない原因はよく分かりません。そもそも足りなかったのか、予算の配分を誤ったのか……。
- 「首相官邸サイトリニューアル、しかしすぐに再リニューアルが必要」にコメントを書く
- 前(古い): 2012年4月2日(Monday)のえび日記
- 次(新しい): 2012年4月4日(Wednesday)のえび日記
