「見にくい、読みにくい『困った！』を解決するデザイン」を読んで感じた実装者も意識したい10のこと
はじめに
2023年3月頃にconnpassでアクセシビリティに関する講座を拝聴しました。
登壇者の株式会社freee所属のデザイナー/エンジニアである山本さんが書籍「見にくい、読みにくい『困った！』を解決するデザイン」を激推ししていたので購入してみました。
自分はデザイナーではありませんが、本書を通じて実装者も意識したいと感じたことがいくつかありましたのでまとめてみました。
本書はデザイン本なので、「いやそれはデザイナーの仕事やろ」って突っ込みたくなる項目もあると思います。
ただ実装者もデザインのことをある程度知っていることで、”よしなに”指示されたときにデザインの知識に基づいた実装ができたり、ときにはデザイナーに問題提起したりと、より利用者が使いやすいサイト・サービス作りができるのではないかと思っています。
①ユーザビリティはアクセシビリティの上に成り立つもの
今までユーザビリティとアクセシビリティって何となく同じような感じだと思っていましたが、本書でその違いが分かりやすく説明されています。
ユーザビリティ：特定の状況における使いやすさ
アクセシビリティ：使える度合いや人、状況の幅広さ
アクセスできないものは、使いやすさも使いにくさもないのでまずは”誰かがアクセスできない状況”は改善しなければと感じました。
②コントラスト比は感覚ではなく数値で決める
WCAG（Web Content Accessibility Guidelines）という、W3Cが作成するガイドラインがあります。 人間の目では問題なさそうな色の組み合わせでも基準値を満たせていない場合があるので、数値を使うことでアクセシビリティの向上はもちろん、チーム内での統一やクライアントワークでの説明の根拠にもなるとのこと。
本書ではコントラスト比のチェックツールなどもいくつか紹介されています。
③フォームのエラー箇所は色以外の手がかりも組み合わせる
必須項目などがあるフォームの実装で、エラー箇所があるときに赤くするなどの方法があるかと思います。
ただP型色覚の人にとっては色が変わっただけでは視認しにくいという場合があるそうです。（音声読み上げの場合も。）
そこでエラー箇所に関しては、テキストのラベルやアイコンを加えるのがよいと説明されています。
参考になりそうなデザインを調べていたところ、baigieさんの記事で分かりやすいものがありましたので共有します。
音声読み上げに対応する場合は実装面でも色々考える必要がありそうですね。
④変更できない文字サイズはあかん
サイトやアプリで拡大機能を制限してしまうのはご法度です。
具体的な悪手として、行間が絶対値で固定されていると文字が拡大されたときに文章が重なったりはみ出たりしてしまう、というケースが挙げられています。
.text {
/* NG */
line-height: 20px;
/* Good */
line-height: 1.8;
}
他にも例えば要素にheightを指定するのも拡大したときに崩れる要因かなと思います。
⑤文字サイズ変更ボタンは必須ではない
自治体や公共機関のウェブサイトで見かける文字サイズ変更ボタン。
こちらはウェブアクセシビリティに必須の機能と思われがちですがそうではないみたいです。
その根拠として以下のように説明されています。
拡大機能が必要な方は、普段から自分に合ったOS、ブラウザの設定やソフトを使ってウェブサイトを見ています。
これは個人的に盲点でした。
もし文字サイズ変更ボタンを実装する際は以下の点を確認しましょうとのこと。
- 十分なサイズ（200%程度）まで段階的に拡大できるか
- キーボードでも操作できるか
- 画像も拡大できるか
- 拡大次にも問題なくコンテンツが利用できるか
⑥代替テキストは誰が考えればよいか
皆さんご存じalt属性。
Twitterなどでもたまに見かけますが「代替テキストは誰が考えるのが最適なのか？」と疑問に感じている方も多いのではないでしょうか。
本書では、以下のように説明されています。
最も適切な代替テキストを考えられるのは、デザインや原稿などコンテンツを作成する人といえます。
ポジション的にはデザイナー、ディレクターあたりでしょうか。
この辺は会社やチーム全体として決めていかないといけない部分なので実現できている会社は少ないのではないかと感じます。
⑦ポリゴンショックを繰り返すな
世代がバレてしまいますが”ポリゴンショック（ポケモンショック）”をご存じでしょうか。
このポリゴンショックのように、見ている人に害を及ぼす可能性のある表現を”閃光”というそうです。
NHKと日本民間放送連盟はアニメーション等の映像手法に関するガイドラインを定めており、次のような表現には細心の注意を払うことを呼びかけたそうです。
- 1秒間に3回を超える映像や光の点滅、とくに鮮やかな赤の点滅
- コントラストの強い画面の反転や急激な場面転換
- 画像の大部分を占める規則的なパターン模様
ウェブサイトは暗い場所で見ることも大いに想定されるので気を付けたいですね。
ちなみに自分が過去携わった案件でも、
例えば背景#fffが大部分を占めるサイトのメニュー画面の背景が#000でなおかつ全画面を覆うレイアウト、みたいなデザインがいくつかありました。
正直メニューの検証のときに何回も開いていてクラッとしていたのですが、デザイナーに言い出すことはできませんでした…。
ただ何とかしないと思って、いきなり黒のメニュー画面に切り替わるのではなく、アニメーションの途中に一旦opacity:0.5のグレーのレイヤー挟んだ演出にしたという経験があります。（アニメーションの演出は”よしなに”だったので）
( ˘ω˘ )
⑧勝手に動くUIはやめよう
文章を読むスピードは人によって異なるので、自動で切り替わるコンテンツは注意が必要ですとのこと。
（例）ニュースティッカー、カルーセル、スライドショー
ニュースティッカーはこういうの↓
本書では代替案として「見る人が自分のタイミングで表示をコントロールできるUI」が提示されていました。
⑨過剰なアニメーションについて
アニメーションは自分も好きなので気を付けたい項目です。
本書では以下のように注意喚起されています。
画面内の要素が動き続けると、ADHDなど気が散りやすい特性のある人がコンテンツを読むことが難しくなる場合もあります。意図しないアニメーションが続くと、画面酔いを起こしてしまう人もいます。
挿絵のイラストの男性が「すごい動きだね！で、何のサイトだっけ？」と言っていて、わかりみが深かったです。
とはいえこの辺の問題は色々議論が必要だと思いますので、ここでは特に言及しないでおきます。
ただ事実として、上記のようなアニメーションによるデメリットもあることを理解しておくことは必要だと思います。
⑩マウス以外でも操作できるようにしよう
本書では小さなボタンによってうまくタップできない、という事例が紹介されています。
こちらも感覚などではなく、ガイドラインに沿って最小サイズを確保したいですね。
Apple
最後に
自分もまだ読み途中ですが2023年2月頃に発売された「Webアプリケーションアクセシビリティ」という本はより深くアクセシビリティについて学べる良書だと思いますので興味がある方はぜひ！
業界全体でアクセシビリティへの意識を変えていきたいですね。
Discussion