Why Web Accessibility Matters: A Guide for Developers and Designers

Why is accessibility important?

Imagine you want to check the weather but can’t.

Imagine you want to track an order you placed but can’t access that information.

Or you simply want to check the hours of a place you’re planning to visit, but it’s not possible.

For most of us, these are simple tasks that we accomplish through the internet. However, for some people with disabilities, this isn’t possible—unless the website properly implements accessibility features.

What is accessibility?

In general terms, accessibility refers to the design of products or devices that can be used by people with disabilities.

What is web accessibility?

It is the ability for people with disabilities to browse and use the internet without problems. There are various types of disabilities, from visual impaired to limited mobility. All these people depend on websites and web applications for education, healthcare, shopping, government services, and more, just like everyone else. Therefore, an accessible website can significantly improve the lives of people with disabilities.

A Team Effort

Implementing accessibility in our developments isn’t the responsibility of just one person or department. It’s a team effort that should be present from product planning, through design, development, and testing. It’s not about "passing the buck" to someone else, it’s something we should all care about as a team.

How to implement accessibility in our developments?

Accessibility can be measured in levels: A, AA, and AAA. Level AAA is the highest, meaning that if your site achieves this rating, it’s considered highly accessible. The recommendations for implementing accessibility are defined by the World Wide Web Consortium (W3C) in a document called Web Content Accessibility Guidelines (WCAG) 2.1. These guidelines are based on four core principles:

Perceivable:

All information must be captured, regardless of the type of disability. For example, a site could offer a Braille version of its content (this depends on the level of accessibility we aim to implement).

Operable:

People should be able to use the website without depending on a mouse. For example, some users navigate only with the keyboard, so the order of elements should be logical and consistent.

Understandable:

The content should be easy to comprehend and not confusing.

Robust:

The site should be compatible with tools like screen readers. There are rules we can follow to ensure that these readers interpret the content correctly.

Implementing accessibility in three different areas

For Designers (Typography):

Hierarchy: Defining sections of information properly helps to understand the content. For example, correctly using <h1>, <h2>, and <h3> tags improves the structure of the content.

Visual presentation of text: One recommendation is to keep lines of text below 80 characters and avoid justified text. Additionally, it should be possible to zoom in up to 200% without requiring horizontal scrolling.

Color contrast: It’s essential to follow color contrast standards to ensure text is readable for everyone. There are tools that help choose the right colors for backgrounds and other visual elements.

There are free online tools to check color contrast, one example is this . The circle indicates how readable the color combination is:

For Developers:

Using ARIA (Accessible Rich Internet Applications): ARIA is a group of attributes that improves navigation for users of accessibility tools. ARIA roles, like role="menu" and aria-label, helps screen readers identify sections of a site, like the main navigation, making it easier for users with screen readers to navigate.

Example Code:

<nav aria-label="Main Navigation">

<ul role="menu">

<li role="menuitem"><a href="/home">Home</a></li>

<li role="menuitem"><a href="/about">About</a></li>

<li role="menuitem"><a href="/contact">Contact</a></li>

</ul>

</nav>

Using alternative text: The alt attribute in images helps describe visual elements for screen readers. If an image doesn’t require a description, you can leave the alt attribute blank (alt=""). This prevents screen readers from reading unnecessary information."

Example Code:

<img src="logo.png" alt="Company Logo">

Forms: Using for and id labels correctly in input fields improves interaction. Additionally, implementing input format validation is better than just relying on placeholders for expected input formats.

Example Code:

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

For Testers:

Testing screen readers: Try navigating your site using a screen reader like VoiceOver or NVDA. Listen to how elements are announced. Adjusting content structure or adding descriptive attributes can make a huge difference.

Color contrast testing: Ensure that the colors in our applications meet the contrast standards. There are free tools available like this that you can use.

Keyboard navigation: Attempt to navigate the website using only your keyboard**.** Test if you can reach all interactive elements, this will give you insights into how to improve accessibility for those who rely on it.

Conclusion

Accessibility is not a luxury or an option—it’s a necessity for many users. As developers, designers, and testers, we must ensure that our products are inclusive and accessible to everyone.