自我禁用按钮，辅助功能

有没有办法在自我禁用按钮中不读取'不可用'或'变暗'？自我禁用按钮，辅助功能

见的例子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。

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

谢谢你们！

来源

2016-08-30 Cesar Santos

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

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

aria-live适用于当您希望屏幕阅读器讲述内容区域的变化时使用aria-live属性。既然你在兄弟分区上使用它，你就错过了做它的机会。或者，您可以跳过tabindex/focus()方法，只需将aria-live放在容器中以供新内容使用。

此外，你可以沟aria-disabled，只是依靠disabled为按钮。 aria-disabled适用于不支持disabled的元素。

来源

2016-09-01 01:37:43 aardrian

嗨@aardian，谢谢你的回答。我更新了我的'jsfiddle'示例以在父容器中添加'aria-live'，但结果是相同的。 NVDA写道：“这是我的另一个大部分。不可用”。请看看我的更新示例：https：//jsfiddle.net/yz29fxnv/6/ –

您没有将焦点移到新元素上，所以焦点停留在'

当你说“我知道它发生是因为按钮仍然有焦点”，然后阿德里安先生说他“你需要将焦点移到新元素”时，你明确地指出了它。

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

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

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

如果您最终将焦点移动到刚刚添加的文本中，那么您并不需要aria-live，因为屏幕阅读器将读取您刚才关注的文本。但这只是相对于你发布的例子而言的，我知道这只是一个示例来展示问题。您的真实应用可能不会添加文本。

而且我想第二次阿德里安人的建议而不是设置aria-disabled当您已经使用disabled属性。这是多余的。 aria-disabled属性用于模拟禁用的对象。

来源

2016-09-06 12:39:37 slugolicious

我同意你们两个。我感谢您的意见和建议。但我真正的问题是为什么配音不读取'不可用'？哪一个是错的？ –

在这种情况下，“错”是一个主观词。用户代理决定如何处理自我禁用的对象。你必须与苹果讨论这个问题，看看他们为什么选择按照他们的方式来实现它。 – slugolicious

阅读文本的方式因阅读器而异。没有是对还是错。如果您希望读取的文本在读者中保持一致且一致，请稍微解决。将aria-label =“所需文字”添加到您的按钮中。这将覆盖按钮标签内存在的任何内容。

例如

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

NVDA将读取按钮 “期望文本按钮”。按钮内的文本被忽略。现在你可以使用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);

然后文本将横跨读者一样。

来源

2016-09-07 06:54:44 UIPassion

自我禁用按钮，辅助功能

回答

相关问题