This content is viewable by Everyone
Accessible Structure Best Practices
- Service:Digital Accessibility Program
Accessible web content structure
Creating the accessible web is a lot like building a house. Once the knowledge foundation is in place, such as understanding the “who” and “why” of web accessibility, it's time to erect the frame for the information you want to provide. Using structured HTML to create your content and provide the semantic meaning it needs, help to reach anyone who encounters it. This could be 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.
- One and only one H1 per page - it is the title of the page. H2-H6 are used to indicate hierarchy - never used for sizing text.
People who use assistive technologies such as screen readers are able to browse through the "sections" of a website 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.
- Accessible Home Page-Before and After Demonstration
- HTML 5 Doctor: Using ARIA
- SIGAPP on Semantics
- WAVE Chrome Extension – From the Chrome web store, the browser extension version of the popular WAVE tool. In addition to flagging errors and alerts, it also provides nifty tools like "Text only" and "Outline" modes.
- WebAIM: Semantic Structure