Menu
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.
689
A "skip navigation" link is implemented by placing a named anchor at the point on the page where the main content begins (e.g., ). Then, place a same-page link at the beginning of the page that targets this named anchor (e.g., Skip to main content).
As mentioned above, the skip-to-main-content link is visible only after being focused on. To test it, navigate to a11yproject.com and hit the Tab key. The skip-to-main-content link immediately becomes visible. After that, you can hit the Enter key to skip the navigation menu.
To try it out, refresh this page, and without clicking anything, hit the tab key – a white 'Skip to Content' link should appear at the top of the page which you can click on by hitting the Space or Enter key.
A skip link is a normal HTML <a> tag providing a link to a section of content or navigation within your web page. <a href="#navigation">skip to navigation</a>
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();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
