Web制作における、ウェブアクセシビリティ対応-後編-HTMLコーディングガイドあり！│関東・名古屋・福岡のホームページ制作会社│アイエムワークス株式会社

こんにちは。
本日は「Web制作におけるウェブアクセシビリティ」後編として、実際にコードを書きながら解説していきます！

後編の記事では、実際のコード例を通してウェブアクセシビリティ対応を実現するための具体的な手法を紹介していきます。
今回解説する内容を活用すれば、自社のWebサイトのアクセシビリティ改善に役立つはずです。

また、そもそも「ウェブアクセシビリティ」のガイドラインや現状と今後の展望、チェックツールなどはウェブアクセシビリティ全編でご紹介しています。
まだ記事を読んでいない方は是非こちらもご覧ください。

Web制作における、ウェブアクセシビリティ対応まとめ-前編

ウェブアクセシビリティとは？法規制?義務化?ウェブアクセシビリティとその対応方法について解説!

ページ内の見出しの最適化

「ページ内の見出しの最適化」とは、見出しタグ (<h1>, <h2>, <h3> など) の階層構造を正しく整理し、ページ全体の情報構造をわかりやすくすることです。
これにより、検索エンジンやスクリーンリーダーがコンテンツを適切に理解しやすくなり、ユーザーが情報をスムーズに把握できます。

見出し階層構造の最適化ポイント

1.<h1>タグはページ内で1回だけ使用

ページの主題を表すために <h1> を1回使用します。
これは、そのページの内容を端的に表す重要な見出しであるべきです。

<h1>Web制作におけるウェブアクセシビリティ対応</h1>

2.<h2>, <h3> などでセクションを整理

ページのサブテーマや内容ごとに <h2>, <h3> を使い分け、情報の階層を明確にします。
例えば、 <h2> で大きなセクションを分け、さらに <h3> でその下位の内容を分割します。

<h2>1. ページ内の見出しの最適化</h2>
<p>ここで見出しの最適化について説明します。</p>
<h3>1.1 見出しタグの役割</h3>
<p>見出しタグの使い方を紹介します。</p>

3.見出しタグの順序を飛ばさない

<h2> の後に直接 <h4> を使用するのは避け、順序を守ります。
見出しタグの順序を飛ばさないことは、ページ構造の理解を容易にするための重要なポイントです。
順序が守られていれば、ユーザーやスクリーンリーダーがコンテンツを順序立てて理解しやすくなります。

良い例

以下は、見出しタグの順序が守られている例です。このように、上から順に <h1>、<h2>、<h3> といった形で見出しを構成しています。

<h1>Web制作におけるウェブアクセシビリティ対応</h1>
<p>このページでは、ウェブアクセシビリティについて解説します。</p>

<h2>1. アクセシビリティの基礎知識</h2>
<p>アクセシビリティの重要性について説明します。</p>

<h3>1.1 見出しの役割</h3>
<p>見出しを適切に使う理由について説明します。</p>

<h2>2. 実装時の注意点</h2>
<p>実装の際に注意すべきポイントです。</p>

<h3>2.1 代替テキストの使用</h3>
<p>画像に代替テキストを追加する方法です。</p>

悪い例

以下は、見出しタグの順序が飛んでいる例です。<h2> の直後に <h4> を使用しており、階層が不自然になっています。

<h1>Web制作におけるウェブアクセシビリティ対応</h1>
<p>このページでは、ウェブアクセシビリティについて解説します。</p>

<h2>1. アクセシビリティの基礎知識</h2>
<p>アクセシビリティの重要性について説明します。</p>

<!-- 階層が飛んでしまっている -->
<h4>1.1 見出しの役割</h4>
<p>見出しを適切に使う理由について説明します。</p>

<h2>2. 実装時の注意点</h2>
<p>実装の際に注意すべきポイントです。</p>

<h3>2.1 代替テキストの使用</h3>
<p>画像に代替テキストを追加する方法です。</p>

