WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Having an application element gain focus when the pageloads?

for

From: JP Jamous
Date: Mar 12, 2018 3:40AM

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/>;