WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: glen walker
Date: Mar 12, 2018 9:14AM

@Birkir, that certainly is one possibility but perhaps not a first (or
second) choice. Putting the focus on an element that is not interactive
can be confusing. If you want the heading read as part of the initial
focus, then aria-describedby could be used, although that's digressing from
Brandon's original question.

I think @JP is on the right track. Some browser's don't allow the focus to
move to an element if they're not natively focusable unless they have
tabindex=0 or tabindex=-1. Can you put the focus on an element inside of
your application container? An element that is natively focusable (<input>
or <button>, etc)?

Glen

On Mon, Mar 12, 2018 at 3:55 AM, Birkir R. Gunnarsson <
<EMAIL REMOVED> > wrote:

> 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.
> >
> >