商品主图轮播应使用语义化HTML结构：用<section role="region" aria-label="商品主图轮播">包裹，主图容器设tabindex="0"，每张图用<img>配具体alt，切换按钮用<button>并加aria-controls；标题用<h1>嵌套品牌与型号，价格用<span itemprop="price">隔离数值，SKU用<fieldset><legend>配合<input type="radio">，详情模块用<details><summary>替代隐藏<div>，加入购物车按钮须为<button>并携带data-sku-id、aria-busy等属性以保障SEO、无障碍与状态一致性。
商品主图与轮播区域怎么组织语义结构
HTML 里没有“轮播组件”这种原生元素，但语义上它本质是「一组相关图片的集合」，不是幻灯片播放器。用 <figure> + <figcaption> 套一层太单薄，用 <section> 更合适，再包一个带 role="region" 和 aria-label="商品主图轮播" 的容器，方便屏幕阅读器识别。
- 主图容器必须设
tabindex="0"，否则键盘用户无法聚焦到轮播区 - 每张图用
<img>，src必须是真实可用路径，alt要具体，比如alt="iPhone 15 Pro 钛金属蓝色正面图，无配件"，不能写“商品图1” - 切换按钮（上一张/下一张）用
<button>，不是<div>或<a>，并加aria-controls指向轮播容器 ID
商品标题、价格、SKU选择器的标签组合
标题不是单纯放大字号，而是信息层级核心。用 <h1> 包住品牌+型号，比如 <h1><span>Apple</span> iPhone 15 Pro</h1>，其中 <span> 可单独加样式或微数据。
- 价格必须用
<span>包裹并设itemprop="price"（若用 Schema），数值部分不能混在文字里，比如<span itemprop="price">7999</span>元，而不是<span>¥7999元</span> - SKU 选择器（颜色、内存）推荐用
<fieldset>+<legend>，每个选项用<input type="radio">或<button role="radio">，禁用<select>—— 它无法自定义高亮态，且移动端唤起原生选择器体验割裂 - 所有可选 SKU 变更后，要同步更新
<meta itemprop="offers" content="...">或 JS 中的 price/productID 字段，否则分享链接时抓取的价格可能错位
图文详情模块如何避免 SEO 和可访问性双输
很多人直接把详情页内容塞进一个大 <div>，还加了 style="display:none" 控制折叠，这会导致：
- 屏幕阅读器仍会读出全部内容
- 搜索引擎可能判定为隐藏文本而降权
正确做法是：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 用
<details>+<summary>实现可展开区域，原生支持键盘Enter/Space触发，无需额外 JS - 每个
<details>加data-section="detail-desc"或类似标记，便于后续 JS 统一监听状态变更 - 图文混排时，每张说明图必须配
<figure><img><figcaption>，<figcaption>里写清“图示：A17 Pro 芯片能效对比柱状图”，不能只写“参数图”
加入购物车按钮的 HTML 属性不能漏的关键项
按钮本身只是视觉触发点，背后要承载明确意图和状态反馈：
- 必须是
<button type="submit">（如果在<form>内）或<button type="button">（JS 提交），禁用<a href="#"> - 加
data-sku-id、data-stock-status等属性，比存在 JS 变量里更可靠，服务端渲染或 SSR 场景下也能读取 - 初始状态设
disabled并加aria-busy="false"；点击后立刻置disabled+aria-busy="true"，防止重复提交 - 成功加入后，不要只弹 Toast，要在按钮内用
<span class="btn-text">切换文案为“✓ 已加入购物车”，并保持可读性（不能靠颜色区分）
电商详情页最难的从来不是布局，而是每个交互节点都得同时扛住 SEO 抓取、无障碍访问、多端适配、状态一致性四重压力。少一个 aria- 属性，或者把 <img> 的 alt 写成“图片”，后面做 a11y 审查或搜索流量诊断时就得返工。
