Four Foundational Principles for an Accessible Website

A year ago, I started on a journey to learn more about web accessibility. I was curious, and still am, about how I can ensure that the websites I build are accessible to people with disabilities—people like my friend Kimmie who is blind. Kim is incredibly smart, beautiful, and kind. I’ve always been fascinated with how she gracefully navigates everyday life. I feel humbled that as a developer, I have the power to make the web a better place for her and others with disabilities.

While attending a WebAIM accessibility training, I learned about the four guiding principles of accessibility: Perceivable, Operable, Understandable, and Robust (POUR). These principles are the foundation of the second version of the Web Content Accessibility Guidelines (WCAG 2.0). The latest version of the guidelines (WCAG 2.1) provides updated web accessibility guidance. What are the four POUR principles? I’m glad you asked! Keep reading for definitions of each principle and a task list to help you develop a more accessible website.

Perceivable

“Information and user interface components must be presentable to users in ways they can perceive.” —as defined by WCAG 2.1

A website is perceivable when a user can use their sense(s) of sight, sound, and touch to identify and process the information presented. For example, someone who has low vision or is blind perceives information by hearing the website’s content spoken through a screen reader. And someone who has difficulty hearing or is deaf perceives information by sight.

Here are some steps that you can take to increase the perceivability of a website:

• Write semantic HTML that allows for text to be transformed into audio and Braille by assistive technologies

• Provide images, graphics, and animations with clear, descriptive alt text

• Apply sufficient color contrast so that all content is readable

• Include readable field labels on form input fields

• Provide transcripts for audio and video elements

• Provide captioning for videos

• Provide alternatives to time-based media, such as audio and videos

  • Embed sign language as part of a video file

  • Provide a video file with sign language as an alternative to audio

  • Provide alternative audio for video files

Operable

“User interface components and navigation must be operable.” —as defined by WCAG 2.1

A website is operable when a user can find, navigate, and interact with website content solely through the use of a keyboard.

Here are some steps that you can take to increase the operability of a website:

• Avoid the use of mouse-dependent interactions, such as onMouseOver and onMouseOut JavaScript event handlers

• Include search features, site indexes, and site maps

• Create a discernible content structure of headings, sections, bulleted lists, links, and other elements by using semantic HTML

• Use bypass blocks for repeated content found on every page, such as skip links for the website navigation

• Give users the capability to control timing and time limits

• Give users the capability to control media players, animation, and other types of time-dependent content

• Do not design content in a way that is known to cause seizures

• Do not hide keyboard focus styles in an effort to manipulate the design aesthetic

Understandable

“Information and the operation of user interface must be understandable.” —as defined by WCAG 2.1

A website is understandable when a user is able to read and comprehend the content. The user interface should be predictable as well as easy to learn and to remember.

Here are some steps that you can take to increase the understandability of a website:

• Provide consistent, predictable navigation and identification of elements

• Define abbreviations, acronyms, unusual words, phrases, idioms, and jargon

• Use tooltips to give users access to instructions or guidance

• Use simple language and provide explanations of background information that readers may not know

• Supplement videos, animations, and audio with text

• Make form controls predictable and clearly label them

• Provide contextual help, confirmation screens, feedback, error identification, and error prevention

Robust

“Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.” —as defined by WCAG 2.1

A website is robust when it is designed to function well across different platforms, devices, and technologies. Users should be able to select a device and interact with the website in the browser of their choice.

Here are some steps that you can take to ensure a website is robust:

• Maximize compatibility with current and future user agents by writing semantic HTML

• Use the W3C validator to validate code and identify errors

• Specify the purpose of non-standard user interface components using name, role, and value

• Implement an accessibility testing protocol

Learn More!

By following these principles to make your website perceivable, operable, understandable, and robust, you are helping to make the web a better, more inclusive place for everyone. If you want to learn more about web accessibility, check out the following sites:

• W3C Web Accessibility Initiative

• WebAIM

• Deque University Accessibility Resources and Code Examples

Or if you prefer learning via video tutorials, check out the Web Accessibility course offered by Udacity or the Start Building Accessible Web Applications Today course offered by Egghead.io.