禁用按钮不应仅依赖原生 disabled 属性，因其会移除焦点、破坏键盘导航和屏幕阅读器支持；推荐使用 aria-disabled="true" 配合 CSS 视觉样式与事件守卫（guard）机制，在保持交互可达性的同时实现逻辑禁用。
禁用按钮不应仅依赖原生 `disabled` 属性，因其会移除焦点、破坏键盘导航和屏幕阅读器支持；推荐使用 `aria-disabled="true"` 配合 css 视觉样式与事件守卫（guard）机制，在保持交互可达性的同时实现逻辑禁用。
在 Web 可访问性（a11y）实践中，“真正禁用”
更优解是语义禁用（semantic disabling）：保留按钮的可聚焦性与可读性，仅通过 aria-disabled="true" 声明其逻辑状态，并配合样式与事件拦截实现一致的交互反馈。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
✅ 正确做法三要素
- 语义层：使用 aria-disabled="true"（注意是 ariaDisabled DOM 属性名，对应 HTML 属性 aria-disabled）
- 表现层：通过 CSS 为 [aria-disabled="true"] 添加视觉提示（如降低不透明度、禁用光标）
- 行为层：监听点击事件，检查 ariaDisabled 状态并主动阻止默认动作（而非依赖原生禁用）
以下为完整实现示例：
<button type="button" id="submit-btn">提交表单</button> <button type="button" id="cancel-btn" aria-disabled="true">取消编辑</button>
/* 视觉反馈：模拟禁用态 */
button[aria-disabled="true"] {
opacity: 0.65;
cursor: not-allowed;
pointer-events: none; /* 可选：防止误触，但需谨慎 —— 若需支持键盘焦点或 Tooltip，建议保留 pointer-events */
}
// 事件守卫函数：统一拦截禁用按钮的点击
function actionGuard(action) {
return function (evt) {
const target = evt.target;
// 若 aria-disabled 为 true，阻止执行；否则运行原始动作
if (target?.ariaDisabled === true) {
evt.preventDefault();
evt.stopPropagation();
return;
}
if (!evt.defaultPrevented) {
action(evt);
}
};
}
// 示例业务动作
function handleSubmit(evt) {
console.log('表单已提交');
// 实际提交逻辑...
}
// 绑定守卫
document.getElementById('submit-btn').addEventListener('click', actionGuard(handleSubmit));
document.getElementById('cancel-btn').addEventListener('click', actionGuard(() => {
console.log('取消操作已触发');
}));
⚠️ 注意事项与增强建议
- 不要混用 disabled 和 aria-disabled：二者语义冲突。若已设 disabled，aria-disabled 将被忽略；应二选一，优先 aria-disabled。
- 保持键盘可聚焦：确保禁用按钮仍可通过 Tab 聚焦（默认行为），便于屏幕阅读器播报其状态。可添加 tabindex="0" 显式声明（通常非必需）。
- 提供禁用原因：对 aria-disabled="true" 的按钮，建议添加 title 或 ARIA Tooltip（如 aria-describedby 指向一段说明文本），并配合 aria-live="polite" 动态播报状态变更，提升上下文感知。
- 服务端仍需校验：前端禁用仅为体验优化，所有关键操作必须在服务端二次验证权限与业务条件。
通过这套方案，按钮既保有完整的可访问性链路（聚焦 → 朗读 → 理解状态 → 获取原因），又提供了清晰的视觉与交互反馈，真正践行了「无障碍不是附加功能，而是基础设计原则」的理念。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
