html - 自禁用按钮，辅助功能

Question

有没有办法让 self 禁用按钮不显示“不可用”或“变暗”？

参见示例Example

var saveBtn = document.getElementById("saveBtn");
var helper = document.getElementById("helper");
var content = document.getElementById("content");
saveBtn.onclick = function(e) {
  saveBtn.setAttribute("disabled", "disabled");
  saveBtn.setAttribute("aria-disabled", true);
  content.innerHTML = 'Lorem input a lot of stuffs';
  helper.innerHTML = "Content added, please read it";
  setTimeout(function(){
    helper.innerHTML = "";
    saveBtn.removeAttribute("disabled");
    saveBtn.setAttribute("aria-disabled", false);
  }, 5000);
};

• 仅语音提示:“内容已添加，请阅读”
• NVDA 表示:“内容已添加，请阅读。 不可用'

我知道它正在发生，因为按钮仍然具有焦点。但是，我需要找到解决方案，因为我无法修改页面的当前行为。

我正在使用 html 帮助器来通知转换，如您所见 https://stackoverflow.com/a/38137593/3438124 .

抱歉代码丑陋，这只是为了模拟我的真实行为。

谢谢大家!

Answer 1

您需要将焦点移至新元素。给它 tabindex=0，然后使用 focus()。

aria-live 适用于当您希望屏幕阅读器朗读具有 aria-live 属性的内容区域的更改时。由于您在同级 div 上使用它，因此您错过了它执行其功能的机会。或者，您可以跳过 tabindex/focus() 方法，只需将 aria-live 放在新内容的容器上。

此外，您可以放弃 aria-disabled 并仅使用 disabled 按钮。 aria-disabled 适用于不支持 disabled 的元素。