WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: In-page links and programmatic focus

for

From: Bryan Garaventa
Date: Sep 13, 2016 12:04PM

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 REMOVED>
415.624.2709 (o)
www.SSBBartGroup.com

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Tim Harshbarger
Sent: Tuesday, September 13, 2016 10:56 AM
To: WebAIM Discussion List < <EMAIL 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 REMOVED> ] On Behalf Of Whitney Quesenbery
Sent: Tuesday, September 13, 2016 12:03 PM
To: WebAIM Discussion List < <EMAIL 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 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 REMOVED>
> 415.624.2709 (o)
> www.SSBBartGroup.com
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Jim Homme
> Sent: Monday, September 12, 2016 1:49 PM
> To: WebAIM Discussion List < <EMAIL 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 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 REMOVED> ] On
> Behalf Of Bryan Garaventa
> Sent: Monday, September 12, 2016 4:43 PM
> To: WebAIM Discussion List < <EMAIL 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 REMOVED>
> 415.624.2709 (o)
> www.SSBBartGroup.com
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Jared Smith
> Sent: Monday, September 12, 2016 1:11 PM
> To: WebAIM Discussion List < <EMAIL 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 REMOVED>
(work) <EMAIL REMOVED>