Is it possible to make a screen reader read a text (heading, span or div) on mount if focus is set to another element in the page?
I have a react app with a login page. The login page has input boxes for user name and password with initial focus set to username using autoFocus. The page has a heading too. How can I make a screen reader read the heading when it is mounted without losing focus from username? Please see the sample codepen: Sample app.
The above sample has a login button in the initial landing page, clicking on it will load login component. I want screen reader to read the heading first without losing focus from username input. Tried aria-live attribute, but it is not working. Can someone please help?
Thanks!
I believe a <fieldset> is exactly what you are looking for.
ARIA defines the abstract structure role, which groups the content in different contexts, so to say. landmark falls under these, group as well.
I’m not sure on which role this logic is based exactly, but screen readers announce these context changes, so when focus leaves one group and/or enters another, their roles and names are announced.
So if your heading serves as the accessible name for a structure that the auto-focussed input is part of, it should be announced.
One very appropriate structure role for forms is that of group, implemented by <fieldset>.
<button onclick="document.querySelector('input').focus();">Login</button>
<form>
<fieldset>
<legend><h3>Enter Credentials</h3></legend>
<label>Username
<input name="username" autofocus>
</label>
</fieldset>
</form>After pressing the Login button, NVDA (with Firefox or Chrome) will announce:
Enter Credentials, grouping
Username, edit, has autocomplete, blank
Orca with Firefox is similar, but Chromevox unfortunately does not announce the group, neither the name of a <section>.
Notice also name="username". This is a common standard to allow browsers to autocomplete fields, important for accessibility. You could also add autocomplete="username" if you have a different name.
The outermost context inside the site would be that of the document. Its accessible name is the meta <title> of your page, which will be announced in the beginning, that’s unavoidable.