Re: Questions regarding buttons with ARIA attributes

Hi Daniel,

> If the button is disabled (aria-disabled="true"), it won't be triggered when using the "Tab" key. How will blind users know that such a button exists?

Adding aria-disabled="true" to a button doesn't remove it from the keyboard focus order.  Additionally, outside of forms, tabbing is not the primary means by which most screen reader users navigate web pages.  Even if you added the HTML disabled attribute, which does completely prevent a button from receiving focus, a screen reader's reading cursor would still be able to locate it.

> Should I use disabled, aria-disabled="true", and tabindex="1" to allow users to tab onto it

This won't do what you think it will.  As I indicated earlier in this message, a button with the HTML disabled attribute cannot receive focus, even if you add tabindex to it.  Also, you should never use tabindex values higher than 0; in this case tabindex="1" would make the button always be the first focusable item on the page which would be confusing and, in most scenarios, a violation of WCAG SC 2.4.3 Focus Order (level A).  More info:

* https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html
* https://www.w3.org/WAI/WCAG21/Understanding/focus-order

Meanwhile, using both disabled and aria-disabled would be redundant.  Use whichever one fits your use case, i.e. aria-disabled if the control should still be focusable, HTML disabled otherwise.

I think that the proposed pattern sounds quite confusing for users, as well as a potential violation of WCAG SC 2.2.1 Timing Adjustable (level A) depending on how it's used:

https://www.w3.org/WAI/WCAG21/Understanding/timing-adjustable

As such, I don't have anything else to add beyond correcting the misconceptions here.

Regards,

James Scholes
Director of Digital Accessibility, Prime Access Consulting, Inc.

On 20/07/2023 at 02:05, Daniel Wójcik wrote:
> Hello,
> 
> I hope this email finds you well.
> 
> Recently, I've been working on creating my own Unstyled components library.
> 
> While adding ARIA attributes to my button, I encountered a dilemma as I'm unsure which attribute would be best for accessibility.
> 
> My button has a cooldown timer feature, where after a click, it remains disabled for 15 seconds. During this time, the button has aria-disabled set to true and contains an internal timer displaying the countdown.
> 
> A similar example, with the timer inside the button, can be found here: baseweb.design/components/button-timed/ <https://baseweb.design/components/button-timed/>
> 
> I have the following questions:
> 
> If the button is disabled (aria-disabled="true"), it won't be triggered when using the "Tab" key. How will blind users know that such a button exists?
> 
> Which ARIA attribute should I use for a button with a countdown timer, to clearly inform users about the cooldown period and the remaining time?
> 
> (The timer updates every second, so I want to avoid overwhelming users with constant updates.) Should I use disabled, aria-disabled="true", and tabindex="1" to allow users to tab onto it, get information about its disabled state, and have the screen reader read out the content with the remaining time ("Cooldown time: 00:15")?
> 
> Thank you very much for your assistance.
> 
> Best regards,
> 
> Daniel
>

Received on Thursday, 20 July 2023 16:31:46 UTC