HTML可访问性优化核心是正确使用语义化标签而非依赖ARIA；90%问题源于修正滥用及补全文档结构，因二者无语义且键盘不可聚焦，须改用等原生标签，并严格遵循嵌套规则及绑定要求。

HTML网页制作中可访问性结构的优化，核心不是加ARIA，而是用对原生语义标签——90%的可访问性问题，靠修正

滥用和补全缺失的文档结构就能解决。

为什么

和是可访问性结构的最大隐患

它们本身没有语义，屏幕阅读器读出来就是“division”或“span”，用户完全无法判断用途。键盘焦点也无法自然进入，Tab键会直接跳过。

• 把按钮写成
  提交
  → 必须改成提交
• 把导航栏写成
  ...
  → 应该用
  包裹，并确保内部是或带role="link"的元素
• 表单控件外没包
  → 会导致屏幕阅读器无法识别提交上下文，也影响自动填充逻辑

必须存在的5个语义化容器及其嵌套规则

这些标签不只是“看起来更规范”，它们直接决定屏幕阅读器的导航层级、快捷键（如H跳标题、D跳

）能否生效。

• ：只能出现在一级或某个
  内，不要嵌套另一个
• ：整个页面有且仅有一个，不能出现在
  或
  里
• ：每个独立导航区域（如顶部主菜单、页脚链接组）都应单独包裹，不要用一个
  包全部
• ：必须带
  ~
  作为标题，否则它和
  无区别
• ：可以出现在级（页面底部），也可以出现在
  内（如文章作者信息）

绑定失效的三种典型场景

表单可访问性的第一道防线就是能准确关联控件。失效时，屏幕阅读器不会读出提示文字，键盘用户点击文字也无法聚焦输入框。

• 用了for属性但id值不匹配：邮箱 + → ID必须完全一致
• 嵌套写法中夹了非文本节点：邮箱*> → 会中断朗读，应改为纯文本或用aria-hidden="true"
• 动态生成的表单项没同步生成id和for → JS插入后，必须手动设id并更新对应的for

ARIA角色不该用来“修复”结构，而应补充语义盲区

比如role="banner"不如直接用

；role="navigation"不如用
。ARIA只在原生标签无法表达意图时才介入。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
下载
• 模态框（Modal）必须同时设：role="dialog" + aria-modal="true" + aria-labelledby指向标题ID
• 实时更新区域（如搜索建议列表）用role="listbox" + aria-expanded + aria-activedescendant，而非仅靠CSS显示/隐藏
• 禁用状态不要只靠disabled属性——自定义组件需加aria-disabled="true"，否则屏幕阅读器可能无法感知

最容易被忽略的是：所有ARIA属性都要随DOM状态实时更新。比如折叠面板展开后，aria-expanded必须从false同步改为true，否则辅助技术看到的永远是过期状态。