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
300
アクセシブルなインクリメンタルサーチを作ってみた
アクセシビリティLT会 (2024/07/16) での発表資料
https://yumemi.connpass.com/event/323801/
mattsu-
July 16, 2024
Tweet
Share
More Decks by mattsu-
See All by mattsu-
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
3.9k
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
3
870
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
2.9k
Other Decks in Technology
See All in Technology
夏休みの(最後の)宿題 for JuliaTokyo #12
antimon2
0
130
Chunk computing
matyo91
0
260
Our Journey from in-House CD System to Open Source
ffjlabo
0
100
2024年版 運用者たちのLLM
nwiizo
2
200
Hyperledger Fabricの成長、成熟を振り返る / Looking back history of Hyperledger Fabric
gakumura
0
180
自社開発した大規模言語モデルをどうプロダクションに乗せて運用していくか〜インフラ編〜
pfn
PRO
2
190
ログラスが面白いと思う理由をマネージャーがエモく語ってみる / 20240829 vs LT
yoshikiiida
1
510
メール本文をどうやっつけるか
hanacchi
0
120
LLMに日本語テキストを学習させる意義
ksaito
13
3.3k
LLM を現場で評価する
asei
4
660
[RSJ24] Task Success Prediction for Open-Vocabulary Manipulation Based on Multi-Level Aligned Representations
keio_smilab
PRO
0
200
Eventual Detection Engineering
ken5scal
0
280
Featured
See All Featured
Design by the Numbers
sachag
277
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Become a Pro
speakerdeck
PRO
22
4.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
165
48k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
The Brand Is Dead. Long Live the Brand.
mthomps
53
37k
It's Worth the Effort
3n
182
27k
Done Done
chrislema
180
16k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
33
1.7k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Rails Girls Zürich Keynote
gr2m
93
13k
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/