应使用语义化标签（如或CSS Grid）替代实现商品对比，通过role属性和aria-labelledby手动建立行列关联，结合@container查询与数据转置保障可访问性与响应式。
用语义化标签替代 <table> 实现商品对比的可访问性与响应式基础
<p>直接放弃 <code><table> 并不等于放弃表格逻辑——关键是要把「行列对齐」这个需求，从 HTML 结构里解耦出来。浏览器渲染时，<code><table> 强制绑定语义（行头、列头、数据单元）和样式（display: table-*），导致响应式断点难控制、屏幕阅读器播报混乱、移动端横向滚动无法避免。
<p>重构核心是：用 <code><dl></dl> + <div role="row"> 或纯 CSS Grid 容器承载对比维度，让结构表达「这是 1 组属性，每项有 N 个取值」，而非「这是 M 行 N 列的栅格」。
<ul>
<li>优先选 <code><dl></dl>：每个 <dt></dt> 是属性名（如“处理器”），每个 <dd></dd> 是对应商品的值，天然支持多值并列，且语义上明确“定义-描述”关系
display: grid 配合 grid-template-columns，列数由商品数量动态决定，避免写死 grid-column: 1 / -1 类 hack<div class="row"> 套 <code><div class="col"> 模拟表格——它既无语义，又在焦点顺序、缩放、高对比度模式下表现不可控
<h3>如何让屏幕阅读器正确播报商品对比关系</h3>
<p>原 <code><table> 的 <code><th scope="col"> 和 <code><th scope="row"> 能自动建立行列关联，换成语义化结构后，必须手动补足 ARIA 关系。
<p>最简方案是给每个商品容器加 <code>role="row"，属性名加 role="columnheader"，每个值加 role="cell"，再用 aria-labelledby 显式绑定：
立即学习“前端免费学习笔记（深入）”；
<div role="row"> <div role="columnheader" id="attr-processor">处理器</div> <div role="cell" aria-labelledby="attr-processor product-a">A15</div> <div role="cell" aria-labelledby="attr-processor product-b">Snapdragon 8 Gen 2</div> </div>
- 必须为每个
role="columnheader"设置唯一id，每个role="cell"用aria-labelledby指向该id和对应商品容器的id（如product-a） - 禁用
aria-describedby替代——它只读附加说明，不参与主播报逻辑 - 测试时用 VoiceOver（macOS）或 NVDA（Windows）按 Ctrl+Alt+→ 切换单元格，确认播报内容含「处理器，A15」「处理器，Snapdragon 8 Gen 2」
响应式折叠策略：何时隐藏属性，何时合并单元格
移动端不是简单「隐藏列」，而是要区分信息层级：核心参数（如价格、续航）必须始终可见，次要参数（如包装清单、接口类型）可收进 <details></details>，而技术参数（如 SOC 制程、GPU 核心数）适合用 data-attribute 存储，点击展开才渲染。
- 用
@container查询替代媒体查询：把整个对比区块设为容器（container-type: inline-size），按宽度触发不同布局，比@media (max-width: 768px)更精准 - 禁止用
display: none隐藏role="cell"元素——它会让屏幕阅读器跳过，应改用visibility: hidden+position: absolute移出视口，同时保留 ARIA 关系 - 合并同类项（如「充电功率」和「有线快充」）不能靠 CSS
grid-column: span 2，而应提前在 JS 层聚合数据，生成统一字段，否则 ARIA 关系会断裂
Vue/React 中动态渲染对比表格的陷阱
框架里用 v-for 或 .map() 渲染商品列表时，最容易犯的错是把属性循环嵌套在商品循环内，导致 DOM 层级错乱，ARIA 关系无法静态绑定。
正确做法是先转置数据结构：
// 原始数据
const products = [
{ id: 'a', name: '手机A', cpu: 'A15', price: 5999 },
{ id: 'b', name: '手机B', cpu: '8 Gen 2', price: 4899 }
]
// 转置为：{ cpu: ['A15', '8 Gen 2'], price: [5999, 4899] }
const transposed = Object.keys(products[0]).reduce((acc, key) => {
acc[key] = products.map(p => p[key])
return acc
}, {})
- 转置后，外层遍历属性（
Object.entries(transposed)），内层遍历值数组，确保每个role="cell"能稳定绑定aria-labelledby - React 中避免在
key里用索引（index）——商品增删会导致 DOM 复用错乱，应使用商品 ID + 属性名组合（如${product.id}-${attr}） - Vue 中禁用
v-if控制单个role="cell"的显隐，改用v-show或 CSShidden属性，否则会破坏 ARIA 关系链
真正难的不是怎么写新结构，而是怎么让设计师接受「价格必须永远第一行」「参数分组标题不能只是视觉样式」——这些约束得在原型阶段就卡住，否则开发时再改，成本翻倍。
