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.
> >
> > -----Original Message-----
> > From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> > Brandon Keith Biggs
> > Sent: Monday, March 12, 2018 4:30 AM
> > To: WebAIM Discussion List < <EMAIL REMOVED> >
> > Subject: [WebAIM] Having an application element gain focus when the page
> > loads?
> >
> > Hello,
> > I have a page with:
> > <div role="application"></div>
> >
> > I'm trying to figure out how to properly have it gain focus when the page
> > loads (for both sighted and blind users), and pass all keyboard input to
> an
> > element.
> >
> > Leaving the element empty does not show anything on the screen with my
> > screen reader.
> > Having:
> > <input type="text" autofocus="true"/>
> > works, but then I have to fight against the screen reader saying "blank"
> > when arrow keys are pressed.
> > Does anyone know how to properly focus an application when the page
> loads?
> > There are other elements on the page, so putting the body as an
> application
> > doesn't work.
> > Thanks,
> >
> > Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
> > > > > archives at
> > http://webaim.org/discussion/archives
> > > >
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >