Webアクセシビリティは、企業サイトが対応すべき必須テーマです。

2024年4月の改正障害者差別解消法の施行により、事業者による「合理的配慮の提供」が義務化され、Webサイトのアクセシビリティ対応は努力目標から実務上の必須要件へと変わりました。

alt属性の設定やコントラスト比の確保、キーボード操作対応など、押さえるべきポイントを怠ると、視覚・聴覚・運動機能に制約のあるユーザーが情報や機能を利用できなくなるだけでなく、企業として合理的配慮を欠いていると評価されるリスクも生まれます。

本記事では、Webアクセシビリティの基本的な考え方から、現場で今すぐ実践できる10の具体的な対応ポイント、そして2024年の法改正を踏まえた最新の取り組み方までを解説します。制作・運用担当者の方は、ぜひ自社サイトのチェックリストとしてご活用ください。

アクセシビリティとは

アクセシビリティとは、Webサイトにおける情報・コンテンツへのアクセスのしやすさを指す概念です。

高齢者や障がい者など身体機能が十分でない人がWebサイトの情報をうまく取得できない場合や、健常者であってもうるさい・暗い・通信環境が弱いなど情報を取得しづらい環境下でWebサイトを閲覧する場合を想定し、情報へのアクセスのしやすさを図る概念がアクセシビリティです。

アクセシビリティというと「バリアフリー」のような”高齢者・障がい者に優しい設計”というイメージを持たれがちですが、本来の定義は”あらゆるケース・環境下を想定したうえで、その人が情報にアクセスしやすい設計かどうかの尺度”です。

 

なぜ今、Webアクセシビリティ対応が重要なのか

2024年4月の法改正により、Webアクセシビリティへの対応は「望ましい取り組み」から「実務上の必須要件」に変わりました。

改正障害者差別解消法の施行によって、これまで努力義務とされていた民間事業者による合理的配慮の提供が、2024年4月1日から法的義務となりました。Webサイトも合理的配慮の対象に含まれるため、画像に代替テキストが付いていない、キーボードだけでは操作できないといった状態を放置すると、障がいのある利用者が必要な情報やサービスを利用できず、対応不備を指摘される可能性があります。

拠りどころとなる規格：WCAGとJIS X 8341-3

Webアクセシビリティ対応の拠りどころとなるのは、国際規格「WCAG（Web Content Accessibility Guidelines）」と、これをベースにした国内規格「JIS X 8341-3」です。両者の関係を整理すると、次のとおりです。

規格	策定主体	現在の最新版	位置づけ
WCAG	W3C（国際団体）	WCAG 2.2	世界共通の技術基準。適合レベルはA／AA／AAAの3段階
JIS X 8341-3	日本産業標準調査会	JIS X 8341-3:2016（WCAG 2.0準拠）	国内の公的な達成基準。官公庁サイトなどで参照される

国内での対応にあたっては、JIS X 8341-3:2016のレベルA・AA準拠を目安にしつつ、国際的な最新基準であるWCAG 2.2の項目もあわせて確認しておくと、将来的な規格改定にも対応しやすくなります。

 

アクセシビリティが課題としてあがる具体的シーン

アクセシビリティが必要となる代表的なシーンを整理すると、次のようになります。

• 目が不自由な人が利用する場合
• 手が不自由な人が利用する場合
• 移動中に利用する場合

目が不自由な人が利用する場合

弱視/色盲/老眼の目が不自由な人が利用する場合、目で取得する情報がうまく取得できないケースが想定できます。
それをフォローするためには、主にサイズ感やコントラストなどの視覚的表現、また視覚以外の方法で情報取得ができる対応が必要です。

■上記に対する対策例

• 音声読み上げ機能を付ける
• 音声読み上げ機能のために、出来るだけ記号は使わずに漢字を使う
  　（例)　NG:2018/04/01 OK:2018年4月1日
• 音声読み上げ機能のために、画像にテキスト情報を付ける
• コントラストをしっかり付ける
• 文字サイズの拡大機能を付ける

 

手が不自由な人が利用する場合

うまく手を動かせない/手や指先がないなど手が不自由な人が利用する場合、マウスやトラックパッドが使えないケースが想定できます。
キーボードや直接タッチパネルで操作したいと思う人もいるでしょう。
それをフォローするためには、主に操作性の面で不自由なく使える工夫が必要です。

■上記に対する対策例

