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
500
アクセシブルなインクリメンタルサーチを作ってみた
アクセシビリティLT会 (2024/07/16) での発表資料
https://yumemi.connpass.com/event/323801/
mattsuu
July 16, 2024
Tweet
Share
More Decks by mattsuu
See All by mattsuu
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
10
3.2k
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
310
React Aria で実現する次世代のアクセシビリティ
ryo_manba
5
2.8k
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
6.4k
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
6
1.7k
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
4.2k
Other Decks in Technology
See All in Technology
多野優介
tanoyusuke
1
410
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
330
Why Governance Matters: The Key to Reducing Risk Without Slowing Down
sarahjwells
0
100
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
roki18d
1
330
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
mdstoy
0
120
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
260
Pure Goで体験するWasmの未来
askua
1
170
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
130
実装で解き明かす並行処理の歴史
zozotech
PRO
1
310
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
budougumi0617
4
1.2k
What is BigQuery?
aizack_harks
0
130
KMP の Swift export
kokihirokawa
0
330
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
KATA
mclloyd
32
15k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Unsuck your backbone
ammeep
671
58k
Side Projects
sachag
455
43k
Typedesign – Prime Four
hannesfritz
42
2.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Rails Girls Zürich Keynote
gr2m
95
14k
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/