电商页滥用导致屏幕阅读器仅报“区块”而无法识别导航、商品列表等语义结构，使视障用户定位关键元素耗时增3–5倍；必须用、、、等语义化标签构建可访问性层级，并为图片、按钮、表单、iframe等补全alt、aria-label、role等属性。
为什么电商页用一堆 <div> 会让视障用户卡在首页
<p>因为屏幕阅读器根本读不出“这是导航”“这是商品列表”“这是购物车按钮”。它只会连续报出几十个“区块”“区块”“区块”，用户得靠键盘逐个 tab 摸索，平均多花 3–5 倍时间才能定位到搜索框或下单按钮。</p>
<p>电商页面尤其致命：顶部促销横幅、多级分类导航、轮播图、商品网格、悬浮客服、底部版权信息——全堆 <code><div> 的话，结构完全扁平化，辅助技术无法建立语义地图。
<ul><li>
<code><header></header> 必须包裹 logo、搜索框、用户登录入口；不能只当样式容器用，<div class="header"> 对可访问性零贡献
<li>
<code><nav aria-label="主导航"></nav> 要包住全部一级类目链接；若还有页脚导航，得另加 <nav aria-label="页脚链接"></nav>
<main></main> 全局唯一，且必须直接子元素是商品列表或核心内容区块；嵌套在 <section></section> 或 <div> 里会破坏层级识别
<h3>商品列表区域怎么写才不让屏幕阅读器跳过关键信息</h3>
<p>常见错误是把每个商品用 <code><div class="product-item"> 包裹，里面再塞标题、价格、图片、加入购物车按钮——这等于告诉屏幕阅读器：“这里有一堆杂项，你自己猜用途”。
<p>正确做法是用 <code><article></article> 明确标识每个商品为独立可分发单元，并确保：
- 商品图必须带准确
alt：不是alt="product.jpg"，而是alt="女士纯棉T恤，圆领短袖，深蓝色，售价¥129" - 价格需包裹在
<span></span>并加aria-label（如价格含折扣）：<span aria-label="原价¥199，折后¥129">¥129</span> - “加入购物车”按钮必须是
<button></button>，不能用<div onclick="addCart()">；否则键盘用户按空格/回车无效，屏幕阅读器也读不出操作意图 <li>若商品有“新品”“热销”角标，用 <code><span aria-hidden="true"></span>隐藏视觉符号，同时用aria-label补充语义：<button aria-label="加入购物车，本商品为新品"></button> - 所有
<input>必须显式绑定<label></label>：用for和id配对，或直接包裹写法<label>手机号<input type="tel"></label>；<div>手机号<input> </div>等于没写 label - 搜索框要加
role="search"和aria-label="站内搜索"，否则会被归类为普通文本框，用户无法快速定位 - 筛选条件（如“按价格排序”下拉菜单）必须用原生
<select></select>，别用 div 模拟；若必须自定义，得补全role="combobox"、aria-expanded、aria-controls等一整套 ARIA 属性 <iframe src="chat-widget.html" title="在线客服窗口，可咨询订单与退换货"></iframe><iframe src="store-map.html" title="北京朝阳区三里屯门店位置地图，支持缩放与路线规划"></iframe><iframe src="payment-result.html" title="支付宝支付结果确认框，含订单号与完成状态"></iframe>
表单和交互控件最容易踩的三个可访问性坑
电商页面表单密集：登录、注册、收货地址、支付方式、评论提交。但多数开发者只顾样式对齐，忽略屏幕阅读器根本不知道“这个输入框是手机号还是验证码”。
<iframe></iframe> 嵌入客服或地图时，title 属性为什么不能省
未设 title 的 <iframe></iframe> 在 VoiceOver 或 NVDA 中只会报“框架”或“无标题框架”，用户根本不敢点进去——可能错过在线客服、门店地图、支付结果回调等关键交互。
电商场景中高频出现的嵌入内容，title 必须具体到用途：
第三方代码常默认不带 title，务必手动补全；动态加载的 iframe 还需用 JS 同步更新 title 值——性能优化和安全策略（如 sandbox）都不能成为跳过 title 的理由。
