网页中仅用 div 模拟导航栏时如何添加 ARIA landmark 标记
当使用 div 元素构建导航栏时，应通过添加 role 属性将其标记为 landmark，以便屏幕阅读器用户快速定位页面区域。
仅用 div 构建导航栏对屏幕阅读器的影响
如果开发者仅使用 div 元素配合 CSS 来构建导航栏，而没有使用语义化的 nav 标签，屏幕阅读器将无法识别该区域的功能。浏览器和辅助技术无法通过默认的标签获取导航栏的语义信息，导致用户只能听到通用的描述，无法快速跳转到页面导航部分。这种做法违背了网页可访问性的核心原则，即所有用户都应能理解页面的结构和功能。
根据 WAI-ARIA 规范，仅使用非语义化的 div 元素会破坏页面的结构信息。虽然视觉上导航栏可以正常显示和点击，但屏幕阅读器用户无法通过默认的朗读功能获取具体的导航信息。这会显著增加用户在页面中查找内容的难度，特别是在内容较多的长页面中，缺乏明确的导航标记会导致用户体验下降。
使用 role 属性添加 ARIA landmark 标记的方法
为仅用 div 构建的导航栏添加 role 属性是解决此问题的标准方法。开发者可以在 div 元素上设置 role 属性为 navigation，例如 role='navigation'。这样，屏幕阅读器在朗读页面时就会将这个区域识别为导航区域，并告知用户该区域包含页面导航菜单。这相当于为非语义化的 div 元素赋予了语义价值，使其能够被辅助技术正确识别。
添加 role 属性不会改变页面的视觉布局或 DOM 结构，仅用于辅助技术。开发者应确保 role 属性的值与该区域的功能相符，例如搜索表单可以使用 role='search'，而主内容区域可以使用 role='main'。这种做法适用于那些必须使用 div 进行复杂布局的场景，但应优先考虑使用语义化的 HTML 元素，仅在必要时使用 ARIA 属性。
验证 landmark 标记是否生效的检查步骤
要验证仅用 div 模拟导航栏的 landmark 标记是否生效，可以使用浏览器的开发者工具或屏幕阅读器进行测试。在开发者工具中，选中该 div 元素并检查其属性，确认 role 属性是否正确设置为 'navigation'。然后，使用屏幕阅读器朗读页面，检查屏幕阅读器是否将该区域识别为导航区域，并朗读相应的描述。
另一种验证方法是使用键盘导航测试。仅用 div 模拟的导航栏通常需要通过 Tab 键聚焦，此时屏幕阅读器应朗读该区域的 landmark 信息。如果朗读结果与预期一致，说明 landmark 标记已生效。此外，还可以尝试使用不同的屏幕阅读器（如 NVDA 或 VoiceOver）进行测试，以确保跨平台兼容性。
使用 ARIA landmark 的注意事项与最佳实践
虽然 ARIA landmark 可以解决非语义化 div 元素的导航问题，但应仅在必要时使用。如果页面结构允许，应优先使用语义化的 HTML 元素，如 nav、main、header 和 footer，因为它们本身就提供了必要的语义信息。仅使用 ARIA landmark 会增加代码复杂度，且可能掩盖视觉上的语义提示。
如果导航栏需要更复杂的描述，可以考虑使用 aria-labelledby 属性，引用页面中其他元素的文本作为标签。这种方法可以避免重复描述，并保持语义的一致性。例如，可以将导航栏的 aria-labelledby 设置为页面中某个标题的 ID，从而复用已有的文本信息。开发者应确保 landmark 标记的使用符合 WAI-ARIA 规范，并定期测试以确保可访问性。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。