A11y: Meaningful Sequence

Meaningful sequence simply means presenting your content in an order that makes sense.

Key Takeaways

  • Think top-to-bottom, right-to-left
  • Keep related items together
  • Provide context for an image and other media in the text around it

Visual Queues and Reading Order

Most of the languages that we work with on our website follow the same reading pattern: Top to bottom, left to right. Your content should follow that same general pattern. Headings are a good way of keeping your content flowing in a logical order.

Generally speaking, all paragraphs read from left-to-right. This is also good methodology when using columns. Anything that is in the left column will be read before moving to the right column.

Keeping Items Together & Media

If your content breaks the top-to-bottom, left-to-right order, then there needs to be a solid reason for it (the content cannot be presented in any other way). Wanting to “spice things up” or make something “visually interesting or fun” are not good reasons, and often result in breaking ADA compliance.

Content that is related should be grouped together, whether it’s text, media, buttons, or links. For example, if you’re using an image on your site, the text around the image should correlate with the image being used. If you’re linking to something, the text leading up to or following that link should be related to what the link (or group of links) is.