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.

Adi Chikara

Adi Chikara

Client Partner

Adi Chikara is a Client Partner for Media & Entertainment industry at 3Pillar Global, helping companies compete in the digital economy. He works with 3Pillar team members throughout the world to build revenue-impacting digital products.

Prior to joining 3Pillar, Adi held key research and consulting roles in European Union-funded researches. In the private sector, Adi has served in various product & technical roles at Reuters and multiple Startups. When he is free from creating world-changing products you can find him at the local motor race tracks breaking lap records.

Leave a Reply

Related Posts

How to Manage the “Need for Speed” Without Sacri... The pace of innovation today is faster than it has ever been. Customers are much more active and vocal thanks to social and mobile channels, and the c...
Determining the First Release The first thing you release needs to put the solution to your customer's most important problem in their hands. Deciding what the most important probl...
The Art of Building Rapid (and Valuable) Proofs of Concept Clients and stakeholders want results. They want assurances that their investment is well spent and they're building the right product. The software d...
Are You Doing Stuff or Creating Value? You can put a bunch of stickies on the wall, create tons of JIRA tickets, and commit lots of code, but are you creating value? Is the work your produc...
Costovation – Giving Your Customers Exactly What They ... On this episode of The Innovation Engine podcast, we delve into “cost-ovation,” or innovation that gives your customers exactly what they want – and n...