3 Ways how Web Developers also benefit from Accessibility

Posted on 11/27/2022

Web accessibility is an ethical duty and economically viable. You contribute to the inclusion of people with disabilities and increase your potential client base. Still, as a web developer, you might be thinking: “That's great for my company and society in general. But it means more work for me, argh!”

I get it! Web accessibility can be overwhelming in the beginning. And yes, some stuff like ARIA live regions actually increase your workload slightly. But I want to let you in on a little secret: Accessibility will make your life as a web developer easier and save you time in the long run!

A web developer sitting at her desk, facing three monitors. Lines of code are visible on a monitor. Photo: © ThisIsEngineering / pexels.com

You don't believe me? Then keep on reading for three examples of the superior experience that accessibility brings.

1. Semantic markup is easier to read and maintain

Semantic markup doesn't only convey information about the meaning of each element to assistive technologies. It also conveys this information to developers who need to read it, modify it or refactor it.

Imagine you're joining a new team and getting familiar with the codebase. Would you be happy to find this kind of code?

<div class="fixed-header" role="banner">
    <div id="header-logo" role="img" aria-label="Logo Example Page"></div>
    <div role="navigation" aria-label="Main Navigation">
        <div role="list">
            <div role="listitem"><a href="/">Home</a></div>
            <div role="listitem"><a href="/about">About</a></div>
        </div>
    </div>
</div>
<div role="main">
    <div role="heading" aria-level="1">Best Pizza in Town</div>
    <div role="heading" aria-level="2">Pizza Salami</div>
    <div id="pizza-salami" role="img" aria-label="Pizza with salami slices"></div>
    <div>Some text</div>
    <div role="heading" aria-level="2">Pizza Capricciosa</div>
    <div id="pizza-capri" role="img" aria-label="Pizza with baked ham, mushroom and artichoke"></div>
    <div>Some text</div>
</div>

Damn, that's a lot of div tags! Kinda hard to read. Well, wouldn't you rather see this HTML code instead:

<header>
    <img src="/header-logo.svg" alt="Logo Example Page">
    <nav aria-label="Main Navigation">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
        </ul>
    </nav>
</header>
<main>
    <h1>Best Pizza in Town</h1>
    <h2>Pizza Salami</h2>
    <img src="/pizza-salami.jpg" alt="Pizza with salami slices">
    <p>Some text</p>
    <h2>Pizza Capricciosa</h2>
    <img src="/pizza-capri.jpg" alt="Pizza with baked ham, mushroom and artichoke">
    <p>Some text</p>
</main>

Ah, that's better! Now you can talk about the HTML code with your teammates in a meaningful way. Fun fact: Both code examples would result in the same accessible experience for screen reader users. But only the second one is beneficial for web developers.

If you think that I exaggerated with my example of spaghetti code hell, let me tell you this: I've seen variations of this on many websites out there. Which makes me sad.

2. Native HTML controls are keyboard operable by default

HTML elements like a, button, input type="checkbox", or input type="radio" are all accessible by default. For example, users can navigate between buttons using the tab key and activate their selection with the space or enter key.

Imagine, for whatever reason, you want to implement a button using the div element. To make this abomination operable through a keyboard, you would have to do the following:

Apply tabindex="0" to include the div in the tab order.
Define a clearly visible focus indicator to convey when the div has focus.
Implement a keydown event handler to activate the “button” when the space or enter key is pressed.

Here's what you need to do using the native button element:

Nothing!

Buttons are keyboard operable by default and trigger the click event when the space or enter key is pressed. And you can easily customize their styling with CSS. This is also true for most form elements. Check out my post about styling web forms.

3. Stateful, semantic CSS selectors are more expressive and robust

You can leverage the semantic tag names and ARIA attributes for expressive and easy to understand CSS selectors like header nav > ul { ... } or button[aria-expanded="true"] { ... }.

By interweaving your CSS rules with HTML tags and attributes, you no longer need to manage extra CSS classes dynamically with JavaScript. You can concentrate on your business logic being reflected in the HTML code alone (e.g., by setting aria-expanded to true or false).

For more examples and an in-depth look at the concept, check out the article “Style with Stateful, Semantic Selectors” by Ben Myers.

Useful Resources

Update on 12/16/2022

Revised section on stateful, semantic CSS selectors.