🤔

アクセシビリティ「AA」(ダブルエー)準拠の場合に達成すべきことをまとめてみた。

2025/01/21に公開

web制作会社でフロントエンドを担当しているものです。
今回お仕事でアクセシビリティAA準拠ということで、アクセシビリティ初心者の私は困ってしまいました。
ということで、今回はアクセシビリティ「AA」準拠の場合にどのようなことを達成すべきなのかをメモ程度にまとめていきたいと思います。
間違いなどあればご指摘いただけると幸いです。

1 知覚可能

1.1 代替テキスト

1.1.1 非テキストコンテンツ

ロゴ・写真・イラストなどの画像が指し示している情報を代替テキストとして付与する必要があります。
つまり、alt属性を正しく設定してくださいということですね。
以下はデジタル庁のウェブアクセシビリティ導入ガイドブックから拝借したものですが、わかりやすいですね。
デジタル庁 ウェブアクセシビリティ導入ガイドブック

1.2 時間依存メディア

1.2.1〜1.2.5

これらは主に動画にはキャプションや音声解説をつけてくださいという項目です。
デジタル庁のウェブアクセシビリティガイドラインでは「状況に応じて確認すべきこと」に分類されており、どの程度までアクセシビリティを達成すべきなのか判断した上で対応すべきことと言えるでしょう。
場合によっては達成が難しいこともあるでしょう。

1.3 適応可能

1.3.1 情報及び関係性

様々な環境で、提供している情報の構造を適切に伝えることを目的としており、コーダー目線でいうとセマンティックにコーディングしてくださいということです。

1.3.2 意味のある順序

コンテンツの順序に意味がある場合には、その内容が伝わるように実装をしてくださいねということです。
よくCSSでコンテンツの順序を入れ替えることがあると思いますが、順序に意味がある場合は気をつけましょう。

1.3.3 感覚的な特徴

コンテンツを色や形などの感覚的な特徴のみで表現してはいけないよということです。
モノクロにしても意図が伝わるかなどチェックしましょう!

1.4 判別可能

1.4.1 色の使用

色だけでナビゲーションなどの情報を伝えてはいけないよということです。
例えば「赤色の項目は必須入力です」などと書かれても色を識別が困難なユーザーは判断ができません。

1.4.2 音声の制御

音声が流れるようなメディアが存在する場合、音声を止めたり、再生したり制御できるようにしましょうということです。

1.4.3 コントラスト(最低限レベル)

テキストと背景の間に十分なコントラストを設定しましょうということです。

1.4.4 テキストのサイズ変更

テキストのサイズは支援技術なしで200%まで拡大可能にする必要があり、その際にコンテンツまたは機能を損なわず適切に表示される必要があるよということです。
対応するためにフォントサイズはpxなどの絶対値を使わず、remなどの相対値を使うよう心がけましょう。

1.4.5 文字画像

テキストとして提供できるものは、画像ではなく本物のテキストを使用しましょうということです。
見た目が重要な場合には適用範囲外になるみたいですね。

2 操作可能

2.1 キーボード操作可能

2.1.1 キーボード

キーボード操作でも操作可能であることを担保してくださいということです。

2.1.2 キーボードトラップなし

キーボード操作だけで利用しているときに、一度フォーカスしたら抜け出せないコンテンツを作ら
ないようにしましょう
ということです。
閉じるボタンを設置したりESCで抜け出せるなど工夫すると良いでしょう

2.2 十分な時間

2.2.1 タイミング調整可能

コンテンツを読んだり入力したりする際に制限時間を設けないようにしましょうということです。
時間切れとなる前に警告を出したて延長できるようにするなどの工夫が必要になります。

2.2.2 一時停止、停止及び非表示

スライドショーや自動で切り替わるコンテンツなどがある場合は、一時停止、非表示、停止の機能
を設置する
必要がありますよということです。

2.3 発作の防止

2.3.1 3回の閃光または、閾値以下

1秒に 3回を超える点滅するコンテンツを作ってはいけませんということです
光の点滅を繰り返すと、光感受性発作等を誘発しやすくなってしまいます。

2.4 ナビゲーション可能

2.4.1 ブロックスキップ

ページの中で繰り返される項目を簡単にスキップできるようにしましょうということです。
コーダー目線でいうと見出しを適切に設定するなどが対処方法となるでしょう。

