Structure and Navigation

What is an Accessible Web Content Structure?

Creating the accessible web is a lot like building a house. Once you've got the foundation in place (understanding the “who” and “why” of web accessibility), it's time to erect the frame for the information you want to provide. By using structured HTML to create your content, you provide the semantic meaning it needs to be able to reach anyone who encounters it, whether on a laptop, via braille display, or in ways we haven’t dreamed of yet. As a bonus, it’s also great for SEO as search engines can make better sense of it.

Semantic markup means, for example, using <h1> through <h6> header tags in a strictly hierarchical manner to delineate sections and subsections of content, rather than for their visual appearance. The UCSF Starter Kit provides a solid foundation for sites, whether you use the WYSIWYG rich-text editor or write HTML code yourself. By carefully planning how to best communicate your content you’ll have done much of the heavy lifting required for meeting the WCAG 2.0 Level AA guidelines.

Importance of Semantic HTML Elements

The accessibility API is part of a device's operating system and represents objects in a user interface, exposing information about each object within the application or Web page.

Semantic HTML elements are immediately identified by the accessibility API and interpreted by screen readers. Non-semantic elements convey no information to the accessibility API.

How Do you Make an Accessible Content Structure?

Use headings, lists, and tables to give structure to your content and allow non-visual users to navigate it quickly.

Lists

Use ARIA labels to identify what each list is about.

<h3 id="dogbreeds">Dog Breeds</h3>
<ul aria-labelledby="dogbreeds">
    <li>Golden Retriever</li>
    <li>West Highland Terrier</li>
    <li>Poodle</li>
</ul>

Headings

Add headings by hierarchical order of importance.

Heading 1: Main heading
Heading 2: Section heading
Heading 3: Subsection heading
Heading 4: Minor subsection heading

<h1>Page Title</h1>

<h2>Section Title<h2>

<p>I am some description text for this section.</p>

Tables

Label tables with <th> and scope so that they're easily navigable.

<table summary="Items that are red"> 
<caption>Items That Are Red or Pink</caption> 
<tr> 
     <th scope="col">Color</th> 
     <th scope="col">Flowers</th> 
     <th scope="col">Candies</th>
</tr> 
<tr> 
     <th scope="row">Red</th>
     <td>Poppies</td> 
     <td>Red Hots</td>
</tr> 
<tr> 
     <th scope="row">Pink</th>
     <td>Hydrangea</td> 
     <td>Bubblegum</td>
</tr> 
</table>

Categories of ARIA Roles

• Landmark Roles: Identify content areas of a page. Help assistive devices navigate pages.
• Widget Roles: Act as standalone user interface widgets or as part of larger, composite widgets.
• Document Structure Roles: Describe structures that organize content in a page. Document structures are not usually interactive.

Example of Landmarks Roles

In order for some assistive technology to properly interpret your website’s menus for navigating (instead of simply interpreting them as lists of links), you need to ensure they have been coded with the appropriate HTML5 and ARIA landmark role attributes.

Below is an example of an HTML5 menu using the <nav> element:

<nav>
  <ul>
     <li>About us</li>
     <li>Services</li>
     <li>Contact</li>
     <li>Location</li>
     <li>Why Groovy?</li>
  </ul>
</nav>

In order to make the structure more accessible to user agents that support ARIA as well as ensuring that user agents that don't support HTML5 can also understand the structure, adding the ARIA role="navigation" is recommended.

<nav role="navigation">
  <ul role=”menu”>
    <li>About us</li>
    <li>Services</li>
    <li>Contact</li>
    <li>Location</li>
    <li>Why Groovy?</li>
  </ul>
</nav>

ARIA Properties

States and Properities announce the state of an element to the accessibility API. Often times, but not always, states are activated by user interaction. For example, you can let a user know that a form input field is required by using aria-required="true".