Web Development === Accessibility
Tags: webdev, a11y, javascript, html
Published: 2022-05-19 15:52:06

Accessibility is the core philosophy of the web. 

I haven't been in this space long, and I already see many accessibility experts exhausted from yelling, "Accessibility is a right not a privilege!" I don't know how to explain that you should care about people, so let me put it this way: 

From the technology to the philosophy, the web is based on the idea that anyone, anywhere should be able to access your content. If you're a web developer, and you're not thinking about who you're excluding with the way you've built your page or app, you're not developing for the web.

1. [The World Wide Web](#the-world-wide-web)
2. [The Tools We Use](#the-tools-we-use)
3. [You're Not Developing for the Web If](#youre-not-developing-for-the-web-if)
4. [Learning Resources and Tools](#learning-resources-and-tools)
5. [Conclusion](#conclusion)

## The World Wide Web

Recently, Mia's video for Mozilla, [Why Is CSS So Weird?](https://www.youtube.com/watch?v=aHUtMbJw8iA&ab_channel=MozillaDeveloper), came across my feed. One of the reasons I love this video is that it reminds me of when I was a baby dev in isolation, reading Mozilla Developer Network's "Getting Started with the Web." The more universal reason to love this video is the context it gives to what we're trying to do as web developers:

Give the maximum number of people access to content.

The W3C, or World Wide Web Consortium, is the main international standards organization for the web. They developed [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) and have several [mission statements](https://www.w3.org/Consortium/mission), and the first one is "Web for All:"

> The social value of the Web is that it enables human communication, commerce, and opportunities to share knowledge. One of W3C's primary goals is to make these benefits available to all people, whatever their hardware, software, network infrastructure, native language, culture, geographical location, or physical or mental ability.

To the W3C, this doesn't just mean developing for assistive technology, it also means [internationalization](https://www.w3.org/International/), performance, and [reducing cognitive load](https://www.smashingmagazine.com/2016/09/reducing-cognitive-overload-for-a-better-user-experience).

![a black woman with her hands on her knees, appearing to be squinting at an object in the distance captioned When someone says they don't need web accessibility](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1nzeme4ix1lgw38epwb.jpeg)

When you think about the "good old days" of the internet, the main thing we love to reminisce about was how anyone could host some content and we could all go find it in its hideous glory. The main thing we complain about are the barriers to the content like internet speeds causing pictures to load a couple pixels at a time.

## The Tools We Use

I've heard it over and over again from different angles.

- JavaScript is forgiving, so that there's a better chance it'll end up displaying what you need on the page.
- CSS fails silently and in a way that usually keeps content displayed.
- Poorly written HTML will still display, so you should run your code through a validator.
- Semantic HTML has information built in so that more people can access its content.

The freedom to write bad code and many of the inconsistencies we complain about as web developers are features, not bugs. Furthermore, it's our job to build web applications in a way that gives as many people as possible access to our content. In the same way you'd write error handling, responsive design, and progressive enhancement, it's your job as a web developer to make sure the [accessibility tree](https://developer.chrome.com/blog/full-accessibility-tree/) reflects your content accurately. Just like you'd think about whether it's justified from a performance perspective when you add in extra JavaScript, you need to think about what assistive technology you'd be preventing from getting the state it needs when you write an event handler.

## You're Not Developing for the Web If

- You've disabled [default accessibility features](https://dev.to/colabottles/stop-removing-focus-2o7b) without building a replacement. 
- You're not writing [semantic HTML](https://dev.to/abbeyperini/semantic-html-what-why-and-how-3b34).
- Accessibility testing isn't a part of your release process.

![Simpsons Skinner out of touch meme captioned Am I a bad designer? No, it's the WCAG who are wrong](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/597fu5cfc6qgwcbun4nj.jpeg)

It's built in for a reason. The browsers can't agree with the HTML5 spec or on image types, but do you think a focus outline magically made it into all of them unnecessarily?

Just like you use Prettier or ESLint, you can use an accessibility linter. It's your job to add tools to your toolchain that support your ability to write accessible code for the web. You wouldn't ask if you should write error handling, so you don't need to ask if you should make sure all your images have alt text. 

Speaking of, a lot of this stuff cuts down on the work you have to do, involves writing cleaner code, and/or provides graceful fallbacks if things go wrong. Alt text isn't just for screen readers, it's also what shows up if your link to your image breaks. 

In the U.S., if your employer is really adamantly against development with accessibility in mind, you can always reference the [Americans with Disabilities Act](https://www.ada.gov/). Yes, even if it's just an intranet, your employees can sue you for making it inaccessible.

### Documentation and Plain Language

Accessibility doesn't end with the code you push to production. [You can't remove the human element from tech.](https://dev.to/abbeyperini/12-things-i-learned-during-my-first-year-as-a-professional-developer-i0f#:~:text=There%20is%20no%20way%20to%20remove%20the%20human%20element%20from%20tech.) Writing documentation and writing it in the plainest language possible doesn't just help with onboarding, it also makes your development lifecycle more accessible. You have no idea what kind of background an incoming developer will have, which departments in your company may need to reference your process, or what cognitive disabilities your coworker may have. There's a reason writing materials at an 8th-grade reading level is a communications standard.

Don't believe me? Watch Julia Seidman's talk, [Docs for Equity](https://community.codenewbie.org/juliaseid/on-demand-talk-docs-for-equity-teaching-our-way-out-of-impostor-syndrome-5gf2). Listen to people who are mad about [websites circumventing attempts to archive information](https://twitter.com/Seglegs/status/1333191516517351424?t=Ss_p64OzJQrSzp6gFoHsLQ&s=19). Information should be accessible for those who need it - that's the true power of the web.

## Learning Resources and Tools

Ready to learn more? Here are the free resources I've found helpful in the last two years. If I missed a tool or resource you love, leave a comment!

![ancient aliens meme: accessibility resources](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yyt8s8v5d8wfosdy7kp.jpeg)

### Learn Web Accessibility

- [Mozilla Developer Network's Getting Started with the Web Guide](https://developer.mozilla.org/en-US/docs/Learn/Accessibility) 
- [Inclusive Design Principles](inclusivedesignprinciples.org/)
- [Web accessibility in mind (WebAIM)](webaim.org/articles/)
- [How to Set Up a Screen Reader](https://www.codecademy.com/article/how-to-setup-screen-reader)
- [Hand tremors and the giant-button-problem](https://axesslab.com/hand-tremors/)
- [W3C's Accessibility Fundamentals](https://www.w3.org/WAI/fundamentals/accessibility-intro/)
- [W3C's Introduction to Web Accessibility course](https://www.edx.org/course/web-accessibility-introduction)
- [W3C's WCAG Standards Guide](https://www.w3.org/WAI/standards-guidelines/wcag/glance/)
- [Testing Accessibility Workshop resources by Marcy Sutton](https://workshop-resources.testingaccessibility.com/)
- [Harvard's Digital Accessibility Resources](https://accessibility.huit.harvard.edu/resources)
- [Accessibility Maze](https://de.ryerson.ca/wa/maze.html)
- [HOCUS :FOCUS](focus.hteumeuleu.com/)
- [University of Minnesota Duluth Webdev Newsletter](https://www.d.umn.edu/itss/training/online/webdesign/webdev_listserv.html)
- [a11yproject list of resources](https://www.a11yproject.com/resources/)

### Write with Plain Language

- [Make over your internal communication by writing much more simply](https://www.davisandco.com/blog/how-hard-it-write-simply)
- [Simply Put - A guide for creating easy-to-understand materials](https://www.cdc.gov/healthliteracy/pdf/simply_put.pdf)

### Tools

- [WebAIM contrast checker](https://webaim.org/resources/contrastchecker/)
- [Accessible color generator](https://learnui.design/tools/accessible-color-generator.html)
- [Reasonable Colors](https://reasonable.work/colors/)
- [a11ysupport - caniuse but for accessibility](https://a11ysupport.io/)

### Testing

- [Manual Accessibility Testing: Why & How](https://www.mediacurrent.com/blog/manual-accessibility-testing-why-how)
- [The Importance Of Manual Accessibility Testing](https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/)
- Chrome and Firefox both have accessibility tools in their DevTools
- [web accessibility evaluation tool (WAVE)](https://wave.webaim.org/)
- [axe DevTools extension](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)
- [ARC dev toolkit for chrome dev tools](https://chrome.google.com/webstore/detail/arc-toolkit/chdkkkccnlfncngelccgbgfmjebmkmce)
- [IBM Equal Access Accessibility checker](https://chrome.google.com/webstore/detail/ibm-equal-access-accessib/lkcagbfjnkomcinoddgooolagloogehp?hl=en-US)
- [Microsoft Accessibility Insights](https://chrome.google.com/webstore/detail/accessibility-insights-fo/pbjjkligggfmakdaogkfomddhfmpjeni)
- [axe Accessibility Linter](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter)

## Conclusion

I want to be really clear: you should care about the people your app is excluding. The majority of sites being inaccessible means over a billion people are limited in their independence and options. Still, I see people attending an accessibility conference asking why accessibility experts are even needed... 

Web accessibility is a huge topic with many grey areas. Requirements change based on the browser and user. As long as you are striving to learn more about it, listening to those who are being harmed or excluded, and implementing what you know, you are developing for the web.