ブログblog

デザイン面でのWebアクセシビリティ対策

Writer: miyajima 更新日:2024/05/17

こんにちは、デジナーレ東京オフィスのWebデザイナー宮島です。

2024年4月1日に施行された「障害者差別解消法」の改正により、国や地方公共団体だけでなく、すべての民間企業もWebアクセシビリティの「合理的配慮の提供」が義務化されました。

今回は、比較的簡単にできる、デザイン面でのWebアクセシビリティ対策の要点をまとめてみました。

 

 

「障害者差別解消法」とは

障害者差別解消法は、障害者に対する差別を解消し、社会のあらゆる側面で平等に参加できるようにすることを目的とした法律です。
この法律に基づき、政府や企業は障害者の権利を保護し、彼らが生活のあらゆる場面で差別を受けないようにするための施策を講じる責任があります。

 

 

「Webアクセシビリティ」とは

外務省の「ウェブアクセシビリティ」に関する説明には、「ホームページを利用している全ての人が、心身の条件や利用する環境に関係なく、ホームページで提供されている情報や機能に支障なくアクセスし、利用できること」と表記があります。

ここでいう「全ての人」というのは、様々な障害(視覚障害、聴覚障害、運動障害、認知障害など)のある人々や、一時的な特定の障害がある人々(怪我や病気など一時的な障害をもつ、高齢による視力や聴力・運動能力の低下が見られる人々)というだけではなく、インターネットの接続状況が悪い、メガネを忘れたので文字が読みにくい、Bluetoothイヤホンの電池が切れて音が聞けない、外国に旅行中で外国語のサイトを調べにきているが言語がわからないのような状態も含まれます。
Webアクセシビリティは、これらの人々もWebサイトやWebアプリケーションを支障なく操作できるようにするための原則や技術のことをいいます。

「障害者差別解消法」により、民間企業も情報やサービスにアクセスするための主要な手段としてWebサイトやアプリケーションを提供する際に、全ての人があらゆる状況でページを利用できるよう、企業が取り組むべき努力目標として、段階的に対応していく必要がでてきました。

 

 

Webアクセシビリティを考えたサイトデザイン

Webアクセシビリティを重視したサイトデザインは、誰もがWebサイトを利用できるようにするだけでなく、法的要件(達成基準)を満たすことも重要です。
この対策は、ユーザーエクスペリエンスの向上にもつながります。適切なデザイン原則を遵守し、Alt属性の使用や、適切なコントラスト比の確保、適切な構造とラベリングの提供など、Webアクセシビリティを実現するための工夫が必要です。

 

 

Webアクセシビリティの達成基準

Webアクセシビリティの達成基準はは、W3C(World Wide Web Consortium)が策定したWeb Content Accessibility Guidelines(WCAG)に基づいています。
WCAGは、ウェブコンテンツのアクセシビリティを向上させるための国際的な標準であり、それぞれの基準はA、AA、AAAの3つのレベルで定義されています。
現状、AAAは実装難度が高く、一般企業向けとしては、AAを目指す企業が多いように思います。
達成基準には、以下のような具体的な指針でレベルごとに基準が用意されています。

  • ・知覚可能
  • ・操作可能
  • ・理解可能
  • ・堅牢性

この指針は、必ずしも達成しなければいけないというものではなく、提供するサービスによって、対応する度合いを決める形が望ましいです。
今回はデザイン面に注目して、上記の「知覚可能」に絞っての要点をまとめています。

その他、上記4つの指針の詳細は下記リンクでご確認ください。

ウェブアクセシビリティ基盤委員会
JIS X 8341-3:2016 達成基準 早見表(レベルA & AA)



現状のサイトの分析をしてみよう

現状のサイトのWebアクセシビリティにどこまで対応しているかを調べてみましょう!
簡単に調査を行えるという点で、既存のサービスを利用して、自社サイトのチェックを行ってみましょう

1、PageSpeed Insights

調べたいサイトのURLを入力して診断します。
この中のユーザー補助をチェックすると、コントラスト比やAltタグの文字入力漏れなどのチェックが行えます

PageSpeed Insights

 

2、WCAG Color contrast checker

chromeの拡張機能「WCAG Color contrast checker」は、chromeで開いて、インストールして使用します。
文字のコントラスト比についてのチェックを細かく行うことができます。

WCAG Color contrast checker

 

デザイン面で対応できるWebアクセシビリティ対策

 

1、テキストのコントラスト比

テキストと背景のコントラストを高めることで、視覚障害者や高齢者にも読みやすくします。

WCAGの基準では、

  • 見出しなどに使用する大きい文字とその背景のコントラスト比は 3:1
  • 通常のテキストとその背景のコントラスト比は最低4.5:1以上

となっています。

文字の小さいサイトはよりコントラスト比を気にして作る必要があります。

コントラスト比の基準をクリアした色の例

そして、この4色のコントラスト比は、ほぼ同じ数値になるように並べていますが、実際の視認性は色によって大きく違って見えるのではないでしょうか?
デザイン上なかなかコントラストを強めたくないという場合でも、配色を変更する、文字の大きさを変更するなどでの対応も視野に入れてみましょう。

 

 

2、適切なAlt属性の使用

画像にはAlt属性を付けることで、画像が読み込まれない場合やスクリーンリーダーを使用する場合に代替テキストとして表示されるようにします。
その際に、画像を説明するテキストを意識して挿入してみましょう。

 

3、適切な構造とラベリング

ページの構造を明確にし、適切な見出しやラベルを使用してコンテンツを整理します。
正しいHTMLマークアップを意識してコーディングを行なっているか意識してみましょう。

見出しタグ(<h1>から<h6>)を階層的に使用していないと、スクリーンリーダーが正しく読み上げることができない不親切な作りとなってしまいます。

また、同じリンク先に遷移するボタンに異なるテキストを使用する、別の遷移先のボタンに同じテキストを使用するなど、従来のデザインではやりがちな読み上げ時に不親切な構造を見直すことでWebアクセシビリティの改善が行えます。

 

例:お問い合わせページに遷移するボタン

 

例:別の詳細ページに誘導するボタン

 

まとめ

今後、一般企業のWebサイトでもWebアクセシビリティ対策を考えていかないといけない状況になり、すべてのユーザーがWebサイトを平等に利用できる環境を意識したデザインが不可欠になっていきます。アクセシビリティを考慮したデザインは、ユーザーエクスペリエンスの向上や法的要件の遵守にもつながります。

今回は、主に、デザイン面でのWebアクセシビリティ対策についてまとめました。
このほかにも、操作可能、理解可能、堅牢性などの面でのWebアクセシビリティ対策も意識していく必要があると思いますが、基本はまずできるところから一歩ずつ。

デザインの各ポイントを遵守し、継続的な改善を行うことで、より包括的で使いやすいWebサイトを提供することができます。

次回は「操作可能」の視点での比較的簡単に導入できるWebアクセシビリティ対策の記事でお会いしましょう〜!