WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: In-page links and programmatic focus

for

From: Beranek, Nicholas
Date: Sep 13, 2016 11:11AM

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 REMOVED> on behalf of <EMAIL 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 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 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-technology-solutions
> E+R=O
> <http://www.benderconsult.com/our%20services/hightest-accessible-technology-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
> > > at http://webaim.org/discussion/archives
> > > > at http://webaim.org/discussion/archives
> > > > at http://webaim.org/discussion/archives
> > > > > >
--
*Whitney Quesenbery*
(lists) <EMAIL REMOVED>
(work) <EMAIL 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.