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から報告していただき、「気づいた事」「苦労した点」「議論に上がった事」「作業を通しての感想」等も発表してもらいました。

グループAの答え

レベルA

1. input要素とlabel要素が関連付けられていないので、input要素にidを振りlabel要素にfor属性を追記してその値を同じものにして関連付ける。
2. フォームのところで色だけで情報を伝えている箇所があり、色の判別が出来ないユーザーやスクリーンリーダーを使っているユーザーにはどの項目が必須項目なのか伝わらないので、必須項目のラベルに必須とテキストも追記する。
3. 蝶々が動き続けているままなので、このままだとユーザーがそちらに注意をそらされしまうので、動きを一時停止出来るようにボタンを付けるか動きを止める。

レベルAA

1. フォーカスインジゲータが消されており、キーボードのみの操作ではどこにフォーカスがあたっているのかがわからないので、cssで消しているアウトラインを表示させるよう:focus {outline: none} の記述を削除する。
2. 「新規会員登録(無料)」のボタンの背景色と文字色のコントラスト比が足らないので、文字色を黒に変更するなどしてコントラスト比が3.0:1以上になるよう配色する。(この配色の場合、文字色を黒にしてもコントラスト比が3.0:1以上にならないので、背景色をもっと濃い色等にする。by みるく)

よりアクセシブルに

1. フッタメニューの「SiteMap」だけが大文字と小文字になっているので、表記を他のメニュー(大文字のみ)と合わせないといけない。(合わせた方がいいけれどJIS X 8341-3:2016 達成基準3.2.3には該当しない by 澤田さん)
2. フッターのメニューの英語が全部大文字なので、読み上げに影響するから1文字目だけ大文字にする。(今回の場合は、読み上げに影響しないのでこのままでも良いが、その原語におけるスペリングの規則に従って、適切な形で大文字と小文字を使い分ける。by 澤田さん)
3. 必須のinput要素にrequired属性を記述する。
4. フォームに「パスワードを忘れた方はこちら」などの説明文を付ける。

グループBの答え

レベルA

1. input要素とlabel要素が関連付けられていないので、input要素にidを振りlabel要素にfor属性を追記してその値を同じものにして関連付ける。
2. フォームのところの必須の文章は赤色だけじゃ重要さが伝わらないのて、strong要素でマークアップする。
3. 蝶々が動いている箇所がスマホサイズで見ると蝶々が見出しの文字と重なって読めない文字があるので、重ならないようにCSSを修正する。

レベルAA

1. フォーカスインジゲータが消されており、キーボードのみの操作ではどこにフォーカスがあたっているのかがわからないので、cssで消しているアウトラインを表示させるよう:focus {outline: none} の記述を削除する。
2. 「新規会員登録(無料)」のボタンの背景色と文字色のコントラスト比が足らないので、背景色を変更するなどしてコントラスト比が3.0:1以上になるよう配色する。

よりアクセシブルに

1. フォームのユーザー名のところにも入力時の説明文を付けた方が良い。

感想:グループ作業として時間がないから分担作業にしたが、結果的にそれで勉強になったかが疑問に残った。

グループCの答え

レベルA

1. input要素とlabel要素が関連付けられていないので、input要素にidを振りlabel要素にfor属性を追記してその値を同じものにして関連付ける。
2. フォームのところで色だけで情報を伝えている箇所があり、色の判別が出来ないユーザーやスクリーンリーダーを使っているユーザーにはどの項目が必須項目なのか伝わらないので、必須項目のラベルに必須とテキストも追記する。
3. 蝶々が動き続けているままなので、このままだとユーザーがそちらに注意をそらされしまうので、動きを一時停止出来るようにボタンを付けるか動きを止める。

レベルAA

1. フォーカスインジゲータが消されており、キーボードのみの操作ではどこにフォーカスがあたっているのかがわからないので、cssで消しているアウトラインを表示させるよう:focus {outline: none} の記述を削除する。
2. 「新規会員登録(無料)」のボタンの背景色と文字色のコントラスト比が足らないので、背景色を変更するなどしてコントラスト比が3.0:1以上になるよう配色する。

