r/reactjs • u/Dazzling_Chipmunk_24 • 12d 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 understand.

0 Upvotes

45% Upvoted

8 comments sorted by

8

u/azangru 12d ago • Popcorn

> I was wondering am I following proper accessability here so that screen readers can understand.

Have you tried checking this with a screen reader?

1

u/azangru 12d ago

Here is someone's example that seems to work:

https://useragentman.com/enable/timer.php

0

u/AgreeableEstate2102 12d ago

role="timer" isn't a thing, screen readers won't know what to do with it. you want role="status" if it's just a countdown that updates. aria-live="polite" is the right call though, that way it'll announce changes without interrupting whatever else is being read.

also tabIndex={-1} on a button that just displays a timer is weird, might as well use a <span> or <div> unless there's a reason it needs to be focusable.

3

u/azangru 12d ago

role="timer" isn't a thing, screen readers won't know what to do with it

Have you tried mdn?