Web 可访问性语义化结构（Accessibility Semantic Structure）

1. Web 可访问性语义化结构是指通过正确的HTML标签和属性来传达文档结构和元素功能，使辅助技术能够准确解析和呈现内容。其核心在于使用语义化HTML标签（如<header>、<nav>、<main>等）替代通用容器（如<div>），这些标签自带隐含的ARIA语义，无需额外添加role属性。

2. 语义化结构的层次包括：

   • 文档结构语义：使用<article>表示独立内容块，<section>定义主题分组，<aside>标注附属信息。例如正确嵌套的<header>应包含页面标题，而<footer>存放版权信息
   • 表单语义：<label>与<input>的关联通过for属性实现，<fieldset>分组相关控件，<legend>描述分组目的
   • 列表语义：<ul>无序列表适用于导航菜单，<ol>有序列表用于步骤说明，<dl>定义列表展示术语解释

3. 语义化与ARIA的协同规则：

   • 优先使用原生HTML语义（如<button>而非<div role="button">）
   • 当HTML语义不足时，用ARIA属性补充（如aria-expanded控制折叠状态）
   • 避免语义冲突（如不为<input type="checkbox">添加role="checkbox"）

4. 实际应用示例：

   <nav aria-label="主导航">
     <ul>
       <li><a href="/">首页</a></li>
       <li><a href="/products">产品</a></li>
     </ul>
   </nav>
   <main>
     <article>
       <h1>文章标题</h1>
       <p>正文内容...</p>
     </article>
   </main>
   

5. 验证工具与测试方法：

   • 使用浏览器开发者工具检查无障碍树
   • 通过屏幕阅读器（如NVDA、VoiceOver）实际验证
   • 采用Lighthouse无障碍审计模块检测语义完整性

6. 语义化结构的收益：

   • 提升屏幕阅读器用户的内容导航效率
   • 增强键盘操作的可预测性
   • 改善搜索引擎对页面结构的理解
   • 降低CSS和JavaScript的维护成本