WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: HTML disabled or aria-disabled on checkbox

for

Number of posts in this thread: 6 (In chronological order)

From: Laurence Lewis
Date: Tue, Jun 06 2023 11:57PM
Subject: HTML disabled or aria-disabled on checkbox
No previous message | Next message →

This is not a question on whether a checkbox should be disabled, it is a
question which is the better method for inclusion.

I'd appreciate some accessibility guidance, on the pros and cons of
disabling a checkbox with HTML disabled attribute or aria-disabled.

My understanding is:

- (HTML) is not focusable and is styled by the browser.
- (ARIA) is focusable and requires custom styling.

But, which is the better option to use? The norm (for me anyway) is an HTML
first approach, however this is one time when I am not sure which method
provides the better user experience.

Regards

Laurence

Accessibility Senior Specialist

Telstra Digital Channels | Digital Systems

From: Tom Livingston
Date: Wed, Jun 07 2023 6:45AM
Subject: Re: HTML disabled or aria-disabled on checkbox
← Previous message | Next message →

There are far more knowledgeable people on this list but I would think (and hope) that HTML disabled attribute would be best and covers all users.

___
TL

> On Jun 7, 2023, at 1:58 AM, Laurence Lewis < = EMAIL ADDRESS REMOVED = > wrote:
>
> This is not a question on whether a checkbox should be disabled, it is a
> question which is the better method for inclusion.
>
> I'd appreciate some accessibility guidance, on the pros and cons of
> disabling a checkbox with HTML disabled attribute or aria-disabled.
>
> My understanding is:
>
> - (HTML) is not focusable and is styled by the browser.
> - (ARIA) is focusable and requires custom styling.
>
> But, which is the better option to use? The norm (for me anyway) is an HTML
> first approach, however this is one time when I am not sure which method
> provides the better user experience.
>
> Regards
>
> Laurence
>
> Accessibility Senior Specialist
>
> Telstra Digital Channels | Digital Systems
> > > >

From: glen walker
Date: Wed, Jun 07 2023 7:00AM
Subject: Re: HTML disabled or aria-disabled on checkbox
← Previous message | Next message →

If you follow the first rule of ARIA,
https://www.w3.org/TR/aria-in-html/#rule1, then you'd use the "disabled"
HTML attribute.

The "disabled" HTML attribute will not only provide the styling but will
also provide the *behavior* of an inactive element. You can't click on it
or tab to it or press enter/space on it. It's inactive state will be
conveyed to assistive technology if you navigate to that element using some
navigation method of the AT, for example, the down arrow with a screen
reader.

The aria-disabled attribute will *only* provide a hint to assistive
technology that the element is inactive. It won't give you any behavior.
You'd have to make the element inactive by ignoring events on it via
javascript.

From: tim.harshbarger@deque.com
Date: Wed, Jun 07 2023 8:17AM
Subject: Re: HTML disabled or aria-disabled on checkbox
← Previous message | Next message →

I agree. Also, I do believe that the HTML disabled attribute can be styled with CSS.

While I do agree with what is said, I will mention that there are other opinions about this. The reality is that WCAG does not require that disabled elements be removed from the tab order. Also, there are some people who feel it can be easier for screen reader users to discover disabled controls if they are part of the tab order.

I only mention this because, while my opinion is different, I do think they have good points to make for their viewpoint on this subject.

Thanks!
Tim
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen walker
Sent: Wednesday, June 7, 2023 8:01 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] HTML disabled or aria-disabled on checkbox

If you follow the first rule of ARIA,
https://www.w3.org/TR/aria-in-html/#rule1, then you'd use the "disabled"
HTML attribute.

The "disabled" HTML attribute will not only provide the styling but will also provide the *behavior* of an inactive element. You can't click on it or tab to it or press enter/space on it. It's inactive state will be conveyed to assistive technology if you navigate to that element using some navigation method of the AT, for example, the down arrow with a screen reader.

The aria-disabled attribute will *only* provide a hint to assistive technology that the element is inactive. It won't give you any behavior.
You'd have to make the element inactive by ignoring events on it via javascript.

From: Patrick H. Lauke
Date: Wed, Jun 07 2023 8:29AM
Subject: Re: HTML disabled or aria-disabled on checkbox
← Previous message | Next message →

On Jun 7, 2023, at 1:58 AM, Laurence Lewis < = EMAIL ADDRESS REMOVED = >
wrote:
> But, which is the better option to use?

well, "it depends(tm)" on what you're trying to achieve. Is there any
particular reason why you want the checkbox to remain focusable, even if
that means having to add your own custom CSS and JS (to prevent it from
being actionable/checkable)?

I can't think of a reason why I'd want to have a checkbox that
(currently) doesn't do anything still focusable...

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
https://mastodon.social/@patrick_h_lauke | skype: patrick_h_lauke

From: Laurence Lewis
Date: Wed, Jun 07 2023 2:12PM
Subject: Re: HTML disabled or aria-disabled on checkbox
← Previous message | No next message

I will continue with my HTML first mantra and use disabled over
aria-disabled.


HTML disabled comes with built in accessibility. The disabled element
(checkbox) is not checkable, but still discoverable by screen readers, and
spoken as disabled. The browser provides disabled visual styling.


ARIA aria-disabled is spoken as disabled, however remains in the tab order,
is checkable, and requires custom styling by the developer.


There could also be some confusion for users that a disabled checkbox is
checkable using aria-disabled.


Thanks for the feedback it has helped.



Laurence