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

1.5K Views

May 18, 23

スライド概要

2023年5月18日に行われたオンラインセミナー「GAAD Japan 2023」のスポンサーLTで使用したスライドです。
https://www.gaad.jp/

profile-image

エンジニア・デザイナー向けのヤフー公式アカウント。イベント/登壇情報/ブログ記事など、ヤフーの技術・デザインに関わる情報を発信します。

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

©︎Yahoo ©︎Yahoo JAPAN Japan

7.

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

8.

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

9.

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

10.

事例 ©︎Yahoo Japan

11.

ボタン ©︎Yahoo Japan 11

12.

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

13.

ボタン ©︎Yahoo Japan 13

14.

強調・太字 ©︎Yahoo Japan 14

15.

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

16.

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

17.

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

18.

アイコン ©︎Yahoo Japan 18

19.

アイコン ©︎Yahoo Japan 19

20.

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

21.

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

22.

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

23.

まとめ ©︎Yahoo Japan

24.

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

25.

EOP ©︎Yahoo Japan