1. 理解 landmark 角色在前端开发中的作用
1.1 什么是 landmark 角色
在前端开发中，landmark 角色指的是网页中用于标识特定区域的可访问性锚点，帮助使用辅助技术的用户快速定位内容。通过把关键区域明确标记，无障碍体验会显著提升，尤其在页面复杂时导航更高效。
HTML5 提供的语义标签天然具备地标功能，例如<header>、<nav>、<main>、<aside>、<footer>等。上述标签本身就是可被屏幕阅读器识别的地标元素，用户可以通过键盘或屏幕阅读器快速跳转。这种结构化信息对可访问性与可发现性至关重要。
1.2 HTML5 与 ARIA 的关系
除了原生的语义元素，ARIA 提供了额外的地标角色，如 role="banner"、role="navigation"、role="main"、role="complementary"、role="contentinfo" 等，用于在不具备语义标签时提供等价信息。要点是：优先使用语义标签，其次在不能使用语义标签时才应用 ARIA 地标。
在一个复杂的页面中，避免互相覆盖或重复地标。一个区域不应同时拥有两个等效的地标角色，也不要在已经具备语义地标的区域额外添加角色属性，以免让辅助技术混淆。
2. 在前端如何应用：HTML5 语义元素与 ARIA 角色
2.1 使用 HTML5 语义标签的优先级
在现实项目中，优先使用 HTML5 的语义标签来定义地标，如 <header>、<nav>、<main>、<aside>、<footer>。这保证了浏览器和辅助技术对结构的天然理解，并且有利于页面的可维护性与 SEO 表达。
当一个区域的语义角色已足够清晰且可访问时，不需要额外添加 ARIA landmark。此举可以避免冗余和潜在的可访问性冲突。若你使用的是纯 div/section 布局，才考虑加入 ARIA 地标以提供等价信息。
2.2 何时需要为 DIV 增加 ARIA Landmark
当你需要通过非语义标签实现复杂布局时，应给这些区域添加 ARIA 地标角色，例如 role="navigation"、role="main"、role="complementary"、role="search" 等。不过要确保它们的用途明确且可访问性收益大于潜在的混淆。
为提升可发现性，可以为地标添加 aria-label 或 aria-labelledby，让跳转目标具备清晰的名称。下面示例展示了如何在没有语义标签的情况下为一个边栏区域提供地标信息。
3. 常见 landmark 角色及用法
3.1 banner 与 header 的关系
在大多数页面中，header 标签天然充当站点的横幅区域，但并不总是等同于 role="banner"。如果页面存在多处典型横幅，需要确保主标题区域被正确识别。为屏幕阅读器提供跳转便利时，skip to content 链接应放在文档顶部，帮助用户快速进入主体。
要点总结：使用 header 与可选的 aria-label="站点横幅" 来明确描述，避免多处重复的地标名，以保持简单和清晰。
3.2 导航区域的标记
导航区域是用户获取页面结构的关键入口。对于主导航，使用 <nav> 或 role="navigation" 能让辅助技术快速定位到菜单集合。为每个导航区域提供 良好的 aria-label，帮助用户区分不同的导航上下文。
避免将所有链接堆积在一个无标记的区域中，地标化导航可以显著提升可访问性和导航效率，尤其是在页面包含大量链接时。
3.3 主内容与辅助信息
HTML5 的 <main> 标签表示页面的主要内容区域，通常只出现一次。使用 role="main" 作为降级策略时，请确保与语义标签一致。对于与主内容并列的辅助信息区域，如相关补充内容，可以使用 role="complementary" 或 <aside>，以便屏幕阅读器用户快速区分核心内容与附加信息。
不要让辅助信息喧宾夺主，保持结构的平衡与清晰，以便用户在需要时快速切换到感兴趣的区域。
4. 提升无障碍的前端实践技巧
4.1 跳过到内容的快速入口
为帮助键盘用户快速进入主体区域，跳过链接（skip links）是最常用的实践。它们应放在文档起始处，并指向主内容的标识符，例如 id="content"。在实现上，可以结合 CSS 可见性策略，确保默认隐藏，仅在聚焦时显示。
示例代码展示了一个简单的跳转入口和目标。
跳过导航，直接进入主内容
4.2 结构清晰性与一致性
确保文档结构自顶向下层级清晰，有利于屏幕阅读器的线性读取。一致的命名约定和有意义的区域标识，会让用户建立可预测的网页地图。这也是提升搜索可发现性的一环，因为搜索引擎也会对结构化的信息进行解读。
另外，避免在同一页重复使用同名地标，或在不必要的区域强行添加地标。通过审阅工具和对比测试，确保每个地标都是必需且具有明确用途的。
