A Simpleton’s Guide to Accessible Web Page Design

By John Gardner

I am continually disappointed in the number of simple web sites that could so easily be extremely accessible but that are not.  For example, nearly every US government site, many city and state sites, libraries, etc.  I doubt that the designers of such sites deliberately make them inaccessible.  My guess is that they are just overwhelmed by the complexity of all the rules.  So I have prepared a short rule set that anybody can understand and that would go a very long way to making most web sites accessible.

By the way, following these rules makes the site more accessible to everybody, not just people with print disabilities!

This really is a simpleton’s guide, because it is limited to fairly simple cases.  But my guess is that it covers 80% of the web today. So here are the simpleton’s six simple rules to making web pages accessible:

• Page title: Give each page a good meaningful title.

• Coding: Use html and standard widgets from the developer toolbox, whether static or introduced with Javascript.

• Fonts: Use CSS-compatible em or % units for size, complementary colors for good readability.

• Content Markup: Use headings to define content, h1 for one or two main divisions, h2 etc for lesser sections.  Use semantic markup, < form >, < table >, < img >, etc instead of < div >, < span > when appropriate.  Use CSS, not tables for layout.

• Images: Give images meaningful alt-attribute text. For meaningless things like separator lines, alt="" is perfect.

• Links: Use enough text to define a link. “Press here for continuation”, not “here”. It is essential to use alt and title attributes for clickable icons.

Reason for these rules

You will understand the need for these rules if I explain that

• Page Title: People with print disabilities don’t have an overview of a page, so a good title is important.

• Coding: It is hard to make a page that is not keyboard accessible if you code in html using standard widgets, and it is easy to make it inaccessible if you do not.  Flash and PDF are inaccessible no matter that Adobe says otherwise.

• Fonts: Many people need to enlarge fonts, change to simpler font faces, and/or change color or contrast.  Please don’t prevent that from happening.

• Content Markup: For screen reader users, navigating by heading is an excellent way to navigate content. Without headings it is tedious to read past all the links and other things that need to be on the page. Poor layout design such as tables that are not tables make content difficult to read.

• Images: A simple image without alternate text says “graphic” to a screen reader, not terribly informative. Alt="" says nothing, which is what it should say for meaningless graphics.

• Links: Keyboard navigating by links is often a handy way to navigate portions of a web page, particularly if the content is basically links. Links should have text that explains what they are for.  A bunch of “here” links require one to stop and read all around the link to know what it means. A graphic link without alt text says the link, possibly informative but tedious and annoying.

More complicated web sites

If your web page is part of the other 20%, having interactive web forms for example, I recommend moving on to the moderately readable WAI site http://www.w3.org/WAI/eval/preliminary
If that site still doesn't answer all questions, it might be time to either roll up your sleeves and follow links from this WAI site and try to understand the full WCAG 2.0 guidelines or look at a commercial site accessibility checker.

Acknowledgement: 

Thanks to web developer Mark Preddy of PreddyTech.com for suggesting some prose changes to communicate better with real-life web designers.