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
350
アクセシブルなインクリメンタルサーチを作ってみた
アクセシビリティLT会 (2024/07/16) での発表資料
https://yumemi.connpass.com/event/323801/
mattsu-
July 16, 2024
Tweet
Share
More Decks by mattsu-
See All by mattsu-
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1.8k
5分で分かる React Aria の 良いところ・これからなところ
ryo_manba
5
5k
Next.js の fetch 拡張とキャッシュ機構の違いを理解する
ryo_manba
5
1k
React Spectrum Libraries によるアクセシブルなUIの構築
ryo_manba
0
3.3k
Other Decks in Technology
See All in Technology
Amazon FSx for NetApp ONTAPを利用するにあたっての要件整理と設計のポイント
non97
1
110
ZOZOのデータマネジメントの取り組み:これまでとこれから / ZOZO's Data Management Initiatives
takagiyudai
0
540
AWS SAW(AWS Support Automation Workflows)をもっと広めたい
kazzpapa3
2
170
クライアントサイドでよく使われる Debounce処理 をサーバサイドで3回実装した話
yoshiori
1
110
AWS Step Functionsのタスク入出力に秩序を与えよう
y_kotani
0
180
Mackerelが取り組むオブザーバビリティ - Mackerel Tech Day
mackerelio
0
300
Mobbing Practices
kawaguti
PRO
2
290
Measuring the Success of Developer Experience
nikokivela
1
130
LLMOps : ΔMLOps
shuntaito
14
2.8k
LeSSをはじめよう〜LeSSをはじめるとき、LeSSをはじめてから、知りたかったこと詰め合わせ〜
lycorptech_jp
PRO
2
140
Sidekiq vs Solid Queue
willnet
11
6k
Databricksで構築する初めての複合AIシステム - ML15min
taka_aki
2
1.3k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
51
13k
GitHub's CSS Performance
jonrohan
1030
460k
Into the Great Unknown - MozCon
thekraken
31
1.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.9k
Facilitating Awesome Meetings
lara
49
6k
Embracing the Ebb and Flow
colly
84
4.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Testing 201, or: Great Expectations
jmmastey
38
7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
280
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/