第6回 D2D アクセシビリティ勉強会でアクセシブルなフォームを作成!

2015年6月21日日曜日の13時30分から開催された第6回 D2D アクセシビリティ勉強会 ~アクセシブルなフォームのマークアップ~ で、私は勉強する内容の説明と進行を務めました。

今回は「複雑なフォームでもアクセシブルにマークアップ出来る様になる」が目標です!

D2Dサイトのデザインのフォーム部分をマークアップ

3つのグループ(1グループ4人)に分かれD2Dサイトのデザインのフォーム部分の「お問合せ」から「確認画面へ」までを1ページと想定し下記の条件でマークアップしてもらいました。

写真:もくもくと作業をする皆さんの様子

完成したものを発表(D2Dサイトのお問合せフォーム)

まずHTMLのプレビュー表示をしていただきデザインと相違ないか見せていただき、その後ソースコードを見せていただきながらマークアップの説明を簡単にしていただき、「気づいた点」「苦労した点」「作業を通しての感想」等を発表してもらいました。

尚、発表してもらった内容で「アクセシビリティ的にここは違いますよ」という点は、随時@SawadaStdDesignさんと私が指摘及び説明をしています。

グループAのマークアップ
グループBのマークアップ
グループCのマークアップ

D2Dサイトのお問合せフォームのアクセシブルなマークアップ例を紹介

私がマークアップしたものを@SawadaStdDesignさんに確認してもらい作成したアクセシブルなマークアップ例を見ていただきながら@SawadaStdDesignさんにマークアップの説明をしていただきました。

アクセシブルなフォームについての説明

@SawadaStdDesignさんからアクセシブルなフォーム作成について説明をしていただきました。 説明時に使用された@SawadaStdDesignさんの資料第6回 D2D アクセシビリティ勉強会資料「アクセシブルな入力フォームを作ろう」です。

写真:アクセシブルなフォームの説明をされている@SawadaStdDesignさん
皆さん、写メやメモを取りながら@SawadaStdDesignさんの話を真剣に聞かれてました。

意地悪問題に挑戦

今度は、私が作成した意地悪問題に挑戦していただきました。

意地悪問題のデザインを元に下記の条件でマークアップしてもらいました。

完成したものを発表(意地悪問題のフォーム)

どのグループも時間を延長してもまだ時間が足りなかったので、フォームのHTMLを最優先にマークアップしてもらったのですが、@SawadaStdDesignさんからの説明を皆さんしっかり聞いていただいていたのがよくわかる結果になりました。

グループAのマークアップ
グループBのマークアップ
グループCのマークアップ

意地悪問題のアクセシブルなマークアップ例を紹介

意地悪問題も私がマークアップしたものを@SawadaStdDesignさんに確認してもらい作成したアクセシブルなマークアップ例を見ていただきながら@SawadaStdDesignさんにマークアップの説明をしていただきました。

まとめ

かなり早めから@SawadaStdDesignさんと勉強会の内容に関する長時間の打ち合わせをし、その後何度もメールで「あーでもない、こーでもない」と検証作業をしながら試行錯誤し、21日の0時までメールのやり取りをし準備万端で臨んだのですが、大幅に時間をオーバーする結果となってしまい申し訳なく思ってます。
作業時間はもとよりフォームのマークアップについて議論する時間をもっと持ってもらえるように考える必要があったと反省しています。

そんな状況下でも参加者の皆さんが「時間を延長しても仕上げる!」という気持ちで課題に取り組んでいただいた事を嬉しく思うと共に感動すら覚えました。参加者の皆さんの勉強意欲がバシバシと伝わってくる勉強会でした。

また、今回実際にD2Dサイトのデザインのフォーム部分と意地悪問題をマークアップしてみて、デザインの段階でアクセシブルにしておく事がどれだけ大事かを皆さんに実感して分かっていただけたと思います。

このアクセシビリティ勉強会がシリーズ化になってて良かったなぁと感じるのは、初めて来られたかたがリピーターになってくださる事です。
どうしても1回の勉強会で1つのテーマに絞らなければいけないので、こうして続けて参加していただけるとトータルでWebアクセシビリティのスキルを身に付ける事が出来るので、勉強会として良い感じになってるんじゃないかなぁと思います。
その上、参加者の皆さんのほとんどが「アクセシビリティを初めて勉強する」もしくは「今までアクセシビリティに興味がなかった」というかた達なので、アクセシビリティを広める上でも非常に嬉しい事だと思ってます。

今回の勉強会でツイートされたものをまとめた第6回 D2D アクセシビリティ勉強会 には実況的ツイートをしてもらっているので是非チェックしてください。

次回の内容について

次回いよいよ最終回となるこのアクセシビリティ勉強会シリーズですが、次回はD2Dサイトのデザインを元にHTMLコーディングします。8月の末か9月の上旬開催予定ですので、皆さん是非ご参加ください。

コメント (0件)


White Stage
https://white-stage.com/article.php/d2daccessibility6nd