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

HTML网页制作中可访问性结构的优化，核心不是加ARIA，而是用对原生语义标签——90%的可访问性问题，靠修正<div>滥用和补全缺失的文档结构就能解决。 <h3>为什么<code><div>和<code><span></span>是可访问性结构的最大隐患

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

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

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

这些标签不只是“看起来更规范”，它们直接决定屏幕阅读器的导航层级、快捷键（如H跳标题、D跳<div role="main">）能否生效。 <ul> <li> <code><header></header>：只能出现在一级或某个<section></section>内，不要嵌套另一个<header></header>

<main></main>：整个页面有且仅有一个，不能出现在<article></article>或<aside></aside>里

<nav></nav>：每个独立导航区域（如顶部主菜单、页脚链接组）都应单独包裹，不要用一个<nav></nav>包全部

<section></section>：必须带<h2></h2>~<h6></h6>作为标题，否则它和<div>无区别 <li> <code><footer></footer>：可以出现在级（页面底部），也可以出现在<article></article>内（如文章作者信息）

<label></label>绑定失效的三种典型场景

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

立即学习“前端免费学习笔记（深入）”；

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

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

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

比如role="banner"不如直接用<header></header>；role="navigation"不如用<nav></nav>。ARIA只在原生标签无法表达意图时才介入。

• 模态框（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，否则辅助技术看到的永远是过期状态。