yamanoku.net アーカイブ

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

GitHub Edit Page
この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。

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

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

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

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

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

Image from Gyazo

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

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

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

前へ・次へ?

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

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

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

代替テキストの設定

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

内部実装を見てみる

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

まとめ

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。

この記事に関する修正依頼
アーカイブ一覧へ戻る