Formatting text for web accessibility: Five tips to get started

It’s not surprising that accessibility advocates get excited about the web. Unrestricted internet has the capacity to equalize access to so much as an open resource for all. Information is often free on the internet. You can encounter various perspectives (if you navigate beyond your social media echo chambers). You can share your own perspectives. And this whole trove of materials and conversations is searchable and immediately... accessible, right?

Well, the web is only immediately accessible if the developers, designers, and writers of each site make the web accessible for all. Many content creators haven’t done this work and don’t know how.

Why worry about web accessibility?

We want the Strada blog and website to be accessible to everyone who visits. Whether readers have low vision or blindness, control their browsing solely with a keyboard, or have a learning difference, we want to be able to reach you. And, just as importantly, we also want readers to be able to reach us.

Often, people “without disabilities” think accessibility is needed only for people “with disabilities.” At Strada, we think of communication access as important for everyone in a conversation, not just for someone with a disability. Just like in the non-web world, everyone misses out on something if we don’t consider communication access for all.

So we're starting with something basic. Maybe you’ve noticed that we changed how we styled our blog post this week. That’s because we’ve implemented some best practices for formatting text for web accessibility. Anyone who writes for a blog or works with a Content Management System (CMS) like WordPress can implement these guidelines without any coding know-how. Here are a few tips to get you started.

Formatting text for web accessibility

1. Don’t justify your text

I know many designers love the sleek look of justified margins. Butjustified alignment can create issues for people using screen magnification, and for people with dyslexia or other learning differences.

On the web, people access your text on any number of different-sized screens which can cause content boxes to shift. If justified, your text will shift too, sometimes creating big and uneven gaps between words. Maybe you call those gaps “rivers” and you try to avoid them in print media. You can/should avoid rivers on the web too.

Here's how:

Easy! Use right or left alignment instead

2. Pay attention to the spacing between lines of text

Ensure your “leading,” or the spacing between lines of text is at least 1.5 times the height of the type. For example, our blog font size is 16 pixels, and our line height is greater than 24 pixels.

Here's how:

Check your font size (measured in pixels)

Multiply your font size by 1.5

Increase your "line height" to match or surpass that number

3. Pay attention to the spacing between paragraphs

Ensure the spacing between text blocks or paragraphs is at least 1.5 times larger than the leading. For example, our blog line height needs to be 24 pixels, so the spaces between our paragraphs need to be at least 36.

Here's how:

Check your line height (measured in pixels)

Multiply your line height by 1.5

Increase the bottom margin or padding in your text blocks with over one line to match or surpass that number

4. Use (actually descriptive) headings and heading styles in order

This practice makes for good writing. You want your headers to be accurate and organized anyway. If you use your heading styles more as styles than as an organizing principle, someone using a screen reader might wonder what they missed as you leap from H1 style to H4 style. What if, even though your H2 style should come next, you’d rather use your H3 style because its color works better design-wise, you ask? Change your style sheet so it allows for form and function.

Here's how:

Ask yourself: If someone were to read only your heading, would they know what the following text would be about? If not, try to clarify.

After using heading style H1, make your next-level heading style H2

5. Don't make lines wider than 120 characters

Someone with low vision might increase the screen percentage to 200% to be able to read your text. The goal with this guideline is to make sure your user would not have to scroll horizontally AND vertically. You can try this out in your browser. Press CTRL SHIFT + to zoom in and CTRL SHIFT - to zoom out. Some sources say 80 characters is an ideal width. Bonus: your site will have more white space!

Here's how:

Pop those 80 characters into your text editor and preview your page -- if the line falls short of your margin, you know your content block is too wide

Increase the padding of your text box on the left and right to decrease the width of your lines of text

Bonus tip: Make content templates or change your CSS

While we’d love you to visit our blog over and over, you don’t want to have to pull up this blog post every time you’re formatting text for web accessibility. Instead, make these guidelines the default in your content management system, or work with your webmaster to change the CSS.

Want to learn more?

Of course, there's more to know than what I've listed in this post. Look forward to future posts about other web accessibility best practices here. And check out the following resources.