上記の「悪い例」では <h4> の代わりに <h3> を使用するのが適切です。このように順序を飛ばすと、スクリーンリーダーや検索エンジンがページ構造を理解しづらくなり、アクセシビリティやSEOの観点からも望ましくありません。

SEOの基礎知識と今すぐできる対策3選【初心者必見！】

SEOの基礎知識と今すぐできる対策！すぐに実践できる具体的な方法を3つに絞ってご紹介します。アクセスアップを目指して、まずはSEOの基礎を押さえましょう！

クリッカブルな要素には a タグまたは button タグを使用する

クリッカブルな要素=クリック可能な要素という意味です。

「クリッカブルな要素」には、ユーザーがクリックして操作できる要素（リンクやボタン）を指し、これらを適切なタグで実装することが重要です。

<a>タグまたは<button>タグを使うことで、アクセシビリティの向上やユーザーが予想通りの操作を行えるようになります。

<a> タグ または <button> タグの違い

<a>タグ：ページ間の遷移や外部リンクなど、「ページの移動」を伴う要素に使用します。これにより、スクリーンリーダーなどの支援技術が「リンク」として認識でき、ユーザーにも「移動先がある」ことが明確に伝わります。

<button>タグ：フォームの送信やモーダルの表示、コンテンツのトグルなど、「ページ内でのアクション」に使用します。ボタンの用途を明確にすることで、支援技術にも「ボタン」として認識され、ユーザーに「何かを実行する操作」であることが伝わりやすくなります。

良い例：<a>タグと<button>タグの適切な使い分け

1. ページ遷移のための <a> タグ例

この例では、別ページに遷移するため<a>タグを使用しています。これにより、リンクとしての役割が明確になります。

<a href="https://example.com/contact">お問い合わせページへ</a>

2. アクション実行のための <button> タグ例

この例では、ページ内でのアクション（メニューの表示）を実行するため<button>タグを使用しています。これによって、ユーザーには「ページ遷移ではなく、何かを実行する」ことが伝わります。

<button onclick="toggleMenu()">メニューを表示</button>

悪い例：クリッカブルな要素に <div>や<span> や他の要素を使う

<div>や<span>はデフォルトでフォーカスが当たらず、キーボード操作やスクリーンリーダーが正しく動作しないことが多いため、クリックイベント用に使うべきではありません。

<a> タグを使わないリンク例

HTMLの実装上は以下でもリンクはできますが、スクリーンリーダーは正しくリンクとして動作しない事が多いです。また、SEOから見ても先のページまでクローリングされない可能性があります。

//inputでリンク
<input type="button" onclick="location.href='リンク先URL'" value="リンクテキスト">

//buttonでリンク
<button type="button" onclick="location.href='リンク先URL'">リンクテキスト</button>

<div>や<span> で<button>を装う例

<!-- 悪い例: div タグでボタンのようにしている -->
<div onclick="submitForm()">送信</div>
<span onclick="toggleMenu()">メニューを表示</span>

上記のような実装はアクセシビリティに問題があり、キーボード操作や支援技術の利用者には適切に認識されません。代わりに、<button>タグを使用するべきです。

このように、クリック要素には <a> または <button> タグを使用することで、アクセシビリティや使い勝手を向上させることができます。

画像の代替テキストの指定と装飾的な画像の取り扱い方

画像の代替テキスト（alt属性）は、ウェブアクセシビリティにおいて重要な役割を果たします。

適切な代替テキストは、視覚的な情報が見えないユーザーに画像の内容を伝えるために不可欠です。
一方、装飾的な画像には代替テキストを指定せず、スクリーンリーダーが無視するようにすることで、不要な情報が読み上げられるのを防ぐことができます。

コンテンツ画像の代替テキストの指定

コンテンツ画像とは、ページの内容に直接関係し、意味を持つ画像です。
以下のような場合、代替テキストを付けるのが適切です。