• キーボードでの操作を想定し、Tab順を整える
• キーボードでの操作を想定し、長いスクロールは避ける
• ボタンなどはクリック範囲を広くとる

 

移動中に利用する場合

落ち着いた屋内ではなく、スマホで移動中での情報取得や操作をしたい場合など、それは画面に集中できない環境下であることが想定できます。
例えば、乗換案内検索や店予約の場合ですね。
それをフォローするためには、主に操作性での面で直観的な操作ができる対応が必要です。

■上記に対する対策例

• 重要な文字を強調する
• ボタンなどはクリック範囲を広くとる

 

WEBアクセシビリティに対応させるための10のポイント

アクセシビリティ対応で懸念すべき点は数多くありますが、特に重要度が高い10のポイントをご紹介します。

• ①画像：alt属性に文脈に沿ったテキスト情報を付ける
• ②色：コントラスト比を基準値以上確保する
• ③サイズ：文字サイズの拡大機能を付ける
• ④ページ：内容が連想できる適切なタイトルを付ける
• ⑤リンク：リンクだと分かるようにアンカーテキストを工夫する
• ⑥機能：キーボードだけで操作できるようにする
• ⑦機能：ヘッダー下部あたりに音声読み上げ機能を設ける
• ⑧機能：パンくずリストを設ける
• ⑨機能：ヘルプページを設ける
• ⑩スマホ：ボタン領域と文字サイズを十分に確保する

①画像：alt属性に文脈に沿ったテキスト情報を付ける

テキストブラウザ(※1)や音声読み上げブラウザ(※2)に対応し、挿入している画像もしっかり前後の文脈にマッチするようなalt属性のテキスト情報を付けましょう。

例えば以下の場合、画像のalt属性は上から読み上げられることを想像すると「温州みかんの画像」かもしくはなしの対応が適切ですよね。
タイトルと同様の「温州みかん」と設定してしまうと、タイトルと画像で「温州みかん」が2回読まれていることになってしまいます。
このようにその文脈に沿ったalt属性をしっかり見極めながら設定していきましょう。

※1ブラウザ側でテキストだけで表示してくれるブラウザ
※2ブラウザ側で音声読み上げしてくれるブラウザ

②色：コントラスト比を基準値以上確保する

見やすさを確保するため、主要な要素の色はWCAGの基準を満たすコントラスト比にしましょう。

具体的には、通常サイズのテキストで4.5:1以上、22pt（太字は18pt）以上の大きな文字であれば3:1以上のコントラスト比を確保することが、WCAG 2.2の達成基準1.4.3（レベルAA）として求められています。背景色とテキストの色コードを専用ツールに入力すると、基準を満たしているかを自動判定できます。

以下の三菱電機のWEBサイトのグローバルメニュー部分”赤地に白文字”のコントラスト比を図ると、コントラスト比は5.8と算出され、三段階ある内の最高レベルAAAの基準を満たしていることが分かります。

色コードを打ち込むだけで簡単にコントラスト比が計測できるので、ぜひ試してみてください。

▼色のコントラストチェッカーでコントラスト比が合格かどうか判定する
https://lab.syncer.jp/Tool/Color-Contrast-Checker/

例：三菱電機

③サイズ：文字サイズの拡大機能を付ける

小さな文字が見えない場合に、出来たら文字サイズの拡大機能をつけましょう。
目を凝らして文字を追う必要が無くなります。

文字を拡大するだけ（レイアウトはその分縦に伸びる形）であれば、コーディング時に数時間程度の追加工数で対応できるケースが多く、まずは実装しやすい項目から検討するのがおすすめです。

例：日本郵政株式会社

④ページ：内容が連想できる適切なタイトルを付ける

他ページとその役割を区別できるように各ページにはその内容が連想できる適切なタイトルを付けましょう。
特に音声読み上げの場合は、ページタイトルがなかったり、きちんと設定されていないと、そのページの最後までを読み上げないとページ内容が分かりません。
ユーザーがそのページ内容を素早く判断できるように、適切なタイトルを心がけましょう。

例：株式会社ブリヂストン

⑤リンク：リンクだと分かるようにアンカーテキストを工夫する

リンクであることが一目で分かるようにアンカーテキストには下線を引きましょう。
これだけインターネットが普及した昨今と言えど、ネットリテラシーが低い人がまだまだ多いのが現状です。
そこで昔からの共通認識であるアンカーテキストに下線がついていると”クリックすると違うページに遷移できる”ことが分かりますよね。

