スクリーンリーダーの挙動を意識したマークアップ

スクリーンリーダーの挙動を 意識したマークアップ 黒帯(アクセシビリティ) 中野 信 ©︎Yahoo Japan

自己紹介 • 中野 信 (なかの まこと) • UIガイドラインの策定・運用と アクセシビリティの向上に関わっています • 黒帯 (アクセシビリティ) • デジタル庁アクセシビリティアナリスト (民間登用 非常勤) • ウェブアクセシビリティ基盤委員会 (WAIC) 作業部会1 委員 ©︎Yahoo JAPAN 2

ヤフーのウェブアクセシビリティの主な取り組み • Yahoo!天気・災害の天気図・災害アラート • 聞こえる選挙 • LYPマイレージのロゴ ©︎Yahoo JAPAN

通常 D型 P型 ©︎Yahoo ©︎Yahoo JAPAN Japan T型 4

https://kikoeru.yahoo.co.jp/sangiin ©︎Yahoo ©︎Yahoo JAPAN Japan 5

• https://kikoeru.yahoo.co.jp/sangiin

©︎Yahoo ©︎Yahoo JAPAN Japan

HTMLのセマンティクスを意識していますか? • ウェブページはHTMLとWAI-ARIAを使って文章や文言に意味付けをする • 要素によっては機能になる • スクリーンリーダーはHTMLを手がかりに付属情報や機能を読み上げる ©︎Yahoo JAPAN

先日あったこと • スクリーンリーダーの読み上げを擬似的に書き起こしたことがあった • 見出しレベル1 〇〇〇 • リスト 3項目中 1項目目 〇〇 など • アプリのスクリーンリーダー対応漏れを手動で補った • スクリーンリーダーの読み上げを想像するよい機会になった ©︎Yahoo JAPAN

ふと考えた • 読み上げに最適化したマークアップをしたらどうなるか? • HTMLが目指すセマンティクスとは異なるかもしれないが、 考えるきっかけになるかもしれない ©︎Yahoo JAPAN

事例 ©︎Yahoo Japan

ボタン ©︎Yahoo Japan 11

ボタン • “role=button” を付与すると、どの要素もボタンとして認識する • a要素も「ボタン」と認識される • • リンクとしても機能するので、読み上げ内容と機能が食い違ってしまう WAI-ARIAは極力使わず、button要素を使った方がよさそう ©︎Yahoo Japan 12

ボタン ©︎Yahoo Japan 13

強調・太字 ©︎Yahoo Japan 14

強調・太字 • em要素、strong要素、b要素のいずれも読み上げには反映されない • 本当に強調したい文章や単語は、地の文章の中で強調した方がよさそう ©︎Yahoo Japan 15

ページタイトル ©︎Yahoo Japan 16

ページタイトル • • ウェブサービスやウェブアプリで設定を忘れがち • SPA(Single Page Application) • 複数ページにわたる手続き UI設計の時に、ページのディスクリプションと合わせて設計しているとよい ©︎Yahoo Japan 17

アイコン ©︎Yahoo Japan 18

アイコン ©︎Yahoo Japan 19

アイコン • 空要素は何も読み上げない • ボタンやリンクだった場合、それも認識できない • aria-labelを付与すると、スクリーンリーダーによって挙動が異なる • NVDAでは読み上げられる • VoiceOverでは読み上げられない ©︎Yahoo Japan 20

ページトップへ戻るナビゲーション ©︎Yahoo Japan 21

ページトップへ戻るナビゲーション • マークアップ自体に問題がなくても、JavaScriptでアニメーション処理を行うと フォーカス移動がされなくなる • • ページの先頭にスクロールしても、フォーカスが元の位置に残り続ける アニメーション処理はJavaScriptではなくCSSを使った方がアクセシブルになる ©︎Yahoo Japan 22

まとめ ©︎Yahoo Japan

まとめ • HTMLのセマンティクスは特定デバイスや環境に依存するものではない • しかし、スクリーンリーダーにとって使いやすい場合とそうでない場合がある • 実際に読み上げて確認してみよう ©︎Yahoo Japan 24

EOP ©︎Yahoo Japan