悬停提示的无障碍兼容要点
为何需要在禁用状态下提供悬停提示
在前端开发中，禁用按钮的悬停提示 可以帮助用户快速理解当前状态、原因以及下一步的可选操作，这对于提升交互体验至关重要。若没有提示，部分用户可能会误以为按钮尚未加载或出现了错误。无障碍性要求任何可操作控件的状态信息对所有用户可获取，因此仅靠视觉样式并不能满足这一要求。
很多浏览器对禁用按钮的默认 tooltip 支持有限，屏幕阅读器也往往不会有效地读出悬停提示的文本。这就需要我们通过结构和描述性文本来传达状态信息，确保不同辅助技术场景下都能获得一致的解释。aria-describedby 和合适的文本描述可以成为桥梁。
另外，悬停提示的实现还应考虑键盘导航、对比度和动画对无障碍用户的影响。仅使用颜色差异或闪烁动画来传达状态，可能对色觉障碍用户或低视觉能力用户不友好，因此需要提供文本描述或独立的提示区域。
按钮已禁用，无法执行复制
无障碍实现的注意点
确保文本描述对所有用户清晰，并尽量使用描述性文本而非仅靠颜色或图标来传达状态信息。aria-live 能帮助屏幕阅读器在状态变化时通知用户，而role="tooltip" 将提示语义化，方便辅助技术理解。
在设计上，应该让悬停提示与聚焦状态一致，当用户通过键盘聚焦时，悬停提示也应出现。这样可以兼容更多交互方式，同时避免因鼠标与键盘的差异导致信息丢失。focus-within 与 :hover 的组合，是一种常见且稳妥的实现方式。
实现方案：确保禁用按钮仍显示悬停提示并符合无障碍
方案一：通过外层包装实现悬停提示
思路是用一个容器包裹禁用按钮，当鼠标悬停或获取焦点时，容器内部的提示元素显示出来。按钮保持禁用状态以体现不可交互，但提示文本仍然可访问。这种做法可以在视觉上与功能状态保持一致，同时提供可访问的描述信息。容器级别的悬停触发确保即使按钮不可用也能看到提示。
该方案的关键是将提示文本放在一个独立的可聚焦区域内，并通过 CSS 控制显隐，同时通过 ARIA 属性告知辅助技术当前控件的状态。
按钮已禁用，无法执行复制
/* 方案一的样式（CSS） */
.tooltip-wrap { position: relative; display: inline-block; }
.tooltip { position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%);background: #333; color: #fff; padding: 6px 8px; border-radius: 4px;white-space: nowrap; display: none; font-size: 12px;
}
.tooltip-wrap:hover .tooltip,
.tooltip-wrap:focus-within .tooltip { display: block; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
方案二：通过 aria-disabled 与描述文本结合保持可聚焦性
另一种常见做法是在按钮上使用 aria-disabled="true"，同时保留 tabindex="0" 使其仍可聚焦，并通过 aria-describedby 指向一个文本描述。这样，辅助技术能够读取到禁用状态的文本描述，且键盘用户仍可聚焦到控件并获取状态信息。
需要注意的是，这种方式要求你在视觉层面提供一个与描述文本对应的提示区域，确保悬停时也能看到提示。若页面要求高对比度，请调整背景和文字颜色以满足 WCAG 要求。
按钮已禁用，复制操作不可用
/* 方案二的简易样式（CSS） */
.btn-aria-wrap { display: inline-block; position: relative; }
.btn { background:#f5f5f5; border:1px solid #ccc; padding:8px 12px; border-radius:4px; }
.btn[aria-disabled="true"] { opacity:.6; cursor: not-allowed; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;overflow: hidden; clip: rect(0,0,0,0); border:0;
}
无障碍要点与兼容性注意
遵循 WCAG 的关键点
在实现禁用按钮的悬停提示时，必须遵循 WCAG 的基本原则：文本信息不能仅通过颜色传达，而应提供文字描述；悬停文本必须对所有用户可见且可读，且在屏幕阅读器场景下也能被正确读取。对比度应满足至少 4.5:1 的标准，以便低视力用户也能清晰辨识。
此外，按钮在“禁用”状态下仍应具备键盘可聚焦性，避免只通过鼠标交互来触发提示。使用 aria-disabled 和聚焦样式可以在保持可访问性的前提下实现同样的视觉效果。
最后，避免把提示信息完全放在 title 属性内，因为这对屏幕阅读器用户通常不可达。最稳妥的做法是使用可描述的文本节点、aria-describedby、以及必要的 aria-live 反馈。这样可以在不同辅助技术间实现一致体验。
完整示例：从结构到样式再到无障碍反馈
完整结构与可用性要点
以下示例汇总了结构、样式与无障碍反馈的要点：按钮保持禁用状态以体现不可交互，但通过外层容器的悬停触发和独立的提示文本实现可访问的悬停提示。文本描述使用 aria-live、aria-describedby 和 rôle 等结合，确保屏幕阅读器与键盘用户都能获得一致的信息。端到端示例便于直接在实际项目中移植。
按钮已禁用，无法执行复制
/* 完整示例的 CSS 片段 */
.tooltip-wrap { position: relative; display: inline-block; }
.tooltip { position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%);background: #333; color: #fff; padding: 6px 8px; border-radius: 4px;white-space: nowrap; display: none;
}
.tooltip-wrap:hover .tooltip, .tooltip-wrap:focus-within .tooltip { display: block; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
// 简易的交互提示（JavaScript 选用场景）
// 如果需要在禁用时阻止额外行为，可保持这段脚本以防止错误触发
document.querySelectorAll('.btn[disabled]').forEach(btn => {btn.addEventListener('click', e => {e.preventDefault();// 可以在这里触发屏幕阅读器提示，或发送分析事件});
});
