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