2

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

请参阅示例示例

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。

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

感谢你们！

4

3 回答 3

2

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

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

此外，您可以放弃按钮，aria-disabled然后靠在disabled按钮上。aria-disabled用于不支持的元素disabled。

于 2016-09-01T01:37:43.710 回答
0

阅读文本的方式因读者而异。没有对错。如果您希望阅读的文本在读者中是相同且一致的……请做一些解决方法。将 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);

那么文本在读者中将是相同的。

于 2016-09-07T06:54:44.043 回答
0

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

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

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

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

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

我想支持 aardrian 的建议，即在您已经在使用该物业时不要设置。这是多余的。该属性适用于模拟禁用对象时。aria-disableddisabledaria-disabled

于 2016-09-06T12:39:37.303 回答