Accessible website starter kit
Accessible design can't be that difficult, can it?
A simple kit for accessible web design
I had been reading much about accessibility issues in preparation for re-designing an important business site. Like so many well meaning people I thought I'd done all of the right things but on checking there were issues that needed to be corrected. Clearly I'm not as smart as I thought I was. I needed to find a site that would give me the basics that I could build on but was very disappointed with what is out there. I couldn't find a site that set out to tell me in simple language how to set about designing a site that is accessible. Those that come close don't quite do what I was looking for. If you take a look at some of the tomes I've listed in the side bar under Accessibility Resources you might be forgiven for thinking that you need a PhD in web design just to start building and accessible website.
There are many web pages about accessiblity that tell you what not to do or that are so detailed and complex that it is difficult to discern what is important and what is less so. As I couldn't find what I was looking for I decided to build something myself that would teach me as a go and might be of use to others who follow on behind. The whole ethos behind this site is to start simple and consider accessibility issues before adding on any bells and whistles.
Basic kit
- CSS Grid - Emastic
- Template starter - demo3.html from the Emastic package
- Editor - any basic text editor
- Accessibility validator - Wave
- Accessibility validator - Firefox Accessibility Evaluation Toolbar
- Accessibility validator - AChecker
- XHTML Validation - Validator W3
- CSS Validation - W3 CSS Validator
If this starter kit is going to be appealing to designers and to all users, including users who may have access issues, then it needs to be clean and modern and work in all browsers. It needs to look much the same on all graphical browsers and therefore needs a strong framework to build on. Having reviewed many CSS grid systems and used a couple in design it was clear, to me at least, that using the underpinnings of a well constructed grid would be a step in the right direction.
One of the sites I maintain has a CSS framework with widths set in em measure. If a user increases the file size using a keyboard shortcut or mouse and menu the design grows with the font size. If you use a pixel based width measure for your divs they stay the same width and the text must therefore push down. It is possible to design in this way so that the layout degrades gracefully but generally fixed width layouts look a mess as you increase font size beyond a certain point. Having said that there are advantages to keeping the same width as for instance it removes the need to scroll sideways and it could be argued that all of the major browsers allow the user to zoom the whole design rather than just text as the default behaviour.
For the time being, em widths and a layout that grows with font zoom is what is being used.
One excellent grid that I've used is the "Golden Grid" created by Vladimir Carrer but that uses pixel measure. Fortunately Vladimir also created
Emastic a CSS framework that allows the use of widths in em px or %.
This page design is based on "demo3.html" that comes with the emastic download. Out of the box this fails accessibility checks and has a number of warnings. First of all it needs a language attribute like this xml:lang="en" lang="en"added to the opening html tag. Screen readers need to be told what language they are about to read and it is from this tag that they find what the documents main language is. It is also possible to specify a different language for a word or passage.
All of the images need alt text or a title, <h1>, <h2> etc have to be properly nested ie they need to be used in the right order, 1,2,3 and the it is recommended that the H1 heading is based on the page title. Of course when the site goes live I'll need to make sure that anchor text in links that point to the same place use the same words. The standards are really just looking for simplicity and consistency.
I now have a fairly clean bare bones template and over the coming days and weeks I plan to add to it considering the accessibility implications of what I'm planning to add before I add it. I also need to test its usability using keyboard alone.
Accessibility Resources
Blogroll
