October 31, 2014

Universal Design for the Web

The following excerpt from the website of The Center for Universal Design at NC State University helps us in tracing the origins of what we now know as inclusive or universal design:

“Design Pioneer and Visionary of Universal Design Ron Mace was a nationally and internationally recognized architect, product designer and educator whose design philosophy challenged convention and provided a design foundation for a more usable world. He coined the term “universal design” to describe the concept of designing all products and the built environment to be aesthetic and usable to the greatest extent possible by everyone, regardless of their age, ability, or status in life.”

For the web, universal design is about providing accessibility to all, even when those people’s abilities are limited in some way. Often the first thought when talking about accessibility that comes to mind is “assistive technology” like screen readers, though it is part of the accessible to all ecosystem its definitely not whole of it. Accessibility can be as simple as the capability of changing the font size of the article you are reading, like this one.

Accessibility rather being an afterthought and should be included in the process as early as possible and here is how you can achieve it.

Don’t just try to achieve compliance try to really achieve access to all. Section 508 in US was last updated in year 2000 and WCAG 2.0 in 2008. Only being complaint to them might not mean your site is fully accessible as the web has moved on since then.

During Design

Create accessibility personas for as part of the design process. You can get tips and some example here.

Add notes to your doodles and wireframes showing thoughts on it would work for different situations. Don’t confuse accessibility and usability. If something is not accessible to someone it sure won’t be usable.

During Development

Delve into the W3C’s ARIA guidelines, don’t just limit your self to the last updated version. Check what is in the pipeline today for a more updated document. MDN also maintains upto date documentation and curated collection of articles to help build for today and the future.

Add test for accessibility in your code itself. You can use Sass as a pre-processor and write checks for color contrast to be always above a certain threshold. Here is a snippet of code to achieve it.

You can even take rules from tools like revenge.css and package it for your editor to do validation on the fly. Atom also allows you to include such pluggable code linter.

Post Build Checks

Add some continous integration tools to your build process, which should allow you to run W3c validators as well some other tools like Google Accessibility Developer Tools and AChecker on a ongoing basis to help identify and troubleshoot issues early in the process. Use a headerless browser like phantomjs to run them on your server.

Testing the Application

Start with a text only browser lynx as the first check point. Then move to a screen reader. You can use chrome vox which is a screen reader for Chrome or Voice Over for Mac.

Open Web Community Support

Since you are such a champ that you’re taking the time and effort to make your product accessible to all, you get a lot of help from the community. Take a look at the A11Y Project which provides you with a widget pattern library and checklist for your HTML and plenty of good other resources as well.

Thank You!

With more than 1 billion people in the world living with an impairment, be assured that someone somewhere is thanking you for your effort.