商品详情页主体内容必须置于唯一内，包含标题、价格、SKU、购物车按钮及图文详情；仅用于可独立复用的内容如单条评论；仅承载可移除的辅助信息。
用 里凑数
电商商品详情页的主体内容——标题、价格、SKU选择、加入购物车按钮、图文详情——必须落在 ，语义就塌了。
-
- 商品图册建议用
aria-labelledby 指向其标题，比如 商品实拍
...
- 避免把
用
很多人误以为“一个商品详情页 = 一个
- 每条用户评论用
itemprop="review"（若用 Schema.org 微数据）
- “规格参数”表格建议放在
保证读屏准确
- 不要给
id="product-detail" 这类泛化 ID——它应该描述自身内容，比如 id="review-28491"
电商详情页常见的“客服在线”“销量榜”“店铺公告”“相似款跳转”适合放进
- “加入购物车”按钮绝不能放在
-
- 移动端常把
aria-expanded 和 aria-controls 同步更新
别为了结构而结构：避开
常见反模式是把每个小模块都套一层 / 服务保障
立即学习“前端免费学习笔记（深入）”；
- 连续多个同级
-
- 真实影响：Chrome DevTools 的“Accessibility”面板会把过度嵌套的
无线降噪耳机 Pro
品牌：SoundCore
价格与优惠
¥899
选择规格
结构标签不是装饰，它直接参与浏览器解析流、无障碍树构建和搜索引擎内容提取。写完记得用 Lighthouse 跑一次“Accessibility”审计，重点看 “
电商商品详情页的主体内容——标题、价格、SKU选择、加入购物车按钮、图文详情——必须落在 很多人误以为“一个商品详情页 = 一个 电商详情页常见的“客服在线”“销量榜”“店铺公告”“相似款跳转”适合放进 常见反模式是把每个小模块都套一层 立即学习“前端免费学习笔记（深入）”； 品牌：SoundCore ¥899 内。这是屏幕阅读器和搜索引擎识别“页面真正内容”的关键信号。如果把 留空，或只包一个 ，而把所有商品数据塞进一堆
页面中只能出现一次，且不能嵌套在 、、、 里 包裹，并加 aria-labelledby 指向其标题，比如 商品实拍
... 当样式容器：它不解决浮动、居中、响应式问题，该用 CSS Grid/Flex 的地方不能偷懒靠结构标签补用
封装单品，不是整个详情页”，其实不然。 表示可独立分发、复用的内容单元，比如“用户评论”里的某一条带用户名、时间、评分、文字的完整评论；或者“相关推荐”里某个被单独渲染的商品卡片。整页详情本身是上下文完整的浏览场景，更适合用 + 多个 组织。
，并加上 itemprop="review"（若用 Schema.org 微数据） 内，标题用 ，表头用 保证读屏准确
加 id="product-detail" 这类泛化 ID——它应该描述自身内容，比如 id="review-28491"
只放弱相关、可移除的辅助内容。它的核心判断标准是：去掉这部分，主商品信息是否依然完整、可理解、可操作？如果答案是肯定的，才配用 。
里——它是核心交互，必须在 中 可以有 ，但语义上它不属于主大纲层级，部分读屏工具会降级处理其标题级别 折叠为“更多服务”抽屉，此时需确保 aria-expanded 和 aria-controls 同步更新别为了结构而结构：避开
套娃和 ，比如价格区、促销区、服务保障区各自一个 ，再全塞进另一个 ——这会让 DOM 层级过深，对 SEO 和辅助技术反而不利。同样，服务保障
建议检查是否有逻辑分组：能否合并为一个 并用 ~ 分层？ 内通常只出现一次（商品标题+副标题+品牌），其余模块标题用 或 即可 标为 “Heading level skip”，Safari VoiceOver 也可能跳过中间层级
结构标签不是装饰，它直接参与浏览器解析流、无障碍树构建和搜索引擎内容提取。写完记得用 Lighthouse 跑一次“Accessibility”审计，重点看 “无线降噪耳机 Pro
价格与优惠
选择规格
element is not present” 和 “Heading levels should only increase by one” 这两条——它们暴露的往往是最隐蔽、上线后最难改的语义断层。
