ローカルの視覚シミュレーションです。実際のサイトは検査・変更しません。例のURLは実行されないコードです。
事例を変えると元の状態に戻ります。表示モードは検査用であり、本番サイトの修正ではありません。JavaScriptなしでも六つの事例と教材を利用できます。
hiddenは通常表示を抑えますが、CSSで表示動作が上書きされる場合があります。
要素、祖先、計算済みdisplayを確認します。ソースだけでは最終表示のすべては分かりません。
テンプレートや内容を変える前に参照がある理由を確認します。
例の中にアンカーがあるか: あり
<a href="https://reference.example/guide" hidden>参照ガイド</a>例の中にアンカーがあるか: あり
<a href="https://reference.example/guide">参照ガイド</a>例の中にアンカーがあるか: なし
<p>参照ガイド</p>例のアンカーはHTMLに残り、displayの指定によって表示のボックスがなくなります。
適用された規則と出所、セクション全体を隠す祖先も確認します。
不要な参照は生成元の内容やテンプレートから取り除き、公開ページを確認します。
例の中にアンカーがあるか: あり
<a href="https://reference.example/guide" style="display:none">参照ガイド</a>例の中にアンカーがあるか: あり
<a href="https://reference.example/guide">参照ガイド</a>例の中にアンカーがあるか: なし
<p>参照ガイド</p>例は見えなくなりますが、レイアウト上の場所は残る場合があります。
計算済み、継承、上書きされたvisibilityを確認します。画面だけではリンクの不在を証明できません。
表示の修正が目的のときだけ該当規則を変更し、理由を記録します。
例の中にアンカーがあるか: あり
<a href="https://reference.example/guide" style="visibility:hidden">参照ガイド</a>例の中にアンカーがあるか: あり
<a href="https://reference.example/guide">参照ガイド</a>例の中にアンカーがあるか: なし
<p>参照ガイド</p>opacityがゼロだと例は透明になりますが、ソースのアンカーは消えません。
要素と祖先のopacity、実際の参照先を確認します。見えないこととDOMにないことは別です。
出所と目的を確認し、アンカーがなくなるまで削除済みとは報告しません。
例の中にアンカーがあるか: あり
<a href="https://reference.example/guide" style="opacity:0">参照ガイド</a>例の中にアンカーがあるか: あり
<a href="https://reference.example/guide">参照ガイド</a>例の中にアンカーがあるか: なし
<p>参照ガイド</p>閉じたdetailsの内容は、summaryから意図的に開ける場合があります。
開いて参照、目的、最終HTMLを確認します。初期状態で隠れているだけではスパムと判断できません。
有用な開閉動作は保ちます。予期しない参照先は部品とは別に調べます。
例の中にアンカーがあるか: あり
<details><summary>補足資料</summary><a href="https://reference.example/guide">参照ガイド</a></details>例の中にアンカーがあるか: あり
<details open><summary>補足資料</summary><a href="https://reference.example/guide">参照ガイド</a></details>例の中にアンカーがあるか: なし
<details><summary>補足資料</summary><p>参照ガイド</p></details>切り抜かれたテキストは支援技術向けの場合があります。目的を推測せず確認します。
アクセシブルな名前、周囲の操作部品、フォーカスを適切なツールで確認します。
見えないという理由だけで有用な支援用テキストを消しません。不要な参照先は生成元で修正します。
例の中にアンカーがあるか: あり
<a href="https://reference.example/guide" style="position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap">参照ガイド</a>例の中にアンカーがあるか: あり
<a href="https://reference.example/guide">参照ガイド</a>例の中にアンカーがあるか: なし
<p>参照ガイド</p>