Categories
Uncategorized WCAG WCAG Success Criterion

Text Spacing (1.4.12 AA)

Who is it for?

People with cognitive, reading or low vision disabilities benefit from this requirement. The ability to customize the text to meet their needs is important.

What is important to know?

This is important for a very large portion of our users. 🙂

How do I code it?

So this one is pretty easy to meet as long as you follow these principles:

  1. Don’t adjust the text styles with JavaScript. If you need to do use a JavaScript solution, then apply a class that can be leveraged with styles in the CSS stylesheet.
  2. Don’t use !important in your CSS. If you are having trouble getting your styles to apply, it can be solved with Specificity. !important is for styles that must never be changed. I would argue that !important should never be used on a webpage.
  3. Don’t use inline styles.

How do I test it?

There are two scenarios that need to be accounted for when testing this.

  1. The user defined styles come prior to the document styles. For example, the user has a user agent stylesheet that they use.
  2. The user applies the styles with a text spacing bookmarklet.

The following test cases are slightly modified versions of the test found on the Failure 104 page

Test case for #1

  1. Override the CSS on the page using extension, or application with the values listed in the success criteria.
  2. Check if any content is clipped, obscured, or lost due to the new text spacing.

Test case for #2

  1. Override the CSS on the page using the text spacing bookmarklet.
  2. Check if any content is clipped, obscured, or lost due to the new text spacing.