よりアクセシブルに

1. パスワードの入力時の説明文である「※半角英数6文字以上10文字以内」を「パスワード（必須）」の横または下に配置する。

感想:答え合わせが終わった後、「良いところをついていたなぁ。惜しかったよね。」とグループで話していた。また、問題ページを見て「この部分おかしくないかなぁ」とつぶやいた時に隣でチェックリストの文章を上から順に読んでいた人が「その内容ここに載ってましたよ」と教えてくれ作業分担しながらもうまく連携が取れて答えを導き出せて嬉しかった。

グループDの答え

レベルA

1. input要素とlabel要素が関連付けられていないので、input要素にidを振りlabel要素にfor属性を追記してその値を同じものにして関連付ける。
2. フォームのところで色だけで情報を伝えている箇所があり、色の判別が出来ないユーザーやスクリーンリーダーを使っているユーザーにはどの項目が必須項目なのか伝わらないので、必須項目のラベルに必須とテキストも追記する。
3. 蝶々が動き続けているままなので、このままだとユーザーがそちらに注意をそらされしまうので、動きを一時停止出来るようにボタンを付けるか動きを止める。
4. フォームのユーザー名とパスワードを空欄にして「ログイン」ボタンを押しても(必須項目が入力されていないのに)エラー表示が出ない(JIS X 8341-3:2016 達成等級はレベルAの達成基準3.3.1に該当する)けど、今回はそこまで作成されていないのだろう。(はいそうです。必須項目が空欄であればエラー表示がされると仮定してください。by みるく)

レベルAA

1. フォーカスインジゲータが消されており、キーボードのみの操作ではどこにフォーカスがあたっているのかがわからないので、cssで消しているアウトラインを表示させるよう:focus {outline: none} の記述を削除する。
2. 「新規会員登録(無料)」のボタンの背景色と文字色のコントラスト比が足らないので、背景色を変更するなどしてコントラスト比が3.0:1以上になるよう配色する。

よりアクセシブルに

1. 画面幅を狭めた時、What's New のテキストリンクが背景色の一部の箇所と文字色のコントラスト比が微妙に足らない感じになる(白内障のかたが見にくい)ので、フォームの箇所のように後ろに白背景を引くなどする。

意見:What's New のテキストは、「文字の線が細くて読みにくい」という意見が出た。コントラスト比と関係あると思うが、補足するなら背景画像との影響があるので文字が太い方が良い。

この間違いさがしの説明から答えまでをまとめた私の資料はこちらになります。

グループ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 アクセシビリティ勉強会 2016 に参加しました

• D2D アクセシビリティ勉強会2016を開催して感じたこと。

まとめ

勉強会の締めに、このD2Dで「アクセシビリティを勉強したい！」といの一番に手を上げてくれた主催者の1人の@yotigoryさんが「実務でもJIS X 8341-3:2016のレベルAAに準拠しなければいけない案件が入ってきています。それも大企業の案件です。これは、東京オリンピックが開催される事が影響していると思います。大企業が率先してサイトをアクセシブルにしていけば、これからアクセシブルにサイト構築しなければいけない機会が増えていくでしょう。皆さん、一緒にアクセシビリティについて勉強をして、1つでも多くアクセシブルなサイトを作りましょう。(みるくの意訳も若干入ってます)」と熱く語ってくれました。横で聞いてた私もびっくりの熱弁にこちらまで心が熱くなりました。アクセシビリティのキーワードで出てくるいつもと同じ人が語るのとまた違い、皆さんの心に届きやすかったんじゃないかなぁと思ってます。

また、参加者のかたから「シリーズものの勉強会の時に使ったJISのチェック表、実務で使わせてもらったんですよ！」と嬉しい報告もいただき、少しでもアクセシブルなサイトが増える様にという思いは細くても繋がっているんじゃないかなぁと感じました。

最後になりましたが、今回の勉強会を開催するにあたりご協力いただいた皆様、本当にありがとうございました。そして、無事に勉強会を終える事が出来たのも参加者の皆さんをはじめD2Dグループに関わっている皆さんのお蔭だと感謝しています。ありがとうございました。