• 情報を伝える画像（例：製品写真、インフォグラフィックスなど）
• リンクやボタンとして機能する画像（例：クリックで他のページに移動するバナー画像など）

altの良い例

以下は、料理の紹介ページにおけるコンテンツ画像の例です。
画像の代替テキストには、その画像が伝えるべき具体的な内容を記載します。

<img src="pasta.jpg" alt="クリーミーなソースを絡めたカルボナーラパスタ">

ここでは「カルボナーラパスタ」であること、またクリーミーなソースが特徴的であることを説明しています。これにより、視覚情報を得られないユーザーにも内容が伝わります。

装飾的な画像の取り扱い

装飾的な画像は、デザインの一部として使われている画像であり、コンテンツの理解に影響を与えないものです。このような画像は、代替テキストを空(alt="")にして指定します。
これにより、スクリーンリーダーはこれらの画像を無視します。

<img src="decoration.png" alt="">

のように、画像が情報を伝えるものなのか、デザインの一部なのかを区別して代替テキストを設定することで、ウェブページのアクセシビリティが向上します。

altの悪い例

//画像ファイル名をそのまま使用
<img src="pasta.jpg" alt="pasta.jpg">

//内容が不明確な代替テキスト
<img src="pasta.jpg" alt="画像">

//過剰な説明
<img src="pasta.jpg" alt="白いお皿に盛られた、クリーミーで濃厚なソースがたっぷり絡まったカルボナーラパスタ。パスタの上にはチーズがふりかけられ、おいしそうに湯気が立っています。">

//冗長な表現
<img src="pasta.jpg" alt="この画像はクリーミーなソースのカルボナーラパスタの画像です">

これらの悪い例を避け、適切な代替テキストを設定することで、画像の内容を分かりやすく伝え、ウェブサイトのアクセシビリティを向上させることができます。

リンクや状態の判別を色の変化だけはNG

リンクや要素の状態変化を「色の変化だけ」で表現することは、アクセシビリティ上の問題を引き起こす可能性があります。

視覚的に色が区別できないユーザーや、画面の明るさ・コントラストに依存しているユーザーにとって、色だけでの識別は見えづらくなります。

色弱者の見え方

色弱者の方の見え方については、一般色覚の方にはなかなか想像しづらい部分がありますね。
色覚の違いにより、色がどのように見えるかは人によって異なります。
以下は、色弱者にはどのように色が見えているかの一例です。

※以下は、黒板に5色のチョークでそれぞれ文字を書いたイメージです。

• 赤色の文字が青色っぽく見える
• 緑色の文字が黄色っぽく見える

• 赤色の文字が白色っぽく見える
• 緑色の文字が黄色っぽく見える

• 黄色の文字がピンク色っぽく見える
• 緑色の文字が青色っぽく見える

このように、一般色覚者の感覚だけでリンクのhover時の色の変化のみで判断させるデザインは、色弱者にとっては非常に判断が難しくなります。
色覚異常を持つ方々は、特に赤や緑、青と黄色など、色の識別が難しいため、色の変化だけに頼ったインタラクションでは、視覚的に意図を伝えることができません。

リンクや状態変化を他の視覚的手法でも表現する

色の変化だけに頼らず、以下のような工夫を加えることで、アクセシビリティ上の問題が解決できるかもしれません。

1.テキストの下線を追加する

リンクであることを明示するために、通常状態でテキストに下線を付けておくのが一般的です。ホバー時に色が変わる場合でも、下線があることでリンクと認識しやすくなります。

<a href="https://example.com" style="text-decoration: underline;">こちらをクリック</a>

2.ホバーやフォーカス時に下線やボーダーを追加する

<a href="https://example.com">こちらをクリック</a>

/* リンクの通常状態 */
a {
    color: #0066cc;
    text-decoration: underline;
}

/* ホバーやフォーカス時に視覚的な変化を加える */
a:hover, a:focus {
    color: #004499;
    border-bottom: 1px solid #004499; /* 下線の色を変える */
}

