HTML を貼り付けてページのランドマークツリー(banner/main/nav/aside/footer + ARIA role)と構造的 a11y 問題を表示します。
HTML はブラウザ内で解析されます。DOM スクリプトは実行しません。
ロール別ランドマーク
HTML を貼り付け、H1-H6 アウトラインをツリー表示、スキップされたレベル、H1 不足、空の見出しに対して WCAG アクセシビリティ警告を取得。
HTML を貼り付けて <img>、<svg>、<input type=image>、role=img 要素を WCAG 2.1 alt 規則で監査します。
HTML フォームを貼り付けて、各 <input>、<select>、<textarea>、<button> が WCAG 3.3.2 に沿ったアクセシブルネームを持つかを検証します。
ランドマークは、スクリーンリーダーのユーザーがキー 1 つで領域間を移動し、既読部分をスキップできる名前付き領域です — ヘッダー、ナビメニュー、メインコンテンツ、サイドバー、フッターなど。HTML5 では明示的な ARIA ロールが不要なネイティブランドマーク要素(<header>、<nav>、<main>、<aside>、<footer>)が追加されましたが、それぞれがランドマークと見なされる条件には微妙なルールがあります: <header> がドキュメントルートにある(<article> や <section> 内に入れ子になっていない)場合のみ banner になる、<section> は aria-label がある場合のみ region ランドマークと見なされる、<form> は名前が付いている場合のみランドマークになる、同じロールのランドマークが複数あるなら一意の名前が必要、などです。本 ARIA ランドマークビジュアライザは、貼り付けた HTML を解析し、すべてのランドマーク(ネイティブ・ロールベース)を識別、アクセシブルネーム付きのツリーをレンダリングし、axe-core や VoiceOver の監査で指摘される構造的な問題 — <main> の欠落、複数の <main>、ネイティブ要素への冗長なロール、名前のない region、識別が必要な同一ロールのランドマーク — を指摘します。
banner(ページヘッダ、通常はルートの <header>)、navigation(<nav>)、main(<main>、ページに 1 つ)、complementary(<aside>)、contentinfo(ページフッタ、ルートの <footer>)、search(検索ボックスラッパ、ネイティブ要素なし — role="search" を使用)、form(名前のある <form>)、region(名前のある <section>)。同じロールのランドマークが複数あるのは許可されますが、一意の aria-label または aria-labelledby が必要です。ネイティブ要素は常に ARIA ロールに優先します — <div role="navigation"> ではなく <nav> を書いてください。