Structure your website logically
All users benefit when your web page structure is logical. Many of us take things like headings, bullet points, bolding and italics for granted. For your users with disabilities, those elements can make the difference between understanding a website and leaving it. Many forms of assistive technology rely on correct formatting to work correctly, meaning a heading can go a long way for your users.
Because we use formatting elements so often, we can forget how to use them properly. Going back to basics is a great way to improve your content with relatively little effort.
What to do
Complying with the need for good web page structure and formatting is a wide-ranging target. Half-measures don’t work, so you can’t use subheadings properly and then throw random bullet points all over the place.
Amongst other things, you must:
- Break up content with subheadings for new sections.
- Mark those headings with HTML header tags.
- Use the correct HTML for all structural elements.
- Use valid HTML everywhere else.
- Use clear labels on forms.
Ensuring that your web pages have an accessible structure is at once a simple and complex task. The level of difficulty depends on the complexity of your website; a page with several levels of headings will take more work than a single-topic blog post.
An efficient way to check your markup is to use a HTML validator. This will tell you if the web page structure has any HTML errors – these errors won’t always equate to accessibility flaws but the cleaner your code the better. Errors like improperly closed paragraph tags are easily remedied.
After using the validator, check pages manually for correctly nested headings and other more visible page elements. Manually check that any forms you use are labelled clearly too, simple things like required field asterisks that lack explanation can cause big problems.
- Guideline 1.3.2 – Meaningful Sequence
- Guideline 2.4.3 – Focus Order
- Guideline 2.4.6 – Headings and Labels
- Guideline 2.4.10 – Section Headings
- Guideline 4.1.1 – Parsing
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.