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
480
アクセシブルなインクリメンタルサーチを作ってみた
アクセシビリティ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
290
React Aria で実現する次世代のアクセシビリティ
ryo_manba
5
2.8k
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
6.4k
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
6
1.6k
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
4.2k
Other Decks in Technology
See All in Technology
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
570
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
250
roppongirb_20250911
igaiga
1
240
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
190
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
260
データ分析エージェント Socrates の育て方
na0
5
770
Android Audio: Beyond Winning On It
atsushieno
0
2.4k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
10
75k
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
480
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Why Our Code Smells
bkeepers
PRO
339
57k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Embracing the Ebb and Flow
colly
87
4.8k
Automating Front-end Workflow
addyosmani
1370
200k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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/