It’s imperative to make web content accessible to everyone. However, there is still a common misconception that providing access to information to people with disabilities only means making the same information available to everyone. Skipping content, or providing an option to skip it, is an important web accessibility tool for people with disabilities and for people who rely on assistive technologies to access content.
The most common reason that people skip content on website pages is to avoid repetitive content. For instance, menus and sidebars are often repeated on every page of a website, and users that rely on a screen reader can become frustrated when navigating through it over and over. When a screen reader user plans to navigate through content, they can press a hotkey to skip over content that they don't need. This situation is beneficial, as it allows users to locate relevant content more efficiently, saves time, and makes accessing content less frustrating.
Another common reason for people to skip content is to avoid content that is distracting. Advertisements, pop-ups, and other non-informative content can get in the way of users who want to focus on informational content. Users might skip information that they need accidentally if they do not know how to navigate around these distractions efficiently.
Furthermore, skipping content is necessary for people with cognitive disabilities, such as ADHD or dyslexia. People with these disabilities can have difficulty processing information continuously, and excess information can be overwhelming, resulting in cognitive overload. Giving users the option to skip content that can cause a distraction helps them access the content they need without overwhelming themselves.
Skipping content also means providing concise descriptions of non-textual content such as images, videos, and audio. This content can be incredibly challenging to understand for visually impaired or deaf users. Alt text descriptions for images, transcript for audio, or captions for video content help users determine if that content is relevant without having to access it entirely.
The most common solution is adding a series of invisible buttons that only appear near the top of the website when users are tabbing through elements of the website. While they’ll be invisible by default, screen-readers can still scan through the code of the website and find them. Buttons include:
These buttons will allow users to efficiently skip through website content.
The easiest solution is to add an accessibility widget to your website. These are paid services that give you a script to add to your website, which adds a widget to the corner of the screen that lets people adjust the styles of the website to meet their accessibility needs. Some also include the content skip buttons. Here are options that include the skip buttons:
There are two separate ways to add HTML to your website that’ll make navigating content easier. Both involve identifying the three main parts of a web page.
The three sections are:
There are a few ways to identify these sections using HTML code. You can use the following tags to structure your pages:
If these tags are not an option, you can convert existing tags to act as those roles by using:
An example of how they should appear using a <div> tag looks like this: <div role=”main”></div>
Either of these two options will identify sections of the website that’ll let people who use screen readers skip content without the need for buttons.
Adding buttons for the sole purpose of skipping content includes more HTML/CSS than without buttons. There are two essential pieces that need to be included.
The HTML for the buttons is relatively simple:
The HREF is pointed to the anchors we’re about to create. First, identify the tags that include the navigation, main body content, and footer of the website. They’re typically <div> tags. To set anchors to these sections, add an ID that matches the HREF of the links:
When someone clicks on the buttons, they’ll jump to these sections of the website, allowing users to skip content.
The class name is how specific styles are assigned to these buttons. For this documentation, I chose the class name “skip,” but you can make it whatever you feel is best. The goal of the CSS is to hide the buttons until they’re the focused element when tabbing and to make them look presentable visually.
<style>
.skip {opacity:0;} /* makes the buttons invisible by default */
.skip:focus {opacity:1;} /* makes the buttons visible when they’re the focus from tabbing */
</style>
To make the buttons more visually appealing, you can add various styles.
<style>
.skip {
opacity:0; /*makes button invisible */
position:fixed;left:10px;top:10px; /* positions the button in a fixed spot */
padding:10px 15px;border-radius:10px;background:#ddd; /* makes the link look like a button */
}
.skip:focus {opacity:1;} /* makes the buttons visible when they’re the focus from tabbing */
</style>
Feel free to style the link however is needed. Just keep in mind the color of the text and the color of the background should have an appropriate contrast ratio.
If you’re finding yourself frustrated or overwhelmed with trying to make accessibility changes to your website, contact DiscoverTec for a free consultation about our web accessibility remediation services.
Published on: January 08, 2024 by Ryan Brooks, Senior Web Marketer