0

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

bprdev
  • 693
  • 9
  • 12
  • Could add a user setting that adds user accessibility. – Colin Hale Jul 12 '22 at 19:29
  • @ColinHale could you explain that a little more or point me to a resource? – bprdev Jul 12 '22 at 19:33
  • *“I am trying hard to make sure our site is inclusive so I initially implemented a site-wide letter spacing value of `.12rem`.”* Based on what guidelines? Unless you have an official source that says otherwise, I would not expect that to improve accessibility. It definitely shouldn’t be in rems. It will make a large range of text sizes harder to read, relative to text at 1rem. – Ry- Jul 12 '22 at 19:35
  • 98% of the world's top one million websites don't offer full accessibility [source](https://www.crownpeak.com/blog/accessibility-ada/the-ultimate-list-of-web-accessibility-and-ada-statistics#:~:text=98%25%20of%20the%20world's%20top,capitalizing%20on%20the%20disability%20market.). I don't want to sound rude but I personally wouldn't care since there is no market for that atm. – sm3sher Jul 12 '22 at 19:37
  • 1
    @sm3sher: Applied to accessibility in general (which is how the logic sounds), that’s terrible advice. – Ry- Jul 12 '22 at 19:37
  • I would not let the user set the exact letter spacing but offer a switch for readability, similarly to a dark mode switch. – sm3sher Jul 12 '22 at 19:38
  • @Ry- here's one source: https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html. I'll add it to my post as well. – bprdev Jul 12 '22 at 19:43
  • 1
    @bprdev: Thanks. Like slugolicious said, this doesn’t mean you should make everyone’s letter spacing 0.12[*em*]; it means your site shouldn’t break if a user overrides it as far as that (“as far as” being a hint that this is way too much for most people). (And you don’t need to, and shouldn’t, provide a way to apply that style within your site – user stylesheets and such cover it.) – Ry- Jul 12 '22 at 19:52

1 Answers1

2

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.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • that makes sense. That is indeed where I got .12 from but I guess I didn't read far enough into the docs. Could you please help me with a few more questions: (1) is there a best practice for whether I should or should not set a specific letter-spacing value? (2) If I set a specific value is a user still able to override it so they can view the page based on their preferences? (3) I don't fully understand how a CSS property like letter-spacing is overridden. Is it a third party tool or browser setting? Could you either briefly explain that or point me to a resource so I can learn? – bprdev Jul 12 '22 at 20:17
  • 1
    (1) is a design question which is out of my area of expertise. I leave that for the artsy people. (2) yes, the user can always override your css. (3) IE and Safari let you specify a css filename in their properties. Firefox and Chrome can be done with a plug-in. Take a look at “stylus”. – slugolicious Jul 13 '22 at 07:13
  • Regarding (3), take a look at this youtube recording of a presentation I did at an accessibility meetup. At the 9:07 mark I talk about custom CSS. This is one way a user might have their own CSS although my presentation is about using custom CSS to do accessibility testing. https://youtu.be/wpmKKU9swwY?t=547 – slugolicious Jul 13 '22 at 15:14