「やればいいこと」から「やらないとブランドを毀損するリスク」へ。ウェブアクセシビリティの入門（Webガバナンス）

こんにちは、ゼノクリース合同会社 CEO の齋藤です。このコラム記事では、企業の Web ガバナンスや最新情報について紹介しています。

デジタル庁が示す「誰一人取り残されない、人にやさしいデジタル社会の実現」デジタル社会への道筋

デジタル庁は、公式サイトのウェブアクセシビリティというページの中で、同庁のサイト（https://www.digital.go.jp/ ドメイン配下のページ）のウェブページ一式について、2026 年 3 月 31 日までにウェブアクセシビリティの適合レベル AA に準拠させることを目指すことを表明しています。

ウェブアクセシビリティとは何か

ウェブアクセシビリティとは、年齢や障害の有無、使用する技術環境（デスクトップ、タブレット、スマートフォンなど）に関係なく、誰もがウェブサイトやウェブアプリケーションを利用できるようにすることです。
具体的には、以下のようなものです。

『政府広報オンライン』でも、こちらのページ（ウェブアクセシビリティとは？分かりやすくゼロから解説！）で、ウェブアクセシビリティの概要を解説されています。

スクリーンリーダーでコンテンツを理解できる
小さな文字や低コントラストで困らない
キーボードのみでサイトを操作できる
複雑でない方法でサイトを利用できる

アクセシビリティは「特別な配慮」ではなく、すべてのユーザーにとって使いやすいウェブを実現する「品質要件」です。

そのことの根拠として、デジタル庁だけでなく、自治体や企業でも AA 準拠を目指す動きが広がっています。また、アクセシビリティ不備が SEO 低下や訴訟コストに直結することから、アクセシビリティ対応は「やればいいこと」から「やらないとブランドを毀損するリスク」に変わってきているのです。

WCAG 2.2 の 4 原則と JIS 規格の関係

ウェブアクセシビリティの国際標準 WCAG（Web Content Accessibility Guidelines）2.2 は、以下の 4 原則に基づいています。
なお、2024 年 12 月 12 日付けのWeb Content Accessibility Guidelines (WCAG) 2.2 の日本語訳はこちらのリンクです。

原則	意味	具体例
知覚可能 (Perceivable)	情報をユーザーが知覚できる形で提示する	画像の代替テキスト、動画の字幕など
操作可能 (Operable)	インターフェースコンポーネントが操作することができる	キーボードでの完全操作、十分な時間制限など
理解可能 (Understandable)	情報と UI の操作を理解することができる	一貫したナビゲーション、明確なエラー表示など
堅牢 (Robust)	支援技術を含む様々なユーザーエージェントで解釈することができる	正しい HTML マークアップなど

それぞれのレベルは、以下のような位置づけです。

レベル	位置づけ	デジタル庁の対応状況
レベル A	最低限のアクセシビリティ要件	現在「一部準拠」
レベル AA	推奨される標準レベル	2026 年 3 月 31 日までに達成予定
レベル AAA	最高レベル	達成すべき目標とはしていない

デジタル庁は現実的な目標としてレベル AA を設定しています。もちろんレベル AAA を達成するに越したことはありませんが、これが多くの組織にとっての標準的な目標ラインとなります。

すぐに実装できるアクセシビリティ改善例

一つひとつの詳しい項目については先ほどの一次情報を参考にしていただくとして、ここでは、HTML のコードを例に、すぐに実装できるアクセシビリティ改善例を紹介します。

1. スキップリンクの実装

キーボードユーザーがナビゲーションを飛ばしてメインコンテンツに直接移動できるようにするリンクです。スクリーンリーダーのユーザーにとっても大切な機能です。

<a href="#main" class="skip-link">本文へスキップ</a>

<main id="main" tabindex="-1">

  <!-- メインコンテンツ -->

</main>

ポイント

tabindex="-1" でプログラム的にフォーカスを当てられるようにする
CSS で通常は非表示にし、フォーカス時のみ表示する

2. 適切な見出し構造

見出しは階層構造を保ち、レベル (h1, h2, h3, …) を飛ばさないことが重要です。スクリーンリーダーのユーザーは見出しを使ってページ構造を理解し、ナビゲーションします。

<h1>ページタイトル</h1>

<h2>大見出し</h2>

<h3>中見出し</h3>

<h4>小見出し</h4>

ポイント

h1 は原則 1 ページに 1 つのみ
見出しレベルを飛ばさない（h2 の次に h4 を使わない）

3. フォームの適切なラベル付け

フォーム要素には必ずラベルを関連付けることで、スクリーンリーダーのユーザーが入力項目を理解できるようになります。

<label for="email">メールアドレス（必須）</label>

<input type="email" id="email" required aria-required="true" />

ポイント

for 属性と id 属性で関連付ける
必須項目は required 属性と aria-required="true" の両方を使用
ラベルテキストに必須 / 任意の情報を含める

4. 画像の代替テキスト

画像の目的に応じて適切な代替テキストを設定します。画像が何らかの理由で読み込めない場合に「どのような画像が入るのか」を伝えることができます。また、読み上げ機能のユーザーにも、その画像の内容を伝えることができます。

<!-- 装飾的な画像 -->

<img src="decoration.png" alt="" role="presentation" />

<!-- 情報を含む画像 -->

<img src="graph.png" alt="2024年の売上推移：1月100万円から12月380万円へ増加" />

ポイント

装飾的な画像は、alt="" と role="presentation" で支援技術に無視させる
情報を含む画像は、具体的で有用な説明を提供する
グラフや図表は、データの傾向や重要な数値を含める

5. コントラスト比を確保

テキストと背景色のコントラスト比を適切に保つことで、視覚に障害のあるユーザーや高齢者にも読みやすくなります。

<style>

  :root {

    --primary: #004fa3;

    --on-primary: #ffffff;

  .btn {

    background: var(--primary);

    color: var(--on-primary);

</style>

ポイント

カラーパレットを事前に検証ツールでチェックする
CSS 変数を使用して一貫性を保つ

6. ARIA で状態を通知

先ほどの例でも登場していましたが、ARIA 属性を使用して UI コンポーネントの状態や関係性を支援技術に伝えることができます。

<button aria-expanded="false" aria-controls="faq1" onclick="toggle()">詳細を見る</button>

ポイント

aria-expanded：展開可能な要素の開閉状態を示す
aria-controls：このボタンが制御する要素の ID を指定する
JavaScript での状態変更時に ARIA 属性も更新する

まとめ

アクセシビリティ改善の重要性は増してきていますが、現実問題、社内のさまざまなサイトに統一的にアクセシビリティ対応を行うことは難しいです。そもそも、アクセシビリティ対応の前にやらなくてはいけないことが多いケースもあると思います。

そのため、プライム・ストラテジーの提供する CMS/Web プラットフォーム統合サービスでは、WordPress サイトを統合管理することで、アクセシビリティ対応を効率的に行うことが有効です。

千里の道も一歩からです。Web サイトの見た目や機能だけでなく、ぜひアクセシビリティ対応も進めてみてください！

【著者】
ゼノクリース合同会社代表（Web）
齋藤智樹

在学中から高校や予備校、IT 企業に携わり、講師とソフトウェアエンジニアとして活動。
大学卒業後 (2020年4月〜) はフリーランスエンジニアとして活動を始め、以下のような幅広い業務を行う。2021年3月に、業務を拡大させるためにゼノクリース合同会社を設立。スタディングテックの WEB 開発コース主任講師も務める。