Answer: Yes! In order to comply with Success Criterion 2.4.1 Bypass Blocks – you must provide a mechanism to “bypass blocks of content that are repeated on multiple Web pages. (Level A)”

One of the “sufficient techniques” recommended by the W3C for bypassing blocks is the use of skip links. You can read more about them here:

“The objective of this technique is to provide a mechanism to bypass blocks of material that are repeated on multiple Web pages by skipping directly to the main content of the Web page. The first interactive item in the Web page is a link to the beginning of the main content. Activating the link sets focus beyond the other content to the main content. This technique is most useful when a Web page has one main content area, rather than a set of content areas that are equally important.”

Adding a link at the top of each page that goes directly to the main content area

For a website to pass this success criteria, the following tests must be passed:

• Check that a link is the first focusable control on the Web page.
• Check that the description of the link communicates that it links to the main content.
• Check that the link is either always visible or visible when it has keyboard focus.
• Check that activating the link moves the focus to the main content.
• Check that after activating the link, the keyboard focus has moved to the main content.

Debate 1: NAME vs ID

Example 1 – using an NAME attribute as the target

<a href="#content">Skip to content (Press enter)</a>
<div>
	<a name="content">Content</a>
</div>

Example 1 – using an ID attribute as the target

<a href="#content">Skip to content (Press enter)</a>
<div id="content">
	Content
</div>

Many years ago, browsers like IE5 used to have trouble with linking to ID’s. For this reason, many Accessibiltiy Experts recommended using the NAME attribute. however, this practice is not recommended any more. In fact, if you are using HTML5, then using the NAME attribute will throw a warning.

Debate 2: Visible skip links

Ideally, skip links should be visible to all users. This allows not only screen reader users, but those who navigate with the keyboard to see these links immediately.

However, many clients do not like visible skip links on their sites. An acceptable alternative is to use skip links that become visible when it receives keyboard focus – ie when a user tabs through the page.

Examples

Here are three example pages – all using hidden skip links that become available once the user has given them focus.

• Skip example 01 – using “id” as a target – HTML5
• Skip example 02 – using “name” as a target – HTML4.01 strict
• Skip example 03 – using “name” as a target – HTML5

The CSS code used in these example:

.skipLink a
{
	position: absolute;
	left: -1000px;
	z-index: 2;
	margin: 0;
	padding: .5em;
	background: #fff;
	font-size: 200%;
	font-weight: bold;
	text-decoration: none;
}

.skipLink a:active,
.skipLink a:focus,
.skipLink a:hover
{
	display: inline;
	top: 0;
	left: 0;
	color: #fff;
	background: #000;
}

So, I’d love to hear from you!

1. What’s your favourite online responsive design article/tutorial?
2. Have you built a responsive design site recently? If so, what was the single most important lesson you learned during the process (plus a URL if you’re willing to share)?