D2D アクセシビリティ勉強会 2018年・夏を開催しました。
- 2018/07/03 14:01 JST
2018年7月1日日曜日にD2D アクセシビリティ勉強会 2018年・夏を開催しました。
Bootstrap 4 から読み解くアクセシブルかつレスポンシブなコーディング
まず、菱川さんより「Bootstrap 4 から読み解くアクセシブルかつレスポンシブなコーディング」についてお話しいただきながら、合間合間に澤田さんと私で解説を入れさせていただきました。私は主にWAI-ARIAの記述を入れるとスクリーンリーダーがどのように読み上げるのか説明させていただきました。
澤田さんは、解説にもちゃんと資料を用意され初心者の方にもわかりやすい説明をされていたので、参加者の皆さんもメモを取りながら熱心に話を聞かれてました。
スマホで手軽に読み上げ機能を試してみよう！
参加者のみなさんがお持ちのスマホのスクリーンリーダー(Voice Over或いはAndroid Accessibility Suite（旧 TalkBack）)を使って実際に読み上げ体験をしていただきました。
全員がWeb製作者の方だったので、ご自身が作成されたページを読み上げていただき、時間が余った方はヤフーのトップページの読み上げも聞いていただきました。
澤田さん作成の「VoiceOverとTalkBackの簡単マニュアル」(PDF版)
スマホでスクリーンリーダーの操作をしている参加者の皆さんの様子
スマホのスクリーンリーダーを使ってみた感想と質問
- Yahooのニュースを読もうと思ったら目的の情報までなかなかたどり着かなかった。
- 画像メインのサイトで、画像はCSSで背景画像にし画像の説明文は表示されないようCSSで
display="none"と設定していたが、読み上げを聞いてCSSでdisplay="none"に設定すると画像の説明文が読み上げられないという事がわかった。 - 「・・・」は「なかぐろてん」と3回読み上げられるのでわかりにくいと思った。
- 解説:「なかぐろてん」で理解できるので大丈夫です
- デザイナーの方が日付を「2018.7.1」と表記するので「2018てん7てん1」と読み上げられてしまいわかりにくいので「2018年7月1日」に修正したかった。
- 解説:読み上げが「2018てん7てん1」でも日付だと理解できるのでそのままでも大丈夫です。
- ヤフーニュースで「W杯」を「だぶりゅーさかずき」と読み上げた。これでは何の事かわからないのでスクリーンリーダー用に「ワールドカップ」と記述を入れたら良いと思った。
- 解説:「だぶりゅーさかずき」でもサッカーのワールドカップの事だと理解できるので、スクリーンリーダー用の記述は不要です。
- VoiceOverの読み上げで順序付きリストの数字と文章の読み上げが別れる。続けて読み上げさせるためにはli要素の中に数字を入れたら良いのか？
- 解説:li要素に数字を入れると2度読みになるので修正は不要です。続けて読み上げるかどうかはスクリーンリーダーの解釈の違いです。NVDAは数字と文章を続けて読み上げます。(PC-Talker7は数字を読み上げません)
今回の勉強会でツイートされたものをまとめたD2D アクセシビリティ勉強会 2018年・夏 ツイートまとめ #d2draft #a11yもご覧ください。
便利なアクセシビリティのチェックツールの紹介
時間の関係上、澤田さんと私で1つずつ紹介させていただきました。
澤田さんが紹介されたのは「Web Developer」で、私が紹介したのは「WAVE」でした。まだ使ってない方は便利なので一度使ってみてください。
まとめ
今回は、初めてのお子様連れOKの勉強会でしたが勉強しに来られた方はお子さんの子守りをしつつしっかり話を聞かれており、思いのほか良い意味で緊張感のある勉強会になりました。シリーズものの勉強会を終えてからは広めの会場で勉強会を開催してましたが、今回は初回の時のような雰囲気だったので参加者の皆さんの意見を聞きながら進めることが出来ました。
私自身は、解説させていただく時もっと要点を押さえ簡潔に説明出来ないといけないと1人反省しておりました。アクセシビリティの説明は、補足が多いので簡潔にまとめるのが難しいのですが、今回の経験を活かし聞いている方が退屈せず聞いててわかりやすいと思ってもらえる説明が出来るよう日々精進します。
最後に、D2Dの勉強会で懇親会に参加出来なかったのは今回が初めてでとても残念でした。勉強会中は、聞いても出なかった意見や質問が懇親会では聞けることが多いので今回も参加したかったのですが、まだ私には任務がありまして手を振る人に笑顔で答え地球を離れイスカンダルへと旅立ちました。(任務からの文章はフィクションです(笑))