アクセシブルなインクリメンタルサーチを作ってみた

Slide 1

Slide 1 text

アクセシブルなインクリメンタルサーチを作ってみたまっつー / @ryo_manba 2024/07/16 アクセシビリティ LT 会

Slide 2

Slide 2 text

自己紹介まっつーサイボウズのフロントエンドエンジニア NextUI の team member X: @ryo_manba GitHub: @ryo-manba 2

Slide 3

Slide 3 text

個人サイトで記事を探せるようにしました

Slide 4

Slide 4 text

インクリメンタルサーチとは文字入力するごとに検索結果が絞り込まれる検索方式のこと

Slide 5

Slide 5 text

インクリメンタルサーチの課題 ● 支援技術を利用するユーザーがリアルタイム更新に気付けない ● 検索結果が見つからなかった場合に気付けない

Slide 6

Slide 6 text

aria-describedby で機能の説明を紐付ける

入力するごとに記事が絞り込まれます

aria-describedby を使用して、検索コンポーネントがリアルタイムに結果を更新することを伝える

Slide 7

Slide 7 text

aria-describedby で機能の説明を紐付ける入力コンポーネントにフォーカスが当たった際にどのように機能するか伝わる

Slide 8

Slide 8 text

結果が存在しない場合は即座に伝える

{noPostsFound && (

記事が見つかりませんでした。

)}

ARIA-live regions を活用して、入力結果が存在しない場合に即座にアナウンスさせる

Slide 9

Slide 9 text

結果が存在しない場合は即座に伝える即座にアナウンスされるため、ユーザーが不要な入力を避けられる

Slide 10

Slide 10 text

ユーザー体験を損ねる ARIA live regions の使い方 ● 検索結果のコンテナに aria-live=”assertive” を指定する ○ 検索結果が更新されるたびに不要なアナウンスが発生する ○ 頻発なアナウンスがノイズとなり、ユーザー体験を損ねる

{posts.map((post) => ( ))}

Slide 11

Slide 11 text

ユーザー体験を損ねる ARIA live regions の使い方

Slide 12

Slide 12 text

まとめインクリメンタルサーチをアクセシブルにするために以下の実装を試しました ● 機能の説明を入力コンポーネントに関連付ける ● 結果が存在しない場合は即座にアナウンスさせる https://www.scottohara.me/blog/2022/02/05/dynamic-results.html https://www.sarasoueidan.com/blog/accessible-notiﬁcations-with-aria-live-regions-part-2/