CODEWITHSUNDEEP
javascriptangularjsaccessibilitywai-aria
WinchenzoMagnifico
WinchenzoMagnifico

Reputation: 3445

How to force mac screenreader to automatically read heading text in a div?

So I have a SPA angular 1.5 app and when the user navigates to a new page sometimes the page doesn't have any inputs that are autofocused, for example it is just a congratulations page saying the user was successful in registering. I've been able to come up with a slightly hacky solution by doing

$('.registration-confirmation').attr("tabIndex", 0).focus();

so the screenreader automatically reads out the text in the registration confirmation div, but then I also had to prevent the blue outline in the css from the focus

.registration-confirmation { &:focus { outline: 0; // remove webkit injected outline on focus } }

Is there a simpler way to do this? with maybe aria attributes?

Upvotes: 0

Views: 643

Answers (1)

Steve Repsher
Steve Repsher

Reputation: 400

Yeah, stop doing it like that - not good accessibility at all, especially since you've now confused me by messing with the focus indicator. ARIA roles are the correct way to handle this:

  • If you're trying to report an error, this should get ARIA role="alert", which will immediately get announced by the screen reader and is invasive so should not be used liberally.
  • For success reporting or other progress, you can use ARIA role="status"; however, still don't abuse it. If the user jumps to a successful registration screen with next steps, for example, applying it to anything but a simple "congratulations" would be inappropriate.

I suggest looking at the ARIA best practices document for various example uses.

Upvotes: 3

Related Questions