2016年9月22日秋分の日の13時30分から開催されたD2D アクセシビリティ勉強会 2016で、いつものように私は司会進行と説明を務めました。
今回のD2Dアクセシビリティ勉強会は、単発スペシャルバージョン2016という事もあり、ゲストのかたをお招きして盛りだくさんの内容での開催となりました。
この勉強会のトップバッターとしてゲストのサイボウズ株式会社の小林(@sukoyakarizumu)さんに「どうしてアクセシビリティをやるのか」についてお話しいただきました。前半は企業のアクセシビリティポリシーを紹介しながら良いポリシーとは何かについて参加者のかたに問いかけながらお話しいただき、後半はポリシーをチームメンバーにどのように理解してもらい広めていくのかについて小林さんの実体験を基にお話しいただきました。小林さんのお話しは聴衆を取り込んでいかれる感じで、参加者の皆さんも頷きながら聞かれており会場が一体になるような感覚を覚えました。
実例を示し理解しやすい説明をされている小林さん。
小林さんの資料「Webアクセシビリティポリシーのつくりかた・ひろめかた」はこちらをご覧ください。
澤田(@SawadaStdDesign)さんからはJIS X 8341-3:2010から2016に改定されてどこが変わったのか?また、JISのチェックを行う時のポイントについて説明をしていただきました。JISの変更点の話を聞き参加者の多くのかたが「えっ!そんなに変わってたの?本当に?知らなかった。」と口にされていたので、今回澤田さんのお話しを聞いていただいた事でちゃんと変更点を理解していただけたんじゃないかと思います。
中盤、澤田さんが「WCAG2.0を初めて聞くかたいらっしゃいますか?」と聞かれた時、思いのほか多くのかたから手が上がりかなり驚きました。今回は、JISのお話しをメインに行いますよという事を前面に出して告知していたのでアクセシビリティの勉強はしているというかたがほとんどだと想定していたのですが、「WCAG2.0」を初めて聞いたかたが3分の1もいらっしゃるとは思わなかった私は、「澤田さんがここでその事を聞いてくれて良かった。この後もそれを頭に入れて進行&説明しなきゃ」と自分の中にあった説明方法などの修正を頭の中で行いながら、まだこんなにもアクセシビリティって知らないけど勉強してみようと思って参加してくださる方々がいるんだとうしれく思うと共に「浸透した」というにはまだまだなんだなぁと思いました。
後半のお話しは、私が間違いさがしにどうしてもデザインの要素を入れたいからとD2Dアクセシビリティ勉強会ではやった事のなかったレベルAAを入れたので、その説明をしていただきました。
この時点で時間が30分押していたので、後半の説明を早口でと私が澤田さんに無理なお願いしておきながらも「初めてやるレベルAAの話なのに大丈夫かなぁ。」と心配しながら皆さんの様子を見ていたのですが、少し疲れながらも真剣にメモを取りながら澤田さんの話を「なるほど」という感じで聞かれてたので「大丈夫そうだなぁ」とホッとしました。みなさんが澤田さんのお話をちゃんと聞かれていたかどうかはこの後の間違いさがしの答え合わせを見ていただければわかるように嬉しい結果が出ています。これも澤田さんが夜なべして作成された資料と説明が分かりやすかったからだと思います。
いつも以上に熱弁をふるう澤田さん。
澤田さんの資料「JIS X 8341-3:2010から2016への変更点おさらい/Webアクセシビリティチェックのポイント」はこちらをご覧ください。
4グループに分かれて私が作成したページ(問題)の間違いさがしを行っていただきました。間違いとはアクセシブルではない箇所(JIS X 8341-3:2016で不適合になる箇所)になり、作業内容は問題ページの中からアクセシブルではないところを見つけ、その箇所がなぜアクセシブルではないのかという理由、またどうすればアクセシブルに出来るかという修正方法を見つけ出してもらうという3項目です。間違い箇所は、レベルA3箇所、レベルAA2個所、よりアセシブルに出来る箇所1箇所です。この勉強会は、レベルAの設定で行っているのでレベルAの3個所すべて正解であれば合格になります。問題ページはこちらで、澤田さんが作成してくださったチェックリストを使って作業開始です。
チームリーダーには私の問題の出し方を熟知されているこの勉強会の常連さんになってもらったこともあり、「ここは怪しいけどひっかけ問題になってるかも」と疑わしい箇所も慎重に審議しながらグループ内での作業を進められてました。
作業中「この動き続けていり状態の箇所は確かだめだったはず!動いている物にはユーザーが止められるように停止ボタンを付けなきゃいけないですよ。」と参加者のかたがグループの人達に意見するなど、D2Dで勉強した事がちゃんと身に付いていると思う場面が多々あり、澤田さんと二人で「この勉強やってて良かったですね」と小さくガッツポーズしてました。
チームでディスカッションしながら真剣に問題に取り組む参加者の皆さん。
初めはグループごとに進歩の差があったものの、後半はどのグループも同じ作業スピードになりほぼ時間内に作業を終える事が出来ました。
間違い箇所を見つけられなかった箇所が多いグループから発表してもらおうと思ったのですが、どのグループも全部見つけたというすばらしい結果でしたので、グループAから順番に発表していただきました。
発表内容は、見つけた間違い箇所とその理由と修正方法をレベルAから報告していただき、「気づいた事」「苦労した点」「議論に上がった事」「作業を通しての感想」等も発表してもらいました。
:focus {outline: none}
の記述を削除する。:focus {outline: none}
の記述を削除する。:focus {outline: none}
の記述を削除する。:focus {outline: none}
の記述を削除する。この間違いさがしの説明から答えまでをまとめた私の資料はこちらになります。
グループBのレベルAの答えの2番目の修正方法については、strong要素を使って強調するという方法も1つではありますが、それだけでは「必須」だという情報が伝わらないので違ったという事と、同じくグループBのレベルAの答えの3番目「スマホサイズで蝶々が文字に重なってしまう」というのは、iPhone 6s Plusなどの画面サイズで蝶々が文字と重なり文字が見えなくなっているので(主要な画面サイズで文字が読めないほど重なっていない事は確認していたのですが、私の作りが適切ではなかった)、200%拡大時ではないのでJIS X 8341-3:2016 達成等級はレベルAAの達成基準1.4.4(F69: 達成基準 1.4.4 の不適合事例)に該当しないものの、それ以前の問題なのでこちらも正解になります。という事で上記を見ていただければわかるようにグループBの色に依存している箇所の修正方法と5秒以上動き続ける蝶々の箇所のアクセシブルではない理由と修正方法は正解ながらもレベルAの正解ではかったという事を除くと、どのグループもレベルA、レベルAAとも全問正解でした!これは、皆さんがちゃんと澤田さんのお話を聞き理解されていたい結果だと思います。「よりアクセシブルに」については、どのグループもユーザビリティの範囲になる答えが主でしたが、そのように修正した方が良いという内容ばかりでした。そして、私が用意した正解ではなかっただけでグループCの"パスワードの入力時の説明文である「※半角英数6文字以上10文字以内」を「パスワード(必須)」の横または下に配置する"という答えも達成基準3.3.2 G184に該当し正解になり(ただ、今回はデザインを変えないでアクセシブルにするにはどうするか考えていただきWAI-ARIAを使う方法を導き出してもらう事を目的にしてました。)、グループAの"必須のinput要素にrequired属性を記述する。"という答えも正解になるので、グループAとグループCは全問正解とすばらしい結果になりました。
今回の勉強会でツイートされたものをまとめたD2D アクセシビリティ勉強会 2016のまとめ もご覧ください。
勉強会の締めに、このD2Dで「アクセシビリティを勉強したい!」といの一番に手を上げてくれた主催者の1人の@yotigoryさんが「実務でもJIS X 8341-3:2016のレベルAAに準拠しなければいけない案件が入ってきています。それも大企業の案件です。これは、東京オリンピックが開催される事が影響していると思います。大企業が率先してサイトをアクセシブルにしていけば、これからアクセシブルにサイト構築しなければいけない機会が増えていくでしょう。皆さん、一緒にアクセシビリティについて勉強をして、1つでも多くアクセシブルなサイトを作りましょう。(みるくの意訳も若干入ってます)」と熱く語ってくれました。横で聞いてた私もびっくりの熱弁にこちらまで心が熱くなりました。アクセシビリティのキーワードで出てくるいつもと同じ人が語るのとまた違い、皆さんの心に届きやすかったんじゃないかなぁと思ってます。
また、参加者のかたから「シリーズものの勉強会の時に使ったJISのチェック表、実務で使わせてもらったんですよ!」と嬉しい報告もいただき、少しでもアクセシブルなサイトが増える様にという思いは細くても繋がっているんじゃないかなぁと感じました。
最後になりましたが、今回の勉強会を開催するにあたりご協力いただいた皆様、本当にありがとうございました。そして、無事に勉強会を終える事が出来たのも参加者の皆さんをはじめD2Dグループに関わっている皆さんのお蔭だと感謝しています。ありがとうございました。
コメント (0件)