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
アクセシブルなインクリメンタルサーチを作ってみた
Search
mattsu-
July 16, 2024
Technology
2
310
アクセシブルなインクリメンタルサーチを作ってみた
アクセシビリティLT会 (2024/07/16) での発表資料
https://yumemi.connpass.com/event/323801/
mattsu-
July 16, 2024
Tweet
Share
More Decks by mattsu-
See All by mattsu-
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1.2k
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
4.2k
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
3
910
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
3k
Other Decks in Technology
See All in Technology
Swift Testingのconfirmationを コードリーディング/Dive into Swift Testing confirmation
laprasdrum
1
240
LLVM/ASMを使った有限体の高速実装
herumi
0
120
音声AIエージェントの世界とRetell AI入門 / Introduction to the World of Voice AI Agents and Retell AI
rkaga
5
930
エンジニア向け会社紹介資料
caddi_eng
15
250k
DevRelの始め方
moongift
PRO
1
360
AI活用したくてもできなかった不動産SaaSの今とこれから
nealle
0
320
テスト”ケース”駆動開発 で手戻りをなくそう
ryohma0510
0
130
20240906_JAWS_Yamanashi_#1_leap_beyond_the_AWS_all_certifications
tsumita
1
280
Functional TypeScript
naoya
11
4.7k
The XZ Backdoor Story
fr0gger
0
3.5k
なにもしてないのにNew Relicのデータ転送量が増えていたときに確認したこと
tk3fftk
2
210
Mocking in Rust Applications
taiki45
1
400
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Producing Creativity
orderedlist
PRO
340
39k
Clear Off the Table
cherdarchuk
91
320k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Statistics for Hackers
jakevdp
793
220k
Bash Introduction
62gerente
608
210k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
How STYLIGHT went responsive
nonsquared
93
5.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
What's in a price? How to price your products and services
michaelherold
242
11k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Transcript
アクセシブルな インクリメンタルサーチを作ってみた まっつー / @ryo_manba 2024/07/16 アクセシビリティ LT 会
自己紹介 まっつー サイボウズのフロントエンドエンジニア NextUI の team member X: @ryo_manba GitHub:
@ryo-manba 2
個人サイトで記事を探せるようにしました
インクリメンタルサーチとは 文字入力するごとに検索結果が絞り込まれる検索方式のこと
インクリメンタルサーチの課題 • 支援技術を利用するユーザーがリアルタイム更新に気付 けない • 検索結果が見つからなかった場合に気付けない
aria-describedby で機能の説明を紐付ける <input id="search" type="search" aria-describedby="search-description" /> <p id="search-description" className="sr-only">
入力するごとに記事が絞り込まれます </p> aria-describedby を使用して、検索コンポーネントがリア ルタイムに結果を更新することを伝える
aria-describedby で機能の説明を紐付ける 入力コンポーネントにフォーカスが当たった際にどのように 機能するか伝わる
結果が存在しない場合は即座に伝える <div aria-live="assertive" aria-atomic="true"> {noPostsFound && ( <p className="sr-only"> 記事が見つかりませんでした。
</p> )} </div> ARIA-live regions を活用して、入力結果が存在しない場合 に即座にアナウンスさせる
結果が存在しない場合は即座に伝える 即座にアナウンスされるため、ユーザーが不要な入力を避け られる
ユーザー体験を損ねる ARIA live regions の使い方 • 検索結果のコンテナに aria-live=”assertive” を指定する ◦
検索結果が更新されるたびに不要なアナウンスが発生する ◦ 頻発なアナウンスがノイズとなり、ユーザー体験を損ねる <div aria-live="assertive" aria-atomic="true"> {posts.map((post) => ( <BlogCard {...post} /> ))} </div>
ユーザー体験を損ねる ARIA live regions の使い方
まとめ インクリメンタルサーチをアクセシブルにするために以下の 実装を試しました • 機能の説明を入力コンポーネントに関連付ける • 結果が存在しない場合は即座にアナウンスさせる https://www.scottohara.me/blog/2022/02/05/dynamic-results.html https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/