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
470
アクセシブルなインクリメンタルサーチを作ってみた
アクセシビリティ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
260
React Aria で実現する次世代のアクセシビリティ
ryo_manba
5
2.6k
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
6.2k
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
6
1.6k
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
4.1k
Other Decks in Technology
See All in Technology
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
610
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
22k
[ JAWS-UG千葉支部 x 彩の国埼玉支部 ]ムダ遣い卒業!FinOpsで始めるAWSコスト最適化の第一歩
sh_fk2
2
150
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
1
1.1k
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
500
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
150
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
180
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
190
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
2
300
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
600
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
270
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Language of Interfaces
destraynor
158
25k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
It's Worth the Effort
3n
185
28k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Docker and Python
trallard
44
3.5k
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/