Putting a Stop in Web Accessibility
Tags: webdev, opinion, a11y, watercooler
Published: 2023-02-07 14:37:29

---
title: Putting a Stop in Web Accessibility
published: true
description: Many developers think of web accessibility as an optional "nice to have", and some others don't think about it at all. But what if these same accessibility standards that we build the "information superhighway" with were used to build a real highway.
tags: webdev,opinion,a11y,watercooler
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fj9ssagow9n4ckggqqgs.jpeg
canonical_url: https://alvaromontoro.com/blog/68026/stop-web-accessibility
---

<p><b>Imagine the Internet as a road</b>. This shouldn't be difficult to imagine, considering it has been called the <a href="https://en.wikipedia.org/wiki/Information_superhighway">Information Superhighway</a>. In this scenario: the network would be the road itself; websites would be cars; developers would be drivers; and Internet users would be pedestrians.</p>

<p>On this imaginary road, we have a busy intersection where people like to cross because they need to get from one side to the other. This is a problem. Many people will be able to make a run for it and get to the other side. Many others may struggle or get hit by a car. However, the majority will not risk it. They will wait, ultimately unable to cross at all.</p>

<p>Any person could be trapped on the wrong side of the road: young, old, people with disabilities, parents with children, the postman carrying a heavy bag of letters, an older person with a walker, the runner who is scared that an accident could end their Olympic dreams...</p>

<p>The town hall &mdash;which in this Internet scenario, would be the groups that write the web specifications for HTML, CSS, WCAG, etc.&mdash; sees the problem and decides to take action to solve it: they add a crosswalk. A feature that would make it easier for people to navigate through the intersection.</p>

<p>The crosswalk symbolizes any feature that makes the web easier for people: semantic tags, different color systems, ARIA attributes, a CSS property that helps layout content, WCAG, etc. You name it.</p>

<figure>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5m7q09pivuy27xfb0y2.jpeg" alt="a crosswalk" loading="lazy"/>
<figcaption>Photo by <a href="https://unsplash.com/@daryan">Daryan Shamkhali</a> on <a href="href="https://unsplash.com">Unsplash</a><br/>&nbsp;</figcaption>
</figure>

<p>This is a great start. Many people feel safer now that there is a crosswalk where they need to cross the road. But there is still a problem: Many drivers don't know (or maybe don't want to know) what a crosswalk is. They will not yield or stop for pedestrians, who, in a good number, will still be stuck on one side, afraid to start walking on the road and find themselves surrounded by speeding cars that don't honor the crosswalk.</p>

<p>At this point, the government decides to take action. They add a stop sign next to the crosswalk and stricter requirements for what drivers must do when they approach a stop sign. This would be the equivalent of the government creating new laws and regulations (e.g., <a href="https://www.ada.gov/">ADA</a>, <a href="https://www.section508.gov/">Section 508</a>, <a href="https://ec.europa.eu/social/main.jsp?catId=1202">EAA</a>, etc.) to make developers follow the rules and create more accessible websites.</p>

<p>Now things are getting better. The number of drivers not stopping at the stop sign is considerably reduced, and pedestrians can cross the road. It is a nice ending to our story for everyone. (Spoiler alert: it is not.)</p>

<p>Web development and web accessibility can be like that road. We may ignore the crosswalk, but it still exists, and we may get a nasty ticket if caught. Making sites accessible is the right thing, but sometimes we can take it one step further. So far, most drivers follow the law, but that doesn't mean they do all they can. Their actions are limited to the bare minimum. They are checking some boxes that cover basic WCAG requirements. They may stop, let pedestrians cross, and then continue, but what happens when the person waits and doesn't (or can't) cross?</p>

<figure>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glkpkmnhpkgo4gxu0aiq.jpeg" alt="an older woman crossing a road at a crosswalk" loading="lazy"/>
<figcaption>Photo by <a href="https://unsplash.com/@connorhoutman">Connor Houtman</a> on <a href="https://unsplash.com">Unsplash</a> (cropped)<br/>&nbsp;</figcaption>
</figure>

<p>Young people, adults, parents with children... they can all cross the road, but do you remember that older person with a walker that we mentioned earlier? That person is still afraid to cross the street. They are worried they may slow down traffic, cause an accident, or don't know how a crosswalk works.</p>

<p>As developers/drivers, we have a choice. We drive around the person and go on our way or stop and help. This would translate into doing something more than just checking accessibility boxes. And it doesn't have to be something incredibly complicated: adding the right ARIA attributes for specific components, creating a keyboard-accessible tab panel, going for WCAG AA-level instead of A-level...</p>

<p>This may take a minute off our busy schedules, but it will make a huge difference for that person. Isn't that worth it?</p>


{% youtube a7nFz44bIGg %}
<small>Completely unrelated video of a man stopping to help an old lady cross a busy street ;)</small>


<p>Many developers may claim accessibility is not for them. After all, they are the drivers, not the pedestrians. But the reality is the opposite. We are not always drivers/developers. More often than not, we will be pedestrians/Internet users. And, even if no one wants to admit it, we will most likely go through all the scenarios of a pedestrian: young, old, brave, afraid... we will even be (figuratively or literally) that older person with a walker waiting for someone to stop and help.</p>

<p>So let's do that. Let's take web accessibility for the serious matter that it is. Let's look for the stop signs, watch out for any pot holes, and help make the road (and the Internet) a better place. For everyone.</p>

<hr/>

<p>Some resources to learn more about web accessibility and help with useful information:</p>
<ul>
<li><b><a href="https://www.a11yproject.com/" rel="noreferrer nofollow external">The A11y Project</a></b>: a community-driven website to make digital accessibility better. Tutorials, articles, resources...</li>
<li><b><a href="https://webaim.org/" rel="noreferrer nofollow external">WebAIM</a></b>: Web Accessibility In Mind provides detailed articles, analysis, and accessibility services.</li>
<li><b><a href="https://knowbility.org/" rel="noreferrer nofollow external">Knowbility</a></b>: a non-profit organization that shares accessibility articles, organizes events and competitions.</li>
<li><b><a href="https://www.w3.org/WAI/tutorials/" rel="noreferrer nofollow external">Web Accessibility Initiative Tutorials</a></b>: A series of practical and comprehensive tutorials from the W3C.</li>
</ul>

<hr />

<p>Thank you <a href="https://twitter.com/ItsCrisDiaz">Cristian</a>, <a href="https://twitter.com/kixxauth">Kris</a>, <a href="https://twitter.com/geefealba">Geefe</a>, and <a href="https://twitter.com/thepetepetersen">Jacob</a>, for your help reviewing and giving feedback on the draft.</p>