アクセシブルなフォーム: label・focus・aria-live

入力欄を、キーボードや読み上げでも使えるようにする基本です。

labelで入力欄と結ぶ

labelのfor属性を入力欄のidに合わせると、ラベルをクリックしても入力欄が選択され、読み上げソフトでも項目名が伝わります。placeholderはラベルの代わりにはなりません。

:focus-visibleでフォーカスを見せる

キーボードで移動したときだけ枠を表示するには、:focus-visibleを使います。outlineを消す場合は、代わりに見えるスタイルを必ず用意してください。

aria-liveで結果の更新を伝える

結果を表示する領域にaria-live="polite"を付けると、内容が変わったときに、読み上げソフトが知らせます。対象を結果欄だけに絞らないと、通知が多くなりすぎます。

この技術を使っているツール