目次
Webサイト・アプリをデザインする際、意識していることはありますか？Webデザイナー／UIデザイナーによって重視する点はさまざまですが、その中でも必ず意識したいのが「アクセシビリティ」です。
今回はデザインのアクセシビリティとは何か、高めるためにはどうしたらよいかについて紹介します。アクセシビリティをチェックする際に活用できるサイトやツールもあわせて解説するので、ぜひ参考にしてみてください。
アクセシビリティとは一種のバリアフリー
アクセシビリティとは、Webサイト・アプリの見やすさや使いやすさを示す基準です。高齢者や障害者を含んだすべての人がWebサイト・アプリを自由に見られる・使える状態を指すため、一種のバリアフリーともいえます。場合によっては、インクルーシブデザイン、ユニバーサルデザイン、といった用語と近い意味で用いられます。
アクセシビリティとユーザビリティの違いは対象範囲の広さ
アクセシビリティと混同しやすいのが「ユーザビリティ」です。2つの違いは、対象範囲の広さにあります。
アクセシビリティはすべての人にとって、ユーザビリティは特定の人にとって使いやすいかどうかという基準です。そのため、ユーザビリティはアクセシビリティの下位にあたる考え方と覚えておくとよいでしょう。
日本では2004年に「高齢者・障害者等配慮設計指針」が制定
日本におけるアクセシビリティのルーツは、2004年に制定された「高齢者・障害者等配慮設計指針」です。指針の制定以降、世界の動きに合わせてその都度改定され、誰にでも見やすい・使いやすいWebサイト・アプリの制作プロジェクトに反映されています。
なお、最新の世界基準は2022年9月に勧告された「WCAG(Web Content Accessibility Guidelines)2.2」となっています（参考：WCAG2.2）。
デザインのアクセシビリティを高めるポイント
デザインのアクセシビリティを高めるポイントは、おもに次の7つです。
- 見出しのデザインに一貫性を持たせる
- 重要な情報は複数の色を使って目立たせる
- 背景色や文字色のコントラスト比を高める
- 文字化けしないよう機種依存文字や半角カタカナは使用しない
- 画像の内容がわかるように代替テキストを記載する
- 専門用語や難しい言葉を使わない（中等教育レベルの言葉が適切）
- ナビゲーションメニューを設置する
さらに詳しく知りたい方は、後述の「東京都カラーユニバーサルデザインガイドライン」をぜひ参考にしてみてください。
アクセシビリティに配慮したデザインの例
引用：ここでは、UK Home Office日本語版をもとに具体的なデザイン例を3つ紹介します。デザインのアクセシビリティについて理解を深めたい方は、ひとつずつチェックしていきましょう。
視覚障害がある方
視覚障害がある方のアクセシビリティを向上させる、あるいは低下させる施策は次のとおりです。
| すること | するべきでないこと |
|---|---|
| 読みやすいようにコントラストと文字サイズに配慮する | 低いコントラストと小さい文字サイズを使う |
| 全ての情報をWebページ（HTML）で公開する | ダウンロードの中に情報を埋没させる |
| 色や形、文字を組み合わせて意味を伝える | 色だけで意味を伝える |
| 順序立てた論理的なレイアウトにする | 拡大したときに文章が折り返して表示される |
| ページ全体にコンテンツを広げる | 拡大したときに横スクロールが必要になる |
| ボタンと通知は文脈に沿って配置する | 文脈と分離した操作をさせる |
身体障害がある方
身体障害がある方のアクセシビリティを向上させる、あるいは低下させる施策は次のとおりです。
| すること | するべきでないこと |
|---|---|
| クリック可能な範囲を広くする | 操作に精密さを要求してしまう |
| 操作対象の間を空ける | 操作対象を近づけすぎる |
| キーボードや音声だけで使用できるように設計する | マウスをたくさん動かす必要がある |
| 携帯電話やタッチスクリーンを想定して設計する | 短い時間制限を設ける |
| ショートカットを提供する | タイピングやスクロールでユーザーを疲れさせる |
不安状態にある方
不安状態にある方のアクセシビリティを向上させる、あるいは低下させる施策は次のとおりです。
| すること | するべきでないこと |
|---|---|
| 操作を終えるのに十分な時間がある | ユーザーを急がせたり、不必要な時間制限を設ける |
| 何が起きたかや、これから何が起こるかを説明する（確認メールを送信しました、など） | 次にすることや時間制限でユーザーを混乱させる |
| 重要な情報は明確にする | 操作の結果がはっきりわからない |
| 操作を完了するために必要なサポートを提供する | サポートやヘルプにアクセスしにくい |
| ユーザーが送信前に入力内容を確認できる | ユーザーを放置してしまう |
デザインのアクセシビリティをチェックできるサイトやサービス
最後に、デザインのアクセシビリティをチェックできるサイトやサービスを6つ紹介します。それぞれ詳しく見ていきましょう。
Adobe Color
Adobe Colorで利用できるコントラスト⽐チェックツールでは、⽐較的新しい規格「WCAG2.1」が基準になっています。
チェックしたコントラストはカラーパレットに登録でき、Adobeのクラウドライブラリで共有も可能です。そのため、複数のWebデザイナー／UIデザイナーでWebサイト・アプリ制作を進める際に利用しやすいチェックツールです。
東京都カラーユニバーサルデザインガイドライン
「東京都カラーユニバーサルデザインガイドライン」は、色の見え方などの基礎知識から実践的な取り組みや工夫までを記載した指針です。
最後部にはチェックリストがあり、Webサイト・アプリのデザインのアクセシビリティについて網羅的にチェックできます。コントラスト⽐は先ほど紹介したAdobe Colorを併用すると、より精度が増すでしょう。
こちらのガイドラインの具体的な使用例として、ナビゲーションをデザインした後に、コントラスト比を確認した際に、見えづらくなる可能性があると把握できることがあります。その際にナビゲーションのデザインをカラーリングだけで工夫するのではなく、各メニュー近くにピクトグラムなどのアイコンを配置することで、様々な方に直感的にわかりやすいナビゲーションをデザインすることができます。
XDプラグイン Stark
XDプラグイン Starkは、⾊覚チェックに使⽤できるツールです。
コントラスト⽐も確認できますが、オブジェクトやプラグインをその都度選ぶ必要があります。作業効率を考えると、コントラスト比はコピペしてチェックできるAdobe Colorを利用するなど使い分けるのがおすすめです。
なお、無料版もありますが、1～3型の各1種類ずつ、計3パターンしかチェックできません。また、基準が「Web Content Accessibility Guidelines (WCAG) 2.0」のため、Adobe Colorよりも若干古い点もあらかじめ把握しておきましょう。
Syncer
Syncerは、文字色と背景色の組み合わせをチェックできるツールです。背景色と文字色のコードを入力すると、色のコントラストを計算してくれます。
背景色のみを入力した場合は、コントラスト比の高い順に文字色の候補が表示されます。特にデザインの配色で悩んでいるWebデザイナー／UIデザイナーは、ぜひ利用してみてください。
NVDA日本語版
NVDA日本語版は、音声読み上げソフトです。読み上げ機能を使った際に、どのような音声になるかチェックできます。
80以上の言語に対応しているため、グローバルなWebサイト・アプリ制作でも活用できる点も大きなメリットといえるでしょう。
Unicom
Unicomは、HTML/XHTML文書のチェックツールであり、W3Cが定めるコード構造にのっとっているかを確認できます。チェック方法は、次の3つです。
- URLを指定
- ファイルをアップロード
- 直接入力
Webサイト・アプリの制作途中では、直接入力でその都度アクセシビリティをチェックするとよいでしょう。
まとめ
Webサイト・アプリのアクセシビリティは、ユーザーファーストのデザインを考える上で必ず意識したいポイントです。すべてのユーザーが見やすい・使いやすいデザインにするためには、文字の大きさや色などさまざまな要素に配慮する必要があります。
Webデザイナー／UIデザイナーは今回紹介したサイトやサービスを利用しながら、アクセシビリティの高いデザインを設計していきましょう。
