“誰でも使えるWeb”を提案 ─ HTML/CSSでできるアクセシビリティ改善

株式会社ファストコーディングのWebディレクタの働くおかんです。今回もちょっと前回と関係していますが、読みやすさや見やすさ、という観点で、今度はWebアクセシビリティ対応についてご紹介します。

といってもWebアクセシビリティという言葉は、もはやWeb制作の世界では特別なものではなくなりましたね。弊社にご依頼いただく多くのプロジェクトでも、アクセシビリティ対応は当たり前になってきています。でも、実際のプロジェクトでは「どう実装すればアクセシビリティ対応した上で、ユーザーにとって本当に使いやすくなるのか」が課題になります。

今回は、HTMLとCSSで実現できる“実践的アクセシビリティ改善”についてお伝えしてみようと思います。基本的な部分は他のいろいろなサイトで紹介されていますので、現場での具体的なノウハウや注意点を中心に書いてみます。

見出し構造とランドマーク設計

見出し構造は、スクリーンリーダー利用者にとってサイトの骨格そのものです。<h1>から<h6>までを順序正しく設計するのは当然として、弊社の案件では、ページ全体をランドマークロールで分割することを重視しています。これにより、キーボードや支援技術を使うユーザーが効率的にコンテンツを移動できます。

<header role="banner">
  <h1>サイトタイトル</h1>
</header>

<nav role="navigation" aria-label="メインメニュー">
  <ul>
    <li><a href="#about">会社概要</a></li>
    <li><a href="#service">サービス</a></li>
    <li><a href="#contact">お問い合わせ</a></li>
  </ul>
</nav>

<main role="main">
  <h2>ニュース一覧</h2>
  <article>
    <h3>最新のお知らせ</h3>
    <p>...</p>
  </article>
</main>

<footer role="contentinfo">
  <p>© 2025 Fastcoding Inc.</p>
</footer>

このようにランドマークを適切に設定しておくと、スクリーンリーダーが「ナビゲーション」「メインコンテンツ」「フッター」と読み上げ、情報の整理が自然になります。特に複数のナビゲーションを持つサイトでは、aria-labelを明示して混乱を防ぐことが重要です。

フォーカス移動と動的UIの制御

モーダルウィンドウやドロワーメニューなど、JavaScriptを使った動的UIがある場合は、フォーカスの移動を制御することが不可欠です。アクセシブルなモーダルを設計する際、弊社では次のように「フォーカスの閉じ込め」「戻り位置の記憶」「スクリーンリーダーへの状態伝達」をセットで実装します。

// Snippet: モーダル内のフォーカス管理
const openModal = (trigger, modal) => {
  const focusable = modal.querySelectorAll('a, button, input, [tabindex="0"]');
  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  modal.removeAttribute('aria-hidden');
  first.focus();

  modal.addEventListener('keydown', e => {
    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
  });
};

フォーカスの移動を明確に制御することで、キーボード操作でも自然な動きを維持できます。モーダルを閉じた後には、元のトリガーボタンへフォーカスを戻すのが基本です。これを怠ると、スクリーンリーダー利用者は現在地を見失うことがあります。

CSSでできるフォーカス可視化とユーザー設定の尊重

CSSだけでもフォーカスの見え方を改善できます。outlineをカスタマイズするのはもちろんですが、:focus-visibleとprefers-reduced-motionを併用することで、過剰なアニメーションを避けつつ明確な操作感を実現します。

a:focus-visible,
button:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 3px;
  transition: outline-offset 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  a:focus-visible,
  button:focus-visible {
    transition: none;
  }
}

ここでは、アニメーションを抑えるだけでなく、「ユーザーが明示的に設定している環境を尊重する」という姿勢が大切です。特に動きに敏感なユーザーにとって、意図しないエフェクトは混乱の原因になります。

コンポーネント単位のアクセシビリティ実装

近年の弊社案件では、アクセシビリティを「全体設計」ではなく「コンポーネント単位」で考えることが増えています。特にReactやVueなどのコンポーネントベースの開発では、アクセシビリティ属性を適切に組み込むことが必要です。

タブUIの例

タブ構造を実装する場合、WAI-ARIA Authoring Practicesに準拠することで、スクリーンリーダーでもタブとパネルの関係を正確に伝えられます。

<div role="tablist" aria-label="製品カテゴリー">
  <button role="tab" aria-controls="panel1" aria-selected="true">新商品</button>
  <button role="tab" aria-controls="panel2" aria-selected="false">人気商品</button>
</div>
<div id="panel1" role="tabpanel">...</div>
<div id="panel2" role="tabpanel" hidden>...</div>

この構造では、aria-selectedの状態をJSで動的に更新することで、ユーザーの操作に合わせてスクリーンリーダーが「選択中」を正しく伝達します。CSSでの視覚的な切り替えと並行して、HTML構造を正確に整えることが肝心です。

トランジションのアクセシビリティ

デザインの完成度を高めるためにアニメーションを使うことがありますが、アクセシビリティの観点では「情報を伝える動き」と「装飾のための動き」を明確に区別する必要があります。弊社では、次のようなスニペットをテンプレート化しています。

.fade-in {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .fade-in {
    transition: none;
  }
}

このように、トランジションの意図を明確に設計することで、見やすさとパフォーマンスを両立させます。特に情報の出現・消失を伴う場面では、アニメーションの制御がユーザー体験の質を左右します。

実務で重要な“テスト”と“再現性”

最後に、実務で最も大切なのは、アクセシビリティの実装が「検証可能」であることです。ChromeのLighthouseやaxe DevToolsによる自動テストはもちろん、NVDAやVoiceOverなどのスクリーンリーダーでの操作確認が欠かせません。また、弊社では社内ガイドラインとして「役割（role）・名前（name）・値（value）」が適切に読み上げられているかを確認する“3点チェック”を採用しています。

アクセシビリティは単なる法令遵守や数値基準ではなく、最終的には「そのUIが、誰にとっても安心して使えるかどうか」に尽きます。HTMLとCSSの設計を見直すことが、その第一歩になるのです。

まとめ

この記事では、HTMLとCSSで実現できる実務的なアクセシビリティ改善のアプローチを紹介しました。見出し構造やランドマーク設計から、フォーカス管理、動的UIの制御、トランジションの最適化まで、どれもすぐに現場で応用できるものばかりです。アクセシビリティを「デザイン品質の一部」として考えることで、Webサイトの信頼性と持続性を高めることができます。

株式会社ファストコーディングでは、実装から検証まで、アクセシビリティを意識したWeb制作をワンストップで支援しています。