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
410
アクセシブルなインクリメンタルサーチを作ってみた
アクセシビリティLT会 (2024/07/16) での発表資料
https://yumemi.connpass.com/event/323801/
mattsuu
July 16, 2024
Tweet
Share
More Decks by mattsuu
See All by mattsuu
React Aria で実現する次世代のアクセシビリティ
ryo_manba
5
2.3k
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
5.6k
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
5
1.3k
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
3.7k
Other Decks in Technology
See All in Technology
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
Bounded Context: Problem or Solution?
ewolff
1
210
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
730
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
Moved to https://speakerdeck.com/toshihue/presales-engineer-career-bridging-tech-biz-ja
toshihue
2
550
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
230
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
RSNA2024振り返り
nanachi
0
500
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.4k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Embracing the Ebb and Flow
colly
84
4.6k
Optimizing for Happiness
mojombo
376
70k
Music & Morning Musume
bryan
46
6.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
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/