アクセシビリティ勉強会

令和 6 年 4 月 1 日より、障害者差別解消法が改正されます。

今までは、「社会的障壁の除去の実施について必要かつ合理的な配慮をするように**努めなければならない。**」

でしたが、今回の改正により、

「社会的障壁の除去の実施について必要かつ合理的な配慮をしなければならない。」

に変更となります。

これを機に、アクセシビリティとは何かを学ぼうと思います。

アクセシビリティとは？

最近よく耳にする「アクセシビリティ」とは、年齢的・身体的条件に関わらず、誰もがアクセスでき、利用できるもの。です。

「ユーザビィティ」と似ていますが、こちらは、利用する人を対象にしてより使いやすくするものです。

アクセシビリティはさまざまな条件を想定して、幅広い範囲を網羅するのに対し、ユーザビリティは、特定条件で特定対象者に向けたアプローチとなります。

## アクセシビリティの適合レベル

今回の本題である適合レベルについて学んでいきます。

この記事のゴールは、各レベルの理解とそれぞれのレベルに適合するための知識を得ることです。

• A(25 の達成基準) : 最低限必要なレベル。全てのサイトで求められる。
• AA(13 の達成基準) : 公的機関に求められるレベル。
• AAA(23 の達成基準) : AAA の適合を目標とすることは推奨されていません。それくらいヤバい。

A レベルについて学ぶ

まずは必ずクリアすべき 25 の項目をそれぞれ見ていきます。

非テキストコンテンツ

画像・動画のような非テキストコンテンツには、代替となるテキストを提供してください。

【具体例】

• aria-label の使用
• aria-labelledby の使用
• name の使用
• alt の使用

※ 装飾・整形・非表示のコンテンツには、支援技術が無視できる処置を実施し代替テキストは不要。

音声のみ及び映像のみ

時間依存メディアに対する代替コンテンツを準備してください。

【具体例】

• 音声のみの場合には字幕をつける。
• 映像のみの場合には説明のテキストを添える。

キャプション

何を言っているかよくわかりません...。

上記の「音声のみ及び映像のみ」と似ていますが、こちらは

• 音楽に対して楽曲名を入れる。
• 音声のない映像に対して、「音声はありません。」のテロップを入れる。

と言ったように、実際の音声だけでなく、追加となる情報をテキスト化して提示するということだと思います...。

音声解説、又はメディアに対する代替

時間依存コンテンツには代替コンテンツまたは音声解説を提供してください。

情報及び関係性

【具体例】

入力必須のフォーム

赤字は必須項目です。だけでは、視覚情報でしか必須を伝えられません。色以外で必須を伝える工夫が必要です。

表テーブルを用いた場合

バスの路線情報などは、1 列目にバスの名前、それ以降に各駅の到着時刻が記載されている場合、

スクリーンリーダーでは、時刻しか読み上げされません。

どの路線で何駅の到着が何時なのか、支援技術に正しく伝わるような工夫が必要です。

意味のある順序

コンテンツが提示されている順序が意味に影響を及ぼす場合には、正しく読む順序はプログラムによる解釈ができるようにする。

【ダメな具体例】

• 体裁を整えるために全角空白を使う

感覚的な特徴

コンテンツを理解し操作するための説明は、形、大きさ、視覚的な位置、方向、又は音のような、構成要素が持つ感覚的な特徴だけに依存していない。

【具体例】

• フォームには、入力内容を送信して一連の過程の次の手順に進むために円形のボタンがある。そのボタンにはテキストで「次へ」とラベルが付けられている。説明には、「フォームを送信するには、次へと記された円形のボタンを押して下さい」と示されている。これは、そのボタンを特定するための形とテキスト情報の両方を含んでいる。
• オンライントレーニングを提供するウェブページの説明には、「希望のオンラインコースへ進むには、右側の『クラス一覧』という見出しがついたリンクのリストを使用して下さい。」と書いてある。この説明は、適切なリンクのリストを見つけること補助するために位置と同様にテキストの手がかりを提供している。