ACCESSIBILITY
语义地标Landmarks
用 header / nav / main / aside / footer 等语义标签划分页面大区块，让屏幕阅读器用户能一键跳到任意区域。
效果预览
header顶部横幅
nav主导航
main主要内容 · 每页唯一
aside补充信息
footer页脚
适合用在哪
所有页面骨架。一个页面只应有一个 <main>，一页最多一个可见的 <header> / <footer>。
容易踩的坑
- 页面出现两个以上未命名的 nav，读屏地标列表里只显示一串「导航」，无法区分。
- SPA 路由切换时渲染了两个 main，地标跳转落到已隐藏的旧页面。
- 随意包裹无标题的 section，地标超过 10 个反而成为噪音。
设计提示词 · Prompt
语义地标（Landmarks）：用原生标签而不是 div —— <header>（横幅）、<nav>（导航，一个页面可有多个但要用 aria-label 区分）、<main>（主要内容，一个页面只能有一个）、<aside>（补充内容）、<footer>（页脚）、<section aria-labelledby>（有标题的区块）、<form aria-label>（表单区）。这些标签会自动映射成无障碍地标，屏幕阅读器用户可以按快捷键（NVDA 用 D、VoiceOver 用 rotor）逐个跳转。要点：每个页面必须有一个 <main>；同一类型的多个地标要用 aria-label 区分（如「主导航」「面包屑导航」）；不要为了排版随意用 section 包裹，那会制造噪音地标。
Landmarks: use native elements instead of div — <header> (banner), <nav> (navigation; a page may have several, distinguished with aria-label), <main> (main content; only one per page), <aside> (complementary content), <footer> (footer), <section aria-labelledby> (a titled region), <form aria-label> (form region). These map automatically to accessibility landmarks, which screen reader users can jump through with shortcuts (D in NVDA, the rotor in VoiceOver). Key points: every page must have one <main>; multiple landmarks of the same type must be distinguished with aria-label (e.g. "Main navigation", "Breadcrumb navigation"); don't wrap things in section just for layout, which creates noisy landmarks.
常见搭配
同一页面里经常和「语义地标」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="a11y-land">
<div class="a11y-land__b"><em>header</em><span>顶部横幅</span></div>
<div class="a11y-land__b"><em>nav</em><span>主导航</span></div>
<div class="a11y-land__b a11y-land__b--main"><em>main</em><span>主要内容 · 每页唯一</span></div>
<div class="a11y-land__b"><em>aside</em><span>补充信息</span></div>
<div class="a11y-land__b"><em>footer</em><span>页脚</span></div>
</div>
</div>