アクセシビリティ講座を受講して自分のブログのアクセシビリティを点検した
最近以下のアクセシビリティに関する講座を受講しました。せっかくなので実践に移すことで学びを定着させたいなと思い、学んだ内容をもとに自分のブログサイトのアクセシビリティを見直しました。本記事には、見直しのなかで変更した点を記載します。
色について
カラーブラインドにはそれぞれ色の見え方が異なる、いくつかの種類があります（ex. 赤と緑が弱く見える、すべての色が弱く見える、など）。すべての色の見え方を確認しながらデザインするのはなかなか大変ですが、モノクロでみた場合に問題がなければ、どのタイプのカラーブラインドを持つ方が見ても識別がつく、とのことだったので、今回はモノクロでの見え方を確認しながら見直しをすすめました。
モノクロでの見え方を試すためには、以下のchrome extentionを利用しました。色を変える以外にも、screen readerデモなど様々なaccessibility check機能が備わっているので、使いやすかったです。
もともとの私のブログのホーム画面は以下のようなデザインでした。
| カラー | モノクロ |
|---|---|
 |
 |
これをAccessibilityの観点から見直し、最終的に以下のようになりました。
| カラー | モノクロ |
|---|---|
 |
 |
修正した箇所は以下のふたつです。
1. 記事サムネイル（絵文字）と背景のカラーコントラストを高くする
記事のサムネイルには絵文字を使用していましたが、その背景が黄色だったため、絵文字によっては、カラーコントラストが低すぎる状態になっていました。このため、背景を白に変更しました。
絵文字は白背景で使用される想定で作られていると思うので、白背景にすれば解決かな？と思ったのですが、白背景に対してカラーコントラストが十分ではない絵文字もありそうな気がしていて、どうしたものか～と思っています。黄色よりはましなのでいったん背景は白にして、見えにくそうな絵文字は使用を避けるなどの方法で対処したいと思います。
| 修正前 | 修正後 |
|---|---|
カラー 
|
カラー 
|
モノクロ 
|
モノクロ 
|
2. ナビゲーションバーのホバーステートをColor Independent（脱・色依存？）にする
カラーブラインドの方にも情報が確実にもれなく伝わるようにするための原則のひとつに、Color Independence （色からの独立？）があります。これは、メッセージを色のみに依存せずに伝えることができている状態を指します。
例えば、以下のようなグラフがわかりやすいかもしれません。１は色だけで割合の情報を伝えているので、モノクロになると読み取りにくく、カラーブラインドの方に情報が伝わりにくい可能性があります。一方、２のグラフは、各要素をパターンで塗りつぶしているので、モノクロでみてもわかりやすいです（＝色の見え方に関係なく情報を受け取ることができるようになりま）。
| 1 | 2 |
|---|---|
カラー 
|
カラー 
|
モノクロ 
|
モノクロ 
|
私のブログでは、ナビゲーションバーのホバーステートの表現が色のみに依存していました。コントラストが低い色の組み合わせだったこともあり、白黒でみるとほぼ、ホバー状態が識別できないようになっています。この状態を解消するために、ホバーすると下線が表示されるように変更しました。
| 修正前 | 修正後 |
|---|---|
カラー 
|
カラー 
|
モノクロ 
|
モノクロ 
|
文脈に依存したリンクテキストを脱する
リンクテキストは、Screen readerで読み上げられる場合に理解がしやすいよう、前後の文脈をたどらなくても、それだけで意味が通じるものであることが望ましいです。
わたしのブログ内でも（気を付けていたつもりだったのですが、、、。）、以下のような、前後を探さないと何のリンクだかわからないようなリンクテキストがあったので、修正しました。
| 修正前 | 修正後 |
|---|---|
「コースカタログ」という同じテキストが何個も並んでいる
|
「講義名＋"のコースカタログ"」というテキストに変更
|
ボタンのスタイルはボタンだけに
これは特にUsabilityとも重なる原則ですが、ボタン用のスタイルはボタンに必ず適用しろ（例外除き）！逆にボタン以外にボタン用のスタイルは適用するな！（英語：Reserve the button style only for buttons）ということを学びました。
これだけきくと、「そりゃそうじゃん」と思ったのですが、自分のブログを見返すと意外と守れていない部分がありました。
前提として、本ブログの記事カードは、①シャドーを要素の下と右に適用すること ②ホバー時に「押された感じのアニメーション（？）」を表示する ことで、この要素がボタンであることを伝えています（画像内、右のカードがホバー状態）。この①②のスタイリングの組み合わせを、本ブログサイト全体のボタンスタイリングと考え、本スタイリングを全てのボタンに適用し、逆にボタンではない要素には本スタイリングを適用しないようにする点検を行いました。
この原則を守れていなかったのは、以下のプロフィールページのプロフィール画像です。タダの画像なのに、シャドーがあることでなぜか押せそう感が漂っていました。シャドーを取り除いて、押せなさそうなスタイルに変更しました。
| 修正前 | 修正後 |
|---|---|
 |
 |
おわりです。
お読みいただきありがとうございました！
今回受講した講座を終えて、色の奥深さ（色の使い方のむずかしさ）にさらに関心を持ったので、次は色彩検定UC級を受けてみたいです！
わたしが受講した講座も具体例が豊富でおもしろかったので、おススメです！
Discussion