Reputation: 3445
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
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:
role="alert"
, which will immediately get announced by the screen reader and is invasive so should not be used liberally.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