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