Present your website content in a meaningful order
The meaning of content on your website relies on the order you present it. For example, in English we read from left to right and read a left-hand column before a right-hand column. Present the content on your website in an order that your users can understand.
Some of your users rely on assistive technology (like a screen reader) to interpret content. By sequencing content correctly, you can make sure that your users with disabilities can understand your website and improve your overall web accessibility.
What to do
Ensuring you present your content in a meaningful sequence is a wide-ranging part of web accessibility. It applies to all elements of all pages, so is as big or as small a task as your website.
Make sure you:
- Present content in a meaningful order.
- Separate navigation menus from content.
Always present your content so that it preserves your meaning. That way, it’s great for anyone reading it. The main things to look out for are:
- Use paragraphs in order.
- Use headings to show importance.
- Choose whether a list needs numbering or not.
- Use valid HTML and check it with the W3C’s markup validator.15
Invest in some assistive technology and use it to browse your website. NVDA is a free screen reader you can try to get started.
Turn off the site’s Cascading Style Sheet (CSS) and check that your web page displays in the correct order. You can use an extension like Pendule for Chrome to easily toggle CSS on and off.
Using headings to show importance isn’t always straightforward. Headings on a web page are a great way to break up content and show your users the relative importance of each section. Headings in HTML range from 1 (the most important) to 6 (the least important). It’s best to have just one Heading1 (H1) on a web page, to show the title of that page.
However, headings don’t need to descend from 1 to 6 each time you use one. As well as headings that share levels, you can skip levels altogether if that fits your content.
- Guideline 1.3.1 – Info and Relationships
- Guideline 2.4.2 – Page Titled
- Guideline 2.4.3 – Focus Order
- Guideline 2.4.6 – Headings and Labels
Free Developer Resources
Join over 2,000 accessibility fans and get free developer resources like WCAG 2.0 Checklists and a sample from my book.
Over 250 people just like you have learned more about WCAG 2.0 with my guidebook.