This article is more of a “plea” to web designers. Don’t look at a web page as a work of art. Look on it as something that does a job and, for God’s sake, make it legible! Too many times we see readability sacrificed at the alter of web design.
But first, some statistics for you to think about:
- Nearly 26.6 million Americans (nearly 9%) are visually impaired, meaning their vision cannot be completely corrected with lenses.
- 1 in 12 people in the world (over 8%) suffer some sort of color blindness
Here are 4 rules about readability and accessibility on websites.
1. Font size
I recently read an article arguing that body text should be at least 16 pixels in size. I was really pleased to see Smashing Magazine publish this article – although it was rather ironic that they had to create a special design with a large body text size for the article as it would have been hypocritically smaller in their normal template.
What does 16 pixels actually mean? It’s a fixed size measurement. If you’re familiar with the point measurement (1/72 of an inch), then it’s 12 points. If you’re reading this text on my website then it is set at 15 pixels in size if the browser isn’t zoomed in or out.
Another method of setting font size in CSS is with ems. Ems are usually used in combination with percentages. If the body font size is set to 100% then 1 em equals 16 pixels. This used to be considered the most accessible way to set text as it would adapt to the device. However, now that most modern browsers and devices can scale the whole page, I now prefer to use pixels.
OK, we know you can zoom in and zoom out when viewing web pages. But users shouldn’t have to do this!
Either way, body text should never be much smaller than 16 pixels, 12 points, 100% or 1 em.
2. Color and contrast
You should always think about the visually impaired and color blind when choosing the text color and background color. If the two colors are too similar some people will have difficulty reading.
Be especially careful if you are putting text on a background with a pattern or on an image as this can be very difficult for some people to make out. The are tools online such as the color contrast check which can help you.
The next two rules will help the SEO as well as the accessibility of your web pages.
3. Make your text scannable
Don’t have long paragraphs of tight text. The line height, the spacing of the line of text or leading, should be at least 25% more than the font size. So, a font size of 16 pixels should have a line height of at least 20 pixels which will make body text readable.
Furthermore, you should seek to break up your text as much as possible with headings, bullet points, bolds, italics, blockquotes. People don’t tend to read web pages from top to bottom. (Sadly you probably won’t read every word of this article! 
)
These extra elements will make your text more readable – and the increased use of subheads will help with SEO.
4. Use of images
Lastly, it’s important to always include an alt text for images you use in a web page. Alt text is a tag in the HTML which describes images to
<img src="http://yoursite.com/images/green-flower.jpg" alt="a bunch of green flowers in a vase on a table" />
A visually impaired reader of your web page that is using a screen reader will hear the alt text in place of the image. The alt text will also show on screen when the image can not be rendered.
Again, this is also a good practice for SEO.
Conclusion
Have a look at the websites you are responsible for. Is the body text size readable to those with slight visual impairment? Is the size smaller than 15 pixels? Are there any quick changes you can make to improve it’s readability and accessibility?
Can you add to these rules? Do you disagree with any of them? Let us know in the comments.
Hi Rob
ensuring our content is accessible by all parts of the community is an ever evolving challenge and one that I am glad you have raised. Part of the problem is that our blogs may look alright on our screens at our resolution but until you know what your visitors are using then you will never know if you are using the correct settings.
I did briefly change my blog default font upto 16px as a test and it looked very strange as the heading and other paragraphs settings were not amended to suit, therefore this is something that will need a deeper look into to get the best balance between readability and attaractivity.
igor Griffiths
Hello, Igor, good to see you here again. Yes, it’s a huge issue and one that can’t be adequately covered in a blog post. Also, as you say, we must try to test our sites in as many different screens and devices as possible. And talk to different people about them.
Unfortunately, one CSS can open a hornet’s nest. You will probably have to increase the values of the h1, h2, h3 headings if you increase your body text by very much. Maybe the ordered and unordered lists as well. You can use Firebug addon for Firefox to help you with this.
Thanks for the tips I am looking to improve the graphics layout of my site and will look to follow some of this. Any advice on plugins that help with the design/layout (I am using default Twenty Twelve)
Thanks
Mark
Hey, Mark, there aren’t any plug-ins that do this as far as I know, unfortunately, it’s more of a case of changing the theme or tweaking the theme to affect these changes.
Here’s an article I wrote on how to change the design of your theme.
If you are using Twenty Ten or Twenty Eleven (I don’t think Twenty Twelve exists yet?) you should create a child theme. I explain this here: how to customize your WordPress blog.
I hope this helps.
Those who read with their eyes but not well will be using our built-in settings.
For poor acuity we need magnification with word wrap to keep the copy on screen.
For poor contrast sensitivity we need choice of font for incoming text.
Please take care not to disable these functions with your formatting. Offer an easy way to feedback accessibility problems, including screenshots to show you how the user sees it. If you don’t offer a way for feedback, you may not know that you have lost readers. They just move on. ===gm===
Hello GM, thanks for your comment which has raised many interesting questions. I am trying to find out how to get this site’s text to increase with word wrap and how to change the site’s font at the moment. If at any time you have an accessibility – issue or any other – about this site, please feel free to leave a comment or contact me anytime!
You are welcome, Rob. I appreciate the opportunity to spread the word. My file, “Accessibility for Eye Readers”, 11K., ia available as an email attachment for the asking from gfmueden@verizon.net.
BTW, the email telling me about your post disabled my choice of font.
You are not alone. Uncle Sam, starting with the President, is an offender. Disability.gov gets it right, the US Access Bd and the VA do not. The NYTimes used to be OK, but recently has failed and insists that it is my fault. I get forty emails a day and all but about five will be OK.
Websites devoted to accessibility concentrate on web pages and neglect email and programs. Reviewers neglect accessibility. Micrsoft has the poorly sighted make adjustments on a screen that can only be read by good eyes.
The hazard is the designer not knowing how his work is seen by those needing the adjustments. Unless he offers feedback, he won’t know.
===gm===
Good to be talking to you via email. Your document has “opened my eyes” to the various hoops people have to jump through to be able to read web pages and emails. It’s a really fascinating point you’re making about emails, as well. I expect most people don’t even think about that.
Rob, am now seeing my choice of font and word wrap works here, There was some crowding in the large links at the top. I am set for Largest and 100%
By using WORD I found that US-ASCII 7bit enabled my choice of font to read NYTimes News Alerts; utf-8 8bit did not. I have no idea of other benefits of using these different formats and am curious.
Cheers ===gm===
Good news about the change of font and the word wrap. I have increased the space between the links at the top. Thank you.
Excellent article, Rob. Some of these tips can be achieved very easily, e.g. adding ‘alt’ text to your images, and making your copy scannable. Font size is potentially a more complicated affair.
But they should be able to if they want or need to. Ideally it should also be easier for designers and developers to achieve easy magnification with word wrap and within their desired screen layouts.
I agree Tracey, especially with the point about word wrap because, as George (G F Mueden) above says, people don’t want to chase the text from one side of the browser window to the other when they’ve zoomed in. This is a complicated issue – with the various browsers, devices and email adding to it’s complexity. My point was, personally, I don’t like to have to zoom in to webpages so much – I do it all the time!
Because the font size is too small? I see what you mean. At least pixel fonts (popular around five years ago) don’t turn up much anymore! You’re right: it is a very complicated issue. With increasing numbers of people using mobile platforms, it’s only going to get more complicated.
Yes, there are some sites that have text that’s less than 13px/.8em/80%/10pt that I have to zoom into after a while – the eyes get tired! Great link, food for thought.
Old eyes won’t care as long as you give him choice of font. That will give him both size and style. ===gm===
Good point, George.
Nice, Rob! After I learned about the purpose of Alt tags, and that they are read aloud to visually impaired folks, I took an interest in making Alt tags do their real job. Have seen the code per your article. Question: In WordPress editor, when I click on an image and see a box for the Alt text, should I enter the code or just words?
When I read your site, I see the good in people.
Cheers, Astro Gremlin, good to see you back in these parts again! Just put the words (red house) in the Alt field when uploading an image to a WordPress post and then WordPress will do the code for you (alt=”red house) – you can see it in the HTML tab of the editor. Thank you for your kind words about the site!
Ah, yes, and the HTML editor also reveals that the “SRC=” field is being filled in automatically with the contents of the box that WP labels “Link URL.” Thanks, Rob!
Yeah, it’s handy to flick between the Visual and HTML editors to check on things – it’s a bit temperamental at times, though.
Another point – good contrast is essential, but that doesn’t mean using a glaring white background. The pale blue as used here works well and isn’t nearly as hard on my eyes! Computer screens are NOT paper – they emit light and white is just too much.
I set my browser to use a minimum font size of 16 – unfortunately, many websites hard code field sizes so 16 point fonts overflow their fields that are set for .000000000000001!!!
Good point Zorba. I can find white very blinding sometimes. I do adjust the brightness of my screen from time to time. But you’re right you shouldn’t make things all white.