アクセシビリティの「AA」とは?Webサイト制作における達成基準を解説|東京のWEB制作会社・ホームページ制作会社|株式会社GIG
BLOG
ブログ
アクセシビリティの「AA」とは?Webサイト制作における達成基準を解説
2023-12-01 制作・開発
ウェブアクセシビリティの「AA」とは、ウェブアクセシビリティを確保するうえで目標となる適合レベルです。適合レベルにはA~AAAまであり、それぞれ達成基準が定められています。
「JIS X 8341-3:2016」では、AAの達成基準が13項目、「WCAG2.2」では、新たに4つの達成基準が追加され、17項目となりました。しかし、この追加項目はまだ「JIS X 8341-3:2016」には反映されていません。
この記事では、ウェブアクセシビリティの適合レベル「AA」の達成基準や実施方法について解説します。Webサイトの制作・運営に携わる方は、ぜひ参考になさってください。
弊社GIGではウェブアクセシビリティの達成基準A/AAまでは標準対応しており、AAAもオプションで対応しております。ウェブアクセシビリティの強化をご希望であれば、お気軽にご相談ください。
■実績紹介
■お問い合わせはこちら
ウェブアクセシビリティとは?
そもそもアクセシビリティとは、「アクセス(近づく)」と「アビリティ(できること)」から作られた言葉です。
Webにおけるアクセシビリティ「ウェブアクセシビリティ」では、アクセスしたすべてのユーザーが機能やサービスを利用できる状態であることが求められます。
JIS X 8341-3:2016の役割
ウェブアクセシビリティには規格やガイドラインが設けられています。基本となっているのは「WCAG(ウェブコンテンツ・アクセシビリティ・ガイドライン)」と呼ばれるものです。
日本では国際規格ISO/IECとなった「WCAG2.0」をもとに「JIS X 8341-3:2016」が策定されました。Webサイト制作やシステム開発におけるアクセシビリティを確保するための指標となっています。
関連記事:アプリ・ウェブのアクセシビリティ向上に重要な3要素
アクセシビリティの適合レベルの違い
ウェブアクセシビリティには「知覚可能」「操作可能」「理解可能」「及び検漏」の4原則があります。
この4原則の下に、ウェブアクセシビリティを確保・向上の目標にあたる12のガイドラインがあります。そして、達成基準はガイドラインを細分化したものです。
達成基準は61項目があり、適合レベルA~AAAへ分けられます。
レベルA | アクセシビリティ確保に最低限必要なレベル |
レベルAA | 諸外国でも公的機関に求められるレベル |
レベルAAA | 目標とするのは推奨しない |
▲出典:総務省「みんなの公共サイト運用ガイドライン(2024年版)」
この達成基準の項目は、同じ項目でA~AAAまで設定されているのではなく、適合レベルごとの達成項目が定められています。
国内では、2016年4月1日に施行された障害者差別解消法できっかけに、公的機関のWebサイトにおけるウェブアクセシビリティ対応が求められるようになりました。
具体的な目標としては「適合レベルAAへの準拠」が求められています。しかし、現状すべての公的機関のWebサイトが適合レベルAAへの準拠を達成しているわけではありません。
そのため、総務省は「みんなの公共サイト運用ガイドライン(2024年版)」を作成して、公的機関のウェブアクセシビリティ対応を促進しています。
また2024年4月の法改正により、民間企業や個人事業主を含むすべての事業者において「合理的配慮」が義務化されました。
「合理的配慮」をおこなうための環境の整備として、ウェブアクセシビリティへの対応が注目を浴びています。
関連記事:自治体と企業のウェブアクセシビリティ事例|メリットと国の支援
適合レベルAAの達成基準と達成方法17選
「WCAG 2.2」で新たに4つの達成基準が追加され、適合レベルAAの達成基準は全部で17個となりました。
公的機関では各項目のAA準拠が目標です。適合レベルAAの達成基準と実施方法を理解しておくことが大切です。それぞれご紹介します。
1. 達成基準1.2.4:キャプション(ライブ)
聴覚障害のある人がリアルタイムで情報を閲覧できるようにするため、Webページを音声情報で入手できるようにします。
キャプションとは動画コンテンツに表示される「字幕」とは異なり、コンテンツの内容を理解するために必要な情報を文字で伝えるものです。想定される状況と達成基準、達成方法は以下のようになります。
<達成基準>
ライブオーディオコンテンツにキャプションを提供する
<達成方法>
キャプションツールを利用してライブ配信でキャプション付きで提供する。
(参考:達成基準1.2.4: キャプション(ライブ)を理解する)
2. 達成基準1.2.5:音声解説(収録済み)
全盲または視覚障害のある人が、映像など閲覧が困難なコンテンツを理解できるように音声解説を提供するものです。
音声解説では、主音声で説明されていない動きや登場人物、シーンの変化、画面上の文字などの情報を提供します。
<達成基準>
音声解説以外にさらにこまかい情景を音声で解説する。
<達成方法>
音声解説を含めてユーザーが選択可能な副音声トラックを提供する。
3. 達成基準1.4.3:コントラスト(最低限レベル)
コントラストが要因となり、必要な情報を理解できないことが起こらないようにするためのものです。
色覚障害のある人がスムーズにテキストを読めるように、テキストと背景に適切なコントラストを提供します。
<達成基準>
テキストと背景のコントラスト比を最低でも4.5:1にする。
<達成方法>
テキストと背景色のコントラスト比をチェックして、4.5:1になるように調整をする。
この達成方法は、同じレベルAAの「1.4.11:非テキストのコントラスト」に共通する達成方法です。
(参考:達成基準1.4.3: コントラスト(最低限)を理解する)
4. 達成基準1.4.4:テキストのサイズ変更
視覚障害や何かしらの原因により見えにくさを抱えているユーザーの視認性を補助するため、テキストサイズを拡大できるようにすることが求められます。
コンテンツ制作者は、テキストサイズが変更されたときのページレイアウトの変更まで考慮したうえで、最適なデザインを制作しなければなりません。
<達成基準>
キャプションおよび文字画像を除いて、テキストはコンテンツまたは機能を損ねることなく支援技術なしで200%までサイズを変更できる
<達成方法>
ブラウザのズーム機能をサポートされたウェブ技術を使用する
(参考:達成基準1.4.4: テキストのサイズ変更を理解する)
5. 達成基準1.4.5:文字画像
視覚障害のある人が文字画像を理解できるように、テキストを提供します。コンテンツ制作者は、情報の提示に画像を使用せず、テキストを使用するのが理想です。
しかし何かしらの理由で文字画像を使用する場合、必要なユーザーだけがテキストを表示させる、といった調整ができるようにしておかなければなりません。
<達成基準>
・ビットマップ画像で特定のフォントで見出しを提示せず、CSSで見栄えを統一する。
・ユーザーが自身でフォントを設定できるようにする。
<達成方法>
・テキストの視覚的提示を制御するためにCSSを使用する。
・PDF文書はWordなどで作成し、PDFへ変換する。
(参考:達成基準1.4.5: 文字画像を理解する)
6. 達成基準2.4.5:複数の手段
ユーザーが探しているコンテンツをみつけることができるようにします。スムーズに見つけることができれば「使いやすい」と感じ、再訪してくれる可能性も高まります。
また、こうした見つけやすさは視覚障害がある人にとっても有効です。
<達成基準>
Webページを見つけるための複数の手段が利用できる
<達成方法>
目次の設置や検索機能などを提供する
(参考:達成基準2.4.5: 複数の手段)
7. 達成基準2.4.6:見出し及びラベル
ユーザーがWebページ内の情報を理解しやすくするため、コンテンツの内容を見出しやラベルで明確に示します。
必ずしも見出しやラベルが必要なわけではありませんが、ページ内に見出しやラベルが存在する場合には、明確に内容を伝えることが求められます。
<達成基準>
見出しやラベルでコンテンツの内容を明確に示す。
<達成方法>
コンテンツの概要と構成を伝えるための説明的な見出し・ラベルを提供する
8. 達成基準2.4.7:フォーカスの可視化
視覚的な要素を見つけにくい特性を持つ、注意力欠如や短期記憶がむずかしいユーザーが、Webページの各要素にフォーカスしたときに、ユーザーが取るべき行動を視覚的に支援します。
キーボード操作で要素にフォーカスを置いている場合、高いコントラスト比や太字など視覚的なインジケータを使用して視認性を高めます。
<達成基準>
キーボード操作が可能なあらゆるユーザーインターフェースには、フォーカスインジケータが見えるようにする。
<達成方法>
・テキストフィールドに縦棒が表示されてテキスト挿入・入力をサポートする。
・フォーカスした要素の周りに視覚的に認識できる枠線を表示する。
(参考:達成基準2.4.7: フォーカスの可視化を理解する)
9. 達成基準2.4.11:隠されないフォーカス(最低限)
WCAG 2.2で新たに追加された達成基準です。キーボード操作でフォーカスした要素が、ほかで作成したコンテンツで隠れないようにします。
こうした事象はマウス操作で避けることができますが、マウス操作ができない人には困難であるためです。
<達成基準>
フォーカスされた項目を表示したままにする
<達成方法>
フォーカスを取得したときに部分的に表示されるようにする。
(参考:達成基準2.4.11: 隠されないフォーカス(最低限))
10. 達成基準2.5.7:ドラッグ動作
WCAG2.2で追加された達成基準です。ドラッグ動作を必要とする場合、ユーザーの端末や環境に依存した状態ではスムーズにドラッグができない人が出てきます。
誰でもどのような環境でもドラッグ動作ができるように、代替方法を提供します。これによりドラッグ動作のエラーが起こりにくくなることが期待できます。
<達成基準>
ユーザーの行動をドラッグに頼らない
<達成方法>
ドラッグ動作にはシンプルなポインターを提供する
(参考:達成基準2.5.7: ドラッグ動作)
11. 達成基準2.5.8:ターゲットのサイズ(最低限)
隣接する要素を誤ってクリックしないようにして、ターゲットにポインタをあわせられるようにします。
障害がある人で特殊な入力デバイスを使用している場合、こまかい動作が苦手なケースが多いためです。
<達成基準>
ポインタ入力をする場合、ターゲットのサイズは24×24CSSピクセルにすること
<達成方法>
最小サイズを満たせないときは、最小間隔を決めて配置する
12. 達成基準3.1.2:一部分の言語
ユーザーが利用しているブラウザやOSに対して、どの言語が適切であるかをプログラムで解釈できるようにします。
これにより、音声読み上げや点字ディスプレイなどの支援技術にも適切な自然言語が適用されます。固有名詞や技術用語、言語が不明な語句などは基準対象には該当しません。
<達成基準>
コンテンツの自然言語がどれかをプログラムによって解釈ができる。
<達成方法>
HTMLのlang属性を提供してページ上の言語を特定する。
13. 達成基準3.2.3:一貫したナビゲーション
障害のある人は、Webページ内にある情報がどこにあるのかをすぐに見つけることができない場合があります。
そのため、Webサイトのレイアウトは一貫性のあるデザインを採用して、どこのページへ移動しても同じ情報が表示されるようにします。
<達成基準>
Webサイト内のWebページ上で繰り返されているナビゲーションを統一する。
<達成方法>
主要なセクションへリンクしたナビゲーションメニューを設置する。
(参考:達成基準3.2.3: 一貫したナビゲーションを理解する)
14. 達成基準3.2.4:一貫した識別性
複数のWebページで同じ機能をもつ要素がページごとに異なるラベルがつけられていると、使いづらいものです。とくに認知的限界のあるユーザーには大きな負担をかけてしまいます。
たとえば検索ボックスを説明するテキストに「検索」を使用しているページと「探す」を使用しているページです。
アイコンや非テキスト項目など、同じ機能をもつすべての要素に一貫性をもたせることが求められます。
<達成基準>
Webページに採用した機能を示すラベルはすべてのページで統一する。
<達成方法>
同じ機能を持つコンテンツには一貫したラベル・名前・テキストによる代替を使用する。
15. 達成基準3.3.3:エラー修正の提案
全盲または視覚障害のある人、学習障害のある人が正しくフォームに入力するのは困難な場合がああります。たとえば、入力を誤っても、どのように修正したらよいのかわからないと入力を諦めてしまうかもしれません
フォームなどへ入力するときの入力エラーを自動的に検出して、エラーの修正方法を提案することで、スムーズな入力が可能となります。
<達成基準>
入力エラーが自動的に検出され、ユーザーに修正方法を提案できる。
<達成方法>
入力エラーを修正するためのヘルプを追加する。
未入力の項目を特定できるようにテキスト説明を提供する。
16. 達成基準3.3.4:エラー回避(法的、金融及びデータ)
一度クリックしたらもとに戻せない動作をするときに、取消やチェック、確認の行為を促すことで重大なミスが起こることを防ぎます。
たとえばECサイトでのショッピングなど、誤った商品を購入してしまうケースです。
障害のある人はこうしたミスを起こしてしまう可能性が高いため、回避できるように確認ページの設置や機能を提供します。
<達成基準>
ユーザーの法律行為もしくは金融取引が生じるWebページでは取消やチェック、確認ができるようにする。
<達成方法>
・送信前にユーザーが内容に誤りがないかを確認できるようにする。
・削除した情報を復元できる機能を提供する。
(参考:達成基準3.3.4: 誤り防止(法的、金融、データ)を理解する)
17. 達成基準3.3.8:アクセシブルな認証(最低限)
アカウントへログインするときに使用するパスワードやユーザー名を覚えておくことは、認知障害をもつ人には困難です。
ログインの認証方法に電子メールやデバイスの生体認証、2要素認証システムなどを採用します。
<達成基準>
簡単な方法でログインできるようにする
<達成方法>
パスワードの代わりにデバイスを使用してログインする
(参考:達成基準3.3.8: アクセシブルな認証(最低限))
関連記事:ウェブアクセシビリティチェックリスト|診断項目と便利なツール
レベルを問わず必ず達成しないといけない項目
ここでは、ウェブアクセシビリティを確保するために、必ず達成しなければならない項目について解説します。
「JIS X 8341-3:2016」では「非干渉」となっている達成基準です。適合していなければアクセスできないユーザーがいることになるため、達成は必須となっています。
達成基準1.4.2 :音声の制御
Webページ上の音声が自動的に再生されないようする、または再生された音声が3秒以上続くときに、ユーザーが利用状況に応じて、一時停止または停止できるようにします。
これは視覚障害のある人がスクリーンリーダーを使用している場合、読み上げ音声が聞き取りにくくなるためです。
基本的には自動的に再生しないことが推奨されています。
<達成基準>
Webページ上にある音声が自動的に再生され、3秒より長く続く場合、その音声を一時停止または停止できるようにする。もしくはシステム全体の音量に影響を与えず調整できる。
<達成方法>
利用者の操作だけで音声を再生できるようにする。
達成基準2.2.2: 一時停止、停止及び非表示
自動で更新されるコンテンツなどを閲覧中に、自動で切り替わると注意がそれてしまうユーザーがいます。
このようなコンテンツには一時停止、停止、非表示ができる機能を設ける必要があります。
<達成基準>
動きのある、点滅している、スクロールする、自動更新する情報をユーザーが一時停止、停止、または非表示にできる機能を提供するなど。
<達成方法>
・自動更新されるコンテンツの更新頻度をユーザーが制御できるようにする。
・一時停止後、一時停止した箇所から再開できるようにする。
(参考:達成基準2.2.2: 一時停止、停止、非表示を理解する)
達成基準2.1.2:キーボードトラップなし
キーボード操作で各要素にフォーカスできる場合、一度フォーカスしたら抜け出せないコンテンツを制作してはいけません。
障害のある人などキーボード操作に依存している場合、コンテンツ内に閉じ込められてしまうケースがあるためです。
これにはダイアログボックスなどがあげられます。キーボード操作でも離脱できるように「閉じる」や「キャンセル」などのボタンの設置が必要です。
<達成基準>
キーボードインタフェースだけを用いてそのコンポーネントからフォーカスを外すことが可能であること。
<達成方法>
・表示されたダイアログに「閉じる」「キャンセル」のボタンを設置する
・ダイアログが表示されたらTabキーで離脱できるようにする
(参考:達成基準2.1.2: キーボードトラップなしを理解する)
達成基準2.3.1:3回のせん光、又は閾値以下
光の点滅は「光感受性発作」などを誘発する原因となります。そのため、1秒間において3回を超えて点滅するコンテンツを制作してはいけません。
光の点滅に敏感な人は、こうしたコンテンツで発作を引き起こすおそれがあるためです。
デジタル庁の「ウェブアクセシビリティ導入ガイドブック」では、判断が明瞭な「達成基準2.3.2: 3回の閃光を理解する」への適合が推奨されています。
<達成基準>※
Webページにはどの1秒間においても3回を超える閃光を放つものがない。
<達成方法>※
画面のあらゆる領域の1秒間に3回閃光を放つものを取り除く。
(参考:達成基準2.3.1: 3回の閃光、又は閾値以下を理解する)
(参考:達成基準2.3.2: 3回の閃光を理解する)
※「2.3.2」を参考
ウェブアクセシビリティAAを準拠するメリット
ウェブアクセシビリティの適合レベルAAを達成することで、これまで接点がなかった層からのアクセス数増加や既存ユーザーの満足度向上が期待できます。
具体的にどのようなメリットが得られるのか、簡単に解説します。
信頼度が高まる
Webサイトはインターネット環境があればアクセスできますが、どこに必要な情報があるのかわかりにくかったり、操作がしづらかったりすると利便性が低下します。
ウェブアクセシビリティを確保することで、情報が整理され、操作性を高めることが可能になり、年齢や性別、障がいの有無などを問わず、すべての人がアクセスできるようになります。
読みやすく、操作もしやすくなることで、ユーザーや取引先からの信頼度を高められます。
新規顧客を獲得できる
ウェブアクセシビリティへ対応することで、Webページの情報が整理され、ユーザーだけではなく、検索エンジンにも内容が伝わりやすくなり、SEOにおいても効果が期待できます。
SEOとは、検索エンジン最適化の略称で、ブラウザ検索で検索結果の上位に表示するための集客施策のひとつです。
上位に表示されれば、Webサイトが多くの人の目に留まります。認知拡大とあわせて、新規顧客の獲得も期待できるでしょう。
関連記事:アクセシビリティ対応がSEOへ与える影響を解説|対策やチェックツール
企業価値を高められる
できるかぎり多くの人に利用してもらいたいプロダクトである場合、アクセシビリティの確保に努めることで企業価値を向上させることが可能です。
すべての人が使えるプロダクトは、多くの人から選ばれる理由の1つとなります。
ウェブアクセシビリティへ取り組むことで、SDGsが目指す「誰一人取り残さない」ことへの取り組みにもつながり、世界的な目標の達成に取り組んでいる企業は、社内外からも評価されることでしょう。
2024年6月現在、日本ではまだウェブアクセシビリティ対応は義務化されていません。
しかし、いち早くアクセシビリティを確保しておくことで、競合が多い市場においても、優位性を高めておくことが可能です。
ウェブアクセシビリティの義務化はいつから?
2024年4月より民間事業者を含む「合理的配慮」の義務化や「令和5年障害者白書」のなかで、障害のある人の情報アクセシビリティを向上するための施策に関する記述があります。
こうした動きから、近いうちにウェブアクセシビリティが義務化されるのでは?という声も少なくありません。
海外では義務となっている国もあるため、将来的にはウェブアクセシビリティ対応が義務化される可能性はあります。
しかし、適合レベルAAといっても達成は簡単ではないため、正しい知識を身につけたうえでWebサイトの制作・改修に取り組むことが大切です。
自社でウェブアクセシビリティの適合レベルに準拠したWebサイトを制作するのが困難なときは、専門知識をもつ制作会社へ依頼する方法もあります。
関連記事:ウェブアクセシビリティとは?2024年4月の義務化について徹底解説
ウェブアクセシビリティ対応の制作会社を選ぶポイント
初めからウェブアクセシビリティを確保したWebサイトを制作することで、大きな改修もなく、スムーズな運用が可能です。
ここでは、ウェブアクセシビリティに対応した制作会社を選ぶポイントについて解説します。
専門知識があるか
ウェブアクセシビリティには原則や適合レベルごとの評価基準など、理解しておかなければならないことが多くあります。
制作会社がこうした知識をもっているか確認するには、制作実績に公的機関のWebサイト制作の実績があるかを確認しましょう。
現状、ウェブアクセシビリティの対応が義務づけられているのは公的機関のみです。公的機関のWebサイト制作実績があれば、適合レベルAAに準拠したWebサイトを制作できることがわかります。
豊富な実績
公的機関以外にも、制作実績からデザインや要件を満たせるスキルを持っているかを確認しましょう。
コーポレートサイトだけではなく、サービスサイトやメディアサイトなどWebサイトにもさまざまな種類があります。
また業種においても幅広く対応できるかも確認してください。
制作会社によっては、得意不得意の分野があるため、同じ業界のWebサイトの制作実績があるかどうかでも仕上がりが変わってきます。
サポート体制
Webサイト制作やシステム開発などは、納品後にトラブルが起こるのも珍しくありません。
そのため、納品後のフォロー体制についても確認しておきましょう。フォローの内容はデータ分析や改修、機能の追加、メンテナンスなどがあります。
ただし、保守・運用は別途費用がかかることもあるため、事前に問い合わせをして見積もりを依頼することが大切です。
東京のWebサイト制作会社GIGにおまかせください
ウェブアクセシビリティは基本的に「AA」への準拠が推奨されています。
Webサイト制作やWebサービス開発に関わる方は、ウェブアクセシビリティの向上と対応について理解しておかなければなりません。
しかし、達成基準の抽象的な表現にどのように対応したらよいのか、悩む人も多いのではないでしょうか。
ウェブアクセシビリティを踏まえたWebサイト制作やSEO対策をお望みなら、東京の制作会社GIGにおまかせください。
ウェブアクセシビリティの達成基準A/AAまでは標準対応しており、AAAもオプションで対応しています。ぜひ以下よりお問い合わせください。
お問い合わせはこちら
会社紹介資料のダウンロードはこちら
採用応募はこちら(GIG採用サイト)
採用応募はこちら(Wantedly)
WebやDXで困っている方、お気軽にご相談ください
GIG BLOG編集部
株式会社GIGのメンバーによって構成される編集部。GIG社員のインタビューや、GIGで行われたイベントのレポート、その他GIGにかかわるさまざまな情報をお届けします。