ウェブアクセシビリティとは何ぞや

はじめに

自治体DXに関する情報キャッチアップを行うため、定期的にデジタル庁が運営しているニュースサイトを閲覧しています。
このサイトではデジタル庁が行なっているサービスや取り組みについて紹介されており、個人的に重宝させていただいています。

先日、いつものようにサイトを訪れると「ウェブアクセシビリティ」についての記事が掲載されておりました。
これまでも単語自体は聞いたことがあったものの、内容についてあまり知らない状態だったので関連記事などをもとに調べてみました。

ウェブアクセシビリティとは

「ウェブ上の情報へのアクセスのしやすさ」
利用者の年齢や身体的特性（障害の有無やその程度）に関わらず、ウェブで提供されている情報やサービスを利用できることを指すようです。

例えば、以下のような機能を提供することで、ウェブ上の情報などにアクセスやすくなります。

• 文字やコンテンツが見えにくい場合
  • 画面上のテキストを音声読み上げする
  • 読みやすい自体や適切な文字サイズを選択する
• 手や腕をケガしてマウス操作が難しい
  • キーボードだけで操作できる

私がこれまでに直面したケースでいうと、テキスト情報の強弱を色で行なっている場合、見る人によっては異なった見え方が発生します。
そのため色に依存するのではなく太文字や下線を使用したり、分かりやすいアイコンを設置するなどの配慮が求められます。

ウェブアクセシビリティがもたらす恩恵

本記事の中で、ウェブアクセシビリティを確保することで恩恵を受けるのは誰かという問いに対して、以下であると説明されてました。

「障害のある人だけでなく、誰もがその対象となり得ます」

今は身体的に不自由なく生活できている方も、年齢とともに視覚や聴覚などが悪くなることもあります。
また、一時的または状況的に情報アクセスすることが難しいケースもあります。
例えば「Youtubeで動画を見たいがイヤホンを忘れてしまった」といった場合には、文字起こし機能を使うことで内容を理解することができます。

個人的には海外の技術系動画を見る際に、英語翻訳機能を用いて閲覧できることもウェブアクセシビリティの恩恵なのではと感じました🙇🙇🙇

ウェブアクセシビリティ ガイドラインと規格

ウェブアクセシビリティを確保するために、対応内容について網羅的に記載されたガイドラインが存在しています。

WCAG

• Web Content Accessibility Guidelines
• インターネットの各種規格を策定・勧告
  しているW3C（World Wide Web Consortium）というインターネットの各種技術を標準化する国際的な非営利団体が作成しているガイドライン
• 全てのユーザーがウェブを利用できるように設計されており、多様なユーザーや環境に対応するため随時改訂されている

JIS X 8341-3

• 日本産業機構（JIS）が定めるJIS規格であり、WCAGと同じ内容で規格されている
• 障害者や高齢者も含めて、Webコンテンツを誰もが利用できるものとするための基準が定められている

上記2つは国際的な規格と日本の国内規格ですが、内容は同じであるため、どちらを使っても問題ないそうです。

また、デジタル庁では上記内容を分かりやすくまとめたものとして 「ウェブアクセシビリティ導入ガイドブック」 を公開しています。
この資料はウェブアクセシビリティについての概念や、具体的な対応方法について図解してくれています。

ウェブアクセシビリティの4原則とJIS X 8341-3:2016の達成基準

WCAGではウェブアクセシビリティを確保するための原則として以下を規定しています。

• 知覚可能
  • 情報やユーザーインターフェース要素は、利用者が知覚できる方法で提示する
• 操作可能
  • 利用者がユーザーインターフェース要素やナビゲーションを操作できる
• 理解可能
  • 情報やユーザーインターフェースの操作が理解可能である
• 堅ろう
  • 技術支援を含むさまざまなユーザーエージェントが解釈できるよう十分に堅牢である

上記のそれぞれに細分化された達成基準（対応内容）が61項目設定されています。

また、JIS X 8341-3:2016では、それぞれの達成基準を3段階のレベル別に分けています。
一般的に以下の「レベルAA」まで対応させることが推奨されています。

• レベル A （25の達成基準）
  • アクセシビリティ確保に最低限必要なレベル
• レベルAA（13の達成基準）
  • 諸外国でも公的機関に求められるレベル
• レベルAAA（23の達成基準）
  • 達成要件が厳しく細かいため、一般的に求められるレベルではない

対応内容

例）非テキストコンテンツにはテキストによる代替を提供する（レベル A）

# 悪い例
<img src="onigiri.png">
<img src="onigiri.png" alt="image">

# 良い例
<img src="onigiri.png" alt="丸いおにぎりのイラスト">

上記の悪い例では、1つ目の例では代替テキストが空になっているため、スクリーンリーダーがこの画像を無視してしまいます。
2つ目の例では代替テキストが一般的すぎて、画像の内容が伝わりません。

一方、良い例では具体的なイラスト説明を行なっているため、スクリーンリーダーを用いた際でも利用者に画像の内容が伝わりやすくなります。

その他の詳しい対応内容については、JIS X 8341-3:2016にて「適合レベルA＆AA」の達成基準早見表が公開されておりますのでご参照ください。

まとめ

ウェブアクセシビリティの確保は、誰もが等しくウェブ上の情報やサービスを利用できるようにするための重要な取り組みだと理解できました。
普段開発しているサービスでも、誰でも使いやすいコンテンツとして提供できるよう対応を進めていこうと思います。