data-ccp-props等office私有属性必须从html源头移除，因其干扰可访问性、导致w3c验证失败、影响seo，且无法通过css或js忽略；应在paste事件和服务端净化环节精确剔除，不可依赖正则粗删或保留非data-*自定义属性。
data-ccp-props 类属性必须删，它们不是“无害冗余”而是可访问性干扰源
这类属性（data-ccp-props、data-ccp-parastyle、data-contrast）是 Office 复制粘贴时注入的私有标记，不参与渲染，但会污染 DOM 结构。屏幕阅读器可能误读其值，爬虫可能因无法解析而降权，W3C 验证器直接报错 —— 它们不属于任何语义规范，也没有 aria 替代路径。
关键点：不能只靠 CSS 隐藏或 JS 忽略，必须从 HTML 字符串源头移除。否则 SSR 输出、服务端缓存、CDN 静态化都会把问题带下去。
- 前端富文本编辑器中，应在
paste事件里清洗：tempDiv.querySelectorAll('[data-ccp-props], [data-ccp-parastyle], [data-contrast]').forEach(el => el.removeAttribute('data-ccp-props')) - 服务端处理 HTML 时（如 Node.js），用
sanitize-html配置exclusiveFilter显式拦截：exclusiveFilter: frame => frame.tag === 'span' && (frame.attribs['data-ccp-props'] || frame.attribs['data-ccp-parastyle']) - 避免用正则粗暴匹配
data-ccp-.*?—— 可能误伤合法的data-ccp-id（若你真有自定义用途），应精确限定属性名列表
非 data-* 的自定义属性（如 my-id、role-id）无法被 aria 或辅助技术识别
浏览器保留 my-id="123" 这类属性在 DOM 中（getAttribute('my-id') 能取到），但它不会进入 dataset，CSS 选择器不匹配，更重要的是：AT（辅助技术）完全无视它。WAI-ARIA 规范只认可 role、aria-* 和 data-* 三类前缀，其他一律视为无效字符串。
如果你本意是传递上下文供 JS 使用，请改用 data-my-id；如果本意是暴露给辅助技术，请改用标准 aria-labelledby 或 role + aria-* 组合。
- 硬要保留非
data-属性？得同步在所有下游环节白名单：DOMPurify 要加ADD_ATTR: ['my-id']，lxml.html 要手动过滤输出，CDN 缓存策略还得排除该字段 -
role-id="header"这种写法毫无意义 ——role是标准属性，值必须是 WAI-ARIA 定义的合法角色（如"banner"、"navigation"），加个-id后缀就变成非法值，AT 直接忽略整条role声明
removeAttribute 对布尔属性无效？不，是你没用对
removeAttribute('disabled') 是唯一能真正解除禁用状态的操作。常见错误是用 setAttribute('disabled', '') 或 el.disabled = false，前者仍保留属性（浏览器照禁），后者改的是 DOM 属性而非 HTML 属性，SSR 或序列化后丢失。
可访问性场景下，这个区别更关键：AT 依赖 HTML 属性是否存在来判断控件状态。比如 <button disabled>提交</button> 被读作“已禁用提交按钮”，而 <button disabled>提交</button>（空值）和 <button disabled>提交</button>（非法值）行为一致 —— 全部被当作启用状态？不，全部仍被当作禁用。只有彻底移除 disabled 属性，AT 才会读作“提交按钮”。
- 批量清理时务必先
hasAttribute()判断：if (el.hasAttribute('aria-hidden')) el.removeAttribute('aria-hidden') - SVG 元素例外：像
xlink:href这类需用removeAttributeNS('http://www.w3.org/1999/xlink', 'href')，removeAttribute无效 - 框架内（React/Vue）别直接操作 DOM —— 改 state 或 prop，让框架控制属性存在性，否则 AT 可能读到旧状态
HTML Purifier 等净化库默认不保留任何非白名单属性，包括合法的 data-*
这反而是个误区。HTML Purifier 默认**允许**所有 data-* 属性，因为它的内置白名单包含 data-*:CDATA。但如果你重写了 HTML.AllowedAttributes 或启用了严格模式，它就会丢弃——包括 data-id、data-track 这些你实际需要的。
真正危险的是：你本地开发时没开 Purifier，测试环境开了但配置漏了 data-*，上线后 JS 因拿不到 data-track 而埋点失效，同时 AT 也因缺失 data-a11y-hint 无法播报提示。
- 检查 Purifier 配置是否含
$config->set('HTML.AllowedAttributes', 'data-*');或至少'*'白名单里有data-* - 不要依赖“默认允许”，生产环境务必显式声明：
HTML.AllowedAttributes = ['data-*', 'class', 'id', 'aria-*'] - jsdom、DOMPurify 等工具行为不同：jsdom 默认全留，DOMPurify 默认只放行标准 +
data-*—— 切换解析器时，非data-属性可能突然消失或突然出现，必须统一收敛到data-通道
彻底剔除影响可访问性的非标准属性，难点不在“怎么删”，而在“删到哪一层”。浏览器保留它，不代表 AT 能读；JS 能取到，不代表 SSR 输出里还有；编辑器清掉了，不代表用户下次复制 Office 内容又带进来。最稳的路径只有一条：所有自定义元数据走 data-，所有语义表达走标准 aria- 或 role，其余一律视为污染源，在输入入口（粘贴）、处理中（净化库）、输出前（序列化）三道关卡全部拦截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
