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
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
5
1.2k
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
7
1k
効率的な開発手段として VRTを活用する
ishkawa
1
180
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
650
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
810
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
670
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
480
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
11
2.9k
AIのメモリー
watany
11
1.1k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
290
CDK引数設計道場100本ノック
badmintoncryer
2
590
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Unsuck your backbone
ammeep
671
58k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Code Review Best Practice
trishagee
69
19k
Why Our Code Smells
bkeepers
PRO
337
57k
The Invisible Side of Design
smashingmag
301
51k
Scaling GitHub
holman
461
140k
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や対面でのご意見、ご感想もお待ちしています)