Search code examples
cssaccessibilityletter-spacing

Should letter spacing be left as normal for ADA compliance?

I am having trouble finding an answer to this. I am trying hard to make sure our site is inclusive so I initially implemented a site-wide letter spacing value of .12rem. However, some managers don't like how it looks and have asked me to reduce or remove it. I told them about ADA compliance so now we have an internal discussion going on about what to do.

  1. Should I not set letter-spacing to a specific value so that each user can handle that on their own if they have a vision disability?
  2. Are there tools available for users to adjust the letter (and word) spacing on a page?
  3. If so, would setting it to a specific value actually make it worse for those tools?

Also, what about word-spacing? Should it be handled in the same way?

If you have any other insight to offer on this topic I would love to hear it. I've been searching online for a while and I am having trouble finding a definitive answer.

Source: https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html

Solution

  • The Web Content Accessibility Guidelines (WCAG), which is an international standard, does not specify anything about letter spacing or word spacing.

    However, it does say that if the user changes their letter spacing (and other spacing requirements) via custom CSS then your page should still render correctly (up to a point). See guideline 1.4.12 Text Spacing

    That's probably where you're getting your .12rem from because 1.4.12 says:

    • "Letter spacing (tracking) to at least 0.12 times the font size;"

    The guideline doesn't say that you must use this letter spacing. It says that if the user sets their letter spacing to 0.12 (or less), then the page must still display properly. If the user sets it to 0.13 (or more), then technically it doesn't matter if your page doesn't reflow nicely.