How to Make Your Web Design More Accessible

Public buildings have wheelchair-accessible ramps, braille signs, and accessible parking spaces. These are things that all of us notice, but what about accessibility on the web?

Accessible web design means creating a website that’s accessible to all users. It specifically focuses on people that have disabilities impacting their vision, hearing, and movement. Designing for such inclusions is extremely important.

Web accessibility can also benefit people without disabilities, such as older users with abilities changing due to aging, people with temporary or situational disabilities or limitations, people using smaller screens or slower internet connections.

There are countless ways to make your website accessible and user-friendly. Accessibility isn’t a barrier to innovation. It introduces a set of constraints that will make you brainstorm and explore new ideas.

So — what are the design factors to consider when designing for accessibility?

Web Content Accessibility Guidelines, or WCAG, are a set of guidelines and best practices put together by accessibility experts to address what “accessibility” means methodically.

WCAG is organized around four principles known as POUR:

• Perceivable
• Operable
• Understandable
• Robust

WHAT WCAG IS AND HOW TO IMPLEMENT EACH PRINCIPLE

PERCEIVABLE: WEB CONTENT MADE AVAILABLE TO ALL SENSES — SIGHT, HEARING, AND/OR TOUCH

Text Alternatives: Provide text alternatives for any non-text content

• All images should have descriptive alt-text, except for decorative images
• Form inputs should have associated text labels and not just placeholder text

Time-Based Media: Provide alternatives for time-based media

• Audio and video should have transcripts and/or captions

Adaptable: Create content that can be presented in different ways without losing information or structure

• The reading and navigation order is logical and intuitive
• ARIA landmarks enhance HTML semantics to identify the purpose of interface components better.

Distinguishable: Make it easier for users to see and hear content

• Color isn’t used as the sole method of conveying content or distinguishing visual elements
• Text and images have a strong enough contrast ratio and large enough text
• Paragraphs are no more than 80 characters wide, are not justified, and have adequate line spacing
• Horizontal scrolling is not required

OPERABLE: INTERFACE FORMS, CONTROLS, AND NAVIGATION ARE OPERABLE

Keyboard-Accessible: Make all functionality available from a keyboard

• All page functionality is available using the keyboard

Enough Time: Provide users enough time to read and use content

• Users have control over audio, video, and slideshows
• Content and functionality have no time limits or constraints

Seizures and Physical Reactions: Do not design content in a way that is known to cause seizures or physical reactions

• No page content flashes more than 3 times per second unless that flashing content is sufficiently small
• Users can disable non-essential animation

Navigable: Provide ways to help users navigate, find content, and determine where they are

• The web page has a descriptive page title
• The navigation is logical and intuitive
• Individual sections of content are designated using headings

Input Modalities: Make it easier for users to operate functionality through various inputs beyond the keyboard.

• Multipoint and/or path-based gestures, such as pinching, swiping, or dragging across the screen, should be essential to the functionality
• Clickable targets should be at least 44 by 44 pixels

UNDERSTANDABLE: INFORMATION AND THE OPERATION OF THE USER INTERFACE MUST BE UNDERSTANDABLE

Readable: Make text content readable and understandable

• The language of the page is identified using the HTML lang attribute
• Keep copywrite as simple as possible, avoiding jargon and unusual words

Predictable: Make webpages appear and operate in predictable ways

• There should not be a substantial change when a page element receives focus or the user inputs information

Input Assistance: Help users avoid and correct mistakes

• Form validation errors are efficient, intuitive, and accessible

ROBUST: CONTENT MUST BE ROBUST ENOUGH THAT IT CAN BE INTERPRETED BY A WIDE VARIETY OF USER AGENTS, INCLUDING ASSISTIVE TECHNOLOGIES

Compatible: Maximize compatibility with current and future user agents, including assistive technologies

• Significant HTML validation/parsing errors are avoided
• Markup is used in a way that facilitates accessibility
• If an important status message is presented and focus is not set to that message, the message must be announced to screen reader users, typically via an ARIA

SUMMARY

To summarize WCAG, the layout elements that need the most attention include:

• Layout
• Color
• Navigation
• Keyboard Accessibility
• Audio/Video

There is a lot to think about when it comes to accessibility. Inaccessible platforms affect millions of users throughout the disabled community and prevent them from using such platforms. Following these very thorough Web Content Accessibility Guidelines can assure that your website is accessible to everyone and anyone.

Accessibility in design can seem like a daunting task, but with the proper resources and execution, you can implement it effortlessly:

• WebAIM WCAG 2.0 Checklist: A PDF version of the Web content Accessibility Guidelines
• We Are Colorblind: A colorblind community dedicated to the more than 300 million people who are color blind
• The A11Y Project: A community-driven effort to make web accessibility easier
• Stark: The suite of integrated accessibility compliance tools for product development teams
• Contrast: A macOS app for quick access to WCAG color contrast ratios
• Hemingway: An app that highlights lengthy, complex sentences and common errors