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
18
テストから始めるWebアクセシビリティ
こちらで発表した内容は、以下の記事にまとめているのでぜひご覧ください。
https://zenn.dev/yumemi_inc/articles/2df0e3ae5ae9aa
すずきゆーだい
October 09, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
rtcamp 10 (vk-illuminati)
yumcyawiz
1
210
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
2
2.1k
もう実家に手頃な情シス娘は不要!Bedrockでもう一人の娘を作る
komakichi
2
130
게임 개발하던 학생이이 세계에선 안드로이드 개발자?
pangmoo
0
120
Re:proS_案内資料
rect
0
130
RDBの世界をぬりかえていくモデルグラフDB〜truncus graphによるモデルファースト開発〜
jurabi
0
180
Debugging: A Few Things You Should Know
jmatsu
1
130
ML-прайсинг_на_Lamoda__вошли_и_вышли__приключение_на_20_минут__Слава_Цыганков.pdf
lamodatech
0
380
CSC509 Lecture 06
javiergs
PRO
0
130
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
1
440
【YAPC::Hakodate 2024】TypeScriptエンジニアが感じたPerlのここが面白い
kimitashoichi
1
460
現場から考えるソフトウェアエンジニアリングの価値と実験
nomuson
1
140
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
65
11k
Thoughts on Productivity
jonyablonski
67
4.3k
We Have a Design System, Now What?
morganepeng
50
7.2k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
GraphQLとの向き合い方2022年版
quramy
43
13k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Music & Morning Musume
bryan
46
6.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
[RailsConf 2023] Rails as a piece of cake
palkan
49
4.8k
Visualization
eitanlees
143
15k
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や対面でのご意見、ご感想もお待ちしています)