How to Build Accessibility into the Foundation of Your Design

Just like a home needs a strong foundation, accessibility needs to be built into the front end code of digital products and experiences. This accessible foundation then needs to be extended into the design patterns and content that users will interact with. Overlaying an accessibility widget on a poorly coded and designed website is akin to painting over a cracked foundation. It takes a dedicated, cross-functional team to ensure proper accessibility across code, design and content.

Web Content Accessibility Guidelines (WCAG)

The Web Content Accessibility Guidelines (WCAG) AA 2.1 is a set of internationally recognized guidelines that outline the standards for creating accessible digital content. Accessible technology offers numerous benefits including: broadening the user base by accommodating individuals with disabilities, improving overall usability for all users and enhancing search engine optimization (SEO) through better structured content and semantic markup. Finally, it reduces the risk of potential legal action by fostering legal compliance and adhering to accessibility regulations in many countries.

The POUR Method

The POUR Method, which stands for perceivable, operable, understandable and robust, is a great way to build accessibility into your digital products. By incorporating the POUR principles into the foundation of your build process, designers and developers can effectively address accessibility concerns and enhance the overall user experience for individuals with disabilities.

Perceivable

Perceivable means ensuring that all information and content on the website can be perceived by all users, including those with visual or hearing impairments. This involves providing alternative text for images, captions for videos, proper color contrast for readability and clear text formatting and resizing. 

Operable

Operable refers to making the website easily navigable and functional for users of all abilities, including those who rely on keyboard navigation or assistive technologies. It is also important to consider how users might interact with your user interface through voice or speech commands. 

Understandable

Understandable entails presenting information and content in a clear and intuitive manner, avoiding complex jargon and providing helpful instructions. This includes clear language written for varying reading levels, strong use of visual design principles and clear and consistent use of headings and navigation.

Robust

Finally, Robust means creating a website that is compatible with a variety of assistive technologies and future-proof, ensuring that it remains accessible as technology advances.

Accessible Design Practical Tips

1. Audit the beta or live version of your website with a tool like Axe. Generally running the tool on key pages will reveal the majority of the accessibility issues.

2. Use descriptive alt text for images to ensure they are accessible to visually impaired users. Don’t include unnecessary words like ‘image of’. Want to learn more about when and how to apply alt text to images? Check out the W3C Decision Tree.

3. Optimize color contrasts to ensure readability for users with visual impairments. 3:1 contrast ratio for large text (18pt regular or 14pt bold and above) and icons and a 4.5:1 contrast ratio for small text.

4. Implement clear and consistent headings and structure for easy navigation. This includes having a Heading 1 (H1) on each page and not skipping subheadings (going from H1 to H4)

5. Provide closed captions or transcripts for multimedia content to cater to individuals with hearing impairments. Consider voice over application for video content.

6. Design forms and interactive elements with clear labels, error notifications, and logical tab order.

7. Test your design using assistive technologies (experiencing one of your designs through a screen reader can be a great learning experience) and conduct user testing with individuals who have disabilities.

Accessible design is a foundational principle that aims to create digital experiences that are accessible to all. By following the WCAG AA 2.1 guidelines, designers and developers can foster inclusivity, expand their user base, and provide an exceptional experience for all users.