Skip navigation link for single page site

Question

I have a site that is built as a single-page and all requests are made with AJAX. The pages are like site.com/#Page or site.com/#Page/Other.

Now, I need to implement the a Skip Navigation link in the site, but because the URLs start with # I cannot use a simple anchor. Is there any way to do it without changing all the URLs? Thanks.

Note: the skip navigation does at least 3 things: scrolls to that part of the page, focus on the element where the content starts (it can even be a not focusable element, such as an H1 title) and lets the screen readers know about the change.

Answer 1

You have two things to do:

• have a focusable element (use tabindex="-1" for the elements which are not focusable by default like h1)

• focus it using javascript/jQuery focus() method

Example:

document.getElementById("myEle").focus();

or

jQuery("#myEle").focus();