ただのにっき

■ アクセシビリティキャンプ東京#8でクックパッドのアクセシビリティチェックをした

アクセシビリティキャンプ東京も8回目。引き続き運営スタッフとして企画から参加。最近定着した、テーマ設定を一人に任せてリレーする方式は適度にバリエーションがあっていい感じになりつつあるね。

今回は久しぶりにWebに戻って、W3CのEasy Checks - A First Review of Web Accessibilityを使って簡易アクセシビリティチェックをしてみようという趣旨。背景にはJIS X 8341-3:2010 (WCAG 2.0)は網羅的だけど大きくて複雑だし、あれを使ってチェックするのは相当大変というのがあって、W3Cが「最低これだけはやってみて」という意図で作ったEasy Checksなら(英語だけど)初心者にもなんとかできるんじゃないのという流れ。日本語版があるとさらにいいんですけどね(チラッ

こういうワークショップ形式の場合、ネタにするサイトに悩む。たいていは当たり障りのない官公庁あたりのサイトになるんだけど、今回は使ったことのある人も多い民間のサイトにしようということで、勝手ながらクックパッドをとりあげた。というのも(御存知のとおり)クックパッドは理念として「毎日の料理を楽しみにすることで、心からの笑顔を増やす」を掲げていて、しかも事業戦略には『私達は、「全世帯の方々がクックパッドを見て献立を決め、買う食材を決める」そのような状態を、一日も早く、当たり前のものとしたいと考えています』とある。「全世帯」にはもちろんハンディキャップを持った人たちも含まれているはずなので*1、ぜひともアクセシビリティに配慮して欲しいサイトだからだ。

さて、数名ずつのグループに分かれて別室で実際のWebブラウザを操作しながらのチェック開始。対象はトップページとID登録ページ。おれもチューターの一人になったんだけど、予習が足らなくてけっこうバタバタしてしまって同室のベテラン陣にお世話になってしまった。ゴメンナサイ。でも3人の初心者にはちゃんと理解してもらえたかなー(と思う)。ちなみに今回使った環境はWeb Developer拡張を入れたFirefoxと、カラー・コントラスト・アナライザーという簡素なもの。

さてチェックの結果はこんな感じ。とりあえず情報にアクセスできるかという観点で致命的なものはないと言っても良いと思う。ただし、要改善点は多い。

• Page title - 申し分なし
• Image text alternatives ("alt text") - 一番ツッコミが多かったのはここ
  • alt属性が「ない」 →装飾画像ならaltを空文字に(alt="")
  • alt属性が「不適切」 →ユーザID(?)や画像のID(?)とおぼしき謎の文字列が入っている。あと「arrow」とか
  • alt属性が「余分」 →同じリンク内に同一のテキストがある場合はaltは空に
• Headings - おおむね問題なし
  • でもトップページにh1がないのはどうかなーという指摘は多かった
• Contrast ratio ("color contrast") - ここもツッコミ多し
  • オレンジやグリーンの背景に白文字(またはその逆)の場合にコントラストが足らないことが多い(よりによってh2要素とか)
  • 白背景上のグレーの文字もけっこうヤバい
• Zoom - 一部問題あり
  • 文字のみ200%にするとブロックから溢れて他の要素と重なる/隠れる要素が散見される
• Keyboard access and visual focus - おおむね問題なし
  • TABで飛べないクリッカブル要素がある(フォームのヘルプとか)
  • 直感的でないTABインデックスがある(検索フォーム)
• Forms
  • ラベルのついていない入力要素がある (パスワード確認とか)
• Multimedia (video, audio) alternatives - 対象要素なし
• Plain Content View - 問題なし

大部屋に残ったマニアック部門の人たちはもっといろんなツッコミをしていたようだけど、これらのポイントを改善するだけでかなり違ってくるはず。より多くの人たちが料理を楽しめるようになるといいですね*2。

そういえば今回は、去年までいた部署から元部下が数人、急に参加してきて焦った(笑)。でもまぁ、こっちはこんなにあちこちのITイベントに顔出してるのに、そういうところで同僚に出会うことがほとんどない方がどうかしてると思うので、もっとどんどん外に出て、視野を広げるといいんじゃないですかね。自社のガラパゴスっぷりを知るためだけにでも。