2017年12月9日（土）にリードスペース株式会社さんのスペースにて開催された「ヒロフロ交流会 + 忘年会」でLTに登壇しました。
約1ヶ月前に告知が出てひとまずLT枠に登録。アクセシビリティ関連で何かお話しできないかなと考えていたのですが、持ち時間5分と大変短いLTですので『コーディングWebアクセシビリティ』『インクルーシブHTML+CSS & JavaScript』でも触れられている「メニューボタン」について扱うことにしました。
具体的にはLTのタイトルを「体験！ インクルーシブなメニューボタン」とし、WAI-ARIA（ウェイ・アリア）のaria-expanded属性を追加したボタンをiPhoneのVoiceOverに読み上げさせることを行いました。比較対象としてaria-*を何も付けておらず、CSSで三本線を出している某かっこいいサイトのメニューボタンを読み上げさせたので、ラベルについても触れたいところではありました。
当日Lightning - Digital AVアダプタをiPhoneに接続したところ、なぜかVoiceOverのフォーカス音のみしか流れなくなり、画面を見ながらVoiceOverの声を流せなかったのがとても残念でした。（休憩時間にMacのVoiceOverで画面をお見せしながら読み上げを聴いて頂くことができました。）
今回のLTではまず以下の2点を覚えて頂ければ、とまとめ締めくくりました。もちろん、「基本的にはHTML5の語彙を用いて、足りないところをWAI-ARIAで補う」という考え方が大切ですね。
- ビジュアルデザインを見ないと意味がうまく伝わらないUIがあること（HTMLのみでは表現できない...今回の例であればメニューの開閉状態）
- WAI-ARIAを使うことでUIの役割・状態を伝えることができるようになる
この後、西本さんがいらっしゃって、「Japan Accessibility Conference vol.1」でデモする予定だったという決済画面のデモを拝見しました。画面ではARIAのライブリージョンが使用されており、NVDAでは入力フォームのエラーが上手く読み上げられるようになっていました。
広島でもアクセシビリティの勉強会を
忘年会というか懇親会で主催の榊原さんと西本さんとでお話をし、「来年アクセシビリティの勉強会をやりたいね」というお話を伺いました。先月、植木さんが開催されていらっしゃる「Webアクセシビリティの学校」が山口で開催されたこともあり、「広島でも開催されないかなぁ」という話も出ました。
形はどうであれ、広島でのアクセシビリティの勉強会に僕も何かしらご協力できたらと思う2017年の師走でした。
追伸
タンタンさんの「感覚で決めないデザインの間隔の話」には思わず「へぇ〜」と思わされました。余白の取り方には法則があり、法則に従っているレイアウトは理解しやすさの向上や読みやすさの向上につながりそうですね。最近デザイナーさんのお話が面白いなと思っていて、もっと色々お話を伺いたいなと思いました。