数据绑定 aria 标签不适用于按钮标签答案

【问题标题】：data binding aria label not working on button tag数据绑定 aria 标签不适用于按钮标签
【发布时间】：2016-05-14 20:28:20
【问题描述】：

我有这个按钮，我想添加一个aria-label，但我想绑定它，这样我的文件中就没有硬编码文本，所以我尝试对它进行数据绑定，但我没有得到aria-label 正确显示。

这是屏幕阅读器可以阅读的内容：

<button class="styling" aria-label="Some random text">
     <span class="icon"></span>
</button>

但这是我想要的工作，但它没有显示带有适当文本的 aria-label：

<button class="styling" data-bind="attr:{'aria-label': textFromModal}">
     <span class="icon"></span>
</button>

更新：

这是我拥有的模式 - 我知道它正在工作，因为我正在显示其中的其他项目并且它们显示正常。

DisplayViewModal = function(){
    var self;
    self = {
            ....
            textFromModal: 'Label text to show',
            ....
           };
    return self;
}
return DisplayViewModal;

【问题讨论】：

显示绑定的视图模型。
让我们看看视图模型，“textFromModal”可能是空白的，这就是 aria-label 没有显示的原因。
查看 Knockoutjs 上下文调试器 - chrome.google.com/webstore/detail/knockoutjs-context-debugg/… - 如果 textFromModel 有值，它应该能够为您提供线索。
@EricBronnimann 每当我尝试使用调试器时，要么我没有以正确的方式使用它。如何使用调试器检查值？
我在这里发布了一个使用 Knockout 调试器的小示例：github.com/erbronni/knockout-context-debug 要查找的一件事是绑定中的任何错误，因为一个绑定中的异常可能会导致后续绑定的解析失败.一种方法是删除所有绑定，然后有条不紊地重新添加它们，测试每个绑定以确保它正常工作。这很乏味，但有时这是找出问题原因的唯一方法。

标签： knockout.js wai-aria

【解决方案1】：

这似乎有效（对我来说，在 FF 中）。虽然我无法使用屏幕阅读器，但它的行为与屏幕阅读器棒的预期相同。

启用魔杖
将鼠标悬停在按钮上。
查看预期文本。
确认 DOM 显示区域标签。我在 IE11 中也看到了这一点。

您在使用屏幕阅读器吗？也许禁用它以确认您看到绑定的数据。然后启用它，看看它没有被绑定。

【讨论】：

你在为这个黑色菜单使用某种插件吗？我在哪里可以获得“屏幕阅读器魔杖”？

【解决方案2】：

我遇到了同样的错误，事实证明，当textFromModal 没有值时，它没有显示出来。当我设置它时，它开始工作。我的确切 HTML 如下所示：

<textarea
    aria-controls="chat-history"
    class="chat-input-textbox"
    data-bind="attr: {'aria-label': textFromModal}">
</textarea>

我检查了<button> 并以相同的方式工作。

【讨论】：