CivicActions endeavors that our websites be usable. Usable implies accessible, since a user with special needs can not use an inaccessible site. In this article I discuss techniques that every web developer, themer and front-end html coder should have in their toolkit. These are the low-hanging fruit, the simple and inexpensive techniques, that make a big difference for internet users with restricted access, from user with low bandwidth internet connections, to users with poor eyesight. We're not just talking about the Googlebot and spiders here.

What is accessiblity?

Google search provides many definitions of accessibility. Perhaps the best and most complete for the context of web development is from McGill University's website. Emphasis is mine:

accessibility: the ability to view web pages on different browsers and multiple platforms; especially concerns individuals with disabilities — that they have access to and be able to use information and data in a manner comparable to individuals without disabilities…

In other terms; A web page should, as much as practically possible, provide the same information to all users, including users;

• of any current operating system
• of any current web browser
• with visual, aural (hearing) or any other disability

Note that "Current" does not mean only the latest stable release. For example Internet Explorer 6 is still in wide use, even though version 7 is the latest stable version. To determine what versions are 'current', statistics should be sought. For any particular client, statistics from the client's website are always better than general internet statistics. If seeking generic statistics, do not rely on any one source. And always check to see how broad the sources of the statistics are. Almost all general statistics are biased and inaccurate.

W3schools statistics pages are commonly misbelieved to be unbiased. However on their very own statistics page they state:

W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user. The average user tends to use Internet Explorer, since it comes preinstalled with Windows. Most do not seek out other browsers. These facts indicate that the browser figures above are not 100% realistic.

The version number of the operating system is usually unimportant relative to the type of operating system, the browser or browser's version.

Some examples of issues to consider;

• Adobe Flash is not working well on all browsers in GNU/Linux.
• A significant portion of users still use the internet with javascript or cookies disabled.
• Flash plugins are not always installed or up to date.
• Most enterprise users can not upgrade, install plugins or change their web browser.
• By default Apple's Safari web browser does not accept cookies from third-party websites such as advertising or analytics partners.

Users with physical disabilities are much more difficult for web developers to understand; Most people have not experienced the internet with such restrictions and are unaware of how difficult it is. So to appreciate the needs of users with such disabilities, I propose that web developers should find a screen reader for your operating system (Mac OS X has one built in, go to Universal Access in System Preferences) turn off your screen and try doing anything at all with your computer; Don't turn the screen on! All you have is audio output and keyboard input — since you can't see the mouse cursor.

You'll probably last less than 5 minutes, since you probably have not have learned enough keyboard shortcuts to be able to navigate to all the corners of your environment that you take for granted. Another good tool for learning appreciation of the restricted-vision internet, is to use a text-based web browser such as Lynx for a full one hour. Do your normal tasks, like read this article, post a reply to a blog post, read and send emails.

For completely blind users, this would be a rather media-rich web. Lynx is rich enough to have color, punctuation and even rudimentary layout. Completely blind users have none of that.

Partially due to lack of awareness, making websites accessible for users with physical disabilities can be rather difficult and expensive. It is important to evaluate what the client's priorities are. They may want or need to provide good accessibility for users with a particular disability. One of their staff might use a screen-reader or text-based browser, or their target audience might be folk with a certain disability.

On projects of any size there are some necessary basics. These need not add any significant cost to a project, and must be considered essential tasks, just like the costs of communications and quality assurance. Additionally, do not put it off until later when "you have more time" — like that will ever happen!

These items may add cost when clients will be frequently creating content for their website themselves with links, images or flash. In this case, if they are new to copy-writing for the internet, they will need to be educated on these following items. They will also require methods to implement them, such as html editing skills, a rich text editor or markdown.

If met with an argument against this, remind the client that in many countries (including the USA) there are laws about the accessibility of websites. Failing to meet these requirements may put the client at legal risk. In practice this is unlikely for the majority of clients. However we shouldn't need legal threats to follow through with moral responsibilities anyway!

Semantic

Screen readers and text-based web browsers use the semantic structure of an html document to determine how the page and website should be displayed, read and navigated. Pay special attention to the order, nesting-depth and type of html element.

A text-based browser displays the the content in the order it appears in the document. This is often not the visual order determined by CSS layouts. For example, CivicActions's homepage has a right sidebar that is less important than the middle column and is normally looked at after the middle column. However in a text-based browser it appears before the middle column because that is the order in the html.

The content starts right at the end of this excerpt, which is 2 to 3 page-lengths of text from lynx on civicactions.com/blog:

By contrast, Google.com's search results has a rather clear semantic with the primary content near the top. A full 6 results fit in 1 and a bit pages of text from lynx;

