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.
Web accessibility as a civil rights issue
The internet is new, but not so new that approaches to web accessibility should be so far behind in practice. Last year, on the anniversary of the ADA, the American Foundation for the Blind blogged about how the civil rights granted in the ADA should apply to web accessibility. And last June, a lawsuit ruled that Winn-Dixie’s website should follow ADA accessibility standards, potentially setting new precedent in lieu of federal regulation.
But regardless of what’s legal, it’s right to work toward web accessibility. We can make decisions every day to move in that direction. In an interview, Maria Popova, blog curator at BrainPickings, had this to say about the evolution of the internet: “The thing to keep in mind is that [the internet] is such a young medium, you know? […] We have not even had a full generation live and die with it. … the decisions we make, the microscopic decisions that we make daily, shape it.” In these first decades of the internet, we get to participate in its shaping -- including how we design for different users.
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. But justified 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.
- 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.
- 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.
- 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.
- 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!
- Use a text generator like this one to generate 80 characters (so you don't have to count)
- 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.
We recommend studying up on the best practices created by The World Wide Web Consortium (W3C) -- “an international community that develops open standards to ensure the long-term growth of the Web.” Their Web Accessibility Initiative (WAI) publishes the Web Content Accessibility Guidelines (WCAG).
Another tool we find incredibly helpful is the web page accessibility evaluation tool (WAVE) by WebAIM (Web Accessibility In Mind). Just enter the link you’re working on and let WAVE identify accessibility errors in contrast, headings, alt text, and more.
Ellie has been a TypeWell transcriber with Strada for two years. A former teacher, she has an MFA in writing, and she lives in Upstate New York.