WCAG2.1 AA 準拠

1.1.1 非テキストコンテンツ

適合レベル:A

概要

ロゴ・イラスト・写真など画像に、その画像が指し示している情報が代替テキストとして記載されている。

対応方法

・装飾画像のaltは空にする
・情報を提供する画像には、「イラスト:〇〇」、「写真:〇〇」など種類を先に書き、内容を短く伝える
・機能を持つ画像には機能の説明を設定する
・文字画像やバナーは、画像と同じテキストを設定する
・グラフや図は画像と同等の情報を設定する「グラフ:グラフの説明。グラフの内容。」
(例)グラフ:〇〇の男女比。男性〇〇%。女性〇〇%。

インラインsvgの場合は、
・svg要素にrole="img"を付与し、aria-labelでテキスト情報を入れる
・svg要素にrole="img"を付与し、svg要素内にtitle要素でテキスト情報を入れる
・svg要素をaria-hidden="true"にし、svg要素に隣接して.sr-only(.visually-hidden)でテキスト情報を入れる
・アイコンだけのボタンの場合、button要素のaria-labelにテキスト情報を入れ、svg要素はaria-hidden="true"にするのも可

各ページの検査結果

ページ名 検査結果 達成基準チェックリスト
フロントエンド, UI/UX, アクセシビリティのリベロジック株式会社
https://www.liberogic.jp/
適合 達成基準チェックリストを見る
サービス | リベロジック株式会社
https://www.liberogic.jp/service/
適合 達成基準チェックリストを見る
フロントエンド実装 | サービス | リベロジック株式会社
https://www.liberogic.jp/service/frontend/
適合 達成基準チェックリストを見る
ヘッドレスCMS構築 | サービス | リベロジック株式会社
https://www.liberogic.jp/service/headless_cms/
適合 達成基準チェックリストを見る
UIデザイン | サービス | リベロジック株式会社
https://www.liberogic.jp/service/design/
適合 達成基準チェックリストを見る
アクセシビリティ対応 | サービス | リベロジック株式会社
https://www.liberogic.jp/service/accessibility/
適合 達成基準チェックリストを見る
様々なソリューション | サービス | リベロジック株式会社
https://www.liberogic.jp/service/other_services/
適合 達成基準チェックリストを見る
私たちについて | リベロジック株式会社
https://www.liberogic.jp/about/
適合 達成基準チェックリストを見る
実績紹介 | リベロジック株式会社
https://www.liberogic.jp/works/
適合 達成基準チェックリストを見る
トピックス | リベロジック株式会社
https://www.liberogic.jp/topics/
適合 達成基準チェックリストを見る
お問い合わせ | リベロジック株式会社
https://www.liberogic.jp/contact/
適合 達成基準チェックリストを見る