アクセシビリティの基本

WCAG2

国際的な基準

Webサイトだけじゃなく、モバイルアプリ、PDFなどさまざまなものに適用される。

今は、2023年にリリースされた2.2が最新。

JIS X 8341-3:2016

WCAG2から派生した日本の規格。

国内向けのサイトであればこれを参考にして対応していけば良い。

達成レベルA

1.画像に代替テキストを設定する。

スクリーンリーダーを使ってるユーザーに向けた配慮。

2. 見出し構造

h1〜h6

3.フォームにlabel要素をつける

inputにfor属性と紐付ける。

4.tabキーでの移動

順番に移動できるか。

エンターキー、スペースキーも。

5.色や形

必須は必ず文字で「必須」とも書く。

6.リンクテキストを明示化する。

「詳しくはこちら」じゃなく「新着一覧へ」など。

またデザイン的にはばが取れない時は、aria-labelを活用する。

7.色のコントラスト比率を保つ

ブランドイメージとの兼ね合いもある。

背景と、文字の色が近いと見えづらい。

8.動画コンテンツ

文字起こしも入れること。

9.カルーセル、スライダー

自動再生停止ボタンを設置すること。

aria-currentで現在位置なども明示すること。

10.タグ付きPDF

アクセシブルなPDF、構造情報が埋め込まれている。PDFに。

チェックツール

Monsido

いろんな企業が導入している。

ページごとに分析してくれる。どれだけ対応しているかなど。