またアンカーテキストは長くし、リンク先の内容をしっかり示すことを心がけましょう。
遷移先が分かりやすくなることで、無駄なページ間の行き来がなくなります。

例：ヤフー株式会社

⑥機能：キーボードだけで操作できるようにする

すべての操作をキーボードだけで完結できるようにすることは、現在のアクセシビリティ対応で特に重視されるポイントです。

マウスやトラックパッドがなくても快適にサイトを利用できるように、Tabキーでフォーカスを一巡でき、Enterキーやスペースキーでリンクやボタンを操作できるようにしましょう。あわせて、現在フォーカスされている要素が視覚的に分かるフォーカスインジケーター（枠線など）を消さないことも重要です。CSSで意図せず「outline: none」を指定してしまうと、キーボード操作中にどこにフォーカスがあるか分からなくなるため注意しましょう。

⑦機能：ヘッダー下部あたりに音声読み上げ機能を設ける

音声読み上げソフトをサイト側に導入し、音声読み上げ機能を付けることも可能です。スマートフォンにはOS標準の読み上げ機能が搭載されている場合もありますが、まだ広く知られているとは言えません。全盲の方だけでなく、視力が弱くなってきた高齢のユーザーにとっても、ヘッダー配下に読み上げ機能の選択肢があると役立ちます。視覚に障がいのないユーザーにとっても、作業中にラジオ感覚で聞ける読み上げ機能は便利な機能です。

 

例：京都府ホームページ

⑧機能：パンくずリストを設ける

パンくずリストを設けることで、今いるページがサイト内のどの位置にあるかが分かるようになります。現在地だけでなく、サイト全体の構造も把握しやすくなります。

例：すかいらーくグループ

⑨機能：ヘルプページを設ける

探している情報が見つからないユーザーのために、ヘルプページを設けましょう。サイトに対する安心感が高まります。

あわせて、動画・音声コンテンツは自動再生を避け、ユーザー自身が再生・停止をコントロールできるようにすることも重要です。音を出せない場所で突然再生が始まって驚いたり、止め方が分からなくなったりするケースを防げます。

例：日本マクドナルド

⑩スマホ：ボタン領域と文字サイズを十分に確保する

スマートフォンは外出先や移動中に使われる場面が多いため、操作しやすいサイズ感を意識しましょう。

Appleのヒューマンインターフェースガイドラインでは、ボタンに最低でも44pt×44pt（約59px×59px）の領域を確保することが推奨されています。

iPhoneの電卓機能の各ボタンがそのサイズ(約64px×64px)に近いので、ぜひこのサイズ感で設計してみてください。

文字サイズについても同ガイドラインで最低11ptが推奨されており、あわせて読みやすい行間を確保することも大切です。

スマホから確認するとyahoo!ニュースの詳細文章の文字サイズは約13ptでした。(iPhone8から閲覧)
筆者感覚としては細かすぎず、多少老眼が入った場合でも読めるサイズ感かと感じます。

例：Yahoo!ニュース

 

企業の取り組み事例

富士通のWebサイトでは、日本の公的規格であるJIS X 8341-3を基準に、アクセシビリティへの取り組みや達成度を公開しています。JIS X 8341-3の各達成基準（等級A／AA）について具体例を交えた解説が掲載されており、アクセシビリティに配慮したサイトを設計する際の参考になります。

一部抜粋

▼WEBアクセシビリティ取り組み事例 – Fujitsu Japan
http://www.fujitsu.com/jp/about/resources/terms/accessibility/activities/

自社サイトの現状を把握したい場合は、総務省が提供するアクセシビリティ評価ツール「miChecker」を使うと、JIS X 8341-3:2016に準拠しているかどうかを多角的に検証できます。

 

まとめ

Webアクセシビリティ対応は、一部のユーザーのための特別な配慮ではなく、あらゆる利用者にとって使いやすいサイトをつくるための基本的な取り組みです。

2024年の法改正により合理的配慮の提供が義務化されたことで、対応の優先度は一段と高まっています。今回ご紹介した10のポイントは、alt属性の設定やコントラスト比の確保など、比較的少ない工数から着手できるものも多くあります。まずは自社サイトの現状をチェックツールで確認し、優先度の高い項目から一つずつ改善を進めていきましょう。