アクセシビリティは追加機能ではなくプロダクト品質 | 仕組み解説

アクセシビリティは、完成後に余裕があれば追加する機能ではありません。操作できること、情報を理解できること、失敗から戻れることを確認する品質の観点です。

まず5項目を確認する

これらは、怪我で片手が使えない時、明るい屋外、遅い通信、慣れない端末などでも役立ちます。

クリックできる見た目を div で作るより、操作なら button、移動なら a を使います。標準要素には、キーボード操作や役割の情報が最初から備わっています。

<label for="email">メールアドレス</label>
<input id="email" name="email" type="email" autocomplete="email">

placeholderだけをラベル代わりにすると、入力後に項目名が見えなくなります。

Lighthouseやaxeは、検出できる問題を見つける助けになります。しかし、説明が分かりやすいか、フォーカス順が自然か、エラーから直せるかは人が操作して確認します。

実践メモ: 新しい画面を作ったら、マウスを置いてTabキーだけで一周してください。フォーカスが消える場所や、順番が飛ぶ場所を早く見つけられます。

「送信できる」だけでなく、次のように確認可能な条件にします。

アクセシビリティがレビューの最後ではなく、仕様の最初に入ります。