The internet is made for consuming content in two main ways:
- Visually – reading articles, posts, and stories; watching video, short and long form, photographs, and animation
- Audibly – listening to music, speech, screen (via assistive technology)
But the people using the internet don’t all follow the rules and need modifications. One area where we see a lot of modification for customer control is through the text layout. In some cases the issue could be the font, the font weight, or color that makes it difficult to read. Sometimes it’s just the spacing.
Who needs this flexibility?
Letting the user control their experience when possible is always a good thing. Let’s look at some of the main concerns we address when we offer these options:
- Dyslexia is a reading comprehension disorder. It is easier to manage when you can control line height, letter spacing, and word spacing.
- Traumatic Brain Injury
- Dyscalculia is similar to dyslexia, but it is a number comprehension issue. People with dyscaculia often struggle with math, but have a strong mechanical understanding.
- Low literacy
- Auditory processing disorder
- Language processing disorder
- Visual perceptual/visual motor deficit
How do we do it?
First step is we stop setting dimensions for text (and containers) in pixels. Pixels are hard coded point to point. So if I say 16px for my font-height on my body, all calculations are based on that 16 pixels. Instead, I would use 100%. If you like your base font to be 12px, you’d start with 75% font-height.
Now as we establish our visual rhythm, we know that we can apply percentages. We can also use REMs, VH, VW, and all sorts of dynamic measurements. We’ve built in the base. Now, go back through all of your text based elements and provide them an appropriate size. Your H1 may be 200%, while line height is 1.2rem. You can mix and match relative sizing all you need.
But something magical begins to happen. Your website has a base font of 100%. The rendered base font is 16 pixels when your OS and browser are at default settings. If I increase my base font to 20 pixels, your site will scale automatically.
How does this apply to WCAG?
Well, 1.4.12 tells us that we need to allow for the:
- Line height (line spacing) to at least 1.5 times the font size;
- Spacing following paragraphs to at least 2 times the font size;
- Letter spacing (tracking) to at least 0.12 times the font size;
- Word spacing to at least 0.16 times the font size.
If your gears are turning, you can see that you can set these items up to have this spacing. You can also play with your base font to affect flow and design. Or you can ignore the settings entirely and let the user adjust things from their end. Typically, someone who frequently needs this kind of adjustment will use a piece of technology to help them. Stylus is one example of a CSS extension where the user can write their CSS. Some browsers have a location where the user can set these up as well.
Most of the time accessibility is about getting out of the way.
Want to discuss this with me? Come visit me on BlueSky and LinkedIn!