Accessibility issue when button is disables/enabled
up vote
0
down vote
favorite
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.
javascript html css wai-aria
add a comment |
up vote
0
down vote
favorite
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.
javascript html css wai-aria
Usually you change the style and the disabled buttons are greyed out.
– Oram
Nov 8 at 14:16
Have you tried updating thetitle
attribute given the same condition with a different message?
– t3__rry
Nov 8 at 14:18
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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.
javascript html css wai-aria
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.
javascript html css wai-aria
javascript html css wai-aria
asked Nov 8 at 14:12
Nitesh Rana
292215
292215
Usually you change the style and the disabled buttons are greyed out.
– Oram
Nov 8 at 14:16
Have you tried updating thetitle
attribute given the same condition with a different message?
– t3__rry
Nov 8 at 14:18
add a comment |
Usually you change the style and the disabled buttons are greyed out.
– Oram
Nov 8 at 14:16
Have you tried updating thetitle
attribute given the same condition with a different message?
– t3__rry
Nov 8 at 14:18
Usually you change the style and the disabled buttons are greyed out.
– Oram
Nov 8 at 14:16
Usually you change the style and the disabled buttons are greyed out.
– Oram
Nov 8 at 14:16
Have you tried updating the
title
attribute given the same condition with a different message?– t3__rry
Nov 8 at 14:18
Have you tried updating the
title
attribute given the same condition with a different message?– t3__rry
Nov 8 at 14:18
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
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>
add a comment |
up vote
0
down vote
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.
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
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>
add a comment |
up vote
0
down vote
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>
add a comment |
up vote
0
down vote
up vote
0
down vote
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>
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>
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>
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>
answered Nov 8 at 14:16
T.J. Crowder
671k11611841283
671k11611841283
add a comment |
add a comment |
up vote
0
down vote
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.
add a comment |
up vote
0
down vote
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.
add a comment |
up vote
0
down vote
up vote
0
down vote
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.
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.
answered Nov 9 at 4:04
slugolicious
3,80411318
3,80411318
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53209516%2faccessibility-issue-when-button-is-disables-enabled%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Usually you change the style and the disabled buttons are greyed out.
– Oram
Nov 8 at 14:16
Have you tried updating the
title
attribute given the same condition with a different message?– t3__rry
Nov 8 at 14:18