はじめに
こんにちは！！@Sicut_studyです！
みなさんはWebサイトを作るときにアクセシビリティを意識していますでしょうか？
私はUXは多少なりとも意識しますが、アクセシビリティに関して知ったのは現在の職場に入ってからでした。
Webアクセシビリティとは、「すべての人がWebで提供される情報を利用できること」を指します。
たとえば、Webサイトの文字が小さく、大きくする設定がない場合、目が悪い人や高齢の人は文字が見えず利用できません。
一方で、利用者にあった文字の大きさ設定ができるサイトは、目の悪い人でも利用できるため、Webアクセシビリティが実現できています。
このように誰もがWebサイトを利用できるようにすることを目的にしています。
今回はスクリーンリーダー(読み上げソフト)を利用する人に配慮したアクセシビリティを実現するために
入力フォームのバリデーションをどのように実現するか
というところで教えてもらったことをもとに、自分なりに解釈したことをまとめていきます。
とあるフォームのお話
今回はアクセシビリティの観点で2つのフォームを実装しました。
どちらがよりスクリーンリーダーを利用している人に優しいか考えてみましょう
1つ目のフォーム
このような新規登録フォームがあったとします。
ここでタスクを入力せずに保存を押すと以下のようなバリデーションエラーが表示されます
2つ目のフォーム
このフォームでは以下のように保存ボタンがはじめから押せないようになっています
タスク名を入力すると保存が押せるようになります
入力後に入力した文字をすべて消すとバリデーションエラーのメッセージが表示されます
アクセシビリティの観点で良い方はどちらか
個人的には1の保存ボタンは押せるようにしておくほうがアクセシビリティがよいという結論になりまた
スクリーンリーダーを利用している人にとって、保存ボタンが押せないというのは直感的に知ることが難しい場合があります。
今回は入力項目が1つですが、複数あった場合に入力漏れがあった場合、保存ボタンが押せず
なぜ保存ができないのかがわかりません
今の仕様だとバリデーションエラー自体入力フォームに何かしら入力しないと表示されないためスクリーンリーダーを使っている方がフォームの存在に気づかず何も入力していない場合は、エラーが表示されずスルーされてしまいます
おわりに
今回はアクセシビリティについて学ぶきっかけがあったのでまとめてみました
こう考えてみると普段気を使った実装ができていないなと感じ、更に1つレベルの高いエンジニアになるにはここまでできるようになる必要があるのだなと実感しました
ここまで読んでいただけた方はぜひいいねとストックよろしくお願いします。
また @Sicut_study をフォローいただけるととてもうれしく思います。
少し宣伝します🔥🔥🔥🔥🔥
これからエンジニアになろうとしている人を本気でコーチングして3か月の期間で立派なエンジニアにするようなチャレンジをしてみたいなと考えております。
もし、本気でエンジニアを目指してコーチングを受けてみたいという方がいれば、Twitterに「プログラミング教えてほしいです」みたいなリプライ送っていただけたらなと思います！！
以上です。
今週もプログラミング頑張りましょう！
おすすめの記事
参考