3.ボタンに影や背景色の変化を加える

<button type="button">メニュー</a>

button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

/* ホバー時に影を追加して視覚的変化を付ける */
button:hover, button:focus {
    background-color: #0056b3;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

アイコンやテキストを併用する

<a href="https://example.com">
    <span aria-hidden="true" style="margin-right: 5px;">🔗</span>リンクを開く
</a>

色だけではなく、上記のように視覚的な変化（下線、ボーダー、影など）も加えることで、よりアクセシブルなデザインを実現できます。

キーボード操作時のフォーカスインジケーターを表示する

フォーカスインジケーターを非表示にせず、キーボード操作時にしっかり表示させることは、アクセシビリティの観点から非常に重要です。
キーボードだけで操作するユーザーがフォーカスの位置を視覚的に把握できるように、次のようなCSS設定を行うのが良いでしょう。

まず、マウス操作とキーボード操作で異なるフォーカス表示を設定するために、:focus-visible 擬似クラスを利用します。focus-visibleは、キーボード操作時にのみフォーカスインジケーターを表示し、マウス操作時にはインジケーターを非表示にするために役立ちます。

/* フォーカスインジケーターのスタイルをキーボード操作時にのみ表示 */
button:focus-visible,
a:focus-visible {
    outline: 3px solid #007bff; /* フォーカスリングのスタイル */
    outline-offset: 2px;
}

/* マウス操作時にはフォーカスインジケーターを表示しない */
button:focus,
a:focus {
    outline: none;
}

:focus-visibleは、ユーザーがキーボードなどの非マウスデバイスを使用している場合にのみ適用されるため、キーボード操作時にはフォーカスインジケーターが表示され、マウスクリック時には非表示になります。

outline プロパティで、フォーカスインジケーターをわかりやすく設定します。
視認性が良くなるように色や太さを調整すると、フォーカスの位置がはっきりとわかるようになります。

:focus-visibleは一部の古いブラウザでサポートされていない場合がありますが、ほとんどの現代的なブラウザでは利用可能です。また、ブラウザの設定やユーザーエージェントのスタイルシートにより、フォーカスインジケーターが表示されるかどうかが左右されることもあるため、テスト環境で確認するのが良いでしょう。

また、タッチデバイスでのホバーは動作に支障が出る場合があるため、hover メディアクエリを利用してタッチデバイスでのホバーは無効化しておくと良いでしょう。

アコーディオンUIには可能な限り<details>要素を活用しよう

アコーディオン UI を details 要素で実装すると、非アクティブな要素内のテキストもページ内検索で見つけることができ、キーボード操作や支援技術によるナビゲーションも可能になります。
さらに、JavaScript を使わないためパフォーマンスが向上し、JavaScript が動作しない場合でもアコーディオンが利用可能になります。

<details>タグで実装

<details>タグは、HTML5.1から追加されており、<summary>タグをセットで使います。
ただし、アニメーション効果を追加しようとなると、JqueryやJavascriptが必要となります。

<details>
  <summary>見出し</summary>
  <p>コンテンツ</p>
</details>

Bootstrap 5 のアコーディオンで実装

Bootstrap5のアコーディオンで実装することもできます。
予めコンポーネントが用意されているので、JqueryやJavascriptがわからなくても、比較的手軽に実装できるかもしれません。

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

モーダル表示時は背面のコンテンツを読み上げをさせない

モーダルウィンドウが表示されている際、背面のコンテンツを読み上げ・選択不可能にすることは、アクセシビリティを保つために重要です。
これにより、ユーザーがモーダル内の内容に集中しやすくなり、背面のコンテンツを誤って操作するリスクも回避できます。

inert 属性を利用して背面のコンテンツを非アクティブ化

inert 属性を背面のコンテンツに付与することで、ブラウザはそのコンテンツに対するキーボードフォーカスやスクリーンリーダーでの読み上げなどの入力イベントを無視します。
支援技術においても、ユーザーが意図せず背面のコンテンツにアクセスすることが防げます。

//モーダルが展開していない状態
<div id="background-content">
    <!-- 背面のコンテンツ -->
</div>
<div role="dialog" aria-modal="false" id="modal">
    <!-- モーダルコンテンツ -->
</div>

//モーダルがアクティブな状態
<div id="background-content" inert>
    <!-- 背面のコンテンツ -->
</div>
<div role="dialog" aria-modal="true" id="modal">
    <!-- モーダルコンテンツ -->
</div>

モーダルを表示する際: 背面のコンテンツ全体に inert 属性を追加します。また、モーダルには aria-modal="true" を指定し、モーダルがアクティブな状態であることを支援技術に伝えます。

モーダルを閉じる際: inert 属性を削除し、背面のコンテンツが再びフォーカスや支援技術からアクセス可能になるようにします。

例えば、javascriptで上記動作を行おうとした場合、以下のようなJavascriptで対応できます。

//HTML
<div id="background-content">
    <!-- 背面のコンテンツ -->
    <button type="button" id="modal-button">モーダルを開く</button>
</div>
<div role="dialog" aria-modal="false" id="modal">
    <!-- モーダルコンテンツ -->
    <button type="button" id="modal-close">モーダルを閉じる</button>
</div>

<style>
    /* モーダル非表示のスタイル */
    #modal {
        display: none;
        /* その他のスタイル */
    }
    #modal.show {
        display: block;
        /* 表示状態のスタイル */
    }
