Accessibility issue when button is disables/enabled

user_7468522 0
Viewed 5287

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.

wai-aria css html javascript
3 Answers

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>

user_1572470

That's a great beyond-accessibility question. The way you have it currently coded is WCAG compliant but might not be the best user experience for a screen reader user, at least for the screen reader user that uses the TAB key to navigate. They will never hear the button because focus won't move to it.

However, many (more than half, probably much more than that) screen reader users navigate the accessibility tree (similar to the DOM) using the up/down arrow keys (with JAWS and NVDA) or swipe left/right (with VoiceOver on iOS). This type of navigation lets them access all elements on the page that are in the accessibility tree (which is most of the DOM elements). So a screen reader user will most likely navigate to the disabled button and they'll hear that it's disabled.

The short answer is the code you have is ok. A screen reader will know the button is disabled even though it can't receive typical keyboard focus. You just have to understand how a screen reader user navigates the page.

user_767140

The aria-disabled attribute will allow you to navigate to disabled buttons with a screen reader.

user_99573010
Related