本文へ


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

  • 2015年June26日(Fri) 14:05 JST

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

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

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

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

  • 自由にマークアップして良い。
  • よりアクセシブルにする為にデザインを変更しても良い。(変更した場合は発表時に報告する。)
  • 対応ブラウザは、Windows - Internet Explorer,Firefox,chromeの最新版及びMac - Safari,Firefox,chromeの最新版。
  • 使われるであろう画像素材は用意してあるのでそちらを使う。
  • 余裕があればマルチデバイス対応及び文字サイズのみ拡大時を考慮する。

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

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

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

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

グループAのマークアップ
  • 回線がなかなか繋がらなかったので作業時間が少ししか取れなかった。
  • Bootstrapを使った。
  • Bootstrapの記述を修正する時間がなく、label要素と入力フィールドを関連付けられなかった。
  • 必須項目はaria-required属性を入れた。
  • button要素は最後に慌てて付けたのでがテキストが「送信」のままになってしまっている。
  • 必要性を感じWAI-ARIAについて使い方を調べたけれど時間がなく、aria-required属性だけしか調べられなかったので、事前調査してくれば良かったと思った。(今日調べられなかった事は家に帰ってからゆっくり調べる。)
  • フレームワークを使えばある程度早く仕上げられるけれど、(FoundationやBootstrapにはドキュメントページにアクセシビリティのセクションがある)やはりそのままではアクセシビリティが低くHTMLの修正が必要だった。
グループBのマークアップ
  • CSSは出来る所まで対応した。
  • 入力フィールドの幅が長いままなのでどうにかしないといけない。(CSSで幅の設定をしよう。)
  • idやtabindex属性の値は修正が必要だけど修正する時間がなかった。
  • tabindex属性とfieldset要素は、テンプレートに入っていたのでそのまま残っている。
グループCのマークアップ
  • CSSまで作成する時間がなかった。
  • form要素の中をfieldset要素で囲んだ。
  • 必須項目にはrequired属性を入れた。
  • 必須ではないものには「任意」を入れた。
  • ラジオボタンはスマートフォンではタップし辛いんじゃないかという意見が出たのでselsct要素に変更した。
  • スタイルを当てる時にdiv要素で囲っていた方が便利だという事から結果的にlabel要素とinput要素をそれぞれdiv要素で囲ったけれど 、label要素とinput要素は一緒にしている方が良い派とそれぞれをdiv要素で囲う派に意見が分かれ議論になった。
  • スタイルを当てない場合にはlabel要素の後にbr要素を入れないといけないけれど、入れたくないという意見があったのでdiv要素で囲った。
  • div要素のclass名が同一名になっているのは、class名を分ける時間がなかったから。
  • placeholder属性を入れたのはその方が入力時にユーザーに分かりやすいと思ったから。

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

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

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

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

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

意地悪問題に挑戦

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

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

  • デザイン通りマークアップする。
  • メールアドレスの入力フィールドにある赤いビックリマークアイコンが付いた赤い文字の「メールアドレスは半角 6文字以上で入力してください。」はエラー表示。
  • 対応ブラウザは、Windows - Internet Explorer,Firefox,chromeの最新版及びMac - Safari,Firefox,chromeの最新版。
  • 使われるであろう画像素材は用意してあるのでそちらを使う。
  • 余裕があればマルチデバイス対応及び文字サイズのみ拡大時を考慮する。

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

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

グループAのマークアップ
  • Bootstrapを使った。
  • 検索フォームのラベル部分はCSSでテキストを視覚的に見えないようにした。
  • メインのフォーム部分は、section要素を使い「住所」等見出しをheader要素で囲った。
  • 氏名(ふりがな)の箇所は、説明文とinput要素をaria-describedbyで関連付けたが、aria-describedby属性の値に2つ入れていいか把握できていなかったので、氏名(ふりがな)との関連付けが出来なかった。
    (仕様ではaria-describedby属性の値は2つ入れても構わない。by @HissyNCさん)
    【NVDA,Vice Over,TalkBackは2つの値に関連付けられたものを2つとも読み上げます。詳しくはaria-labelledby属性とaria-describedby属性を4種スクリーンリーダーで読み上げた検証結果をご覧ください。】
  • 必須項目はaria-required属性を入れた。
  • 進行と段取り関係に苦労した。
グループBのマークアップ
  • CSSまで作成する時間がなかった。
  • 検索フォームは、placeholder属性だけじゃだめという話が合ったのでtitle属性も入れた。
  • 検索ボタンは、button要素にして中に画像入れた方が良かった。
  • 「※は必須項目です」をaria-hidden="true"にして読み上げる必要なしにし、フォームに入っている※にはtitle属性を使い必須頃目と読み上げさせるようにした。
  • 必須項目にはaria-required属性を入れた。
  • 電話番号は、title属性に何を入力するかを入れ、aria-describedby属性を使って電話番号(ラベル)と関連付けた。
  • メールアドレスは、input要素にフォーカスが当たった時に 説明文を読み上げるようにaria-describedby属性を入れ、ラベルとの関連付けはaria-labelledby属性を使った。
    【NVDA,Vice Over,TalkBackは、aria-describedby属性と関連付けられたものとaria-labelledby属性と関連付けられたものどちらも読み上げます。詳しくはaria-labelledby属性とaria-describedby属性を4種スクリーンリーダーで読み上げた検証結果をご覧ください。】
  • デザインではエラー表示は1つだけれど、複数ある場合tab-index属性の値をどう付ければよいか悩み、結果tab-index属性は付けなかった。(tab-index属性の値は、ユニークである必要はない。同じ値があれば上から順にフォーカスする。by @SawadaStdDesignさん)
  • 利用規約とポリシーにはフォーム的にリンクを付けなければいけないので、デザインではリンクっぽくなっていなかったがちゃんとリンクを付けた。
グループCのマークアップ
  • 検索フォームのラベル部分は input要素のtype="submit" が使いたかったので背景画像を使ってボタンにしたけれどテキストがチラッとみえてしまったので、やっぱりbutton要素の方が良かったと思った。
  • 定義リストで組んだ。
  • 必須項目はaria-required属性を入れた。
  • 氏名は、説明文とinput要素をaria-describedby属性で関連付けたが、氏名(ふりがな)(ラベル)との関連付けが出来なかった。
  • 性別の箇所は、これで合っているのか?(input要素をlabel要素で囲もう。)
  • 電話番号の箇所は、title属性に入れる適切な文言がわからなかった。
  • 文字サイズのみ拡大時を考慮した。

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

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

まとめ

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

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

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

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

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

次回の内容について

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