How do I label sections of my page for accessibility?

Question

I am sure this is a duplicate, but I've just spent 15 minutes Googling, reading W3C documents, and loads of accessibility webpages, and am none the wiser, so I feel we need a question using these Google keywords :)

I have a simple personal home page. Right now my HTML is like this:

<header>
<h1>My Name</h1>
</header>

<main role="main">
<h2>Writing</h2>
// hundreds of links
<h2>About</h2>

</main>

I would like to label the Writing and About sections in some way so that someone using a screen reader doesn't have to listen to the hundreds of links in the Writing section before getting to the About section.

Is the HTML above going to be easy enough for screen readers to navigate? Or should I use additional labels to make it easier for screen readers to skip ahead if needed?

score 2 · Answer 1 · answered Oct 16 '16 at 22:29

2

You're using heading tags (h1, h2), so that's a big help for screen readers. It's easy to jump to different headings.

Landmarks are also good. You can use <nav> or role='navigation' or role='main' plus several other landmark roles and that will also allow the screen reader user to jump to a section.

So either one will be good.

But don't forget about the keyboard only user. If you have a bunch of navigation links, it'd be nice to allow the keyboard user to jump over that section. You can do that with a bypass link. Look at webaim.org for an example. Just bring up their site and hit TAB. You'll see a red 'skip to main' link appear. It works nicely.

answered Oct 16 '16 at 22:29

slugolicious

15,824
2
29
43

Thanks! How exactly would you use `
` or `role="navigation"` or bypass links in my example HTML?
– Richard Oct 17 '16 at 10:34
Whether you use `
` or `role='navigation'` will have **no affect** on the behavior of your code. See https://www.w3.org/TR/aria-in-html/#role-not. The only thing those tags give you is more semantic meaning for assistive technology. You have to code your own bypass blocks. As I mentioned, look at webaim.org for an example and test it using a keyboard.
– slugolicious Oct 22 '16 at 15:28

score 1 · Answer 2 · edited May 23 '17 at 12:13

1

Using the ARIA landmark designated <nav> HTML tag with hierarchal section links will help your users to jump across designated sections easier. For non-HTML5 code, you may also use role="navigation" as a substitute.

I find this stack overflow link is very helpful in understanding the basics of hierarchy.

edited May 23 '17 at 12:13

Community

1
1

answered Oct 16 '16 at 21:42

Huski

958
1
7
14

Thanks! I've just tried to Google about `
` but am really struggling to find anything clear. I did follow the link, but it doesn't explain where to use `
` tags or how to mark them up. I'm sure this is me being dim. But could you explain exactly how you would add tags to my page to make it more accessible?
– Richard Oct 17 '16 at 10:33
Perhaps a grammatical issue but Huski said "For non-HTML5 code...". It's more accurate to say "for non-native html5 code...", meaning if you're not using a built-in native html5 element such as
, then you'd have to use role='navigation'.
– slugolicious Oct 22 '16 at 14:54

score 1 · Accepted Answer · edited May 23 '17 at 11:45

You can make on-page navigation for screen reader users easier with these methods:

Headings

Use heading elements (h1-h6) where appropriate.

It allows users to jump from heading to heading.

(You are already using it.)

Sections

Use sectioning elements (e.g., section, article, etc.) where appropriate.

They have, by default, WAI-ARIA region mappings. Your Writing section might get the region role. Your About section might get the contentinfo role, but it depends on the content if that’s appropriate.

It allows users to jump to (or skip) specific regions.

Hyperlinks

Use links (a) that point to certain headings/sections.

Depending on the page content, it could be a ToC (similar to what Wikipedia uses for longer articles), or just a single or multiple skip links. In your case, you could provide a link that says something like "Jump to About section", but if you are fine with providing a menu, the nav element with links to both sections might be a better alternative (it gets the navigation role by default).

It allows users to jump to (or skip) specific sections.

So your example could look like:

<header>
  <h1>My Name</h1>
</header>

<nav>
  <ul>
    <li><a href="#writing">Writing</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

<main>

  <section id="writing">
    <h2>Writing</h2>
    <!-- hundreds of links -->
   </section>

   <section id="about">
     <h2>About</h2>
   </section>

</main>

(Note that you should only use the role attribute (for WAI-ARIA) if using a non-default value. So I removed it from the main element, as it has the main role by default.)

How do I label sections of my page for accessibility?

3 Answers3

Headings

Sections

Hyperlinks