disabled状态加入购物车按钮accessibility失效，tab键无法获取focus求助

核心问题原因 #

原生disabled属性会直接将按钮从浏览器可聚焦元素序列中移除，这是你无法通过tab键聚焦按钮的根本原因。你之前尝试添加的aria-disbaled属于拼写错误，正确属性名为aria-disabled，拼写错误会导致属性完全不生效。 #

可行解决方案 #

• 替换原生disabled属性为aria-disabled="true"：不要在按钮上直接添加原生disabled属性，仅通过aria-disabled标记禁用状态，按钮会默认保留在tab聚焦序列中，读屏设备也能正确识别其禁用状态。
• 自定义禁用状态的视觉与交互逻辑：
  • 通过CSS设置按钮禁用时的视觉样式，比如降低透明度、设置cursor: not-allowed，保证和原生禁用样式的视觉体验一致
  • 监听按钮的click、keydown事件，当aria-disabled为true时，阻止点击、回车、空格触发的加购逻辑，避免功能异常
• 补充状态说明：可通过aria-label属性添加额外说明，比如aria-label="该商品已加入购物车，无法重复添加"，方便读屏用户理解按钮禁用的原因
• 特殊场景兼容：如果业务逻辑必须保留原生disabled属性，可以额外在按钮外层套一个可聚焦的容器元素，给容器加tabindex="0"，同时给容器添加对应的aria属性说明内部按钮的状态，该方案改造成本更高，更推荐使用第一种方案。

代码示例 #

HTML 示例 #

<button 
  aria-disabled="true"
  aria-label="商品已加入购物车，无法重复添加"
  class="add-to-cart-btn disabled"
>
  Add To Cart
</button>

CSS 示例 #

.add-to-cart-btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #ccc;
  border-color: #ccc;
}

JS 交互示例 #

const addToCartBtn = document.querySelector('.add-to-cart-btn')
// 阻止禁用状态下的点击事件
addToCartBtn.addEventListener('click', (e) => {
  if (e.target.getAttribute('aria-disabled') === 'true') {
    e.preventDefault()
    return
  }
  // 正常加购逻辑
})
// 阻止禁用状态下的键盘触发事件
addToCartBtn.addEventListener('keydown', (e) => {
  if (e.target.getAttribute('aria-disabled') === 'true' && (e.key === 'Enter' || e.key === ' ')) {
    e.preventDefault()
    return
  }
})

内容的提问来源于stack exchange，提问作者Zara