The depth of nesting and level of header elements (<h1 /> <h2 /> <h3 /> ...) also affects the display. For example this part of the homepage of drupal.org;

has this semantic html markup;

And as a result, lynx can parse it easily and display a good textual representation of it;

Note that the last list of 8 items has a different layout in the screenshot than it does in the text version. The text version is easier for a visually impaired reader or a screen reader to consume. This is because CSS was used to give the <li />s the two-column layout, and not a table.

Ordering the most important content first has the added advantage that modern web browsers will show that content first, even while other content has not loaded yet. This means the site visitor can begin reading the content long before the page has finished loading. This speeds up the apparent load-time for the visitor.

Images

The more observant readers would have noticed in the above examples that images are replaced with text by text readers. this is the text in the alt attribute. Note that 'alt' is short for 'Alternative text [in case the image can't be shown]'. All images should have meaningful alt texts. Most html validators require this for valid markup. A filename is almost never a meaningful alternative text. For example, take this image;

"Rodeo" would be a meaningless alt text, since any of these completely unrelated scenes could also be described as "rodeo";

A better alt text would be "Photo of a a girl riding a sheep rodeo-style. Cowboys look on from inside the rodeo yard. One of them commentating with a microphone. A crowd is watching. The child is wearing a helmet." Although an excellent alt text would relate to the context of the article where it is presented; "Melissa Harrison, 9, competes in a local sheep-rodeo for children. Local Rodeo-competitors look on from the pit. Her family watches from the audience. Her brother Michael, 13, prepares for his turn. John Hillbilly commentates."

A detailed and contextual alt text allows a vision-impaired website user to imagine the image or scene and associate it with the article he/she is consuming. Alt texts, like title attributes, also help a website get more traffic from search engines through the association of the keywords in the alt text with the indexed image in image searches.

Some images are not so easy to write alt texts for. For example;

While "Nothing" might be an appealing alt text, it doesn't help a blind user. Instead draw inspiration from the context. E.g. "Digital gradient art by Billy Artist, showing a gradient from (top to bottom) grey to white to light brown to black and to white, set on a rectangle with curved corners and a drop shadow."

Flash

Provide alternative formats (image, text, html) for the same data, and use swfobject to display the flash format only if flash is installed and is the version required. Don't demand users go and install flash in order to use the website. It is okay to suggest to them to install flash if it will make a big difference to their browsing experience. Do not require it in order access the content.

Links and Title attributes

Many screen readers and text-based browsers have a feature that lists all the links on a page for the users to browse and select one. In lynx, for CivicActions.com, it looks something like this:

You can see how many of the link's texts are useful and allow the user to navigate to what they are seeking. Some link's texts are not useful. If you managed to try navigating a website or your desktop with a screen reader and your screen turned off and a screen reader, you would appreciate how impossibly slow it is to navigate anywhere when you have to wait for everything to be read to you. And you would appreciate how useful a feature like this would be for blind users.

Now lets look at a google search results page;

It is pretty difficult to navigate. Wait till you see Yahoo!'s homepage!

The text contained inside of a link (or the alt attribute of images inside of links) helps vision-impaired users a tremendous amount! Likewise, title attributes on links are extremely useful to provide more information to the user about the links destination.

Now some examples. A bad link; <a href="about.htm">Click here</a> to find out about us. and a good link; <a href="about.htm" title="Learn more about LOLCATZ">Find out about us</a>. Note the use of different text in the title attribute and link text. This associates a broader range of keywords with the target url, and provides information about the target in different terminology that may connect with different individuals and keywords.

There are other advantages with having useful link text and title attributes. For users with common web browsers and full vision, the title attribute is displayed as a tooltip on hover. So if it has useful information about the target, it will help the user decide whether the link destination is where they are going or not. The tooltip in this example is less than ideal, but still useful nonetheless. A better tooltip / title attribute would be "Click the image to see the fullsize version.";

Both the title and text of the link also determine what keywords become associated with what pages and websites by modern search engines. Therefore these are very important SEO tools.

Color

Do not forget that around 8 to 10 percent of all males suffer from some kind of color-blindness — the vast majority are red-green color blind. If including both red and green in a design, make sure that the message is still communicated clearly for color-blind people. Does it communicate effectively if red and green are both substituted for grey?

Further Accessibility Enhancements

Most of the time, it won't be in the client's budget or requirements to do much more than what is suggested above. However if so then it is important to analyze what motivations the client has for special accessibility requirements. It is recommended that one or more users with the targeted disabilities be brought on to the team in order to test the site in development and gather feedback from them. It is also helpful to set up an environment where developers can experience the website as the target audience would with all the same restrictions, and that this environment also be made a part of QA.