This UX Accessibility Blog Series, “Setting Up An Accessible Web Page,” will walk you through the basic elements of an accessible web page in hopes that you can take what you’ve learned and apply it to more complex pages. This blog series is loosely based on Heydon Pickering’s book “Inclusive Design Patterns: Coding Accessibility Into Web Design.”
Readability is Important
It’s important for all of your content to be easy to read and concise. While there aren’t a lot of guidelines that say whether your paragraphs are accessible or not, there are a few things to keep in mind when writing content for a website:
Keep it short
- If you can say something in 5 words instead of 20, say it in 5. People typically don’t like to read. They especially won’t read something if they think it’s too long.
- Don’t use passive voice unless absolutely necessary. Using the direct alternative tends to be easier to understand and shorter than its passive counterpart.
- Saying the same thing twice in different ways is usually just a waste of effort. Users rarely will benefit from having the same thing said to them twice. (This bullet point is a good example of what not to do.)
- If your content is long, try to vary the length of sentences within your paragraphs and even the paragraph lengths themselves. Varying the length and sentence structure helps encourage your users to focus.
Readability also includes typefaces, spacing, type setting, line height, etc. For the sake of keeping this blog post under 50 pages and rehashing too many things that are already taken care of in Bootstrap and Ensemble, we’ll stick to some basic ways to help make your paragraphs more readable.
Your users will only care that your content is left justified. Jagged lines on the right side of your page should be the least of your worries when it comes to usability and readability.
Make sure your main content has sufficient contrast. If you’re not sure if your content has sufficient contrast, check the background color and font color with WebAIM’s Color Contrast Checker. The contrast between the text on your page and the background is very important when ensuring your content is readable. 4.5:1 for large text (18+ point font, typically) and 7:1 for normal text (14+ point font, typically) or higher if possible. High contrast between the background and the foreground is helpful for all of your users.