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.

A11y: Links, Buttons, and Files

Links and buttons are considered navigable elements, meaning that when they are activated, they take you to another location.

Key Takeaways

  • Only links are underlined, do not underline text that is not a link.
  • Name links and buttons what they are. (Descriptive names, not ‘click here.’)
  • Name files what they are. If using the download button, rename button.

Naming Links and Buttons

One of the main ways that assistive devices navigate a website is through the use of links. The link text will be read out loud whenever a link is accessed. For this reason, it’s important to name links what they are. If your links are named ‘click here’ or ‘read more,’ not only is it exclusive, but also fails to provide information on what the link does, or where it goes.

As part of the naming, leaving the URL in its raw state will result in the full URL being read. The only time this is appropriate, is if you’re linking to a main, short URL. Otherwise, it’s better to name the link without using ‘www’ or ‘.com’ in the text.

Good Examples

Poor Examples

In the case of buttons, sometimes you may want to use a ‘Download’ button. If using the ‘download’ button, be sure to rename the button text so that it indicates what is being downloaded (e.g. Download Dress Code).

By default, the website templates will handle a link’s design appropriately. As long as the default settings are used, links will already be underlined as well as meet color criteria when hovered, clicked, and visited.

Naming & Linking Files

By default, WordPress uses the file name as the link’s text. For this reason, it’s important to name the file what it is before uploading it to the Media Library. Additionally, doing so will help when conducting searches in the media library. (For files, it’s the ‘Title’ field in the Media Library that determines the link text.)

It’s extremely helpful when linking to files to also include the type of file that it is in the link text.

Example without Download Button

Best PDF Ever (PDF)

Example with Download Button

When linking a file (using the ‘File’ block), you have the option of adding a download button in the block settings. We do not want repetitive links on the page because of the confusion this can cause, so it is best practice to either use a button, or a text link, do not use both.

Just like with text links, you should maintain the same naming standard and use the file name with the file type, and not just the word, “Download”

Best PDF Ever (PDF)

File names with dates

If your file name has a date in it (and it’s important to the link), please be sure to use a proper date format in the name: 12-03-2021, 2021-12-03 for example. (File names do not allow forward slashes, but you can use the slashes in your file’s link text.)