The Future of Tech is Inclusive

Why Accessibility Matters More Than Ever

Imagine navigating the web with only keyboard shortcuts or relying on a screen reader for every piece of text you encounter. These are everyday realities for millions of users, and it’s why accessibility in tech is no longer just a ‘nice-to-have’ — it’s a necessity.

Introduction

When I first started working with the accessibility team at Adobe, I didn’t fully grasp the gravity of creating inclusive products. Over time, as I dove deeper into the topic, I’ve learned a lot about what accessibility means and how it affects everything from design to development. It’s not just about following guidelines — it’s about making products that everyone, including people with disabilities, can use.

“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.” — Tim Berners-Lee, founder of the Internet.

What is accessibility?

Accessibility (A11y) in technology means ensuring that everyone, including people with limited abilities, can easily use and navigate digital products.

Why is A11y important?

• Legal Responsibility: Along with an inclusive user experience, A11y ensures minimizes legal risks for the organization. For example, In the United States, accessibility laws like the ADA, Section 508, and CVAA enforce inclusive products.
• Market Reach: Companies like Adobe, Microsoft, Apple, and Google prioritize accessibility to tap into global markets, where international sales can surpass domestic revenue.
• Brand Loyalty: Accessible products show customers that you care about inclusivity, which can increase brand loyalty.
• Fosters Innovation: Tackling accessibility challenges often leads to innovative solutions like Apple’s VoiceOver and Google’s screen reader.

Challenges in Accessibility

• Common Myths: Many people believe accessibility only benefits people with severe disabilities, but it actually improves usability for a broad range of users, including those with temporary impairments.
• Inconsistent Implementation: Different teams may prioritize accessibility differently, leading to inconsistent experiences.
• Evolving Technologies: New web features or platforms may not always support accessibility out-of-the-box.
• Legacy Code: Older websites or applications may require significant redesigns to meet modern accessibility standards.

Accessibility Best Practices

Creating accessible products ensures that people with disabilities — whether they have visual, auditory, cognitive, or motor impairments — can interact with technology just as easily as anyone else.

1. Keyboard Navigation

• Focus Management: Ensure the focus order is logical and easy to follow. Users should be able to tab through elements in a predictable order.

Focusing elements

• Keyboard Shortcuts: Provide keyboard shortcuts for essential actions like opening menus, submitting forms, or switching between sections.
• Visible Focus Indicators: Highlight focused elements clearly, making it obvious where the user is on the page.

<button id="next">Next</button>
<button id="previous">Previous</button>
<script>
 document.getElementById('next').addEventListener('click', function() {
 document.getElementById('next').focus();
 });
 document.getElementById('previous').addEventListener('click', function() {
 document.getElementById('previous').focus();
 });
</script>

2. Color Contrast

Proper color contrast ensures that content is visible to all users, especially those with low vision or color blindness.

• WCAG Guidelines: Aim for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
• Avoid Color-Only Indicators: Never rely on color alone to convey information (e.g., red for error messages). Use icons, text, or patterns in addition to color.

Color Contrast for accessibility

3. Screen Reader Compatibility

• Semantic HTML: Use proper HTML tags (headings, lists, buttons, links) to help screen readers interpret content structure.
• Alt Text for Images: Provide clear, descriptive alt text for images, icons, and charts.

<img src="chart.jpg" alt="Bar chart showing quarterly sales growth. Q1: 20%, Q2: 35%, Q3: 50%, Q4: 65%">

• Aria Labels: Use ARIA (Accessible Rich Internet Applications) labels and roles to enhance the accessibility of dynamic content and interactive elements.

<button aria-label="Close" onclick="closeWindow()">X</button>

4. Forms and Inputs

Forms are essential components of most websites, but they can be challenging for users with disabilities if not designed correctly.

• Error Identification: Inform users of errors in real-time and provide suggestions on how to fix them.
• Accessible Validation: Ensure that form validation messages are accessible to screen readers and are clearly understandable.

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Submit</button>
</form>

5. Responsive Design

A responsive design ensures that your content is accessible on any device, from desktops to mobile phones.

• Flexible Layouts: Use fluid grids and flexible images that adapt to different screen sizes.

Responsive Web Design Layouts

• Touch Targets: Ensure buttons and clickable elements are large enough to be used with touch screens and easy for users to interact with.
• Viewport and Orientation: Make sure content adapts well when users switch between landscape and portrait modes on mobile devices.

References

[1]: Demystifying WAI-ARIA Demystifying WAI-ARIA, 18 ARIA attributes that every web developer should know

[2]: MDN Browser Compatibility Report web.dev