Shall We Talk About Web Accessibility?

A quick guide to getting started in the world of web accessibility

Did you know that the first accessibility law in Brazil was enacted in 2000? The Law No. 10.098, dated December 19, 2000, was a starting point for promoting greater inclusion. Even so, despite being over two decades old, accessibility, especially on the web, continues to be a major challenge.

How many times have you stopped to ask yourself: “Can my site be accessed by everyone?”

The reality is that, most of the time, accessibility is not discussed because the information simply doesn’t reach people. And without knowledge, it’s impossible to make changes. So, how about starting now? Let’s explore a little about web accessibility.


What is Web Accessibility?

Web accessibility goes far beyond catering to people with disabilities. It’s about designing digital experiences that are universal, meaning accessible to everyone. This includes people with:

  • Hearing disabilities
  • Cognitive disabilities
  • Neurological disabilities
  • Physical disabilities
  • Visual disabilities
  • Speech disabilities

But the benefits don’t stop there. Accessibility also helps:

  • Mobile device users, such as those using cell phones or smartwatches.
  • Elderly people, whose abilities change with aging.
  • Users with temporary limitations, like a broken arm or lost glasses.
  • People facing challenging situations, like using their phone in intense sunlight or in a noisy environment.
  • Those with slow or expensive connections, who need light and optimized content.

Accessibility is about universal inclusion, and we all benefit from it.


Simplifying: WCAG and Its Levels

The Web Content Accessibility Guidelines (WCAG) were created by the Web Accessibility Initiative (WAI) of the W3C. They provide clear guidelines to make websites, apps, and other digital content more accessible.

Compliance Levels

The WCAG have three levels of compliance to help measure accessibility:

Level A: The Basics

These are the essential criteria to ensure basic accessibility:

  • Text Alternatives: Images must have descriptions (alt) explaining their content.
  • Content Control: Users must be able to pause or stop animations, videos, and other moving elements.
  • Keyboard Navigation: The entire site must be usable with just the keyboard.

Level AA: Advanced Accessibility

Goes beyond the basics and addresses more barriers, such as:

  • Color Contrast: A minimum contrast of 4.5:1 between text and background.
  • Labels and Instructions: Form fields must be clearly labeled.
  • Resizable Text: Content must be legible even when enlarged by 200%.

Level AAA: Ideal Standard

This is the highest level, requiring:

  • Advanced Contrast: A minimum contrast of 7:1 for text and background.
  • Simple Language: Clear and direct content, ideal for people with cognitive difficulties.
  • Live Audio Captions: Required for live broadcasts such as webinars.

Tools to Get Started

Now that you know what WCAG is and its levels, how can you test and implement accessibility? Here are some useful tools:

Browser Extensions

Screen Readers

  • NVDA (Windows): Free and widely used.
  • Orca Screen Reader (Linux): Pre-installed on most Linux distributions but may require adjustments to voice settings.

Updates
While researching to write another post, I found some more screen readers tips:

  • ChromeVox (Chromebooks): It comes pre-installed on Chromebooks, making it ideal for those who use Google Chrome.

  • VoiceOver (macOS e iOS): Integrated into the system, highly reliable for Apple users.

  • TalkBack (Android): Native screen reader for Android devices.


The Next Step is Yours! It’s Ours!

Now it’s time to take action. Review your projects, explore the tools, read the documentation , and start applying accessibility best practices. Remember: developing with accessibility is developing for everyone.

If you liked this content or have questions about how to get started, leave a comment. Let’s work together to make the web more inclusive :)

Built with Hugo
Theme Stack designed by Jimmy