自定义元素需手动补全无障碍四要素：语义（显式声明role）、名称（aria-label或aria-labelledby）、状态（动态同步aria-checked等）、交互（tabindex+keydown处理）；表单集成须启用formassociated并同步原生input属性。

自定义元素默认没有无障碍能力，必须手动补全语义、名称、状态和交互四要素，缺一不可。

必须显式声明 role 和可访问名称

浏览器不会给 <my-toggle></my-toggle> 自动赋予按钮、开关或复选框的语义。需同时设置：

• role="switch"（或其他匹配角色，如 button、checkbox）
• aria-label="启用通知" 或 aria-labelledby="label-id" 提供明确名称
• 若用 aria-labelledby，目标元素 ID 必须存在且未被 aria-hidden="true" 或 display: none 隐藏

状态属性要随交互实时同步

ARIA 状态不是静态配置，而是动态反映组件当前行为：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 开关切换后，必须执行 this.setAttribute('aria-checked', this.checked ? 'true' : 'false')
• 折叠面板展开时设 aria-expanded="true"，收起时设为 "false"
• 表单校验失败时设 aria-invalid="true" 并绑定 aria-describedby="error-id"，通过后必须移除这两项

键盘交互与焦点管理不能依赖原生行为

自定义元素不继承原生控件的键盘响应逻辑，需主动实现：

• 添加 tabindex="0" 让元素可聚焦
• 监听 keydown 事件，对 Enter 和 Space 做相同处理（注意调用 e.preventDefault()）
• 模态对话框等场景还需捕获 Tab 键，在内部焦点循环，并在打开时将焦点移入首个可聚焦子元素

表单集成需走 formAssociated 流程

若组件要参与表单提交、重置或验证（如 <my-checkbox checked></my-checkbox>），光有 role 不够：

• 类定义中声明 static formAssociated = true
• 构造函数第一行调用 super()
• 在 Shadow DOM 内嵌真实 <input type="checkbox">，并通过 getter/setter 同步 checked、disabled、value 等属性
• 属性变更监听中，attributeChangedCallback 的 newValue 是字符串，判断布尔属性应写 newValue !== null，而非 === true