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
420
アクセシブルなインクリメンタルサーチを作ってみた
アクセシビリティ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 による Baseline サポートの仕組み
ryo_manba
1
160
React Aria で実現する次世代のアクセシビリティ
ryo_manba
5
2.4k
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
5.7k
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
5
1.4k
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
3.8k
Other Decks in Technology
See All in Technology
貧民的プログラミングのすすめ
kakehashi
PRO
2
320
【Forkwell】「正しく」失敗できるチームを作る──現場のリーダーのための恐怖と不安を乗り越える技術 - FL#83 / A team that can fail correctly by forkwell
i35_267
2
170
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
280
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
880
ライフステージの変化を乗り越える 探索型のキャリア選択
tenshoku_draft
2
370
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
280
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
130
困難を「一般解」で解く
fujiwara3
9
2.9k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
37
24k
x86-64 Assembly Essentials
latte72
4
810
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
10
1.3k
一歩ずつ成長しながら進める ZOZOの基幹システムリプレイス/Growing Stap by Stap ZOZO BackOffice System Replacement
cocet33000
2
290
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Designing Experiences People Love
moore
140
23k
Rails Girls Zürich Keynote
gr2m
94
13k
For a Future-Friendly Web
brad_frost
176
9.6k
Fireside Chat
paigeccino
35
3.2k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Speed Design
sergeychernyshev
28
820
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Become a Pro
speakerdeck
PRO
26
5.2k
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/