E-mail List Archives
Thread: Having an application element gain focus when the page loads?
Number of posts in this thread: 10 (In chronological order)
From: Brandon Keith Biggs
Date: Mon, Mar 12 2018 3:30AM
Subject: Having an application element gain focus when the page loads?
No previous message | Next message →
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/>;
From: JP Jamous
Date: Mon, Mar 12 2018 3:40AM
Subject: Re: Having an application element gain focus when the pageloads?
← Previous message | Next message →
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.
From: Birkir R. Gunnarsson
Date: Mon, Mar 12 2018 3:55AM
Subject: Re: Having an application element gain focus when the page loads?
← Previous message | Next message →
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 ADDRESS 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.
>
>
From: glen walker
Date: Mon, Mar 12 2018 9:14AM
Subject: Re: Having an application element gain focus when the page loads?
← Previous message | Next message →
@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 ADDRESS 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 ADDRESS 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.
> >
> >
From: Patrick H. Lauke
Date: Mon, Mar 12 2018 10:24AM
Subject: Re: Having an application element gain focus when the page loads?
← Previous message | Next message →
On 12/03/2018 09:30, Brandon Keith Biggs wrote:
> 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.
Assuming the whole page is an application, why not add
role="application" directly to the <body> ? Or does the page also
contain other things that are outside of the application area, but you'd
want THAT to be accessed first?
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Birkir R. Gunnarsson
Date: Mon, Mar 12 2018 10:37AM
Subject: Re: Having an application element gain focus when the page loads?
← Previous message | Next message →
You can focus any element if you add tabindex="-1" to it.
That is the standard approach for the targets of skip links, for
instance, and one of the approaches for modal dialogs (with a lot of
text that we expect the screen reader user to explore before deciding
on an action).
The difference is that there is no "explore" mode in this case, so you
may bbe right there.
Primarily I am thinking, why use the application role at all. It
almost always presents huge potential accessibility issues and it must
be coded very carefully to enable screen reader discovery of all the
data and keyboard access to all the data.
Well, in short, I'm happy I am not responsible for making this thing
accessible *grin*.
On 3/12/18, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
> On 12/03/2018 09:30, Brandon Keith Biggs wrote:
>> 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.
>
> Assuming the whole page is an application, why not add
> role="application" directly to the <body> ? Or does the page also
> contain other things that are outside of the application area, but you'd
> want THAT to be accessed first?
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > >
--
Work hard. Have fun. Make history.
From: Jonathan Avila
Date: Mon, Mar 12 2018 10:44AM
Subject: Re: Having an application element gain focus when the page loads?
← Previous message | Next message →
> Or does the page also contain other things that are outside of the application area, but you'd want THAT to be accessed first?
I would strongly advise against using the role application on a body element. The application role should only be reserved for specific widgets where no other role fits and keys need to be passed through from the screen reader to the content. Use of application mode is often misused and limits the user's access and in my opinion often is a flag for an application that was designed by people who do not understand who users who are blind or visually impaired use screen readers, quick navigation keys, and other features.
There may be some specific situations where it is appropriate for the body element but it would be extremely limited.
Jonathan
Jonathan Avila
Chief Accessibility Officer
Level Access
= EMAIL ADDRESS REMOVED =
703.637.8957 office
Visit us online:
Website | Twitter | Facebook | LinkedIn | Blog
See you at CSUN in March!
From: Brandon Keith Biggs
Date: Mon, Mar 12 2018 11:07AM
Subject: Re: Having an application element gain focus when the page loads?
← Previous message | Next message →
Hello,
The app is similar to a game, where all the keyboard input needs to be
passed to the element.
<div role="application">
<input type="button" autofocus="true"/>
</div>
seems to work really well.
Is there an advantage to using tabindex rather than autofocus?
Thanks,
Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
On Mon, Mar 12, 2018 at 9:44 AM, Jonathan Avila < = EMAIL ADDRESS REMOVED = >
wrote:
> > Or does the page also contain other things that are outside of the
> application area, but you'd want THAT to be accessed first?
>
> I would strongly advise against using the role application on a body
> element. The application role should only be reserved for specific widgets
> where no other role fits and keys need to be passed through from the screen
> reader to the content. Use of application mode is often misused and limits
> the user's access and in my opinion often is a flag for an application that
> was designed by people who do not understand who users who are blind or
> visually impaired use screen readers, quick navigation keys, and other
> features.
>
> There may be some specific situations where it is appropriate for the body
> element but it would be extremely limited.
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> Level Access
> = EMAIL ADDRESS REMOVED =
> 703.637.8957 office
>
> Visit us online:
> Website | Twitter | Facebook | LinkedIn | Blog
>
> See you at CSUN in March!
>
>
From: Wolfgang Berndorfer
Date: Mon, Mar 12 2018 2:22PM
Subject: Re: Having an application element gain focus when the pageloads?
← Previous message | Next message →
Consider: Autofocus navigates me, while I navigate to tabindex. I think,
autofocus should be used very rarely. Are there relevant informations or
functionalities above the element with autofocus? If Yes, IÂd have to
navigate out of the autofocussed element to gain them.
Wolfgang
-----Ursprüngliche Nachricht-----
Von: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] Im Auftrag
von Brandon Keith Biggs
Gesendet: Montag, 12. März 2018 18:08
An: WebAIM Discussion List
Betreff: Re: [WebAIM] Having an application element gain focus when the
pageloads?
Hello,
The app is similar to a game, where all the keyboard input needs to be
passed to the element.
<div role="application">
<input type="button" autofocus="true"/>
</div>
seems to work really well.
Is there an advantage to using tabindex rather than autofocus?
Thanks,
Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
On Mon, Mar 12, 2018 at 9:44 AM, Jonathan Avila < = EMAIL ADDRESS REMOVED = >
wrote:
> > Or does the page also contain other things that are outside of the
> application area, but you'd want THAT to be accessed first?
>
> I would strongly advise against using the role application on a body
> element. The application role should only be reserved for specific
widgets
> where no other role fits and keys need to be passed through from the
screen
> reader to the content. Use of application mode is often misused and
limits
> the user's access and in my opinion often is a flag for an application
that
> was designed by people who do not understand who users who are blind or
> visually impaired use screen readers, quick navigation keys, and other
> features.
>
> There may be some specific situations where it is appropriate for the body
> element but it would be extremely limited.
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> Level Access
> = EMAIL ADDRESS REMOVED =
> 703.637.8957 office
>
> Visit us online:
> Website | Twitter | Facebook | LinkedIn | Blog
>
> See you at CSUN in March!
>
>
From: Tim Harshbarger
Date: Tue, Mar 13 2018 10:04AM
Subject: Re: Having an application element gain focus when the pageloads?
← Previous message | No next message
I would only use autofocus for elements that can receive keyboard focus and that I want to be part of the normal tab order.
I would only use tabindex="-1" if I wanted to be able to move focus to the element with javascript, but I didn't want it to be part of the normal tab order.
So autofocus would probably be the better choice if you were wanting to move keyboard focus to a specific button or field in a modal. You would only put tabindex="-1" on the div for the modal if you wanted keyboard focus to be moved there when the modal opens.
I am not sure if I explained that well.
Thanks,
Tim