Accessibility: what's the way to force reading of span text on page load

Question

I'm curious what's the proper way to push the screen read to read <span>read me on load</span> first (it's in the middle of the html page) when the page is loaded? Even

role="rude"

doesn't help for some reason.

Thank you.

Solution

What you are using is not part of ARIA live regions. You want either role=alert or aria-live=assertive (though in an early draft "assertive" was originally "rude").

Now, that being said, live regions are intended for use on an already-loaded page. If you are making a dialog, then your HTML might look like this:

<div role="alert" aria-live="assertive">
Anything in here will be announced as soon as it changes.
</div>

If you want the dialog to be announced at page load, then consider hiding its contents and then using script to display its contents once the page has finished loading.

If you need to make it announce as soon as the page loads and it is not a dialog, consider moving focus to the element at page load using script. By placing focus, the browser will announce whatever it is.

For this to work, however, you cannot just place focus on a <span> as it is not interactive content. You can make it interactive by adding a tabindex attribute. If you do that, then you will need to add a role describing what the element does (you can use role=region if you are stuck) so that the screen reader can announce what it is instead making the user think she has landed on a control or otherwise expect to be able to take an action.

If you are moving focus to the element for users without screen readers, or if the very first thing the page displays at page load is an alert of some sort, then this should be fine.

However, since you have provided no context and no examples, and given all the ways this can be done that are far worse than doing nothing, please ask yourself this:

Is the thing you want to announce…

1. …an alert or dialog?
2. …a control that already can receive keyboard focus?
3. …going to be given focus for all users, not just those with screen readers?

If you end up saying no twice then you should not do this.

If you can provide an example URL that shows what you want to do, then I am happy to help you get it working. Otherwise I fear you may be coding something that ends up creating a trap or barrier for screen reader users.