4 Accessibility Principles to Welcome Everyone to Your Website

May 182018

Imagine, if you will, you’re an aspiring actor in NYC working as a waiter, you’re running late but you forgot your white shirt. You buy what you think is a white shirt, only to have your fellow servers ask you why you’re wearing a pink(!) shirt.

That was me. I am one of the millions of people who suffer from a color vision impairment. Mine is fairly innocuous: red-green color blindness. However, there are people who have quite severe, sometimes debilitating, visual and physical problems.

All of us can use our resources to ensure their experience on the web need not be another impediment.

Wrap your head around these stats

The disability market is the next big consumer segment — worldwide composed of more than 1 billion people and $1 trillion in annual disposable income with $544 billion in the US alone.(1)  Disabled Americans are about three times as likely as those without a disability to say they never go online (23% vs. 8%), according to a Pew Research Center survey conducted in the fall of 2016.(2) Read about what happens when businesses don’t do what’s right.

4 Guiding Principles

The World Wide Web Consortium (W3C) works to develop web standards. They have compiled a set of guidelines, Web Content Accessibility Guidelines (WCAG) 2.0, that specify how to make content accessible, primarily for people with disabilities. The 4 main principles of the accessibility guidelines are as follows:

Principle 1: Perceivable | Information and user interface components must be presentable to users in ways they can perceive.

Principle 2: Operable | User interface components and navigation must be operable.

Principle 3: Understandable | Information and the operation of user interface must be understandable.

Principle 4: Robust | Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.(3)

Let’s take a closer look at these four principles, and a few ways that we test them. We use software available on the web that allows us to check for accessibility compliance such as screen readers, color contrast checkers, speech to text, code checkers, etc.

Principle 1: Perceivable

What does this mean? Simply put, it is providing text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols, or simpler language.(3) One example of our testing here at SPR is our use of a screen reader to test web pages to assess if what we can see on the page can be translated to the spoken word and that those spoken words match the actual text on the page. This includes banners, links, headers, buttons, all text, etc. I’ve seen some outstanding web pages and some dreadfully awful pages.

Principle 2: Operable

Some examples: make all functionality available via keyboard, provide users enough time to read and use content, do not design content in a way that is known to cause seizures (obvious, yes?), and provide ways to help users navigate, find content, and determine where they are.(3) Instead of the mouse or trackpad, I should be able to use the keyboard. I would take certain physical actions, such as (a) using the tab/shift+tab key to jump from link to link on the page and when we find a link we want to go to, (b) hitting enter, (c) using the space bar/shift+space bar to scroll up and down the page, or (d) hitting the spacebar to expand a dropdown menu. If the mouse can do it, the keyboard should be able to do it too.

Principle 3: Understandable

Make text content readable and understandable, make Web pages appear and operate in predictable ways, and help users avoid and correct mistakes.(3) One small example of a failed test is: upon tabbing to a date input field a calendar automatically pops up. Why is this a problem? When inputting information or interacting with a control on a page, avoid pop-up widows, change in keyboard focus or any other change that can confuse the user. Remember, we want to make the user experience enjoyable, not confusing.

Principle 4: Robust = Compatible

Maximize compatibility with current and future user agents, including assistive technologies; it is important that content follow conventions and be compatible with APIs so that AT can more easily work with new technologies as they evolve. In content implemented using markup languages, elements have complete start and end tags. (3) The screen reader we use lets the user know where the start and end tags of page elements are located.

It’s the perfect time for organizations to take those extra steps to ensure people with disabilities can take full advantage of everything the web has to offer. I’m ready! Are you?


(1) http://returnondisability.com/disability-market/

(2) http://www.pewresearch.org/fact-tank/2017/04/07/disabld-americans-are-less-likely-to-use-technology/  April 7, 2017

(3) https://www.w3.org/TR/WCAG20/