Our Blog

Thoughts, news, insights and sometimes just random musings.
2 minutes reading time (373 words)

WCAG 2.4.1: Bypass Blocks


Recently we've been discussing the various elements of Principle 2, which covers ways you can make your site more easily operable for users experiencing certain visual, cognitive, or physical limitations, as well as those prone to seizures. We are now moving onto the last set of rules in Principle 2, Guideline 2.4, in which we'll go over navigability and users' ability to locate content.

WCAG 2.4.1 Bypass Blocks: What the Heck Is That?

Imagine that you click over to your favorite news site to check in on the day's headlines.

[Source: https://www.nytimes.com/]

As you navigate between the landing page and various top stories, you may begin to notice the same blocks of content appearing over and over again, such as an advertising frame, heading graphic, or page menu.

You probably don't even notice these elements half the time, even though they keep appearing on your screen over and over again. That's because sighted users possess the visual context necessary to quickly spot the main content on a page. However, anyone using a screen reader may be forced to tab through these same blocks of content repeatedly in order to get to the part they're looking for. I don't know about you, but that sounds pretty tedious to me.

For this reason, WCAG 2.4.1 asks that you ensure a mechanism is in place on your site which allows users to skip over content blocks that repeat on multiple pages.

What You Need to Do

Thankfully, most web browsers already include keyboard shortcuts for users to shift focus to the top of a page, so in many cases you won't have to worry about providing a fix yourself. However, if you find that this is not the case, there is a fairly easy solution you can try. If you include links at the top of a page that navigate to the different content blocks to be found there, users will be able to skip directly to whatever they're looking for.

You might recall that Wikipedia does this on their site.

[Source: https://en.wikipedia.org/wiki/Teenage_Mutant_Ninja_Turtles]

By putting hyperlinks into a table of contents, Wikipedia makes it simple for any user to quickly learn about the original Teenage Mutant Ninja Turtles TV series.