Question

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

请参阅示例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的元素。

Answer 2

当你说'＃34;我知道它发生了，因为按钮仍然有焦点时，你回答了自己的问题＆＃34;然后aardrian明确地指出了什么，当他说＆＃34;你将需要把焦点转移到新元素＆＃34;。

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

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

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

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

当您已经使用aria-disabled属性时，我希望第二个aardrian建议不设置disabled。这是多余的。 aria-disabled属性适用于您模拟已禁用的对象。

Answer 3

如何阅读文本因读者而异。没有对是错。如果您希望读取的文本在读者中相同且一致。请稍微解决一下。添加aria-label =＆＃34;所需的文字＆＃34;到你的按钮。这将覆盖按钮标记内的任何内容。

例如

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

Nvda会将按钮读为＆＃34;所需的文字按钮＆＃34;。忽略按钮内的文本。现在，您可以使用JS处理（添加/删除）disabled和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);

然后读者的文字也一样。

自我禁用按钮，辅助功能

3 个答案: