A11y: What are Text Alternatives?

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. In other words, any visual-based media needs to have a text explanation of what it is. This includes photographs, charts, animations, graphs, sound clips, and video.

Providing text alternatives allows for content to be accessed by multiple users in multiple ways. For example, someone who is blind can have an image’s alternative text read to them, and someone who is deaf can read a video or audio transcript.

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

A11y: Text Sizes, Colors, and Styles

Different text elements, such as a paragraphs, headings, lists, and more, are required to be a specific size, and have the correct amount of spacing between itself and the neighboring content. When colors are used, the colors have to meet specific contrast ratio guidelines dependent on its size and placement. Text styles such as underlines, differing fonts, and flourishes, are also regulated so that no matter who accesses the content, and no matter how they access it, the content remains accessible.

Key Takeways

  • Keep things as simple as possible.
  • All text should be black. (Use default colors.)
  • Text should not be resized. (Use default text sizes.)
  • Use bold and italics to bring attention to text.
  • Use headings for organization, not attention
  • Do not use all caps except for acronyms. (Use periods for acronyms.)
  • Keep text left-aligned.
  • Do not use underlines; underlines are reserved for links.

Text Sizes

The easiest way to make sure the text sizes on your website meet the WCAG AA standard is to leave all headings, lists, paragraphs, and other text elements at their default sizes when you add them into your page or post. The default sizes are calculated by relative percentages so that spacing and clarity meets WCAG AA standards.

Headings in particular are required to be a specific size (based on their differences) in relation to one another, and in relation to the content that surrounds them. When left at their default sizes, they will resize automatically for the user no matter what device they are using to access your site. When the sites are magnified or shrunk, they will also resize the spacing based on these sizes. If you override the default sizes, it’s possible that the new size will still pass ADA compliance on your individual device; however, it also overrides the sizes and spacing on other devices that make the site compliant.

For other text, if the sizes are manually changed, it may make so some text is illegible at certain magnifications or on some devices, including the spacing between text elements and line spacing within the same paragraph, all of which are currently set by default to meet requirements, and are percentage based.

Do not use headings, all caps, or change text sizes to bring attention to text, instead use text styles. Even though the website allows you to change text sizes, please don’t.

Text Color

The default color for all text is black, with the exceptions of links, which auto-color to be compliant. All text is required to have a specific contrast ratio in relation to the the other website elements that are around it. This contrast ratio changes based on text size, but it’s safe to assume it should be at 4.5:1.

Even though the website allows you to change the text’s colors, please don’t, as this could limit people with visual disabilities from accessing the content.

Text Styles

If you need to bring attention to text, use either bold or italic lettering, or both together. There is a lot to cover in this section, so here’s a list to make it as brief as possible. The subject of each list item is bolded.

  • Underlines are reserved for links. If it’s not a link, it shouldn’t be underlined.
    • Why this matters: Since the dawn of the internet, and underline as indicated an action item. Assistive devices and their users rely on this indication to navigate websites.
  • All caps are for acronyms only.
    • Why this matters: Words in all-caps are literally translated as yelling (and some devices will yell), unless it’s a known acronym.
  • Text alignment should remain left-aligned. It’s okay to have text centered on the screen, as long as that text is left-aligned in the center of the screen.
    • Why this matters: Text that breaks out of left-alignment can be both distracting and confusing for focus-impaired individuals. It breaks visual flow, and in some cases it makes the text impossible to read.
  • Fonts should be simple and easy to read. The default fonts match both of these criteria. Styled and designer fonts, while fun, can be difficult to read, especially when resized.
    • Why this matters: The simplest sans-serif and serif fonts reduce distraction, most devices also come with these fonts pre-installed, so it minimizes the chance of design errors.

Acronyms and Simple Phrases

  • Keep acronyms to a minimum. Acronyms are confusing for most people unless they’re well-known, like NASA (National Aeronautics and Space Administration) or LOL (laughing out loud), but even then, they still can be confusing. Acronyms should always be expanded on first use. If it’s an acronym specific to your school or business, or is not well known, then letters should be separated with periods, for example, P.B.L. (Proficiency-Based Learning).
    • Why this matters: Assistive devices try to phonetically read all words. Words in all-caps can be mistaken for yelling. Using periods between letters indicates to all devices that it’s an acronym, and forces them to pronounce each letter individually.
  • Use simple words and phrases. If you use words that require users to look up their meaning, then you also have to provide a glossary, or a definition of the word right after its use.
    • Why this matters: More complex words and phrases are harder to translate, look up, and digest for non-native English speakers, as well as for those who use accessible devices.

