テストページに関する注意
このページには、テストおよびデモのために意図的にアクセシビリティ上の問題を含む実装例が含まれています。
これらの例を本番サイトで使用しないでください。アクセシビリティのガイドラインやベストプラクティスに反します。
このページは Accessibility Visualizer 拡張機能と併用することで、開発者がアクセシビリティの問題を発見・理解するのを支援する目的で作られています。
レイアウトとランドマーク
セマンティックな HTML 要素や ARIA ランドマークは、ページ構造の理解と効率的な移動に役立ちます。これらはコンテンツ各所の文脈を提供します。
セマンティックなセクション
ランドマーク要素
✅ ランドマーク要素を適切に用い、ページに明確な構造と意味を与えます。
<header> - Page or section header <main> - Main content area
ARIA ランドマーク
ARIA のランドマークロール
✅ セマンティック HTML と同様のナビゲーション上の利点を提供します。セマンティック HTML が使えないときに利用します。
role="banner" - Equivalent to <header>role="main" - Equivalent to <main>role="complementary" - Equivalent to <aside>role="contentinfo" - Equivalent to <footer>
汎用コンテナー
セマンティックな意味のない div コンテナー
❌ ページの主要セクションを div だけで構成すると、支援技術に意味が伝わりません。
これらの div は目的や構造に関する情報を提供しません。
section 要素
アクセシブルネームをつけた section
section 要素にアクセシブルネームをつけると region ロールとなり、ランドマークとして機能します
About Our Services
この section は見出しの id 属性値を section 要素の aria-labelledby 属性で参照しています。
アクセシブルネームのない section
アクセシブルネームの提供されていない section 要素はランドマークとして機能しません。
About Our Services
この section は見出しをただ置いただけの状態です。iFrame 要素
title を持つ iFrame
✅ 内容を説明する title を持つ iFrame。フレーム内容の理解に必須です。
title の無い iFrame
❌ title が無く、フレーム内容を支援技術が把握できません。
ライブリージョンを含む iFrame
iframe内のライブリージョンも支援技術にコンテンツの更新を通知する必要がある
ariaNotify を含む iFrame
iframe 内の ariaNotify 呼び出しも拡張機能によってキャプチャ・表示される
ダイアログとモーダル
dialog 要素
HTML の dialog 要素の例。showModal() で開くとフォーカスを閉じ込め、背後の操作をブロックします。
aria-modal='true' を持つ要素
✅ 適切なフォーカス管理を伴うカスタムモーダル。モーダル内にフォーカスを閉じ込め、閉じると開いたボタンに戻します。