Finding the main content when you can’t see

If you can see, you can find the main content of any web page, immediately and easily, just by casting your eyes down the page. It might be text or background colour; text size or whitespace. There’s always a visual clue to let you know where to start reading.

But what if you’re sitting in front of a black screen? What happens if you are a screenreader user who can’t see the page at all? Forcing a screenreader user to sequentially read or tab through all that header content, listening to endless navigation links, it’s just not nice. You are, to say the least, going to be a bit miffed!
Then, eureka! , there’s the main content … the reason for following that link.

Now multiply this experience for every page on your website, and it’s easy to see that you’ve provided users with a very frustrating experience. Miffed users may abandon using your site altogether, and find a more accessible competitor site.
They’ll get the information or service they need elsewhere, contribute there, or make their purchases there … They won’t be back until a friend tells them your site is better.

Why don’t they let you know? Right now, let’s just not go there. It’s a vicious cycle. Inaccessibility goes deep. There are likely to be a lot of attempts to find the contact form before at last it’s reached . . . and inaccessible!

The cure

The accessibility rule is that you provide a mechanism to find the main content. This is under Success Criterion 2.4.1 Bypass Blocks:

Skip to content link

Skip link visible on focus

You’ve probably seen a “Skip to main content” link on some websites. These are internal links to a point in the page, often to main content:

<a id="main_content">

Or just to an ordinary element with an id, such as

<main id="main_content">

Or

<h1 id="main_heading">>

In either case, activating the link will move focus to the element specified, allowing screenreaders to move directly into reading the main content.

Some general rules and suggestions are:

  • The skip link should always be, if not the first item of content on the webpage, the first focusable control on the page.
  • Consider making the link permanently visible on the webpage. If not, it should become visible when it receives focus, as many keyboard-only users are sighted. Without it being visible, these users would tab into the page, and not only lose sight of any visible focus indicator, but also not realize that this functionality is available.
  • In general, only ever use one skip link, otherwise you are somewhat defeating the object for users who want to interact with header content! An exception might be a blog page with two skip links; one to the blog post, the other to the comments.

Semantically grouping blocks

Screenreaders interrogate a webpage’s DOM. They use the semantic markup to help their users understand the structure and content of the page. They also have key commands to help users navigate around page content, based on this structured information. For instance, each of the following techniques will make your pages more accessible:

  • <h1> heading: Screenreaders have a command that gets users directly to an <h1> heading. If the <h1> heading is used consistently across the site to mark the beginning of the main content, it gets massive brownie points from blind site visitors. They can go straight to the beginning from wherever they happen to be on the page. No need to try to find some pesky back to top link.
  • <main> element: Wrap the main content with this element. Ideally, the first bit of content should be the <h1> heading. There should only be one <main> element on a webpage.
  • ARIA attribute role="main". This can be added to a generic <div> element, for instance. It changes the role of the element, redefining it as a <main> element. This is handy if you aren’t in a position to alter the HTML tags, but can insert attributes.

We recommend using the first two techniques, plus one of the last two in conjunction with one another to ensure the best experience for all users. So, for example, the page might be marked up as follows:

<body>
  <header>
    <nav aria-label="Site links">
         . . .     
    </nav> 
  </header>

  <nav aria-label="Current Section links">
      . . . 
  </nav> 

  <main>
    <h1>My content<h1> 
     . . . 
  </main> 

  <footer role="contentinfo">
     . . . 
  </footer> 
</body>

Summary

Either one of the two techniques is sufficient to satisfy this WCAG success criteria (skip links, or grouped blocks). However, we highly recommend using both techniques in conjunction with each other. If you implement only one of them, you may be ignoring one set of users. For instance, when:

  • Using only semantically grouped blocks: keyboard-only users won’t have any key commands available to jump to the main content. They will still have to tab through all the preceding links. One day browsers themselves will make this functionality available, but it’s not there yet.
  • Using only skip links: screenreader and other assistive technology users will lose all the valuable semantic information that’s visually obvious. Headings help them reach main content; understand page structure; make navigating the page easy and informative.

Leave a Reply

Your email address will not be published. Required fields are marked *