3 Ways how Web Developers also benefit from Accessibility
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!
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
- HTML Semantic Elements (W3 Schools)
- HTML: A good basis for accessibility (MDN)
- CSS Attribute selectors (MDN)
Update on 12/16/2022
Revised section on stateful, semantic CSS selectors.
Posted on