トップ 最新 追記
RSS feed

ただのにっき


2013-11-01(金) [長年日記]

アクセシビリティキャンプ東京#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イベントに顔出してるのに、そういうところで同僚に出会うことがほとんどない方がどうかしてると思うので、もっとどんどん外に出て、視野を広げるといいんじゃないですかね。自社のガラパゴスっぷりを知るためだけにでも。

Tags: a11y

*1 そもそも料理中は手が離せない、目が離せないなどの状況下にあって一時的にすべての人がハンディキャップを持った状態になるね、という指摘もあった。

*2 と、ここにリストアップしたのは中の人の目に止まることを期待してのことでもある。ご相談はwelcome。


2013-10-31(木) [長年日記]

Evernoteプレミアムを更新した

[スクリーンショット]更新完了画面

昨年docomoにMNPしたとき、同時におまけでEvenoteのプレミアムサービスが付いてきたのでわりと便利に使っていた。といっても1GB/月なんてそうそう使えるものでもないので、月末になるとあまった分にスキャンした本のデータ(だいたい100MB/冊)で埋めていた。

で、そろそろ1年になるから契約が切れるよという案内が来たので、ちょっと悩んで更新した。4000円/年。ほっておけば無料会員に戻るのでどっかの抱合せサービスよりずいぶん良心的です(ぉ)。

実はそうやって入れていった本のデータ、まだ全部Evernoteに入ってないので、全部入れるのにもう1年くらいはかかるだろうという算段だ。というか本は毎月増えてるんだから、来年も同じことを言ってる気がする。最大の問題はEvernoteに入れられるデータのサイズが、1つあたり100MBなので、それを超える本がどうにもならないのだけど。なんとかならんかなぁ、これ。全部画像だからzipしても小さくならないし。倍の200MBになればほぼあらゆる本が入れられるのに。

Tags: evernote

2013-10-26(土) [長年日記]

『劇場版 魔法少女まどか☆マギカ[新編]叛逆の物語』を観てきた

深夜の最速上映会から帰ってきた人たちがなにひとつ話題にしないんですよ。ということは可能な限り早く観ておけってことだよなぁ……で、今夜はかみさんが留守なので、一人でとっとと観てきた。

観てきたんだけど……うん、何を書いてもネタバレになってしまうので、何も書けないね。脚本家の名前というオープンな情報を書くだけでもネタバレになりそうな気がする。ほむほむ。

Tags: movie

トップ 最新 追記
RSS feed