Webアクセシビリティの基本：WCAG 2.2とARIA対応をやさしく解説

本記事には広告が含まれています

2025/05/15

Webアクセシビリティの基本：WCAG 2.2とARIA対応をやさしく解説

アクセシビリティ対策は「あとでまとめて」の姿勢だとコストが膨らみがちです。この記事ではWCAG 2.2の新基準とARIAの最新知見を中心に、キーボード／タッチ操作・動的コンテンツ・多言語サイトまで幅広くカバーします。

実装とテストの両面を押さえ、誰ひとり取り残さないWebを実現しましょう。

WCAG 2.2の要点と新追加基準を具体例で理解する

2023年10月に正式勧告となったWCAG 2.2には、既存原則を補強する新しい成功基準が加わりました。注目は2.4.11 Focus Appearance (Minimum)で、フォーカス枠は少なくとも2px相当の境界線か、それと同等の視認性が必須です。

さらに2.5.7 Dragging Movementsでは、ドラッグ操作をクリック・ダブルタップ・キーボード矢印キーなどで代替できるよう求められます。

ほかにも2.5.8 Target Size (Minimum)が追加され、リンクやボタンのタッチ領域は44×44 CSSピクセル確保が推奨されました。これらはモバイル利用時の誤操作を大幅に減らしてくれます。

キーボード操作：:focus-visibleで体験を最適化

「キーボードユーザーにだけフォーカスリングを表示したい」という要件は、CSSの:focus-visible疑似クラスでスマートに解決できます。

たとえば次のように書くと、マウスクリック時はアウトラインを非表示にしつつ、タブ移動時はブランドカラーの枠線を示せます。

:focus{outline:none;}
:focus-visible{outline:2px solid #005fcc; border-radius:4px;}

フォーカス順序の破綻を防ぐためtabindexを安易に付けず、DOM順＝読み上げ順を基本に設計するとトラブルが減ります。

スクリーンリーダー対応：aria-hiddenの賢い使い所

aria-hidden="true"は便利ですが、適用範囲を視覚装飾のみの要素に限定してください。インタラクティブ要素やライブリージョンに誤って付けると、操作不能や読み上げ欠落の原因となります。

装飾アイコンをSVGで挿入する場合など、「情報でも操作でもない」と判断できる時だけ付与すると安全です。

モバイルタッチターゲット：44×44ルールと余白設計

スマートフォンでは指先がポインティングデバイスです。WCAG 2.2が示す44×44pxは目安にすぎませんが、行間やパディングを活かしてタップ領域を拡大するとUIが息苦しくなりません。

隣接リンクの間隔を8px以上あけると、ユーザーは拡大操作なしで正確にタップできます。

コード例：安全なハンバーガーメニュー

<pre><code>
<button id="navToggle" aria-controls="globalNav" aria-expanded="false">☰</button>
<nav id="globalNav" hidden>…</nav>
<script>
  const btn = document.getElementById('navToggle');
  const nav = document.getElementById('globalNav');
  btn.addEventListener('click', () => {
    const open = nav.hasAttribute('hidden');
    btn.setAttribute('aria-expanded', open);
    nav.toggleAttribute('hidden');
  });
</script>
</code></pre>

動的コンテンツ：aria-liveで更新を通知する

AjaxやSPAでメッセージが追加される場合、aria-live="polite"を指定するとスクリーンリーダーが自動で新着を告知してくれます。

緊急性の高いエラーメッセージはassertiveを選びますが、頻発するとユーザーの操作を阻害するため注意が必要です。

なお、aria-liveを設定した要素はなるべくDOMツリーの末尾（body直下やページ下部）に配置すると、読み上げの干渉が少なく、安定した通知が実現できます。

多言語サイト：lang属性と文字参照のベストプラクティス

文章ごとにlangを設定すると、スクリーンリーダーは適切な音声エンジンに切り替わります。たとえば英語の技術用語は<span lang="en">drag&drop</span>のようにマークアップすると、日本語読み上げの「ドラッグアンドドロップ」誤読を防げます。

hreflangを使った多言語ページ切り替えもSEOに有効です。

PDF・配布資料のアクセシビリティも忘れずに

ウェブページが完璧でも、添付PDFが画像スキャンでは台無しです。タグ付きPDFを生成し、見出しマークアップ・代替テキストを設定しましょう。

Adobe Acrobat Proの「アクセシビリティチェックレポート」は簡易診断に重宝します。

Excelダウンロードならセル結合を避け、スクリーンリーダーで読み上げ順が崩れない構造を意識してください。

無料テストツール比較：WAVE・axe・Lighthouse

WAVEはWebAIMが提供するブラウザ拡張で、コントラスト・ARIA誤用・ランドマーク不足などを色付きアイコンで可視化します。

開発フェーズではaxe DevToolsの自動テスト、リリース前にLighthouseで総合スコアを取得し、視覚でも確認する流れが効率的です。

実際のテスト手順：チェックリストで抜け漏れ防止

①キーボードのみ操作：Tabで主要機能を往復し、フォーカスが常に可視化されるか確認。
②スクリーンリーダー：NVDA→Hキーで見出し一覧、Fキーでフォーム要素ジャンプを試す。誤読がないかメモ。
③ズーム200％：レイアウト崩壊や横スクロールの有無を確認。
④コントラスト：自動ツールでNG箇所を洗い出し、デザイナーに共有。