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.
>
> -----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/>;
> > > http://webaim.org/discussion/archives
> >
> > > > >


--
Work hard. Have fun. Make history.