2.4.2 ページタイトル

適切なページタイトルを設定しましょうということです。
他のページと重複するようなことは避けましょう。

2.4.3 フォーカス順序

フォーカス可能な要素や適切な順序でフォーカスできるようにしましょうということです。
CSS等で順序を入れ替えて言える要素などは注意が必要でしょう。

2.4.4 リンクの目的(コンテキスト内)

リンク前後の文脈やリンクのラベルからリンクの遷移先が予測できるようにしましょうということです。

2.4.5 複数の手段

あるコンテンツに到達する手段を複数用意しましょうということです。
グローバルナビゲーションやパンクズリストなどが例として挙げられます。

2.4.6 見出し及びラベル

見出しやラベルは目的や主題を説明させるよう適切に設定しましょうということです。

2.4.7 フォーカスの可視化

これはそのままでフォーカスが当たっている位置が目で見てわかるようにしましょうということです。

3 理解可能

3.1 読みやすさ

3.1.1 ページ言語

以下のようにWebページのデフォルトの言語を指定しましょうということです。

<!DOCTYPE html>
<html lang="ja">

3.1.2 一部分の言語

以下のように一部だけ別の言語で書かれている際に、そのことがブラウザ側にわかるようにしましょうというものです。

<p lang="fr">Bonjour, comment ça va?</p>

3.2 予測可能

3.2.1 フォーカス時

要素にフォーカスした際に、ユーザーが予測できない動作をしてはいけないというものです。
例えば、フォーカスした際にフォームを自動で送信するなどです。

3.2.2 入力時

フォームなどにデータを入力したときに、ユーザーが予測できない動作をさせてはいけないというものです。
例えば、フォームの最後の項目を入力すると自動的にフォームを送信するなどです。

3.2.3 一貫したナビゲーション

ナビゲーション要素を毎回同じ順序、表記で実装されるようにしてくださいというものです。
ページごとに順序や表記が違うものはNGです。

3.2.4 一貫した識別性

同じサイトやサービス内で同じ機能のコンポーネントは同じ見た目やラベリングにしてくださいというものです。
例えば、カメラのアイコンを撮影機能と画像という意味の両方で使われているのはNGです。

3.3 入力支援

3.3.1 エラーの特定

入力エラーが検出された場合には、エラーとなっている箇所をユーザーに伝えましょうというものです。

3.3.2 ラベル又は説明

入力項目にはラベルや説明をつけましょうというものです。
また、クリック範囲やラベルとの紐付けなどは適切なマークアップを行いましょう。

3.3.3 エラー修正の提案

入力エラーを検出して、修正方法がある場合には、ユーザーにその修正方法を伝えましょうというものです
「⚪︎⚪︎エラーです。××を△△に修正してください」が良い例です。

3.3.4 エラー回避(法的、金融及びデータ)

法的・金銭の発生する取引・データの修正や削除に関わる操作をユーザーが行う場合には、取り消し・修正・確認ができるようにしてくださいというものです。

4 堅ろう

4.1 互換性

4.1.1 構文解析

どのブラウザで読まれても正しく動作するように、HTMLを適切に記述しましょうというものです。
開始タグと終了タグをきちんと書くなどが対策にあたるでしょう。

4.1.2 名前(name)、役割(role)及び値(value)

カスタムコントロール(独自のユーザーインターフェースコンポーネント)を実装する場合には、支援技術などのユーザーエージェントがそのコンポーネントを適切に解釈できるようにnameやrole及びvalueを設定しましょうというものです。
カスタムコントロールとは例えば<input type="checkbox">を使わないチェックボックスなどが該当します。

まとめ

もっと詳しく知りたいよ!という方は以下のAmebaのガイドラインがわかりやすくまとまっていたのでそちらをご覧いただければと思います。
最後まで読んでいただきありがとうございました。
https://a11y-guidelines.ameba.design/

参考

https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/08ed88e1-d622-43cb-900b-84957ab87826/53f76eaa/20240329_introduction_to_weba11y.pdf

https://waic.jp/files/cheatsheet/waic_jis-x-8341-3_cheatsheet_201812.pdf

https://giginc.co.jp/blog/giglab/accessibility-aa

https://a11y-guidelines.ameba.design/

Discussion