Make the Structure Accessible

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.

Using Headers

Headings in a WYSIWYG editor

  • Structure the page with headers, start with having the same words for the page title and the H1 and make it meaningful.
  • For each of the main sections of the page, label them as H2's and subsections as H3's and each subsection under that H4 and lower as needed.

People who use assistive technologies such as screen readers are able to browse through the "sections" of a website only through the use of headings and sub-headings (h1-h6) that gives a semantic structure to the page. Search engines also use the heading structure to rank content. Content well structured with headings rank higher and this improve your SEO.

How Do you Make an Accessible Content Structure?

More on content structure:

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 States and Properties

States and Properties 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".