WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Having an application element gain focus when the page loads?

for

From: Birkir R. Gunnarsson
Date: Mar 12, 2018 3:55AM

Alternatively, place a heading element inside the application and give
it a tabindex of -1 and focus that element with JavaScript.
<div role=application" aria-label="my application">
<h4 id="blah" tabindex="-1">something descriptive</h4>
</div>

Are you sure you have to use role="aplication' on an element,
especially one that gains focus when page loads? I' be worried that
users get confused, stuck in application mode etc.

Maybe ou can even auto focus them to a button that navigates them out
of the application.

Of course it all depends what you are implementing, there are
perfectly valid use cases for this.



On 3/12/18, JP Jamous < <EMAIL REMOVED> > wrote:
> Brandon,
>
> Try this.
>
> <div id="application-region" role="application" tabindex="0"></div>
>
> Use a link to point to the id of the div or you can use a js function to
> place focus on it. Since it has a tabindex it should obtain the focus and
> the role should make the screen reader state Application Region.
>
>