“アクセシビリティ” の高いメールをデザインするための3原則
この記事は Email Accessibility Design Best Practice Tips の抄訳です。
世界は広く、多様であり、様々な背景を持つ人々が存在します。ユーザ向けの製品やサービスを設計・構築する際は、誰にでも受け入れられるものにすることが非常に重要です。世界全体での多様性の規模感の一例として、例えばWHO（世界保健機関）ではおよそ13億人が何らかの視覚障害を抱えて生活していると推定しています。
このような数字があれば、誰でも読めて、誰でも理解できるメールをデザインすることの重要性がすぐに分かりますよね。本ブログ記事では、シンプルで簡単に取り入れられるデザインTipsをご紹介します。
アクセシビリティとは？
MozillaのMDNによれば、「アクセシビリティとは、できるだけ多くの人にとって使用に適したWebサイトにすること」だそうです。これは障害を抱えている人だけではなく、異なるデバイスを使っている人や、回線速度が遅い人たちのことも考えてデザインするということです。
それでは、メールのテンプレートをデザインする際に考慮すべき「アクセシビリティ」について、いくつか考えてみましょう。アクセシビリティは創造性を阻害すると思われがちですが、そうではなく、あらゆるユーザに受け入れられるために従うべき制約であるに過ぎないということを覚えておいてください。本記事では、主にメールに焦点を当てたアクセシビリティデザインの3原則について説明します。
- 「色」を情報伝達の唯一の手段としない
- コントラストを確保する
- ビジュアルコンテンツに代わるものを用意する
よく考えて色を使う
よくあることですが、デザイナーは色に頼りすぎる傾向があります。これにより、色を識別できない一部のユーザを排除してしまう可能性があることについては認識しておきましょう。
それは色覚異常が原因であることもあれば、単にその色が明るすぎて読みにくいといった場合もあります。デバイスやモニタの種類によっても表示は異なります。手元のモニタでは良く見える薄めの灰色も、他の人にとっては薄すぎて読めないかもしれません。
システムステータスの通知メールの例を見てみましょう。システムの状態を色のついた丸印で表現しているのかもしれませんが、状況を具体的に表す説明文がないと、色覚障害のある人には緑/黄/赤の色の違いを区別できない可能性があります。
十分なコントラストを確保する
テキストの推奨コントラスト比は 4.5 : 1 以上です。とはいえ、デザイン作業中にどうやってコントラスト比を知ればいいのでしょうか？
ご安心ください。デザイン時に使えるツールがたくさんあります。個人的にとてもお勧めなのが、Contrastです。これはmacOS用のアプリで、色のコントラスト比がすぐに分かります。
もう1つ、Webベースのお勧めツールがAre My Colours Accessibleです。色コードを入力すれば、Webコンテンツのアクセシビリティガイドラインに適合しているかどうかを教えてくれます。
画像の代替テキストを設定する
メールテンプレートのユースケースを考えてみましょう。もし仮に、メールを受信したのが目の不自由な人で、そのメールの中に文字入りの画像がたくさん含まれていたとしたら、その人はコンテンツの大半を拾うことができません。こういった状況の助けとなるのが音声読み上げソフトですが、この種のソフトが機能するには通常、代替テキスト形式の追加情報が必要となります。
画像の代替テキストの設定例
<!-- この画像には代替テキストがなく、音声読み上げソフトが使えない --> <img src="img/fourth-of-july-sale-hero.jpg" />
<!-- 画像に代替テキストが含まれている良い例 --> <img src="img/fourth-of-july-sale-hero.jpg" alt="FOURTH OF JULY SALE" />
もう一つ、メール内の画像に代替テキストを設定すべき理由があります。メールクライアントが画像の読み込みを自動ブロックすることがあるからです。また、接続が不安定な時や、画像の読み込みが遅い場合にも便利です。画像に代替テキストを設定しておけば、ユーザはそのテキストを見て、そこに読み込まれるであろう画像を事前に理解することができます。また、代替テキストにもスタイルを設定することができるので、画像が読み込まれていない時の見た目もキレイに整えることができます。
まとめ
本記事ではアクセシビリティの重要性についていくつかご紹介しましたが、これはまだほんの序の口に過ぎません。Web周りのアクセシビリティや、世間に広く受け入れられるデザインについては、他にも多くのポイントがあります。もっと詳しく知りたい方は、Web Content Accessibility Guidelines (WCAG) 2.1を読んでみることをお勧めします。