Join us for Building ADA-Compliant WordPress Sites, our new workshop on web accessibility. It’s live on Nov. 15, and the recording and transcript will be available shortly thereafter if you can’t make it live. Register for the workshop.
Making the web accessible makes it better for all of us. But if the idea of making sure your site is WCAG compliant seems daunting to you, we’re here to help! In our upcoming Accessibility 101 workshop, we’ll discuss lots of different ways you can ensure your websites are user-friendly and accessible to everyone. In the meantime, here is a bite-sized accessibility standard that you can implement on your site today, with just a few lines of code!
What is a Skip Link?
Skip links are a visually hidden link, usually placed in the header somewhere above your navigation menu, that allows visitors to skip over the navigation menu straight to the content of the page.
“The idea is simple enough: provide a link at the top of the page that, when activated, jumps the user to the beginning of the main content area.”
webaim.org
Why are they important?
Unless your visitor is given a way to skip over the navigation, the entire menu is going to be read on every single page. That can be a tedious, verbose, and lengthy process, especially with complex nav menus. It’s also pretty annoying.
Who benefits from them?
Low- or no-vision visitors who rely on screen readers to consume content will benefit greatly from skip links. Visitors who use keyboards or assistive input devices (other than computer mice) to navigate can also benefit by being able to send tab focus directly to the main content of the site and continue browsing from there.
How do I implement it on my website?
Our Understrap theme has a skip link implemented by default, utilizing the baked-in Bootstrap 5 .visually-hidden-focusable class:
<!-- ******************* The Navbar Area ******************* -->
<header id="wrapper-navbar">
<a class="skip-link visually-hidden-focusable" href="#content">
<?php esc_html_e( 'Skip to content', 'understrap' ); ?>
</a>
<?php get_template_part( 'global-templates/navbar', $navbar_type . '-' . $bootstrap_version ); ?>
</header><!-- #wrapper-navbar end -->Code language: HTML, XML (xml)When tab focus is set to the link, it can either remain visually hidden or become visible with a :focus-visible style applied (usually an outline of contrasting color). WebAIM uses highly contrasting style to make their focused skip link visible and obvious, while keeping true to their branding style:
How can I learn more about this?
Sign up to join our accessibility 101 workshop coming up in November to learn more about this and many other tips and tricks for building ADA and WCAG compliant WordPress websites.
