能改善电商体验的三个 HTML 标签:什么时候用 ins、del 还是 s
来源:dev.to — 2026-09-01
📋 概述
作者用一张对比表讲清三个易混淆的 HTML 标签。ins 表示文档中新增的内容(比如会议时间从周一改到周三),del 表示被删除的一段文本(通常与 ins 配对,展示追踪修订),s 表示不再准确、正确或相关的过时信息(比如旧价格、售罄商品、废弃通知)。三者对无障碍也很关键:del 与 s 都映射到 role=deletion,ins 映射到 role=insertion,浏览器会把这些暴露给操作系统的无障碍树。但要注意屏幕阅读器对这些变化的口头播报并不一致,所以作者建议配合 sr-only 文本补足说明,让视障用户也能理解「原价 100 美元,现价 34.99 美元」。
🔑 核心要点
- ins 表示新增内容,del 表示被删除的文本,s 表示不再准确的过时信息
- del 常与 ins 配对使用,用于展示文档的修订轨迹
- 电商场景里 s 适合标旧价格、售罄商品与废弃通知
- del 和 s 映射到 role=deletion,ins 映射到 role=insertion,进入无障碍树
- 屏幕阅读器对这些变化的播报不一致,要配 sr-only 文本补足说明
💡 金句
看不见的更新也值得被看见——用 sr-only 文本把「原价、现价」的变化讲给所有读者。
👍 0
👎 0
← 返回 dev.to 首页