Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
テストから始めるWebアクセシビリティ
Search
すずきゆーだい
October 09, 2024
Programming
0
32
テストから始めるWebアクセシビリティ
こちらで発表した内容は、以下の記事にまとめているのでぜひご覧ください。
https://zenn.dev/yumemi_inc/articles/2df0e3ae5ae9aa
すずきゆーだい
October 09, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
160
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
240
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.5k
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
220
Navigating Dependency Injection with Metro
zacsweers
3
260
はじめてのMaterial3 Expressive
ym223
2
380
1から理解するWeb Push
dora1998
7
1.9k
速いWebフレームワークを作る
yusukebe
5
1.7k
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
300
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
490
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.8k
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
Automating Front-end Workflow
addyosmani
1370
200k
The Language of Interfaces
destraynor
161
25k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Cult of Friendly URLs
andyhume
79
6.6k
Designing for humans not robots
tammielis
253
25k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
GitHub's CSS Performance
jonrohan
1032
460k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Transcript
テストから始めるWebアクセシビリティ すずきゆーだい
すずきゆーだい @szkyudi 株式会社ゆめみ所属 主にWebフロントエンドエンジニア 秋になると柿を200個ほど食べます 今秋は9月から今日まで54個(ペース遅め)
アクセシビリティは誰のためにあるか アクセシビリティは特定の人だけではなく、 あらゆる人のためにあるものです。 というようなことをよく耳にすると思いますが、 いまいちピンときていない方も多いのではないでしょうか?
エンジニア自身も恩恵を受ける当事者 少しでもアクセシビリティに興味を持ってもらうために 「テストから始めるWebアクセシビリティという」テーマで お話しさせていただきます。
Webフロントエンドにおけるテスト テストにはさまざまな種類があると思います。 今回はその中でもUIコンポーネントのテストにおける アクセシビリティについて紹介します。
React Testing Library を用いて、 Pulldownコンポーネントをテストするときの サンプルコードを紹介したいと思います。 他の技術でもおおむね同じように応用できるはずなので、 適宜読み替えていただけると幸いです。 例として用いる技術とコンポーネント
None
アクセシビリティを考慮していない例
role=”button” role=”button” role=”button” role=”button” role=”button”
テストコード
role=”button” role=”button” role=”button” role=”button” role=”button” 1つだけ 2つ
アクセシビリティを考慮した例(不完全)
role=”listbox” role=”listbox” role=”option” role=”option” role=”option”
role=”listbox” role=”listbox” role=”option” role=”option” role=”option” 1つだけ 1つずつ
テストコード
aria-expanded=”false” aria-expanded=”true” aria-selected=”false” aria-selected=”false” aria-selected=”true” 開閉状態を伝える 選択状態を伝える
このPulldownはまだまだ不完全 わかりやすい説明をするために、対応するべき実装を 大幅に削って紹介させていただきました。 より詳しい解説やこの発表で紹介したコードは Zennにも公開予定(19:30)なので、ぜひご覧ください。 テストから始めるWebアクセシビリティ
テスタビリティ !== アクセシビリティ 不適切なWAI-ARIAの利用や HTMLの仕様をハックした使い方は、 かえってアクセシビリティを下げる場合もあります。 仕様についてよく調べてから活用するか、 不安なときは `data-testid` を利用するようにしましょう。
他の要素やライブラリの利用を検討してみる 複雑なUIになればなるほど、 アクセシビリティを考慮すべきポイントが増えてきて 実装やテストも難しくなります。 <select> や <option> などのネイティブな HTML 要素や
よく利用されているUIコンポーネントライブラリは アクセシビリティを考慮してくれている
これからも みんなでより良いプロダクトを! (SNSや対面でのご意見、ご感想もお待ちしています)