Text Organization

  • Headings are reserved for topic organization.
    • Why this matters: Assistive devices use headings to quickly navigate website content based on topics.
  • Break up text into smaller pieces. This can be done using headings, smaller paragraphs, and lists.
    • Why this matters: It can be difficult for anyone, particularly if you have a visual or mental disability, to focus and chew through a large wall of text. Short, clear sentences and paragraphs are the way to go.

Lists and Tables

  • Use lists when appropriate. Preface lists and follow them up with relevant, text-based information.
    • Why this matters: Lists make information easy to consume, and allow people to find things quickly, but they can be confusing if not explained, or left dangling at the bottom of the page.
  • Tables should be avoided if possible. For some things, like number data, they’re perfect. Most text, however, can be re-designed to work from top to bottom. It’s important that a table can be navigated in a way that makes sense (top-to-bottom or left-to-right) dependent on the data. If using a table, be sure to use clear headers. TablePress is provided as a functionality, and meets ADA standards.
    • Why this matters: If table data is being read out loud, it’s vital that the data reads in a clear and logical manner, and doesn’t skip around to various cells without reason.

Numbers

  • Phone numbers should be separated with hyphens. A phone number separated by hyphens has no spaces or other formatting: 385-555-5555. When hyphens aren’t going to work, use the old-school parentheses instead: (385) 555-5555. Using a period to separate phone numbers, while stylish, causes assistive devices to mis-translate the purpose, as periods are also used to indicate IP addresses, locations, and more.
    • Why this matters: Hyphens tie the entire number together, indicating to assistive devices that it’s a singular group, and indicates to the blind that a number can be called.
  • Currency and Other Numbers should be designated with the appropriate symbols such as the dollar sign, commas, and periods.
    • Why this matters: This lets assistive devices use the correct designations and terms instead of simply saying a string of numbers back to back from which the user then has to determine meaning.

That’s a lot to remember, and when thought of as a whole may seem a little overwhelming. However, as long as you leave things at their default and avoid as many complexities as you can you’ll be just fine, and so will your patrons. Accessible text will take a little extra effort on your part at first, but in no time, you’ll find it second-nature.

A11y: Titles and Headlines

Learn how to make your page titles and headlines ADA compliant. Doing so will allow people using assistive devices to more adeptly navigate your content.

Key Takeaways

  • Headings are used to organize text into logical sections
  • Don’t use headings to bring attention to text (use bold or italics)
  • In content, start with heading 2, use heading 3 only if heading 2 section needs sub-sections.

The Basics of Titles and Headlines

Assistive devices, like screen readers, use titles and headlines to quickly navigate page content. For this reason, titles and headlines should never be used to bring attention to text. Instead, they should only be used to separate content into logical sections.

There are six heading levels, and they’re tiered according to importance.

  • Heading 1 (h1) – This is the page title. The title is the only place where a heading 1 should be used.
  • Heading 2 (h2) – The default heading size for your page’s content. This is a top-level heading.
  • Heading 3 (h3) – Only used to identify a sub-section under a heading 2.

The following heading sizes are far less common, and typically only used in longer editorial pieces or for more technical content.

  • Heading 4 (h4) – Only used if dividing a heading 3’s content into sub-sections.
  • Heading 5 (h5) – Only used if dividing a heading 4’s content into sub-sections.
  • Heading 6 (h6) – Only used if dividing a heading 5’s content into sub-sections.

Why This Matters for ADA Compliance

If someone with a visual impairment is using an assistive device and wants to quickly navigate to content at the bottom of a longer website, they can skip by heading 2s. Once they hear a heading 2 that interests them, they can then drill into that content, and have the heading 3 headers read to them, and so on.

Remember that h3 level headings divide the content of a heading 2 into sub-sections, which means someone using a screen reader will not have those heading 3s read to them unless they first choose to access the content of the higher-level heading 2 above it.

If headings are used to visually bring attention to text, it breaks the logical flow of information and subverts the purpose of headers.

A Few Small Details

Please do not change the font size. The spacing around the different level of headers is based on a pre-set font-size and what lies around it, like a paragraph or an image. These spacings are automatically calculated to be ADA compliant. When you adjust the font-size, it will break the spacing percentages

Please do not change the font color. Text has to have a specific color-contrast ratio based on its size, type, usage, and immediate surroundings. It also has to take into consideration color-blindness. Using The default font-colors will make sure the contrast-ratio is maintained.