テストページに関する注意
このページには、テストおよびデモのために意図的にアクセシビリティ上の問題を含む実装例が含まれています。
これらの例を本番サイトで使用しないでください。アクセシビリティのガイドラインやベストプラクティスに反します。
このページは Accessibility Visualizer 拡張機能と併用することで、開発者がアクセシビリティの問題を発見・理解するのを支援する目的で作られています。
Inert
inert 属性および CSS の interactivity: inert は、要素とそのサブツリー全体を操作不可にし、アクセシビリティツリーから除外します。inert なサブツリー内のコンテンツは支援技術から無視されます。
操作可能な要素
inert なサブツリー内のリンク
inert 属性を持つコンテナ内に置かれたリンクです。フォーカスや操作ができず、アクセシビリティツリーからも除外されます。
inert なサブツリー内のボタン
inert 属性を持つコンテナ内に置かれたボタンです。フォーカスやクリックができず、アクセシビリティツリーからも除外されます。
inert なサブツリー内のフォームコントロール
inert 属性を持つコンテナ内に置かれたフォームコントロールです。フォーカスや入力ができず、アクセシビリティツリーからも除外されます。
ライブリージョン
inert なサブツリー内のライブリージョン
inert 属性を持つコンテナ内に置かれたライブリージョンです。サブツリーがアクセシビリティツリーから除外されるため、内容の変化は支援技術に伝わりません。
ステータス（inert）:
interactivity: inert なサブツリー内のライブリージョン
interactivity: inert を指定したコンテナ内のライブリージョンです。この CSS 宣言は inert 属性と同等の状態を表します。このプロパティの対応状況はブラウザによって異なります。
ステータス（interactivity: inert）:
inert な要素での element.ariaNotify()
inert 属性を持つ要素に対して ariaNotify() を呼び出します。inert な要素から発生した通知は支援技術に伝わりません。