Thread by @JoshWComeau

For most of the web, the text is the most important thing on the page.

🧵 Let's look at some of the stuff I've learned for keeping our text readable + accessible for everyone.

For folks with poor vision, larger text will help them be able to read.

There are two primary ways to increase font size:
1. Using the browser "zoom" controls (cmd/ctrl +, cmd/ctrl –)
2. Picking a larger default font size in the browser settings

Browser zoom works with most units, including px, em, and rem. It doesn't work with viewport units (vw/vh).

Scaling the default font size only works with em/rem/%.

So, while it's not as bad as it used to be, we still shouldn't use px for typography.

(I like using px for padding, though! Because otherwise, when the user cranks up their default font size, it *also* squeezes the text and produces really narrow lines)

Some dyslexic folks have trouble reading tightly-packed / single-spaced text. The WCAG guidelines suggest using a “line-height” of at least 1.5.

dequeuniversity.com/resources/wcag…

The text also needs to have a sufficient amount of contrast with the background to be readable.

You can plug the colors into this calculator to check if your colors are sufficiently high-contrast:

webaim.org/resources/cont…

Let's talk about folks who use screen-readers!

A screen-reader is a piece of software that reads the text on the page.

As you might imagine, it would be very tedious if the user had to sit and listen to every single word on the entire page. Instead, users jump around.

That's why semantic HTML is important. You can create landmarks that users can hop between to quickly find what they're looking for.

This is also part of why heading levels (<h1>, <h2>, etc) are important. It creates a hierarchy people can navigate, like a table of contents.

Another thing I learned recently: some screen-readers will assume that ALL CAPS should be read as initials, letter by letter (Ay Ell Ell See Ay Pee Ess).

So if you want to use capital letters for aesthetic purposes, you should do it in CSS with “text-transform: uppercase”.

Also: not all text on the page is relevant to screen-reader users. For example, icon fonts might be read out loud (as gibberish), since they're technically text.

You can instruct screen-readers to skip individual elements with the “aria-hidden” attribute.

That's all the tips I can come up with, off the top of my head!

Do you have any other tips for creating accessible text? 💖

Ack, I forgot to add alt text for this tweet!

Left image: a paragraph with large text and relatively small margins, captioned "using pixel padding".

Right image: a paragraph with large text and larger margins, with only 3-5 words per line. Captioned "using rem padding"

Forgot alt text in one of these tweets 😬 See here:

https://twitter.com/JoshWComeau/status/1445036790029688833