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.
- 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 give 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 improves your SEO.
How Do you Make an Accessible Content Structure?
More on content structure:
- Learn more about how to use headings well
- See examples of types of lists, and how they should be used
- Tables can be useful, but they are often abused. Learn how to be a table master
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> <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>
The 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".