时间戳

首页 > 解决方案 > 禁用/启用按钮时的辅助功能问题

javascript - 禁用/启用按钮时的辅助功能问题

问题描述

当我的按钮启用/禁用时，我面临可访问性问题：下面是我的角度形式：

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

如果在我的输入字段中没有输入任何内容，我的按钮在此条件下被禁用。我如何向用户传达我的按钮已禁用，因为焦点无法放在禁用的按钮上。我是否真的需要向用户传达禁用按钮并在启用时传达。

标签： javascripthtmlcsswai-aria

解决方案

我是否真的需要向用户传达禁用按钮并在启用时传达。

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

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

这也取决于你。如果您想在它说某事之后包含一条消息，并且仅在禁用按钮时显示该消息，那么使用 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>

推荐阅读