ウェブアクセシビリティ対策には、Webサイトやコンテンツにおけるデザイン上の配慮が欠かせません。「デザインにどのような配慮が必要なのか」「更新運用の際にデザインをどうやって維持すればよいのか」などの不安を持つ担当者の方も多いようです。本記事では、ウェブアクセシビリティに配慮したデザインとは何か、そのポイントや具体例、デザインを維持する方法などについて解説します。
この記事のポイント
- ウェブアクセシビリティへの対応にはデザイン上の配慮が欠かせない
- デザインのポイントは「JIS X 8341-3」の達成基準を指標にすること
- 適用したデザインを維持する方法には、運用ルールの策定やCMSの導入が有効
ウェブアクセシビリティに配慮したデザインとは、誰もが情報を取得しやすく、サービスを利用しやすいWebサイトのデザインを指します。
そもそも、ウェブアクセシビリティは「障害者や高齢者を含めた様々なユーザーがWebサイトで発信されている情報やサービスを支障なく利用できること」を指します。これを実現するためには、視覚障害や聴覚障害などを持つ方も利用できるデザインが必要です。
たとえば、テキストと背景色のバランスを知覚しやすくすることや、コンテンツにどのような画像や写真が貼られているのかを読み上げ機能だけでイメージできるように代替テキストを付与するなどが挙げられます。これらのデザインは、障害者や高齢者だけでなく、一時的に障害が出ている健常者などにも有効です。
デジタル庁が作成している「ウェブアクセシビリティ導入ガイドブック」でも、ウェブアクセシビリティの基本的なプロセスの中にデザインに関する項目が多く含まれています。
- 全体の構成の明快さなど、インタラクションデザイン、情報設計上の配慮が十分できているか
- 情報の配置が、HTML等で実装していく上で適切にマークアップできるデザインとなっているか
- コントラスト比、文字サイズ等、ワイヤーフレームや UIプロトタイプの段階で検討できることが達成されているか
- モーダルダイアログ、ポップアップメニュー、カルーセル、ハンバーガーメニュー等の実装上配慮が必要な要素の洗い出しができているか
ウェブアクセシビリティに配慮したデザインを取り入れることで、より多くの人に情報やサービスを届けることに繋がります。
ウェブアクセシビリティについては、ウェブアクセシビリティって何？企業のWeb担当者が最低限押さえておきたい基礎知識にて解説していますので、あわせてご覧ください。
ウェブアクセシビリティが重視されるのは、障害者や高齢者をはじめ多くの方がWebサイトの情報やサービスを利用できるようにするためです。もちろん、障害者だけに配慮するものではなく、Webサイトが利用できない、利用しにくいといった全てのユーザーのハードルを無くすために重要な配慮となります。
また、情報発信やサービス提供をする事業者にとって、自社の取り組みやサービスを様々なユーザーに届けることに繋がります。そのため、ウェブアクセシビリティに配慮したデザインを意識したWebサイト制作は、企業にとっての利益にもなるのです。
近年、障害者差別解消法の改正により、ウェブアクセシビリティが注目されています。より多くのユーザーに自社の情報やサービスを知ってもらうためにウェブアクセシビリティに配慮したデザインを取り入れる、良いタイミングだといえるでしょう。
障害者差別解消法の改正については、「【2024年改正法施行】企業Web担当者は、"努力義務"のウェブアクセシビリティにどう向き合うべきか」にて詳しく解説していますので、あわせてご覧ください。
ウェブアクセシビリティに配慮したデザインを実装するには、いくつかのポイントがあります。中でも、JIS規格である「JIS X 8341-3」の達成基準は、デザインをする上での指標になるものです。
達成基準は大きく「知覚可能」「操作可能」「理解可能」「堅ろう（牢）」の4つに分類され、それぞれ項目が示されています。このうち、デザインに関わるポイントをいくつか見ていきましょう。
|
カテゴリ |
項目例 |
概要 |
|
知覚可能 |
非テキストコンテンツ |
写真、図面、その他画像などに代替テキストを付与する |
|
知覚可能 |
色の使用 |
色で表現されている情報をその他の視覚的な手段で判断できる |
|
操作可能 |
キーボード |
マウスの利用が難しい方が、キーボードだけで操作できる |
|
操作可能 |
リンクの目的 (コンテキスト内) |
視覚障害の方が、文脈でリンクの目的を判断できる |
|
理解可能 |
一貫したナビゲーション |
各ページにおいて、サイトメニューが同じ順序に並んでいることで、目的のメニューがどこにあるのかを予測できるようになる |
|
堅ろう（牢） |
名前 (name) ・役割 (role) 及び値 (value) |
スクリーンリーダーや画面拡大をするソフトウェアなどが、利用者が使用する支援技術と互換性がある |
※参考：JIS X 8341-3:2016 達成基準 早見表（レベルA & AA） ウェブアクセシビリティ基盤委員会
ここに紹介したものは達成基準の一部ですが、このようなポイントをおさえたデザインを意識することで、ウェブアクセシビリティに配慮したWebサイトデザインを実現できます。
「JIS X 8341-3」については、「企業サイトが対応すべき適合レベルは？「JIS X 8341-3」における適合レベルの違いと評価方法について解説」で詳しく解説していますので、あわせてご覧ください。
ウェブアクセシビリティに配慮したデザインでは、様々なユーザーニーズを想定する必要があります。文字の見やすさや操作性を考慮し、情報の視認性を上げることがポイントです。ここでは、文字やコントラストなど、それぞれのカテゴリに分けて見ていきましょう。
文字で意識すべきは、フォントサイズや行間隔、文字間隔などが挙げられます。これらは、視認性と可読性を大きく左右する要素です。特に視聴覚障害者や高齢者などへ配慮する際には、フォントサイズを相対的な単位で指定することや、適切な行間や文字の間隔を意識する必要があります。文字は、視覚的な負担を減らすためのデザインとして重要です。
ウェブサイトのフォントサイズは、相対的な単位で指定することがポイントです。これは、ブラウザなどでの文字のサイズ変更に対応するためです。絶対的な単位で文字の大きさを設定してしまうと、ユーザー側でのサイズ変更に対応できなくなってしまいます。
相対的なフォントサイズを指定する単位は、総務省にて「em」「ex」「％」の3つが示してあります。
※「％」も、フォントサイズの相対的な指定単位を表しています。
|
em … 初期設定サイズの文字の高さに対する相対値の単位 
|
フォントサイズは、ウェブサイトを閲覧するユーザー側で調整できますが、拡大しなければ読みにくいフォントサイズを指定することは避けましょう。ブラウザなどの操作に慣れていない方などが、フォントサイズを調整しなくても読めるサイズを指定しておくことが大切です。
行間隔は、狭すぎると文字が詰まり、読みづらいと感じさせてしまいます。そのため、適切な間隔を設定することが大切です。行間隔については、フォントサイズの1.5倍に設定すること、段落がある場合は行間をフォントサイズの2倍に設定することが推奨されています。
| 行の間隔 (行送り) をフォントサイズの少なくとも 1.5 倍に設定する 段落に続く間隔をフォントサイズの少なくとも 2 倍に設定する |
※引用元：Web Content Accessibility Guidelines (WCAG) 2.2 WAIC翻訳
また、行間が広すぎると文章全体の繋がりが把握しづらくなり読みにくいため、上記の推奨ルールを元に適切なバランスを意識しましょう。
文字の間隔（字間）を適切に設定することも、読みやすさを向上させるポイントの一つです。字間が狭いと文字全体が詰まって見えるため、可読性が損なわれる可能性があります。文字の間隔はフォントサイズの0.12程度に設定することが推奨されており、WCAGでは以下のように示されています。
| 文字の間隔 (字送り) をフォントサイズの少なくとも 0.12 倍に設定する |
※引用元：Web Content Accessibility Guidelines (WCAG) 2.2 WAIC翻訳
また、スペースで字間を作ることは避けましょう。スクリーンリーダーなどの音声読み上げ機能を使用する場合に、正しく読み上げられない可能性があるためです。
- NGの例：氏□名（□はスペース）
- OKの例：氏名
コントラスト比とは、テキストと背景のコントラストのバランスのことです。コントラスト比を高くすることで、視認性が向上して読みやすくなります。ウェブアクセシビリティの基準としては、文字と背景のコントラスト比は4.5:1を保つことが求められています。フォントサイズの大きな文字については、3:1以上でも許容範囲です。
| テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く: 大きな文字 サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。 |
※引用元：Web Content Accessibility Guidelines (WCAG) 2.2 WAIC翻訳
コントラスト比については、「ウェブアクセシビリティ対応における「コントラスト比」とは？定義や基準、確認方法をわかりやすく紹介」にて詳しく解説していますので、あわせてご覧ください。
画像は視覚的に情報を伝えるための手段ですが、ウェブアクセシビリティ対応においては、画像もすべてのユーザーが利用できるように配慮することがポイントです。ここでは、画像を活用する上での代替テキスト設定や、グラフや図に対する情報補完についてみていきましょう。
画像を使う際には、代替テキスト（altテキスト）を設定しましょう。代替テキストは、それがどのような画像であるかをテキストで説明するものです。例えば、視覚に障害がある方は音声読み上げ機能などを用いてウェブサイトの情報を取得しますが、画像の内容をスクリーンリーダーで読み上げることはできません。このとき、代替テキストを付与しておくことで、画像の代替テキストを読み上げることが可能になります。設定する代替テキストは画像の内容や目的を明確に、そして簡素に伝える文章にしましょう。
グラフや図などの画像に関しては、代替テキストの設定はもちろんですが、加えてテキストでの説明を補足情報として追加しましょう。例えば、ウェブサイトに目的地までのルートを示した地図画像を掲載する際には、画像の下にルートをテキストでも記載することで、スクリーンリーダーでの読み上げが可能になり、ユーザーは地図画像を見ることなく情報を取得できます。
|
地図画像とテキストによる補足情報の例 
|
ウェブアクセシビリティでは、文字や画像の他にも配慮すべき様々な要素があります。ウェブサイト上に設置するボタンのクリック範囲やリンクテキストの表現は、操作性を大きく左右します。また、入力フォームやフォーカス、ナビゲーションの一貫性などへの配慮もデザインの大切なポイントです。
ボタンやリンクをクリック（タップ）できる範囲の設定は、操作性を向上させる重要な要素です。近年ではモバイルデバイスを使うユーザーも増えたことから、指でタップする操作も考慮しなければなりません。クリックできる範囲については、24px × 24px以上であることが求められます。
| ポインタ入力のターゲットのサイズは、少なくとも 24 × 24 CSS ピクセルである。 |
※引用元：Web Content Accessibility Guidelines (WCAG) 2.2 WAIC翻訳
ただし、複数の小さなボタンやアイコンが画面上に設置されている場合などの条件下では例外となります。
いずれにしても、ユーザーのクリックミスを防げるように、クリック範囲を設定することが重要です。
リンクテキストを設置する場合は、「ここをクリック」や「詳細はこちら」などの表現を避けて、リンク先の具体的な内容やサイトタイトルなどがわかるようなテキストを使うこともポイントの一つです。また、リンクテキストには色や下線、アイコンなどの装飾を施すことで、リンクであることが分かりやすいようにしましょう。文章中にリンクテキストを設置する場合は、通常のテキストとのコントラスト比を3:1以上にすることが求められています。
|
以下の視覚的提示には、隣接した色との間で少なくとも 3:1 のコントラスト比がある。
|
ユーザーが情報を入力するためのフォームは、入力フィールドであることが簡単に理解できるように配慮することが大切です。
| ユーザインタフェース コンポーネントの設定を変更することが、コンテキストの変化を自動的に引き起こさない。ただし、利用者が使用する前にその挙動を知らせてある場合を除く。 |
※引用元：Web Content Accessibility Guidelines (WCAG) 2.2 WAIC翻訳
また、入力ミスが発生した際には、それが視覚的に理解できるエラーメッセージを表示し、エラーメッセージはスクリーンリーダーで音声認識も可能にすることで、視覚および聴覚に障害がある方の双方へ配慮することができます。
フォーカスは、ウェブサイト上をタブキーなどのキー操作によって移動する際、どの要素が選択されているかを可視化するものです。フォーカスする順序や見え方を意識することで、スムーズなキーボード操作を可能にします。
例えば、画面上に「キャンセル」「変更」「確定」という並びでボタンが配置してある場合でも、以下の順序でフォーカスするとスムーズな操作につながるでしょう。
①変更
②確定
③キャンセル
| ウェブページが順を追ってナビゲートできて、そのナビゲーション順が意味又は操作に影響を及ぼす場合、フォーカス可能なコンポーネントは、意味及び操作性を損なわない順序でフォーカスを受け取る。 |
※引用元：Web Content Accessibility Guidelines (WCAG) 2.2 WAIC翻訳
また、フォーカスインジケータが、フォーカスしている要素全てを満たしていることが視覚的にわかるよう配慮することが大切です。
| キーボードのフォーカスインジケータが視覚的に表示される場合、フォーカスインジケータの領域が以下の全てを満たす。 フォーカスされていないコンポーネント又はサブコンポーネントの、太さ 2 CSS ピクセルの外周の領域と同等以上の大きさである。かつ、 フォーカスされている状態とフォーカスされていない状態との間で、同一ピクセルに少なくとも 3:1 のコントラスト比がある。 |
ナビゲーションは、ウェブサイト全体で統一し、シンプルな構造にデザインすることがポイントです。
| ウェブページ一式の中にある複数のウェブページ上で繰り返されているナビゲーションのメカニズムは、繰り返されるたびに相対的に同じ順序で出現する。 |
※引用元：Web Content Accessibility Guidelines (WCAG) 2.2 WAIC翻訳
例えば、一貫したサイトメニューやサイトマップは分かりやすく、ページを移動してもユーザーが迷わずに操作できます。
- NGの例：ページごとにナビゲーションの順序が異なる
トップページ：【HOME SERVICE NEWS BLOG】SERVICEページ：【トップページ ニュース ブログ ニュース】 - OKの例：全てのページで一貫したナビゲーション
トップページ：【HOME SERVICE NEWS BLOG】SERVICEページ：【HOME SERVICE NEWS BLOG】
また、各ページにパンくずリストなどを設置することで、ユーザーは自分の位置を把握しやすくなり、使いやすいウェブサイトを実現できます。
ウェブアクセシビリティに配慮したデザインをWebサイトに適用した後も、サイト更新をはじめとした運用をしていかなければなりません。その過程で、デザインが崩れることや、統一性を欠いてしまうことは避けなければなりません。
運用においてデザインを維持する方法としては、運用ルールを策定することやCMSを導入することが有効です。
Webサイトの情報更新や、ウェブページを新規に追加する際のルールを策定しておくことが大切です。ウェブアクセシビリティに配慮したデザインを意識した運用ルールを社内に周知し、徹底しましょう。
ルールの基準になるのは、ウェブアクセシビリティにおけるガイドラインや、先述したJIS規格の「JIS X 8341-3」です。たとえば、画像や写真を掲載する際には、必ず代替テキストを付与することや、文字と背景のコントラスト比の基準などのチェック項目を用意しておきましょう。
自社のWebサイトをクラウドCMSへ移行する方法も一つの手段です。クラウドCMSには、ウェブアクセシビリティ対策を標準実装しているサービスがあります。たとえばShareWithでは、「JIS X 8341-3」規格の適合レベルAAに準拠しており、導入だけで現行の自社Webサイトを「AA準拠」したサイトへリニューアルできます。
ウェブアクセシビリティに配慮したデザインを維持しながらWebサイトを運用する方法の一つとして、CMSの導入を検討してみてはいかがでしょうか。
ShareWithのウェブアクセシビリティ対応に関する詳細は、こちらをご覧ください。
ウェブアクセシビリティに配慮したデザインを適用することで、様々なユーザーが情報の取得やサービス利用をしやすくなります。
デザインは、JIS規格である「JIS X 8341-3」の達成基準を指標にし、適用レベルAA準拠を活用するとルール策定がしやすくなります。
運用ルールの徹底やクラウドCMSを導入するなどの方法で、ウェブアクセシビリティに対応したデザインを維持した自社Webサイト運用を行いましょう。
