2018年1月27日に開催された WCK Meeting Vol.58 「新春ライトニングトーク大会2018」で「インクルーシブに楽しむアクセシビリティ」という発表をしました。そこで参加者のみなさんに「Web Accessibility for Designers」というポスターを配りました。
この記事は、「Web Accessibility for Designers」ポスターの制作意図と補足説明を書いたものです。
なぜ作ったのか
当日のLTでは、主にウェブアクセシビリティの魅力や取り組むメリットについてお話ししました。持ち時間の10分では具体的に何をすればいいかまで伝えられなかったので、「お持ち帰り」できるポスターを作りました。
紙のポスターを配ることで、“ウェブに載るだけで圧倒的にアクセシブル”を逆説的に感じてもらおうという意図もありました。
アクセシビリティのことを知らなかった人にも興味を持ってもらえるように、手に取りたくなる、持って帰りたくなる、飾りたくなるようなフライヤーをイメージしてデザインしました。サイズはA3、表がざらざら裏がツルツルのハトロン紙に孔版2色印刷です。
元ネタと編集
ポスターの元ネタにしたのは WebAIM のインフォグラフィック Web Accessibility for Designers 。アクセシビリティを確保するために配慮すると良い基本の14項目が簡潔にまとめられたものです。
このうち、英文特有の All caps の項目と、絶対必要とは言いにくいスキップリンクの項目を外した12項目をポスターにしました。日本語訳は Website Usability Info の記事と、 書籍「デザイニングWebアクセシビリティ 」を参考にしてまとめました。
Great web accessibility starts in the design.
WebAIM は、このインフォグラフィックについて以下のように説明しています。
The focus of web accessibility is often on web development – the things that happen in HTML, CSS, or JavaScript after a site has been designed visually. Optimal accessibility should start much earlier, as part of the visual design process. We have created an infographic that highlights a few important principles of accessible design.
Web Accessibility for Designers | WebAIM
意訳：ウェブアクセシビリティの焦点は、サイトのビジュアルが完成した後の HTML や CSS、JavaScript などの開発段階に置かれることが多いです。最適なアクセシビリティは、ビジュアルデザインプロセスの一環として、もっと早い段階から始めるべきです。アクセシブルなデザインの重要な原則を取り上げたインフォグラフィックを作成しました。
周りのウェブ制作の現場でも、アクセシビリティはコードを書く人が頑張るものというイメージが少なからずあるように思います。しかし企画構成や設計、ライティング、ビジュアルデザインの段階からアクセシビリティを考慮できれば、よりスムーズにアクセシブルなサイトにできます。
ポスターに書いた “SHIFT LEFT” には、アクセシビリティの出発点を制作工程のより早い段階へシフトしようというメッセージを込めました。
デザイナーのためのウェブアクセシビリティ基本の12
ポスターにした12項目には、それぞれ短い説明文とインフォグラフィックをつけました。以下にその内容と補足を掲載します。
見出し構造を早い段階から設計する
コンテンツの骨格や関係が伝わるような論理的な見出し構造を意識しましょう。
補足：コンテンツに適切な見出しをつけることで、ページの概要をざっくり把握したり、必要に応じて飛ばし読みできるようになります。スクリーンリーダーでは「見出しジャンプ」といって、目的のセクション先頭に移動する機能が使われることもあります。
記事の冒頭に目次がついていると、その記事がどんな構成で、どこを読むと良さそうか判断しやすくなりますよね。あの感じをイメージしてみてください。
大見出し、小見出しといった見出しの種類を選ぶ場合は、文字の大きさや色などの見た目ではなく、コンテンツの親子関係（階層構造）に合わせて選ぶように意識しましょう。
H2, H3, H4…から見出しレベルを選択できる。
読み上げ順序に配慮する
音声読み上げの順序と見た目の順番を同じにしましょう。
補足：スクリーンリーダーを使っている人は画面を見ていないとは限りません。スクリーンリーダーの読み上げ順と見た目の順番が異なると、混乱していまいます。スクリーンリーダーでもコンテンツの意味が通じる順序で読み上げられるようにしましょう。
十分なコントラストを確保する
チェックツールを使って背景と要素のコントラストを確認しましょう。
補足：文字の色が薄かったり、背景色と近かったりすると、利用者の環境や視力によっては読めないことがあります。本文サイズの文字は、背景とのコントラスト比を 4.5：1 以上確保するようにしましょう。 自分の目ではくっきり見えていると思っても、意外とこの基準値を満たせない色の組み合わせもあります。コントラストの確認にはチェックツールを使いましょう。
私は「Contrast」という Mac アプリを愛用しています。ツールバーに常駐していて、デザインツールによらず気になったときにすぐチェックできるので便利です。
コントラストに配慮することで、世界中の視覚障害を持つ方にもやさしいデザインにできます。
可能な限りテキストを用いる
画像文字ではなくテキストを使うことで拡大表示や支援技術を使った閲覧や翻訳がしやすくなります。
補足：CSS の表現力が広がったことやウェブフォントの普及により、最近では画像文字を使う機会も減ったように感じます。テキストを使うと、支援技術や翻訳などの機械処理がしやすくなるほか、以下のようなメリットも得られます。
- 拡大しても鮮明に表示できる
- 色やスタイルを変更できる（例：ハイコントラストモード、色反転）
- 画面幅に応じて折り返し表示できる
- テキストをコピー＆ペーストできる
- 修正・変更がしやすくなる
どうしても画像文字を使いたい場合は、きちんと代替テキストをつけるようにしましょう。
適切な文字サイズにする
文字サイズ変更ボタンは不要です。デザインと支援技術の力を信じましょう。
補足：アクセシビリティ対応というと、「文字サイズ変更ボタン」を思い浮かべる方もいらっしゃるかもしれません。しかし文字サイズの変更が必要なユーザーは、普段からブラウザの設定や支援技術の拡大機能を利用しているため、ウェブページが文字サイズ変更ボタンを提供する必要はありません。
ウェブページの提供者は、誰も読めない小さすぎる文字でデザインしないこと、ユーザーの拡大縮小表示を制限（user-scalable=no）しないことに留意しましょう。
参考記事：文字サイズ変更ボタンを提供しなければいけないの？｜WebA11y.jp
読みやすい行長にする
一行の長さが長すぎても短すぎても文章が読みにくくなります。文字サイズと行長のバランスに配慮しましょう。
補足：1行が長すぎると、行末から次の行頭への視線の移動が大きくなり、読んでいる場所を見失いやすくなります。逆に1行が短すぎても、改行が増えて文章の分断が多くなるため読みづらくなってしまいます。1行の文字数は全角40字程度までに収まるようにレイアウトしましょう。
本文の読みやすさには、行間や段落間のマージンも重要な役割を果たします。行間は line-heght: 1.5〜2 程度、段落間は行間よりも広く取るように組みましょう。
色だけに依存しない情報伝達を考える
色を識別しにくかったり、色表示を無効にしているユーザーのために、文字や形、パターンなど色以外でも情報が伝わるデザインにしましょう。
補足：グラフやカレンダー、ボタンなどの種類を表すために、色のみが識別の手がかりになっていると、色が分からない状況では情報が伝わらなくなってしまいます。ページをモノクロ印刷した場合を想像すると分かりやすいかもしれません。
テキストラベルを併記したり、線や塗りの種類を変えるとより多くの人に伝わるデザインになります。
リンクを識別しやすくする
リンク箇所は色だけでなく下線を引くなど、その他の部分と明確に区別できるスタイルにしましょう。
補足：本文中のテキストリンクがリンクに見えなかったり、リンクでない要素がリンクに見えると、ユーザーが必要な情報に辿り着けなかったり、操作に混乱してしまいます。
マウスオーバーするまでその要素のインタラクションがわからないデザインにしてはいけないのだ。
:hoverの誤用について｜yuhei blog
テキストリンクには下線をつける、矢印アイコンをつける、ボタンにするなど、サイト内で一貫したスタイルを適用して、押してみなくてもリンクがリンクと分かるようデザインしましょう。
リンク先が予測できるリンク内容にする
「こちら」など、単独ではリンク先が分からないリンクテキストは混乱の元になります。リンク先を予測できる内容を含めましょう。
補足：「こちら」「ここをクリック」「もっと見る」「詳細」など、それだけではどこにリンクされているか分からないリンクテキストはユーザーに負担をかけてしまいます。
リンク先のタイトルを含めたり、周辺のテキストをリンクに含めるなど、リンクテキストだけ抜き出してもリンク先が伝わるようにしましょう。
フォーカス表示をサポートする
キーボード操作時はフォーカスを移動して要素を選択します。ブラウザ標準のスタイルを活かすなど、フォーカス位置が視覚的に識別できるようにしましょう。
補足：ブラウザ標準のフォーカス表示がビジュアル的に好ましくないという理由でフォーカス表示を消してしまうのはいただけません。何気なく使っていたリセットCSSに outline: none; が含まれていて、意図せずフォーカスを消していることもあるかもしれません。
普段からキーボード操作を行なっているユーザーは標準のフォーカス表示に慣れています。デフォルトのスタイルを採用する、というのも立派なデザインです。
参考記事：フォーカスの可視化はデザインを変更しても問題ないですか？ブラウザ標準のままの方がいいですか？
ユーザーを迷わせないフォームにする
明確なラベルや説明を付け、入力エラー表示や修正方法への誘導をわかりやすく設計しましょう。
補足：フォームの入力欄には何を入力すれば良いかすぐに分かるラベルをつけ、必要に応じて入力条件や記入例の説明をつけましょう。ラベルや説明をプレースホルダとして提供すると、入力中にそれらが読めなくなるので避けましょう。
入力エラーが発生した場合は、どの項目をどのように修正すれば良いかを明示しましょう。
アニメーションや動画、音声は慎重に扱う
勝手に再生せず、ユーザーが再生／一時停止できる手段を与えましょう。発作を引き起こすようなチカチカする閃光は避けましょう。
補足：画面が激しく明滅する表現は、頭痛や吐き気、けいれんなどの発作を引き起こすことがあります。アニメーションや動画に閃光にあたる表現がないか注意しましょう。
音声や動画は勝手に再生せずに、ユーザーが任意のタイミングで操作できるようにしましょう。 カルーセルなど自動で動く表現を使う場合は、手動でも操作できるようにしたり、一時停止ボタンを提供しましょう。
参考リンク：Should I Use A Carousel?
さらに学ぶには
「Web Accessibility for Designers」ポスターは、アクセシビリティのごくごく入り口の簡易案内のようなものです。より詳しく学びたくなったら、以下の書籍やページに進んでみてください。