Accessibility issue when button is disables/enabled

Question

I am facing accessibility issue when my button is enabled/disabled: Below is my angular form:

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

Here my button is disabled on the condition if nothing is entered inside my input fields. How can I convey to user that my button is disabled as focus can't be put on disabled button. Do I actually need to convey to user about disabled button and convey when it is enabled.

Answer 1

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

That's largely up to you. The information is already conveyed by the user agent (visual ones show the button in a "grey" or similar look; non-visual ones report it other ways).

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

This is also up to you. If you want to include a message after it saying something, and only show that when the button is disabled, that's easy enough with HTML and CSS using the next sibling combinator (+):

<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;
}

Live Example:

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>