部署后aria-checked属性消失，测试阶段正常，求技术指导

可能的原因 #

• 生产环境代码压缩优化：Webpack、Vite等构建工具在生产模式下的Tree Shaking或属性清理逻辑，可能将未被识别为“必要”的aria-checked属性误判为冗余内容移除。
• 框架渲染逻辑差异：测试环境与生产环境的编译规则不同，比如React/Vue的生产构建会跳过部分开发时的校验，导致动态绑定的aria-checked未正确挂载。
• 第三方UI组件库的生产行为：部分组件库的生产版本会简化ARIA属性，当原生checkbox的checked状态与aria-checked同步时，会自动移除aria-checked，仅保留原生状态。

解决方法 #

1. 禁用构建工具对ARIA属性的优化 #

• Webpack配置（针对terser-webpack-plugin）：

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            // 保留所有aria-开头的属性
            keep_classnames: /^aria-/,
            keep_fnames: /^aria-/
          }
        }
      })
    ]
  }
};

• Vite配置：

export default defineConfig({
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        keep_classnames: /^aria-/,
        keep_fnames: /^aria-/
      }
    }
  }
});

2. 动态绑定ARIA属性与原生状态 #

通过框架的动态绑定语法，让aria-checked与原生checked状态强关联，避免被构建工具误判为静态冗余属性：

• React示例：

function CustomCheckbox({ checked, onToggle }) {
  return (
    <input
      type="checkbox"
      checked={checked}
      aria-checked={checked}
      onChange={onToggle}
    />
  );
}

• Vue示例：

<template>
  <input
    type="checkbox"
    v-model="checkedState"
    :aria-checked="checkedState"
    @change="handleToggle"
  />
</template>

<script setup>
import { ref } from 'vue';
const checkedState = ref(false);
const handleToggle = () => { /* 业务逻辑 */ };
</script>

3. 直接使用原生checked属性判断状态 #

如果无法保留aria-checked，直接依赖浏览器原生维护的checked属性判断状态，兼容性更稳定：

const targetCheckbox = document.querySelector('#your-checkbox');
if (targetCheckbox.checked) {
  // 执行选中状态的逻辑
} else {
  // 执行未选中状态的逻辑
}

4. 检查第三方组件库配置 #

若使用第三方UI组件，查看组件文档是否有强制保留ARIA属性的配置项，开启对应参数即可避免属性被自动移除。

内容的提问来源于stack exchange，提问作者Vijay G Rama