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
390
アクセシブルなインクリメンタルサーチを作ってみた
アクセシビリティ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.2k
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
5.5k
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
5
1.2k
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
3.6k
Other Decks in Technology
See All in Technology
あなたの人生も変わるかも?AWS認定2つで始まったウソみたいな話
iwamot
3
710
I could be Wrong!! - Learning from Agile Experts
kawaguti
PRO
8
3k
大規模言語モデルとそのソフトウェア開発に向けた応用 (2024年版)
kazato
2
510
「完全に理解したTalk」完全に理解した
segavvy
1
300
エンジニアリングマネージャー視点での、自律的なスケーリングを実現するFASTという選択肢 / RSGT2025
yoshikiiida
4
3.3k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
54k
Fabric 移行時の躓きポイントと対応策
ohata_ds
1
140
デジタルアイデンティティ人材育成推進ワーキンググループ 翻訳サブワーキンググループ 活動報告 / 20250114-OIDF-J-EduWG-TranslationSWG
oidfj
0
350
自社 200 記事を元に整理した読みやすいテックブログを書くための Tips 集
masakihirose
1
240
🌏丸い地球を効率的に平たくする 〜🗺️地図の幾何学とWeb地図技術〜
syotasasaki593876
0
120
Visual StudioとかIDE関連小ネタ話
kosmosebi
1
330
The future we create with our own MVV
matsukurou
0
1.8k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
68
4.4k
Building Applications with DynamoDB
mza
92
6.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Why Our Code Smells
bkeepers
PRO
335
57k
A designer walks into a library…
pauljervisheath
205
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
How GitHub (no longer) Works
holman
312
140k
The Language of Interfaces
destraynor
155
24k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.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/