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