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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
すずきゆーだい
October 09, 2024
Programming
0
49
テストから始めるWebアクセシビリティ
こちらで発表した内容は、以下の記事にまとめているのでぜひご覧ください。
https://zenn.dev/yumemi_inc/articles/2df0e3ae5ae9aa
すずきゆーだい
October 09, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
730
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
tsukamoto1783
0
200
AI & Enginnering
codelynx
0
120
Claude Codeと2つの巻き戻し戦略 / Two Rewind Strategies with Claude Code
fruitriin
0
140
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
himorishige
11
7.5k
AIで開発はどれくらい加速したのか?AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
daisuketakeda
1
2.5k
Lambda のコードストレージ容量に気をつけましょう
tattwan718
0
140
SourceGeneratorのススメ
htkym
0
200
AIと一緒にレガシーに向き合ってみた
nyafunta9858
0
250
AIエージェント、”どう作るか”で差は出るか? / AI Agents: Does the "How" Make a Difference?
rkaga
4
2k
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
haochenx
0
140
それ、本当に安全? ファイルアップロードで見落としがちなセキュリティリスクと対策
penpeen
7
4k
Featured
See All Featured
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
150
Fashionably flexible responsive web design (full day workshop)
malarkey
408
66k
How to Talk to Developers About Accessibility
jct
2
140
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.2k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.4k
Unsuck your backbone
ammeep
671
58k
Docker and Python
trallard
47
3.7k
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
0
140
Optimizing for Happiness
mojombo
379
71k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
The untapped power of vector embeddings
frankvandijk
1
1.6k
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や対面でのご意見、ご感想もお待ちしています)