GAAD Japan 2020。アクセシビリティを考える1日 「辻ちゃん・ウエちゃんのAccessiブル GO GO! このタグはこんなふうに聞こえる！の巻」

毎年5月の第3木曜日は、GAAD（Global Accessibility Awareness Day）の日。世界各地で「アクセシビリティ」を考える一日、ということでGADD Japan 2020に参加しました。

Home | GAAD Japan

お昼休み後最初のセッションは「辻ちゃん・ウエちゃんのAccessiブル GO GO! このタグはこんなふうに聞こえる！の巻」。登壇者は株式会社コンセント インクルーシブデザイングループ リーダー　辻 勝利さんと株式会社インフォアクシア 植木 真さんです

正直このセッションは動画を見るのが一番わかる（身も蓋もない）。

NVDAとPC-Talkerで読み上げを聞き比べ

スクリーンリーダーがそれぞれマークアップされた要素をどんな風に読み上げられるのかを聞き比べ。
・読み上げの音声やどんな風に表現するかがソフトごとに違ってくる
・タグの意味をテキストと一緒に読み上げる
　h1を「見出しレベル1」aを「リンク」など。
・属性名とか漢字の読みが特徴的だがソフトウェア側の問題なので、制作者側は気にしなくてもよい。

Google検索してみる

・漢字は一文字ずつ読み上げてきちんと正しいものを選択しているか確認できる
・スクリーンリーダーの見出しジャンプの機能を用いると、見出しだけを拾い読みすることができる
　→　新聞を読むときに大項目だけをぱっとみて、読む記事を決めるようなイメージ
・スクリーンリーダーによっては開いたウェブページを見出しの数を最初にカウントして教えてくれるものもある
　→　見出しをマークアップすることは大事だが、見出しの数が多すぎると大変

画像リンクとテキストリンク隣り合って大変問題

画像とテキストを別々のaタグでマークアップされていると同じリンクが二回ずつ繰り返される。キーボード操作のフォーカス移動操作も2倍。
同じリンク先なのに画像の代替テキストとリンクテキストが異なる場合も。
→　画像とテキストをまとめてマークアップされていると良い

見た目はボタンだけど・・・問題

見た目はボタンだが、HTMLではdivやspanやaタグになっていることがある。aタグでも動作するので良さそうだが、ボタンを探すジャンプコマンドはスルーしてしまうので、ボタンを探すのに戸惑う。
→　ボタンにはbutton要素を使う
→　最終兵器　role = "button"　を使う

Youtubeチャンネル正式公開〜

a11ygogo

解説動画やスクリーンリーダーのdemo動画が公開されている。
自分でスクリーンリーダーを使ってみるのがベストなんだろうけど、セミナーという形で簡単に疑似体験できるのはとてもよき。

Q&A

・スクリーンリーダーは全盲の方だけではなく、ロービジョンや文字を読むのが苦手な方も使われている
→　使い方や読み上げ速度も様々

まとめ

・見出しは身だしなみ
・セマンティックにマークアップすればそれだけで救われる世界がある