How to Fail at Accessibility

Hi everyone! My name is Trish, a.k.a. @feesh on the internet, and my pronouns are she/her. Presently, I’m a Front End Engineer at Slack, where I work on our internal design system and component library, called Slack Kit. More specifically, I work with fellow engineers to build React components that comprise the foundational layer of…

Slack logo
Slack
•
Trish Ang
•18 min read•advanced•
--
•View Original
ChefCSSHTMLReact

Overview

The article discusses the importance of accessibility in software development, sharing personal experiences and strategies to avoid common pitfalls. It emphasizes the need for developers to integrate accessibility into their processes to ensure inclusivity for all users.

What You'll Learn

1

How to test for web accessibility using WCAG guidelines

2

Why integrating accessibility into the development process is crucial

3

How to build accessible components with proper HTML and ARIA markup

4

When to involve accessibility experts during the development cycle

Prerequisites & Requirements

  • Basic understanding of web development and accessibility concepts
  • Experience with front-end development practices(optional)

Key Questions Answered

What are the key areas to test for web accessibility?
The key areas to test for web accessibility include color contrast, user interface zoom support, keyboard navigation, and screenreader support. These areas ensure that content is perceivable and usable for individuals with various disabilities.
How can developers build accessible components?
Developers can build accessible components by using proper HTML and ARIA markup, ensuring that assistive technologies can interpret the content correctly. This includes using semantic HTML and managing focus programmatically to enhance user experience.
Why is it important to involve accessibility experts in the development process?
Involving accessibility experts ensures that all features meet accessibility standards, preventing potential issues that could hinder user experience for individuals with disabilities. This proactive approach leads to more inclusive products.
What are common pitfalls in web accessibility?
Common pitfalls include neglecting keyboard navigation, failing to test color contrast, and not considering screenreader compatibility. These oversights can lead to inaccessible web applications that exclude many users.

Key Statistics & Figures

Percentage of websites not meeting accessibility standards
70%
A study in the UK found that around 70% of all websites did not meet accessibility standards.
Daily users of Slack
10 million
Slack has over 10 million users daily, making accessibility crucial for effective communication.

Key Actionable Insights

1
Incorporate accessibility testing early in the development process to identify issues before launch.
By integrating accessibility checks during development, teams can address potential problems proactively, reducing the need for extensive revisions later.
2
Use tools like the Colour Contrast Analyzer to ensure text is readable against its background.
This tool helps developers verify that their color choices meet accessibility standards, which is crucial for users with visual impairments.
3
Encourage all team members to participate in accessibility training.
Training ensures that everyone involved in the development process understands the importance of accessibility and how to implement it effectively.

Common Pitfalls

1
Neglecting keyboard navigation can lead to inaccessible web applications.
Many developers focus on mouse interactions, forgetting that users with mobility impairments rely on keyboard navigation.
2
Failing to test color contrast can result in unreadable text.
Inadequate contrast between text and background can make content difficult to read for users with visual impairments.