</style>

<script>
    const modalButton = document.getElementById('modal-button');
    const modal = document.getElementById('modal');
    const modalClose = document.getElementById('modal-close');
    const backgroundContent = document.getElementById('background-content');

    // モーダルを開く
    modalButton.addEventListener('click', () => {
        backgroundContent.setAttribute('inert', ''); // inert属性を付与
        modal.classList.add('show'); // .showクラスを追加
        modal.setAttribute('aria-modal', 'true'); // aria-modalをtrueに設定
    });

    // モーダルを閉じる
    modalClose.addEventListener('click', () => {
        backgroundContent.removeAttribute('inert'); // inert属性を削除
        modal.classList.remove('show'); // .showクラスを削除
        modal.setAttribute('aria-modal', 'false'); // aria-modalをfalseに設定
    });
</script>

※環境や変数名のバッティング等で、コピペで動かない場合もあります。

まとめ

今回は、すぐに実践できるWebアクセシビリティ改善策を、具体例やソースコードを交えながらご紹介しました。

特に、以下のポイントに注目して解説しました。

• 見出しタグの最適化 – 階層構造を正しく整え、アクセシビリティの向上を図る。
• クリッカブルな要素の適切な実装 – aタグやbuttonタグを適切に活用し、ユーザーが操作しやすいようにする。
• 画像の代替テキスト設定 – 画像が持つ意味に合わせたalt属性を指定し、情報伝達をサポートする。
• 視覚以外での状態変化の表示 – 色以外の変化（下線やボーダーなど）を加え、視認性を向上させる。
• キーボード操作時のフォーカスインジケーター – 非表示にせず、操作中の要素が分かるようにする。
• アコーディオンUIに<details>要素を活用 – シンプルでアクセシブルなアコーディオンUIを実現。
• モーダル表示時の背面コンテンツの非アクティブ化 – inert属性で背後のコンテンツを非アクティブ化し、ユーザーの操作ミスを防ぐ。

これらのアクセシビリティ改善は、多くの場合において、ユーザーがサイトをより快適に利用できるようにする効果があります。
アクセシビリティ対応はWeb制作における重要なポイントであり、少しの工夫で大きな改善が期待できるため、ぜひ自社のWebサイトに取り入れてみてください。

また、アイエムワークスではWebアクセシビリティの対応も行っております。
ご自身での実装が難し場合は、是非ご相談ください。

参考資料

• Webアクセシビリティガイドライン（WCAG）
• MDN Web Docs – Accessibility