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
mattsuu
July 16, 2024
Technology
2
510
アクセシブルなインクリメンタルサーチを作ってみた
アクセシビリティLT会 (2024/07/16) での発表資料
https://yumemi.connpass.com/event/323801/
mattsuu
July 16, 2024
Tweet
Share
More Decks by mattsuu
See All by mattsuu
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
11
3.5k
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
330
React Aria で実現する次世代のアクセシビリティ
ryo_manba
5
2.9k
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
6.5k
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
6
1.7k
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
4.3k
Other Decks in Technology
See All in Technology
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
44k
serverless team topology
_kensh
3
210
[VPoE Global Summit] サービスレベル目標による信頼性への投資最適化
satos
0
240
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
bengo4com
3
1.7k
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
170
What's new in OpenShift 4.20
redhatlivestreaming
0
190
現場の壁を乗り越えて、 「計装注入」が拓く オブザーバビリティ / Beyond the Field Barriers: Instrumentation Injection and the Future of Observability
aoto
PRO
1
320
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
2
410
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
310
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
81k
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
860
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
9k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
GitHub's CSS Performance
jonrohan
1032
470k
Designing for humans not robots
tammielis
254
26k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Balancing Empowerment & Direction
lara
5
700
Six Lessons from altMBA
skipperchong
29
4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
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/