2014年2月22日日曜日の13時30分から開催された第4回 D2D アクセシビリティ勉強会 で、また勉強する内容の説明と進行を担当しました。今回のメインは、アクセシブルなプルダウンメニューとカルーセルを作成するという事でした。

まず、@SawadaStdDesignさんからアクセシブルなプルダウンメニューとカルーセルを作成するにあたり注意点等説明していただきました。 説明時に使用された@SawadaStdDesignさんの資料です。

グループに分かれてアクセシブルなプルダウンメニュー又はカルーセルを作成

JavaScriptが書ける3名のかたをリーダーとして参加者の皆さん(私と@SawadaStdDesignさんを含む)に3グループに分かれてもらい(1グループ4名)、 多数決でプルダウンメニューを作成するかカルーセルを作成するを決めました。

グループAは、カルーセルでグループBとCはプルダウンメニューを作成することに決まり早速作業に取り掛かりました。 作業時間は2時間だったので時間内に作成出来るだろうと思っていたのですがそううまくはいきませんでした。

作業開始前に「黙々と作業せず皆さんで意見を交わしながら作業してくださいね」と伝えたのですが、作業に入ると皆さん黙々と作業をされており この勉強会始まって以来の静けさを感じたので再度「皆さん黙々と作業しすぎですよ。もっと意見を交わし合いながら作業してくださいね」と声をかけたのですが、 状況変わらずで皆さん作業に集中されてました。この状況は、@SawadaStdDesignさんの説明がとても分かりやすかったという事とアクセシビリティの勉強会をシリーズ化している事で 皆さんアクセシブルにするにはどうすればいいか、またどんなところに気を付ければいいかという知識を身に付けられているからだと思いました。

私はグループCに入り@kanetei さんと一緒にCSSを担当し(私は横から口を出しているだけでしたが(汗))、HTMLは@yotigory さん、 JavaScriptは、@twit_natasha さんが担当されました。

初め、動きはJavaScriptでいこうとしていたのですが間に合いそうになかったのでJavaScriptなしのCSSメインで作る事にしたのですが、JavaScriptをオフにした時に下層メニューが表示されなかったので、 あわててJavaScriptでリスト部分にclassを付けるよう設定してなんとか発表までに作成完了する事が出来ました。

JavaScriptを担当した@twit_natashaさんは、JavaScriptを書くのに参考にしようと"アクセシブルなプルダウンメニュー"で検索されたところ、 アクセシブルを謳ってるメガメニューのプルダウンに出くわしたのでこれをアクセシブルに改変する事を試みられたのですが、これまた時間が足りずキーボード操作では下層メニューが表示されなかった物を アラートが出る様にするまでで(下層メニューが出る箇所にフォーカスしても何もアクションしなかったのもをアクションを起こすようにした)終わってしまいました。

どのグループも時間が足りない状態で休憩時間を返上して発表するギリギリまで作業されており、思っていた以上に大変な作業になりました。

グループ発表で情報を共有

1グループ15分間で作成したものがどれくらいアクセシブルかという事とどのように作成したか等発表してもらいました。

グループAの発表内容

カルーセル作成

• プラグインのslickを利用した。
• JavaScriptとCSSオフ時も情報が得られるようになっている。
• オートプレイがキーボードで止められなかった。(もうちょっとで実装できるところまで1時間鼻血を出しながらがんばった)
• Dropboxを利用して作業した。(成果物を公開するのに私がjsdo.itに移動)

グル－プAが作成したカルーセルはこちら

グループBの発表内容

プルダウンメニュー作成

• いちから作成した。
• キーボード操作はちゃんと出来るけれどマウスアウトで下層メニューが出たままになってしまう。
• 今後の事を考慮し、ここがナビゲーションだとわかるようにrole属性を付けた。
• 配布されている中ではSuperfishがよさげだった。
• Create a new fiddle - JSFiddleを利用して作業した。

グル－プBが作成したプルダウンメニューはこちら

グル－プCの発表内容

プルダウンメニュー作成

• 3階層までの物をいちから作成した。
• Tabキーで操作可能。(勉強会終了後Firefox35.0.1ではキーボード操作で下層メニューにフォーカスしない事が判明)
• JavaScriptとCSSオフ時も情報が得られるようになっている。
• role="navigation"だけは付けた。
• テキストを共有出来るサービス Pastebin.comを利用して作業した。(1週間でデータが消えるので私がjsdo.itに移動)

グル－プCが作成したプルダウンメニューはこちら

今回の勉強会でツイートされたものをこの勉強会に興味を持っていただいた@teruichi81 さんがまとめてくださいました。第4回 D2D アクセシビリティ勉強会 まとめ #d2draft
「@SawadaStdDesign さん今日はいやにスマホばかりいじってるなぁ。何か連絡事が多いのかなぁ。」なんて思っていたら実況していただいてました。(汗) 勉強会の流れが良くわかるのでチェックしてください。

総括で大事な話だけれど残念なお知らせをしました。

まず私が「今回の勉強会の内容になっているプルダウンメニューとカルーセルはアクセシビリティ的にも避けるものです。」と伝え、かなり古い例ですがテーブルレイアウトを例に出して少し説明した後、 @SawadaStdDesignさんからじっくり理由を説明していただきました。 資料はこちら

参加者の皆さんは私の第一声で「えー！」と言われただけで、思っていたほどの残念さはなく、@SawadaStdDesignさんの話を真剣且つ納得しながら聞かれていました。 参加者の皆さんから反論も出ず無事に大事で残念な話を出来たのは、ひとえに@SawadaStdDesignさんの解りやすく丁寧な説明のお蔭だと思いました。

まとめ

今回の内容が避けるべきものを作成するという事が解っていながら内容を変更せずにいたのは、グループの中で実際に手を動かし作業する事によって、今まで気づけなかった事に気づけたり、他の動的な物に応用できる事を見つけたり出来るだろうと思ったからです。やって無駄な作業は決行しません。 また、実際実務では避ける事が出来ず作成しなければいけない事が多々あります。その時に今回勉強した事を役立ててアクセシブルな物を作っていただきたい！という想いで 今回の勉強内容を決めました。

今回は、時間管理を徹底したので最後少し時間があまるくらいの進行が出来ました。この点に関しては、前回の反省を生かせたんじゃないかなぁと思ってます。

ですが、私自身 時間管理と進行に追われてグループで作業している時、最後記述したもののアクセシビリティチェックをする事が出来きずに終わってしまった事が悔やまれてなりません。 作業時慌てずにもっと冷静になっていなければいけなかったと反省しています。この反省を次回に生かせるよう頑張りたいと思います。

次回の内容について

前回、今回のようにD2Dの勉強会ではグループで作業して発表するのがメインになっているので作業時GitHubを使うのが良いと考え3月にGitHubの勉強会を開催する事になりました。アクセシビリティの勉強会でも次回からGitHubを使って作業するので是非皆さんGitHubの勉強会に参加下さい。

そして、終盤に入ってきたこのアクセシビリティ勉強会シリーズ、次回はアクセシブルなD2Dのサイトを作成すべくサイトのデザインを作成する予定です。D2Dでは初めてのデザインの勉強会です。新たな発見等あるんじゃないかと思うと今から楽しみです。

追伸：altの大切さを忘れないようアクセシビリィ業界では知らない人がいないこの歌「アクセシビリティ・ブルース ? お前の alt に首ったけ ? 」(注意：リンク先は動画になり音が出ます)を勉強会開始直後にみんなで歌いますので皆さん練習してきてくださいね(笑)