自禁用按钮，可访问性答案

【问题标题】：self disable button, accessibility自禁用按钮，可访问性
【发布时间】：2016-08-30 22:03:40
【问题描述】：

有没有办法在自禁用按钮中不显示“不可用”或“变暗”？

查看示例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。

对不起，代码丑陋，这只是为了模拟我的真实行为。

谢谢你们！

【问题讨论】：

有完整的例子：jsfiddle.net/yz29fxnv/5

标签： html firefox accessibility wai-aria nvda

【解决方案1】：

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

aria-live 用于当您想让屏幕阅读器说出具有aria-live 属性的内容区域的更改时。由于您在兄弟 div 上使用它，因此您错过了让它做它做的事情的机会。或者，您可以跳过tabindex/focus() 方法，只需将aria-live 放在新内容的容器中。

此外，您可以放弃aria-disabled，而只依靠disabled 来获取按钮。 aria-disabled 用于不支持 disabled 的元素。

【讨论】：

嗨@aardian，谢谢你的回答。我更新了我的jsfiddle 示例以在父容器上添加aria-live，但结果是相同的。 NVDA 写道：“这是我的另一个重要部分。不可用'。请看一下我更新的示例：jsfiddle.net/yz29fxnv/6
您没有将焦点移到新元素上，因此焦点停留在<button> 上，在读取aria-live 目标后读取其更改。看我回答的第一句话。转储所有aria-live，因为我只建议将其作为替代方案。移动焦点后禁用该按钮，因为 NVDA 会在您移动焦点之前宣布更改。例如：jsfiddle.net/qmfj1wp5/2

【解决方案2】：

当您说“我知道它正在发生，因为按钮仍然具有焦点”时，您回答了自己的问题，然后 aardrian 在他说“您需要将焦点移至新元素”时明确指出了这一点。

但请记住，焦点是否仍然在禁用对象上完全取决于用户代理（浏览器）。一些浏览器将焦点留在禁用对象上，而其他浏览器将其移至父对象。

aardrian 关于使用tabindex 的评论是，如果您想将焦点移动到通常无法聚焦的对象（即，如果它是您通常不能TAB 到的元素）。因此，如果您想将焦点移到一些简单的文本上（只是为了将其从按钮上移开），那么我会调整 aardrian 的建议并使用tabindex='-1' 而不是tabindex='0'。这将允许您在该元素上调用 focus()，但不允许用户 TAB 到它。

如果你想将焦点移动到页面上的另一个按钮，或者其他可以自然获得焦点的元素（复选框、输入框等），那么你不需要tabindex。

如果您最终将焦点移到刚刚添加的文本上，那么您实际上不需要aria-live，因为屏幕阅读器会阅读您刚刚关注的文本。但这仅与您发布的示例相关，我理解这只是显示问题的示例。您的真实应用可能不会添加文本。

当您已经在使用 disabled 属性时，我想支持 aardrian 的 not 设置 aria-disabled 的建议。这是多余的。 aria-disabled 属性用于模拟禁用对象时。

【讨论】：

我同意你们俩的观点。感谢您的 cmets 和建议。但我真正的问题是为什么旁白没有读到“不可用”？哪一个错了？
“错误”在这种情况下是一个主观词。用户代理决定如何处理自禁用对象。你必须与 Apple 讨论这个问题，看看他们为什么选择以他们的方式实施它。
是的。 “不可用”是 NVDA 宣布某些东西被禁用的方式。不幸的是，如果按钮在其动作被触发后立即被禁用，NVDA 立即宣布“不可用”给人的印象是按钮按下“失败”。这可能就是 Apple 选择采取不同做法的原因。

【解决方案3】：

阅读文本的方式因读者而异。没有对错。如果您希望阅读的文本在读者中是相同且一致的..做一些解决方法。将 aria-label="desired text" 添加到您的按钮。这将覆盖按钮标签中存在的任何内容。

例如

<button aria-label="desired text button">This text will be ignored</button>

Nvda 会将按钮读取为“所需的文本按钮”。按钮内的文本被忽略。现在您可以使用 JS 处理（添加/删除）禁用和 aria-label 属性。

根据您的问题，您可以尝试：

代替：

helper.innerHTML = "Content added, please read it";

尝试使用：

saveBtn.setAttribute("aria-label", "Content added, please read it.");
setTimeout(function(){
saveBtn.removeAttribute("aria-label");}, 5000);

那么阅读器中的文本将是相同的。

【讨论】：