Shadow DOM

テストページに関する注意

このページには、テストおよびデモのために意図的にアクセシビリティ上の問題を含む実装例が含まれています。

これらの例を本番サイトで使用しないでください。アクセシビリティのガイドラインやベストプラクティスに反します。

このページは Accessibility Visualizer 拡張機能と併用することで、開発者がアクセシビリティの問題を発見・理解するのを支援する目的で作られています。

Shadow DOMはWeb Componentsでスタイルやマークアップをカプセル化するために使われます。Accessibility VisualizerはShadow DOMツリー内の要素を検出・分析でき、ネストしたShadow DOMにも対応しています。

✅ 適切なラベルを持つShadow DOM内のフォーム。各入力にはlabel要素が関連付けられている

❌ ラベルが関連付けられていないShadow DOM内の入力要素。スクリーンリーダーが各フィールドの目的を識別できない

❌ alt属性のないShadow DOM内の画像。支援技術が画像の目的を伝えることができない

✅ 説明的なalt属性を持つShadow DOM内の画像

✅ 内側にWeb Componentを含む外側のWeb Component。どちらも適切なアクセシビリティ属性を持つ

Shadow DOM内のライブリージョンも支援技術にコンテンツの更新を通知する必要がある