html语义化结构是保障视障用户可访问性的关键，而非风格选择；必须使用原生语义标签（如、）而非div+aria，确保屏幕阅读器正确识别结构与功能。
HTML语义化结构不是“让页面更规范”的风格选择，而是决定视障用户能否把你的页面当正常网站来用的关键分水岭——不用
为什么对可访问性零贡献
屏幕阅读器不解析class名，只认原生标签的隐式role。一个
在NVDA或VoiceOver里就是“无名称的区块”，不会出现在结构导航菜单中；而自带role="banner"，用户按H键跳标题、D键跳导航时能直接定位。主流读屏工具对HTML5语义标签的支持率已超98%，但对自定义div+ARIA的容错率极低——少写一个aria-hidden="true"，隐藏菜单内容就可能被错误播报。
商品列表区域必须用而非
电商页最常犯的错误，是把每个商品包进
，里面塞标题、价格、图片、按钮。这等于告诉辅助技术：“这里有一堆杂项，你自己猜”。正确做法是用明确标识独立可分发单元，并确保：
- 商品图alt必须描述信息与目的：
alt="女士纯棉T恤,圆领短袖,深蓝色,售价¥129"，而非alt="product.jpg"
- 价格需包裹在
<span></span>中并加aria-label（如含折扣）：<span aria-label="原价¥199，现价¥129">¥129</span>
- “加入购物车”必须是
<button></button>，不能是<div onclick="addCart()">；否则键盘用户按空格/回车无效，屏幕阅读器也读不出操作意图
<h3>表单控件漏掉<label>绑定，等于让用户瞎操作</label>
</h3>
<p>登录、收货地址、支付方式这些表单密集区，若<input>没显式绑定<label>，屏幕阅读器根本不知道这是手机号还是验证码。后果是语音指令（如“点击邮箱输入框”）完全失效。实操要点：</label></p>
<ul>
<li>优先用包裹写法：<code><label>邮箱<input type="email"></label>，比for/id手动配对更可靠
- 禁用空
<label for="xxx"></label>——这会让阅读器静默跳过，用户不知道这是什么控件
- 多选/单选组必须用
<fieldset></fieldset>+<legend></legend>，否则组标题不会被读出
复杂页面里最容易被忽略的，是必须且只能出现一次、不能嵌套在其他语义容器内；还有
屏幕阅读器不解析class名，只认原生标签的隐式role。一个
在NVDA或VoiceOver里就是“无名称的区块”，不会出现在结构导航菜单中；而自带role="banner"，用户按H键跳标题、D键跳导航时能直接定位。主流读屏工具对HTML5语义标签的支持率已超98%，但对自定义div+ARIA的容错率极低——少写一个aria-hidden="true"，隐藏菜单内容就可能被错误播报。
商品列表区域必须用
商品列表区域必须用而非
电商页最常犯的错误，是把每个商品包进
，里面塞标题、价格、图片、按钮。这等于告诉辅助技术：“这里有一堆杂项，你自己猜”。正确做法是用明确标识独立可分发单元，并确保：
- 商品图alt必须描述信息与目的：
alt="女士纯棉T恤,圆领短袖,深蓝色,售价¥129"，而非alt="product.jpg"
- 价格需包裹在
<span></span>中并加aria-label（如含折扣）：<span aria-label="原价¥199，现价¥129">¥129</span>
- “加入购物车”必须是
<button></button>，不能是<div onclick="addCart()">；否则键盘用户按空格/回车无效，屏幕阅读器也读不出操作意图
<h3>表单控件漏掉<label>绑定，等于让用户瞎操作</label>
</h3>
<p>登录、收货地址、支付方式这些表单密集区，若<input>没显式绑定<label>，屏幕阅读器根本不知道这是手机号还是验证码。后果是语音指令（如“点击邮箱输入框”）完全失效。实操要点：</label></p>
<ul>
<li>优先用包裹写法：<code><label>邮箱<input type="email"></label>，比for/id手动配对更可靠
- 禁用空
<label for="xxx"></label>——这会让阅读器静默跳过，用户不知道这是什么控件
- 多选/单选组必须用
<fieldset></fieldset>+<legend></legend>，否则组标题不会被读出
复杂页面里最容易被忽略的，是必须且只能出现一次、不能嵌套在其他语义容器内；还有
电商页最常犯的错误，是把每个商品包进
，里面塞标题、价格、图片、按钮。这等于告诉辅助技术：“这里有一堆杂项，你自己猜”。正确做法是用明确标识独立可分发单元，并确保：
- 商品图alt必须描述信息与目的：
alt="女士纯棉T恤,圆领短袖,深蓝色,售价¥129"，而非alt="product.jpg" - 价格需包裹在
<span></span>中并加aria-label（如含折扣）：<span aria-label="原价¥199，现价¥129">¥129</span> - “加入购物车”必须是
<button></button>，不能是<div onclick="addCart()">；否则键盘用户按空格/回车无效，屏幕阅读器也读不出操作意图 <h3>表单控件漏掉<label>绑定，等于让用户瞎操作</label> </h3> <p>登录、收货地址、支付方式这些表单密集区，若<input>没显式绑定<label>，屏幕阅读器根本不知道这是手机号还是验证码。后果是语音指令（如“点击邮箱输入框”）完全失效。实操要点：</label></p> <ul> <li>优先用包裹写法：<code><label>邮箱<input type="email"></label>，比for/id手动配对更可靠 - 禁用空
<label for="xxx"></label>——这会让阅读器静默跳过，用户不知道这是什么控件 - 多选/单选组必须用
<fieldset></fieldset>+<legend></legend>，否则组标题不会被读出
复杂页面里最容易被忽略的，是
