Implementing Accessibility Best Practices



June 16, 2011

Corner of webpage with personalization optionsI got talking with Sandi Wassmer from Copious about accessibility best practices after I posted Accessibility Tips for Management last month. We had a really good exchange over Skype & have continued talking over Twitter.  It's really great to hear what is happening outside of North America. Since we've been talking she was published in .NET Magazine with a great article The 10 principles of inclusive web design which I think are good guidelines for thinking about designing a site. 

Best Practices

I was looking for a way to better publicize the accessibility work we've done on our own site and I was very impressed with the implementation on Copious, so much so that I thought that it was a best practice that we should emulate. It's a best practice because it:

  • clearly states that there is information about accessibility both visually & through text without using a wheelchair logo
  • immediately presents users with common accessibility features all in one concise place
  • caters to low vision users and presents easy options for anyone who might have trouble reading the text
  • is prominent for everyone and works well for keyboard only users

Implementing in Drupal

So to emulate this I added the Page Style module which is one of several great modules to extend Drupal's accessibility. There is a lot of configuration built into Page Styles, but I especially liked that there is a pagestyle-text.tpl.php. 

Now I liked how Copious concentrated the core accessibility features in one area so I wanted to drop the default link Skip to Main Content link that we helped to add to all default themes Drupal 7. I could then just bring in an internal link to the #main-content. I've been surprised lately at how many sites I've looked at that had broken 'skip links' because they removed the anchor in the body of the HTML. A simple, mistake, but a far to common a barrier to participation.  

I also wanted to add icons to the navigation to complement those provided by the Page Style module. For this I used the Protocons icon library these almost made it into Drupal 7.  Hopefully in Drupal 8 we will have a common set of GPL icons that are more commonly used to present a more usable admin interface. A lot of work went into Drupal 7's messages to add both colors and icons to convey meaning.

We Need Feedback

We have put a lot of effort in making this site accessible & putting forward best practices for the community.  However, we need your feedback to see how we can improve the experience for you.  There will always be new ways to eliminate barriers for our users.

About The Author

Mike Gifford is the founder of OpenConcept Consulting Inc, which he started in 1999. Since then, he has been particularly active in developing and extending open source content management systems to allow people to get closer to their content. Before starting OpenConcept, Mike had worked for a number of national NGOs including Oxfam Canada and Friends of the Earth.