I spent much of today talking about the Government of Canada's Common Look & Feel. For most people this is just the branding initiative that sets all federal websites to look more or less alike. There are lots of good reasons to do this, although mostly it is a matter of trying to ensure that the information is accessible.
Unfortunately, accessibility is something that takes a back seat to the branding that most people are concerned with. Search engines are the worlds biggest population of visually impaired site visitors, and yet very rarely is accessibility seen as a top priority.
Driven by these very interesting conversations, I decided to look again at Drupal's accessibility issues. It's pretty good, rated very highly in reviews like Juicy Studio's Choosing an Accessible CMS which states that "Drupal is one of the best that we have come across", with improvements that could be made in form labelling.
There is a lot of documentation about web accessibility and it isn't an easy topic to master. Now one of the first things that someone can do to check their site is to run it through a validator to see how well it stacks up against known standards. W3C's Validation Framework provides useful errors and also allows you to tag your pages with the icon at the top of the blog.
There is support to make Drupal even more accessible, and initiatives like the Accessibility Group do help keep things moving. There are also plenty of guides like this one, to making one's site more accessible. I found the following links quite useful:
- http://www.sidar.org/hera - provides a 3 point matrix
- http://sipt07.si.ehu.es/evalaccess2 - ditto
- http://fae.cita.uiuc.edu - nice pass, warn & fail percentages
The next thing I decided to do was to clean up a known problem with labels with the default Drupal 5 search block (which we use in our site). This isn't a problem in Drupal 6. Drupal 5 doesn't provide labels for the form to make it WAI complaint:
<label for="edit-search-block-form-keys">Site Search</label>
I chose to override the block theme by creating a search_block_form.tpl.php and calling it from the template.php file by adding the following:
<!--?php function openconcept_search_block_form($form){ return _phptemplate_callback('search_block_form', array('form' =--> $form)); }
I then added the following to the customized search form:
I also chose to include an image to submit rather than the regular button. I also wanted to put in text to skip to the content since we are starting to do more with mobile browsers. We're going to have to upgrade this to bring it into our CLF 2.0 Drupal theme.
I did this by adding this to the page.tpl.php file:
<a class="skiplink" accesskey="s" href="#contentStart">skip navigation</a> ....
And adding this in the style.css:
a.skiplink { position: absolute; margin-left: -9999em; }
There's a lot more that can be done to improve accessibility too. IBM's Drupal review gives some additional advice about using access keys, although I've heard that these can cause problems with some screen readers too.
Thanks to the following sources:
- Web development
- Accessibility
- Health
- World Wide Web
- Content management systems
- Blog software
- Cross-platform software
- Drupal
- Web accessibility
- Web Accessibility Initiative
- Screen reader
- http://www.sidar.org/hera
- INTERNATIONAL BUSINESS MACHINES CORPORATION
- search block
- Accessibility Group
- Search engines
- IBM
- Government of Canada
- search formsTheming
- search block form.tpl.php
- php
- //fae.cita.uiuc.edu


