PWA版Twitterをスクリーンリーダー検証してみる

https://gyazo.com/77d150408bfc4de5f4996e24b2d62104

この資料は PWA Night Conference 2021 のLT資料です。

https://gyazo.com/5510d4e88c34b7dc94f91817952946e7

メニューのドキュメントアイコンより「Start presentation」クリックでプレゼンテーションが始まります

PWA Night CONFERENCE 2021 お疲れさまでした

みなさん楽しかったですか？

スタッフ参加させてもらいました

去年はネタLT参加してましたが今年も参加です

以前PWA Nightの勉強会にも登壇させてもらいました

https://gyazo.com/5fcfe324559b7b0797cf00e174df480b

PWA is Progressive Web Accessibility - Google スライド

今回もPWA×Webアクセシビリティネタやります

特にオチなしヤマなしなのでゆるく聴いてください

Webアクセシビリティとは？

あらゆる人がWebから情報を得られるようにする考え方・対応

マウス操作、キーボード操作

支援技術で閲覧することができる

よりよいPWAをつくるための要件「Is fully accessible」

https://gyazo.com/edfe7d9160d234889d8e9f22b1641841

PWA版のTwitterでスクリーンリーダー検証してみよう

スクリーンリーダー＝画面の読み上げソフトウェア

検証ツール

AndroidのTalkback

ユーザーページでの読み上げ順を確認

https://scrapbox.io/files/60d5df37b1add8001cc205e2.mp4

https://scrapbox.io/files/60d5df816976be001cfee5fb.mp4

前へ・次へ？

サブナビゲーション内に謎のボタン

role="button"と指定されているdivが存在していた

aria-disabled="true"で無効になっている

使用用途は分からない…

https://scrapbox.io/files/60d5e9a2ed6716001c954275.mp4

内部のコンテンツがすべて読み上げられる

https://gyazo.com/55cfaeaec40b5830422a03443b7fecad

https://gyazo.com/362e77040a0c4e7c33d3cb638fda17cf

aria-labelledbyで関連するIDが紐付けられている

https://scrapbox.io/files/60d5e4e0b79b2b001c41fd04.mp4

代替テキストの設定

https://gyazo.com/42e3164d5c0bdadffd5d1556182f6145

画像投稿

「件の説明を追加」

挿入すると画像の読み上げをしてくれる

内部実装を見てみる

WAI-ARIAをバリバリ使っている

ただしタグの上書きをしている箇所もある

react native for web のレンダリング結果のため？

code:examle.jsx

<Text accessibilityRole="heading" /> /* <h1> */

<Text accessibilityRole="heading" accessibilityLevel={2} /> /* <h2> */

開閉部分

https://gyazo.com/50fd6beab5719ef71f3e259a67469553

メニュー

https://gyazo.com/d2a7d47eeef5a8efc6e9e1203f06b1ff

ダイアログ

まとめ

読み上げてみて目では見えない何かが見えてきた

画像にも代替テキストを

スクリーンリーダーを使う場合はネイティブアプリ側がやりやすそう…

そこはプログレッシブということで（？）

発表者紹介

yamanoku.icon @ yamanoku

大山奥人, おおやまみちのく a.k.a やまのく

1児の父

得意領域

マークアップ・フロントエンド・UIデザイン・アクセシビリティ

Thank you for listening !

https://gyazo.com/4c1d0df4903765cc351797c10f903ba1