DEV Community

Discussion on: 🤷‍♂️ W1y d2s a11y h2e to be so b4y c9d a1d i10e? 👿

Collapse
 
riyanagueco profile image
Riri

I think because I'm a newbie developer and have just started really learning about web development pretty recently, I already knew about the accessibility issues in web development pretty early on in my learning journey. When you learn about HTML5, you learn a little bit about accessibility and, eventually (if you really care about what you do), everything else that comes with it.

I guess the hardest part about learning how to make your website accessible is that a "non-accessible" website and an accessible website is pretty much the same thing to a person like me. I wish there was a way we could outright tell developers "Hey, this isn't going to work. I know it looks like it's working, but it won't work and here's why." I know Chrome Lighthouse does that pretty well, but not every developer knows tools like Chrome Lighthouse exist. (I guess I'm kind of describing a superpowered IDE at this point that goes "Error: your website is inaccessible." every time you write code that doesn't follow the accessibility guidelines.)

Collapse
 
grahamthedev profile image
GrahamTheDev

The best way to learn accessibility (and by extension build much better products) is to learn how to use a screen reader.

NVDA is free for Windows or if you use a Mac you have VoiceOver ready to go.

It takes about 30 minutes to learn the basics and within an hour you know a lot of the core commands.

Try anything you build with it and that will soon give you your answer to whether something looks like it is working vs whether it is actually working.

I am not saving that solves the issue of knowing how to fix it, but at that point you can ask a question here or on Stack Overflow with the [accessibility] tag and I / others will be able to help (normally me on Stack Overflow 😋)

There is a great plugin for Chrome called Accessibility Insights - a little complicated at first but it will guide you through loads of tests and is a great way to learn about logical focus order, keyboard traps and all sorts of other things that sound complex but are actually super simple (yet again, back to my original point in my rant that they are simple but finding the information is difficult!)

Collapse
 
riyanagueco profile image
Riri

Thank you so much! 🙏 This will help me tons. I rely a lot on Chrome Lighthouse, didn't know NVDA and Accessibility Insights existed.

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Also Lighthouse is powered by Axe on the accessibility front - Axe can be used as a plugin you can use straight from devtools (it is much easier to use as you can highlight the affected elements etc, although they do point you to WCAG for solutions!