Accessibility made simple

What is accessibility?

For websites, accessibility means making sure that the site's content is easily viewable by anyone, on any device. Whether your customer is browsing your site on a mobile phone or is visually impaired and having the website read out by a screen reader - they should all be able to access your content.

Google is a blind user, with a text-only browser and millions of friends

Codeistry 'What's a CMS?' page displayed in the text only browser Lynx, showing that the navigation, links and text are all accessible.

One bonus of making your website accessible for humans, is that it also makes it accessible to search engines, like Google. Considering that for many websites, visitors arriving via Google can account for 70% or more of your traffic, that's important.

The Googlebot, Google's little software robot who visits your site to index it, is like a blind user, browsing with a text only browser. No images, javascript, flash or fancy stuff - just text¹.
If you take care to make your website accessible to humans, Google will love you for it. Your site will be more easily indexed by search engines in general and rank higher in search results. Making your websites accessible will go a long way towards your Search Engine Optimisation goals and help everyone, eveywhere, find you.

How we make our websites accessible

Making an accessible website is simple, if you think about it from the beginning. Be considerate of how you code your pages, so that they work well across different browsers & devices. Use simple, well structured, semantic code (XHTML & CSS). This helps the website display well on any device and makes your code easy to understand, so that screen readers and search engines can easily interpret it.

The Codeistry 'What's a CMS?' page, when displayed on a mobile phone, looks ok; all the images, links & text are accessible. Separate your content from its visual presentation, so that the content can still be viewed, whatever device you're using, even if it's a mobile phone or a Braille display.
This goes double for active content and scripts. Your pages need to work without them, as lots of mobile devices don't support scripts and neither does Google.

Browsers tend to show palceholder or blank image for missing images and overlay the alternative text. You need to make sure you give an alternative text version for those bits of your site which aren't text already. For example, if you have a product image embedded in a page, which you're talking about in the text, the image needs to have an alternative description to describe what it shows, for those people who can't see it.

Imagine that you're blind and someone is reading out the page to you. You'd want them to describe what was in the pictures too, so that you could understand the page better. Adding alternative text to your images will enable screen reader software to read this text out instead of the image. Normal browsers will also display the alternative text as the image loads, or instead of the image if they can't load it. Adding alt. text also helps search engines by describing the content of your images, so that they can index that too. On the other hand, not every image needs alt. text. Imagine you have your eyes closed again - if you wouldn't need your friend to tell you about the image for you to fully understand the content, it probably doesn't need alt. text. In this case set the alt attribute to blank: alt=""

See the world through Google gogles

You should test your website to see how accessible it is by browsing it using a text-only web browser and getting the Googlebots-eye-view of things. It's easy to do - just download² the free text-only web browser Lynx, then browse³ to your site and have a look at what Google is seeing. Your site's content should all be easily readable and accessible and all your links and navigation should work fine. It should look at bit like a 1970's version of your real site, perfectly functional, just a bit retro. If this isn't the case, then you've got a problem.

Take a walk on the blind side: try out a screen reader

There's an excellent firefox extension called Fangs which will show you a textual representation of your page, similar to the way it would be read by a modern screen reader, or seen by the Googlebot. If a screen reader were reading out your page, it would read out exactly what fangs shows you, word for word. Try it yourself and see how readable your content really is. For the full experience, you ought to actually try out a screen reader - there are lots available for free⁴.

Is your website accessible?

Codeistry design websites from the ground up to be accessible, to both search engines and humans - it's built into everything we do. Need help with your website? Contact Codeistry.

Useful Resources

Standards Schmandards: Articles about web standards, accessibility and usability.
Juicy Studio: Juicy Studio, run by web developer Gaz Lemon, with a focus on accessibility.
Opera Web Development Curriculum, article 25: Accessibility Basics: The first of two accessibility articles, part of the outstanding Opera Web Development Curriculum
Dive into Accessibility: Mark Pilgrims excellent little book - 30 days to a more accessible website.
465 Berea Street Accessibility Articles: Loads of great articles covering a large range of website accessibility topics, including Making Accessibility More Real and Writing good Alt. text.
Guide to Accessibility standards: Short guide to the various legal standards from abilitynet.org.uk
Web Content Accessibility Guidedtnes 1.0: WC3 Web Content Accessibility Guidelines 1.0, useful but old; use with the WCAG Samurai errata
WCAG 2.0 Quick Reference: WC3 Web Content Accessibility Guidelines 2.0, Quick Reference, newer but of labyrinthine complexity and questionable implementability
Accessibility - Telecommunications and IT access: See what Wikipedia has to say about IT Accessibility
Website accessibility guidance: The Equality and Human Rights Commission, UK

Footnotes

This is a slight simplification. Google does now crawl inside flash files, but this is still experimental and doesn't work very well - especially given the lack of semantic information inside most flash content. Text and links are still hugely more important. ⇑
At the time of writing, Lynx was available for download here for Mac & here for Windows. For Linux, just type sudo apt-get install lynx (or your rpm/yum/etc...) equivalent, and it'll be automatically installed and kept up to date for you. ⇑
Lynx is text-only so it has a text-only interface. To go to a website, type g, then type the address and press Enter. Up and down arrows to highlight links, left and right for back and forwards. Press h for more help and q then y to quit. ⇑
Modern Macs come with a screenreader called VoiceOver, Linux has several, depending on your distribution; Gnome based distro's ship with Orca. Windows has a very basic screen reader called Microsoft Narrator but you're probably better off installing Thunder or NVDA ⇑

Where next?

Need help with your website, Content Management System, MODx development or consultancy? Contact Codeistry, we can help.

This is a green web site! The web server hosting is carbon neutral, everything else (network bandwidth, vistor energy consumption, etc...) is offset by buying renewable energy certificates - so the more energy this site uses, the more renewable, green energy displaces smelly fossil fuel energy :)

The contents of this website are © Codeistry 2007 - 2010 and licensed under a Creative Commons Attribution-Non-Commercial-Share Alike 2.0 UK: England & Wales License. For more info or other licensing options, please contact Codeistry.