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.
“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
“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:
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
“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
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
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:
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.