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

Question

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

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

如果在我的输入字段中没有输入任何内容，我的按钮将被禁用。 我如何向用户传达我的按钮被禁用，因为焦点不能放在禁用的按钮上。 我真的需要向用户传达禁用按钮的信息并在启用时传达吗？

Answer 1

Do I actually need to convey to user about disabled button and convey when it is enabled.

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

How can I convey to user that my button is disabled...

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