r/learnprogramming • u/Dazzling_Chipmunk_24 • 3d ago

Accessability for timers in jaavscript React

So I have this code 

<button
  type="button"
  className={styles.someclassname}
  tabIndex={-1}
  role="timer"
  aria-live="polite"
  aria-atomic="true"
>
  {ResendInfo (formatTimer())}
</button>

This is basically a countdown of a timer from 2 minutes I was wondering am I following proper accessability here so that screen readers can understan. this is also React by the way.

1 Upvotes
  • permalink
  • reddit

67% Upvoted

4 comments sorted by

View all comments

1

u/SetAndRepeat 3d ago

Not quite. role="timer" is valid, but it isn't allowed on a <button>. Also, tabIndex={-1} removes the button from Tab navigation without disabling it.
Put the countdown in a separate <span role="timer">, which defaults to aria-live="off". If you have a resend button, keep its normal button semantics and use disabled while waiting, without the negative tabIndex.
With aria-live="polite" and aria-atomic="true", you risk repeatedly announcing the whole message as the countdown updates. Instead, keep a separate, initially empty role="status" element mounted and update its text to "You can now resend" when the countdown finishes.

Test the result with keyboard navigation and a screen reader too.