E-mail List Archives
Thread: In-page links and programmatic focus
Number of posts in this thread: 13 (In chronological order)
From: Beranek, Nicholas
Date: Mon, Sep 12 2016 12:35PM
Subject: In-page links and programmatic focus
No previous message | Next message →
Hi folks,
My team and I are having a discussion about in-page links. We are trying to determine if it's necessary to programmatically shift focus to the target element once an in-page link is activated.
What behavior do you expect? If I have an anchor that targets an ID on the page, do I also need to add an element.focus() handler (with subsequent tabindex=-1 if necessary)?
Thank you,
Nick
--
Nick Beranek
Capital One
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
From: Jim Homme
Date: Mon, Sep 12 2016 12:39PM
Subject: Re: In-page links and programmatic focus
← Previous message | Next message →
Hi Nick,
By "focus" It sounds as though you mean change the focus of the computer. Based on this, I feel that you should just let the anchors do their work and avoid forcing focus to do anything but what the browser makes it do.
Jim
=========Jim Homme,
Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
= EMAIL ADDRESS REMOVED =
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Beranek, Nicholas
Sent: Monday, September 12, 2016 2:36 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] In-page links and programmatic focus
Hi folks,
My team and I are having a discussion about in-page links. We are trying to determine if it's necessary to programmatically shift focus to the target element once an in-page link is activated.
What behavior do you expect? If I have an anchor that targets an ID on the page, do I also need to add an element.focus() handler (with subsequent tabindex=-1 if necessary)?
Thank you,
Nick
--
Nick Beranek
Capital One
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
From: Paul Adam
Date: Mon, Sep 12 2016 1:58PM
Subject: Re: In-page links and programmatic focus
← Previous message | Next message →
If the in page link goes to a focusable element like with tabindex=-1
then keyboard focus will shift to that element properly. .focus()
should only be needed with JavaScript button type events like opening
a modal dialog.
http://pauljadam.com/demos/inpagelinks.html
Sent from my iPhone
> On Sep 12, 2016, at 1:35 PM, Beranek, Nicholas < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi folks,
>
> My team and I are having a discussion about in-page links. We are trying to determine if it's necessary to programmatically shift focus to the target element once an in-page link is activated.
>
> What behavior do you expect? If I have an anchor that targets an ID on the page, do I also need to add an element.focus() handler (with subsequent tabindex=-1 if necessary)?
>
> Thank you,
>
> Nick
>
> --
> Nick Beranek
> Capital One
> >
> The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
> > > >
From: Lovely, Brian (CONT)
Date: Mon, Sep 12 2016 2:07PM
Subject: Re: In-page links and programmatic focus
← Previous message | Next message →
What if the targeted element is not a focusable element, but a text node, like a footnote. Shouldn't you expect the footnote to be the next element to be read out? ...as opposed to before the in page link was activated, in which case the target of the in page link would not be the next element read out. Can focus be in one place and the virtual cursor in another?
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Paul Adam
Sent: Monday, September 12, 2016 3:58 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] In-page links and programmatic focus
If the in page link goes to a focusable element like with tabindex=-1 then keyboard focus will shift to that element properly. .focus() should only be needed with JavaScript button type events like opening a modal dialog.
http://pauljadam.com/demos/inpagelinks.html
Sent from my iPhone
> On Sep 12, 2016, at 1:35 PM, Beranek, Nicholas < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi folks,
>
> My team and I are having a discussion about in-page links. We are trying to determine if it's necessary to programmatically shift focus to the target element once an in-page link is activated.
>
> What behavior do you expect? If I have an anchor that targets an ID on the page, do I also need to add an element.focus() handler (with subsequent tabindex=-1 if necessary)?
>
> Thank you,
>
> Nick
>
> --
> Nick Beranek
> Capital One
> >
> The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
> > > archives at http://webaim.org/discussion/archives
> The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
From: Jared Smith
Date: Mon, Sep 12 2016 2:10PM
Subject: Re: In-page links and programmatic focus
← Previous message | Next message →
Paul Adam wrote:
>
> If the in page link goes to a focusable element like with tabindex=-1
> then keyboard focus will shift to that element properly.
This was not the case for a long time with Chrome and Safari (and IE
under some conditions) - thus many people used JavaScript to set
focus. I believe these bugs have been fixed within the last year or
so.
Jared
From: Jim Homme
Date: Mon, Sep 12 2016 2:13PM
Subject: Re: In-page links and programmatic focus
← Previous message | Next message →
Hi Brian,
The web page should scroll to the right place and virtual focus or virtual cursor should land correctly.
Jim
=========Jim Homme,
Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
= EMAIL ADDRESS REMOVED =
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Lovely, Brian (CONT)
Sent: Monday, September 12, 2016 4:08 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] In-page links and programmatic focus
What if the targeted element is not a focusable element, but a text node, like a footnote. Shouldn't you expect the footnote to be the next element to be read out? ...as opposed to before the in page link was activated, in which case the target of the in page link would not be the next element read out. Can focus be in one place and the virtual cursor in another?
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Paul Adam
Sent: Monday, September 12, 2016 3:58 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] In-page links and programmatic focus
If the in page link goes to a focusable element like with tabindex=-1 then keyboard focus will shift to that element properly. .focus() should only be needed with JavaScript button type events like opening a modal dialog.
http://pauljadam.com/demos/inpagelinks.html
Sent from my iPhone
> On Sep 12, 2016, at 1:35 PM, Beranek, Nicholas < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi folks,
>
> My team and I are having a discussion about in-page links. We are trying to determine if it's necessary to programmatically shift focus to the target element once an in-page link is activated.
>
> What behavior do you expect? If I have an anchor that targets an ID on the page, do I also need to add an element.focus() handler (with subsequent tabindex=-1 if necessary)?
>
> Thank you,
>
> Nick
>
> --
> Nick Beranek
> Capital One
> >
> The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
> > > archives at http://webaim.org/discussion/archives
> The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
From: Bryan Garaventa
Date: Mon, Sep 12 2016 2:42PM
Subject: Re: In-page links and programmatic focus
← Previous message | Next message →
Some of these bugs still persist, especially on pages such as single page apps or those that include significant client side scripting, largely because the use of an id hash changes the page url and acts almost like a page refresh in some cases. I saw this recently with a modal that included same page links within it.
The use of the JavaScript focus() method is still the most reliable method for doing this reliably across all browsers, plus a return false in the script to prevent any automatic submission relating to the clicking of native links that may inadvertently refresh the page.
The addition of tabindex="-1" on any targeted static element is still needed to ensure that Tab can be pressed from that location to proceed to the next active element in the tab order, otherwise the visual focus may scroll but keyboard functionality will still be impaired.
Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jared Smith
Sent: Monday, September 12, 2016 1:11 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] In-page links and programmatic focus
Paul Adam wrote:
>
> If the in page link goes to a focusable element like with tabindex=-1
> then keyboard focus will shift to that element properly.
This was not the case for a long time with Chrome and Safari (and IE under some conditions) - thus many people used JavaScript to set focus. I believe these bugs have been fixed within the last year or so.
Jared
From: Jim Homme
Date: Mon, Sep 12 2016 2:48PM
Subject: Re: In-page links and programmatic focus
← Previous message | Next message →
Hi,
Where can JavaScript be found that shows this technique?
Thanks.
Jim
=========Jim Homme,
Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
= EMAIL ADDRESS REMOVED =
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Monday, September 12, 2016 4:43 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] In-page links and programmatic focus
Some of these bugs still persist, especially on pages such as single page apps or those that include significant client side scripting, largely because the use of an id hash changes the page url and acts almost like a page refresh in some cases. I saw this recently with a modal that included same page links within it.
The use of the JavaScript focus() method is still the most reliable method for doing this reliably across all browsers, plus a return false in the script to prevent any automatic submission relating to the clicking of native links that may inadvertently refresh the page.
The addition of tabindex="-1" on any targeted static element is still needed to ensure that Tab can be pressed from that location to proceed to the next active element in the tab order, otherwise the visual focus may scroll but keyboard functionality will still be impaired.
Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jared Smith
Sent: Monday, September 12, 2016 1:11 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] In-page links and programmatic focus
Paul Adam wrote:
>
> If the in page link goes to a focusable element like with tabindex=-1
> then keyboard focus will shift to that element properly.
This was not the case for a long time with Chrome and Safari (and IE under some conditions) - thus many people used JavaScript to set focus. I believe these bugs have been fixed within the last year or so.
Jared
From: Bryan Garaventa
Date: Mon, Sep 12 2016 3:02PM
Subject: Re: In-page links and programmatic focus
← Previous message | Next message →
The following shows the basic concepts.
<a href="#st1" onclick="document.getElementById(this.getAttribute('href').slice(1)).focus(); return false;"> Skip to something </a>
<div> Stuff to skip. </div>
<h2 id="st1" tabindex="-1"> Something </h2>
Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jim Homme
Sent: Monday, September 12, 2016 1:49 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] In-page links and programmatic focus
Hi,
Where can JavaScript be found that shows this technique?
Thanks.
Jim
=========Jim Homme,
Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
= EMAIL ADDRESS REMOVED =
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Bryan Garaventa
Sent: Monday, September 12, 2016 4:43 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] In-page links and programmatic focus
Some of these bugs still persist, especially on pages such as single page apps or those that include significant client side scripting, largely because the use of an id hash changes the page url and acts almost like a page refresh in some cases. I saw this recently with a modal that included same page links within it.
The use of the JavaScript focus() method is still the most reliable method for doing this reliably across all browsers, plus a return false in the script to prevent any automatic submission relating to the clicking of native links that may inadvertently refresh the page.
The addition of tabindex="-1" on any targeted static element is still needed to ensure that Tab can be pressed from that location to proceed to the next active element in the tab order, otherwise the visual focus may scroll but keyboard functionality will still be impaired.
Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jared Smith
Sent: Monday, September 12, 2016 1:11 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] In-page links and programmatic focus
Paul Adam wrote:
>
> If the in page link goes to a focusable element like with tabindex=-1
> then keyboard focus will shift to that element properly.
This was not the case for a long time with Chrome and Safari (and IE under some conditions) - thus many people used JavaScript to set focus. I believe these bugs have been fixed within the last year or so.
Jared
From: Whitney Quesenbery
Date: Tue, Sep 13 2016 11:03AM
Subject: Re: In-page links and programmatic focus
← Previous message | Next message →
I appreciate the technical knowledge here,
But I'm baffled by the question.
If a user clicks on a link, they should go to that link.
It doesn't matter what it points to
How the heck can someone create a browser that breaks the most basic
construct in the web: the link?
W
On Mon, Sep 12, 2016 at 5:03 PM Bryan Garaventa <
= EMAIL ADDRESS REMOVED = > wrote:
> The following shows the basic concepts.
>
>
> <a href="#st1"
> onclick="document.getElementById(this.getAttribute('href').slice(1)).focus();
> return false;"> Skip to something </a>
>
> <div> Stuff to skip. </div>
>
> <h2 id="st1" tabindex="-1"> Something </h2>
>
>
> Bryan Garaventa
> Accessibility Fellow
> SSB BART Group, Inc.
> = EMAIL ADDRESS REMOVED =
> 415.624.2709 (o)
> www.SSBBartGroup.com
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Jim Homme
> Sent: Monday, September 12, 2016 1:49 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] In-page links and programmatic focus
>
> Hi,
> Where can JavaScript be found that shows this technique?
>
> Thanks.
>
> Jim
>
>
> =========> Jim Homme,
> Accessibility Consultant,
> Bender HighTest Accessibility Team
> Bender Consulting Services, Inc.,
> 412-787-8567,
> = EMAIL ADDRESS REMOVED =
>
> http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
> E+R=O
> <http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutionsE+R=O>;
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Bryan Garaventa
> Sent: Monday, September 12, 2016 4:43 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] In-page links and programmatic focus
>
> Some of these bugs still persist, especially on pages such as single page
> apps or those that include significant client side scripting, largely
> because the use of an id hash changes the page url and acts almost like a
> page refresh in some cases. I saw this recently with a modal that included
> same page links within it.
>
> The use of the JavaScript focus() method is still the most reliable method
> for doing this reliably across all browsers, plus a return false in the
> script to prevent any automatic submission relating to the clicking of
> native links that may inadvertently refresh the page.
>
> The addition of tabindex="-1" on any targeted static element is still
> needed to ensure that Tab can be pressed from that location to proceed to
> the next active element in the tab order, otherwise the visual focus may
> scroll but keyboard functionality will still be impaired.
>
> Bryan Garaventa
> Accessibility Fellow
> SSB BART Group, Inc.
> = EMAIL ADDRESS REMOVED =
> 415.624.2709 (o)
> www.SSBBartGroup.com
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Jared Smith
> Sent: Monday, September 12, 2016 1:11 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] In-page links and programmatic focus
>
> Paul Adam wrote:
> >
> > If the in page link goes to a focusable element like with tabindex=-1
> > then keyboard focus will shift to that element properly.
>
> This was not the case for a long time with Chrome and Safari (and IE under
> some conditions) - thus many people used JavaScript to set focus. I believe
> these bugs have been fixed within the last year or so.
>
> Jared
> > > at http://webaim.org/discussion/archives
> > > > at http://webaim.org/discussion/archives
> > > > at http://webaim.org/discussion/archives
> > > > > >
--
*Whitney Quesenbery*
(lists) = EMAIL ADDRESS REMOVED =
(work) = EMAIL ADDRESS REMOVED =
From: Beranek, Nicholas
Date: Tue, Sep 13 2016 11:11AM
Subject: Re: In-page links and programmatic focus
← Previous message | Next message →
Ok, let me break this down. The anchor has an href that points to an ID or name on the page. The ID in the value is preceded by the pound sign (#). The default browser functionality is to shift visual focus via scrolling the webpage to the element that was targeted. Other browser behavior includes either shifting focus to the <body> element and have the next Tab stop be a first focusable element as a child or sibling to the target element.
Take a footnote, for example. If you go to a Wikipedia article that has citations, when you activate the link it will send you to the bottom of the page to the citation itself.
Paul Adam shared an example of this. Focus management is different in each browser. The question here is do we use JavaScript to programmatically shift focus to the element in conjunction with the href="#id-of-element"?
I hope this explains it a little better.
Nick
--
Nick Beranek
Digital Accessibility Team
On 9/13/16, 1:03 PM, "WebAIM-Forum on behalf of Whitney Quesenbery" < = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = > wrote:
I appreciate the technical knowledge here,
But I'm baffled by the question.
If a user clicks on a link, they should go to that link.
It doesn't matter what it points to
How the heck can someone create a browser that breaks the most basic
construct in the web: the link?
W
On Mon, Sep 12, 2016 at 5:03 PM Bryan Garaventa <
= EMAIL ADDRESS REMOVED = > wrote:
> The following shows the basic concepts.
>
>
> <a href="#st1"
> onclick="document.getElementById(this.getAttribute('href').slice(1)).focus();
> return false;"> Skip to something </a>
>
> <div> Stuff to skip. </div>
>
> <h2 id="st1" tabindex="-1"> Something </h2>
>
>
> Bryan Garaventa
> Accessibility Fellow
> SSB BART Group, Inc.
> = EMAIL ADDRESS REMOVED =
> 415.624.2709 (o)
> www.SSBBartGroup.com
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Jim Homme
> Sent: Monday, September 12, 2016 1:49 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] In-page links and programmatic focus
>
> Hi,
> Where can JavaScript be found that shows this technique?
>
> Thanks.
>
> Jim
>
>
> =========> Jim Homme,
> Accessibility Consultant,
> Bender HighTest Accessibility Team
> Bender Consulting Services, Inc.,
> 412-787-8567,
> = EMAIL ADDRESS REMOVED =
>
> http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
> E+R=O
> <http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutionsE+R=O>;
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Bryan Garaventa
> Sent: Monday, September 12, 2016 4:43 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] In-page links and programmatic focus
>
> Some of these bugs still persist, especially on pages such as single page
> apps or those that include significant client side scripting, largely
> because the use of an id hash changes the page url and acts almost like a
> page refresh in some cases. I saw this recently with a modal that included
> same page links within it.
>
> The use of the JavaScript focus() method is still the most reliable method
> for doing this reliably across all browsers, plus a return false in the
> script to prevent any automatic submission relating to the clicking of
> native links that may inadvertently refresh the page.
>
> The addition of tabindex="-1" on any targeted static element is still
> needed to ensure that Tab can be pressed from that location to proceed to
> the next active element in the tab order, otherwise the visual focus may
> scroll but keyboard functionality will still be impaired.
>
> Bryan Garaventa
> Accessibility Fellow
> SSB BART Group, Inc.
> = EMAIL ADDRESS REMOVED =
> 415.624.2709 (o)
> www.SSBBartGroup.com
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Jared Smith
> Sent: Monday, September 12, 2016 1:11 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] In-page links and programmatic focus
>
> Paul Adam wrote:
> >
> > If the in page link goes to a focusable element like with tabindex=-1
> > then keyboard focus will shift to that element properly.
>
> This was not the case for a long time with Chrome and Safari (and IE under
> some conditions) - thus many people used JavaScript to set focus. I believe
> these bugs have been fixed within the last year or so.
>
> Jared
> > > at http://webaim.org/discussion/archives
> > > > at http://webaim.org/discussion/archives
> > > > at http://webaim.org/discussion/archives
> > > > > >
--
*Whitney Quesenbery*
(lists) = EMAIL ADDRESS REMOVED =
(work) = EMAIL ADDRESS REMOVED =
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
From: Tim Harshbarger
Date: Tue, Sep 13 2016 11:56AM
Subject: Re: In-page links and programmatic focus
← Previous message | Next message →
Yes, I agree.
This is one of those types of bugs that does not quite make sense. I am sure new browser versions undergo testing before their public release. You would think testing the functionality of links, including in-page links, would be a fundamental part of that testing and would be fixed when it was found to be broken. It's not even really an accessibility specific feature of HTML.
----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Whitney Quesenbery
Sent: Tuesday, September 13, 2016 12:03 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] In-page links and programmatic focus
I appreciate the technical knowledge here,
But I'm baffled by the question.
If a user clicks on a link, they should go to that link.
It doesn't matter what it points to
How the heck can someone create a browser that breaks the most basic
construct in the web: the link?
W
On Mon, Sep 12, 2016 at 5:03 PM Bryan Garaventa <
= EMAIL ADDRESS REMOVED = > wrote:
> The following shows the basic concepts.
>
>
> <a href="#st1"
> onclick="document.getElementById(this.getAttribute('href').slice(1)).focus();
> return false;"> Skip to something </a>
>
> <div> Stuff to skip. </div>
>
> <h2 id="st1" tabindex="-1"> Something </h2>
>
>
> Bryan Garaventa
> Accessibility Fellow
> SSB BART Group, Inc.
> = EMAIL ADDRESS REMOVED =
> 415.624.2709 (o)
> www.SSBBartGroup.com
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Jim Homme
> Sent: Monday, September 12, 2016 1:49 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] In-page links and programmatic focus
>
> Hi,
> Where can JavaScript be found that shows this technique?
>
> Thanks.
>
> Jim
>
>
> =========> Jim Homme,
> Accessibility Consultant,
> Bender HighTest Accessibility Team
> Bender Consulting Services, Inc.,
> 412-787-8567,
> = EMAIL ADDRESS REMOVED =
>
> http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
> E+R=O
> <http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutionsE+R=O>;
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Bryan Garaventa
> Sent: Monday, September 12, 2016 4:43 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] In-page links and programmatic focus
>
> Some of these bugs still persist, especially on pages such as single page
> apps or those that include significant client side scripting, largely
> because the use of an id hash changes the page url and acts almost like a
> page refresh in some cases. I saw this recently with a modal that included
> same page links within it.
>
> The use of the JavaScript focus() method is still the most reliable method
> for doing this reliably across all browsers, plus a return false in the
> script to prevent any automatic submission relating to the clicking of
> native links that may inadvertently refresh the page.
>
> The addition of tabindex="-1" on any targeted static element is still
> needed to ensure that Tab can be pressed from that location to proceed to
> the next active element in the tab order, otherwise the visual focus may
> scroll but keyboard functionality will still be impaired.
>
> Bryan Garaventa
> Accessibility Fellow
> SSB BART Group, Inc.
> = EMAIL ADDRESS REMOVED =
> 415.624.2709 (o)
> www.SSBBartGroup.com
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Jared Smith
> Sent: Monday, September 12, 2016 1:11 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] In-page links and programmatic focus
>
> Paul Adam wrote:
> >
> > If the in page link goes to a focusable element like with tabindex=-1
> > then keyboard focus will shift to that element properly.
>
> This was not the case for a long time with Chrome and Safari (and IE under
> some conditions) - thus many people used JavaScript to set focus. I believe
> these bugs have been fixed within the last year or so.
>
> Jared
> > > at http://webaim.org/discussion/archives
> > > > at http://webaim.org/discussion/archives
> > > > at http://webaim.org/discussion/archives
> > > > > >
--
*Whitney Quesenbery*
(lists) = EMAIL ADDRESS REMOVED =
(work) = EMAIL ADDRESS REMOVED =
From: Bryan Garaventa
Date: Tue, Sep 13 2016 12:04PM
Subject: Re: In-page links and programmatic focus
← Previous message | No next message
Just to clarify, the confusion here isn't whether focus moves, but when and to which elements. Non-focusable elements cannot receive focus.
E.G If you have a same page link that points to the ID of another focusable element like a link or button, then focus will move, because these elements are natively focusable in the browser.
However, static elements like headings, span tags, etc, are not focusable in the browser. Only when the tabindex attribute is added to such static elements do these elements become focusable in the browser, allowing focus to move to them. This is why tabindex="-1" is still needed in these cases.
For static web pages that don't rely on comprehensive client side scripting, typically this is enough, but when inadvertent page refreshes occur when the page url changes, some ATs have trouble dealing with this and the focus movement at the same time, in which case the JavaScript method is still the most reliable across all browsers and platforms.
Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com
-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Tim Harshbarger
Sent: Tuesday, September 13, 2016 10:56 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] In-page links and programmatic focus
Yes, I agree.
This is one of those types of bugs that does not quite make sense. I am sure new browser versions undergo testing before their public release. You would think testing the functionality of links, including in-page links, would be a fundamental part of that testing and would be fixed when it was found to be broken. It's not even really an accessibility specific feature of HTML.
----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Whitney Quesenbery
Sent: Tuesday, September 13, 2016 12:03 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] In-page links and programmatic focus
I appreciate the technical knowledge here, But I'm baffled by the question.
If a user clicks on a link, they should go to that link.
It doesn't matter what it points to
How the heck can someone create a browser that breaks the most basic construct in the web: the link?
W
On Mon, Sep 12, 2016 at 5:03 PM Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
> The following shows the basic concepts.
>
>
> <a href="#st1"
> onclick="document.getElementById(this.getAttribute('href').slice(1)).f
> ocus(); return false;"> Skip to something </a>
>
> <div> Stuff to skip. </div>
>
> <h2 id="st1" tabindex="-1"> Something </h2>
>
>
> Bryan Garaventa
> Accessibility Fellow
> SSB BART Group, Inc.
> = EMAIL ADDRESS REMOVED =
> 415.624.2709 (o)
> www.SSBBartGroup.com
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Jim Homme
> Sent: Monday, September 12, 2016 1:49 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] In-page links and programmatic focus
>
> Hi,
> Where can JavaScript be found that shows this technique?
>
> Thanks.
>
> Jim
>
>
> =========> Jim Homme,
> Accessibility Consultant,
> Bender HighTest Accessibility Team
> Bender Consulting Services, Inc.,
> 412-787-8567,
> = EMAIL ADDRESS REMOVED =
>
> http://www.benderconsult.com/our%20services/hightest-accessible-techno
> logy-solutions
> E+R=O
> <http://www.benderconsult.com/our%20services/hightest-accessible-techn
> ology-solutionsE+R=O>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Bryan Garaventa
> Sent: Monday, September 12, 2016 4:43 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] In-page links and programmatic focus
>
> Some of these bugs still persist, especially on pages such as single
> page apps or those that include significant client side scripting,
> largely because the use of an id hash changes the page url and acts
> almost like a page refresh in some cases. I saw this recently with a
> modal that included same page links within it.
>
> The use of the JavaScript focus() method is still the most reliable
> method for doing this reliably across all browsers, plus a return
> false in the script to prevent any automatic submission relating to
> the clicking of native links that may inadvertently refresh the page.
>
> The addition of tabindex="-1" on any targeted static element is still
> needed to ensure that Tab can be pressed from that location to proceed
> to the next active element in the tab order, otherwise the visual
> focus may scroll but keyboard functionality will still be impaired.
>
> Bryan Garaventa
> Accessibility Fellow
> SSB BART Group, Inc.
> = EMAIL ADDRESS REMOVED =
> 415.624.2709 (o)
> www.SSBBartGroup.com
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Jared Smith
> Sent: Monday, September 12, 2016 1:11 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] In-page links and programmatic focus
>
> Paul Adam wrote:
> >
> > If the in page link goes to a focusable element like with
> > tabindex=-1 then keyboard focus will shift to that element properly.
>
> This was not the case for a long time with Chrome and Safari (and IE
> under some conditions) - thus many people used JavaScript to set
> focus. I believe these bugs have been fixed within the last year or so.
>
> Jared
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >
--
*Whitney Quesenbery*
(lists) = EMAIL ADDRESS REMOVED =
(work) = EMAIL ADDRESS REMOVED =