Content, structure and relationships can be programmatically determined.

All users benefit when your website structure is logical and each section of content has a clear relationship with the content around it. Visual cues like headings, bullet points, line breaks, tables, bolding, underlining links and other formatting choices help users understand the content.

Assistive technology often relies on correct formatting and logical structures to work. When a user experiences the site through a screen reader, other assistive technology or without CSS they should still understand the content.

How to Pass

Complying with the need for good 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 headings with HTML header tags
  • Use lists, tables and other formats where needed
  • Use the correct HTML for all structural elements
  • Use valid HTML everywhere
  • Use clear labels and alternative text on forms

All these elements must be programmatically determinable – which means that a web browser or assistive technology can understand them. For example, don’t just use bold for headings but use the correct heading tag such as H1.

Where this can’t be achieved programmatically, you must provide a text description. For example, “* indicates required fields”.

Tips

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 an 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.

See Also

Free Developer Resources

Join over 3,700 subscribers on my weekly web accessibility email and get free developer resources like WCAG Checklists and special offers.

Powered by Kit

Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.

Learn more >

About Author

I'm Luke, I started Wuhcag in 2012 to help people like you get to grips with web accessibility. Check out my book, 'How to Meet the WCAG 2.0'.

Leave Comment