読書メモ: デザイニングWebアクセシビリティを読んだ
Intro
デザイニングWebアクセシビリティという本についての読書メモです。内定者バイトでお世話になった部署でアクセシビリティについて勉強させていただいたんですが、まだまだ勉強不足なので体系的に学べればと思い読みました。
本を読んだ感想
UIの実装方法は色々なやり方があると思っていて(多分そんなことないと思うんですが自分はそう感じています)、この本には「このUIだとこういったケースでアクセシビリティの問題があるよね」みたいな事例をたくさん用意して解説してくれているような本でした。
そのためこの本を読むことで、「UI実装をする際にそれが良くないという理由の言語化がなんとなくできるようになるかな」という気がしました。
クローラーは全盲のユーザーと同じような状況に置かれている
SEOのためにアクセシビリティを向上させるという話です。
そもそもWebサイトのSEOをチェックするためにクローラーというロボットが動いているんですが、もしWebサイトが全て画像で作られていてaltが何も指定されていなかった場合、クローラーはこの画像を読み込むことが困難になってしまいます。
あとは適切な見出しやリンクを設定しないと、重みがわからないので、適切に検索できなくなるという問題もあるそうです。
これらを踏まえてアクセシビリティを向上させることでクローラーに適切にWebサイトを読み込んでもらうことができるようになるため、SEOが向上するということでした。
ちなみに他にも
- アクセスできる人を増やす
- 様々なデバイスに対応する
などがありましたが、要はUXを向上させるということだと思っています。
動きをコントロールできない
直近でカルーセルを実装する機会があったんですが、この内容をみた時に「自分がなんとなく実装したカルーセルがもしかしたアクセシビリティ的に良くなかったのか！？」と思ったんですが、これは動きを止めることができないというのがアクセシブルではないらしく、自分が実装したのは動きを止めることが可能なカルーセルではあったようで安心しました。
今回はなんとなく作ってしまっていましたが、デザイナーさんも意識できていたのかなぁと思ったり、Splideというライブラリを使用したんですがこのライブラリもアクセシブルだったのかぁとまた違った視点を持つことができました。
フォーム周りの話
フロントエンドを担当しているとフォームを作ることは何万回とあると思います。（！？）
エラーの出し方も、「エラーがあります」みたいな文言は良くないのはわかりますが、エラー表示と入力欄が別になっているケースもたまに見たりします。 これも確かにフォームに戻る必要があり。フォームにエラーの内容が書いていれば良いんですが、書いてなければ覚えておく必要があり体験が良いとは言えないという感じ。
あとはtextareaにmaxlength属性なんてあるって初めて知りました。
この属性を指定することで、キーを押しても何も入力されなくなるそう。
一見良さそうに感じますが、どうやらコピペした場合には指定した文字数以上は切り取られてしまうようです。Xのように最大文字数を超えたら入力できないようにしつつ何かしらの方法でエラー出してあげるのが良さそうですね！
ビジュアルデザイン
リンクがリンクに見えないという問題の話です。
これはすごく自分は反省していて、旧ブログUIではこの問題が発生していました。
↑ は、旧ブログのUIです。 underlineがないので、これがリンクになっているかどうかわからないと思います。本にあった通りのバッド例をやってしまっていたので、すごく反省しました。現状はちゃんと治しています。
まとめ
最後に今回の学びについてまとめます。
- Webは基本アクセシブルなため、Web標準で基本作るようにする。動きを上書きなどしてしまうことで、ユーザーにとって何が起きてるかわからなくなってしまうことがある。
- アクセシビリティを向上させるメリットのいくつかあるうちの一つに、「SEOの向上」がある。
- Googleのクローラーは全盲のユーザーとして考えると良い
- 適切にマークアップしないと理解が難しくなったり適切に評価してくれない
- 動きをコントロールできないカルーセルなどはアクセシブルではない
- リンクがリンクに見えないものはアクセシブルではない
- 色だけで判断してしまったり、ブログのテキストリンクではものにunderlineがなかったり
という感じです。まだまだアクセシビリティについて全然得意とは言えないですが、この本のおかげでなんとなく「良いUI」が判断できるようになった気がしています。
参考
0