Question

启用/禁用我的按钮时，我遇到了辅助功能问题：下面是我的角度形式：

<form>
<input type="text" id="UserName">
<input type="text" id="Password">
<button type="submit" [disabled]="conditions">
</form>

在这种情况下，如果在我的输入字段中未输入任何内容，则我的按钮将被禁用。我如何向用户传达我的按钮已被禁用，因为无法将焦点放在禁用的按钮上。我实际上是否需要向用户传达有关禁用按钮的信息，并在启用该按钮时传达信息。

Answer 1

我实际上是否需要向用户传达有关禁用按钮的信息，并在启用该按钮时传达信息。

这在很大程度上取决于您。信息已由用户代理已传达（视觉的信息以“灰色”或类似外观显示按钮；非视觉的信息以其他方式报告该信息）。

如何向用户传达我的按钮已被禁用...

这也取决于您。如果您想在消息后加上一句话，只显示禁用按钮，那么使用next sibling combinator（+）的HTML和CSS就足够简单了：

<button type="submit" [disabled]="conditions">button text</button>
<span class="show-on-disable">your text here</span>

CSS：

.show-on-disable {
    display: none;
}
button[disabled] + .show-on-disable {
    display: inline;
}

实时示例：

document.querySelector("input[type=checkbox]").addEventListener("change", function() {
  var btn = document.querySelector("button");
  btn.disabled = !btn.disabled;
});

.show-on-disable {
    display: none;
}
button[disabled] + .show-on-disable {
    display: inline;
}

<div>
  <label>
    <input type="checkbox">
    Disable the button
  </label>
</div>
<button type="submit">button</button>
<span class="show-on-disable">your text here</span>

Answer 2

这是一个巨大的无障碍问题。您当前对其进行编码的方式符合WCAG，但对于屏幕阅读器用户而言可能不是最佳的用户体验，至少对于使用 TAB 键进行导航的屏幕阅读器用户而言并非如此。他们将永远不会听到按钮，因为焦点不会移到按钮上。

但是，许多（超过一半，可能更多）屏幕阅读器用户使用向上/向下箭头键（使用JAWS和NVDA）或向左/向左滑动浏览accessibility tree（类似于DOM）右（在iOS上使用VoiceOver）。这种类型的导航使他们可以访问页面中可访问性树中的所有元素（这是大多数DOM元素）。因此，屏幕阅读器用户很有可能导航到已禁用按钮，他们会听到该按钮已被禁用。

简短的答案是您的代码可以。屏幕阅读器将知道该按钮被禁用，即使它无法获得典型的键盘焦点。您只需要了解屏幕阅读器用户如何浏览页面即可。

Answer 3

aria-disabled 属性将允许您使用屏幕阅读器导航到禁用的按钮。

禁用/启用按钮时的可访问性问题

3 个答案: