DEV Community

Fix 85% of your Web Accessibility issues in 5 easy steps

Alvaro Montoro on May 02, 2019

In a previous post, we saw the importance of Web Accessibility and mentioned The WebAIM Million, an analysis by WebAIM on the current state of Web ...
Collapse
 
vuild profile image
Vuild • Edited

Mr Simpsons*

Great article, useful info well laid out & really covers a lot of the core issues.

I just started using the < picture > tag a lot more, does the same accessibility apply as img?

*check out his amazing CSS Simpsons on GitHub. :)

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Maybe my next post should be about how to draw Homer Simpson with HTML+CSS :)

Collapse
 
vuild profile image
Vuild

Yes, why not.

But maybe Guernica in CSS. 😳

Collapse
 
alvaromontoro profile image
Alvaro Montoro • Edited

Thanks for the comment!

What tag are you using? (It doesn't display it)

Collapse
 
vuild profile image
Vuild

Picture

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro • Edited

The <picture> should have a fallback <img> anyway.

One accessibility issue could happen if the image is not the same, because the alt that the screen reader will read is the one from the <img>. So if for any reason the images in the <source> don't match the one from the <img>, it could be confusing/misleading.

Collapse
 
lilyotv_ profile image
LilyOfTheValley

Hi !
Thanks a lot for this post ! I'm trying to learn more about accessibility for an upcoming project and found myself overwhelmed with the search results, this post is clear, right to the point and gives examples. Do you (or anyone) know where I can find similar resources, to go deeper on the subject ?

Collapse
 
alvaromontoro profile image
Alvaro Montoro

I like WebAIM's tutorials (although it can be a lot of information and a bit overwhelming sometimes). Their accessibility checker is really simple to use and if it finds any issue, it will highlight it, show a short description of why it is an issue, and link to articles and guidelines related to it.

Collapse
 
xowap profile image
Rémy 🤖

Great and perfectly timed for me, I'm researching the topic those days.

A few more things I'd like to read about:

  • Debugging accessibility (like the accessibility tab in the Firefox dev tools which looks great)
  • Testing accessibility (what should we test? How do you simulate color blindness? How do you use a screen reader? What else?)

Also it seems to me that properly labelling forms/sections/etc is pretty important because it's a pre-condition for screen readers to see them as such. Is it just an impression?

Thanks!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

The article was posted here: dev.to/alvaromontoro/free-web-acce...

It's not exactly the answer to all the questions you asked (thanks for the ideas for new topics!), but I hope it's helpful.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

My next article is about the different free tools I use for testing accessibility. It will be posted today or tomorrow (waiting on some editions), and it addresses some of those questions.

Collapse
 
vip3rousmango profile image
Al Romano

When looking for a web accessibility tool, check out this testing page by the UK Government.

This completely inaccessible page is chock-full of 143 accessibility errors and lets you benchmark your Accessibility tools' effectiveness. We made a custom fork of this at work to use for benchmarking tools.

WAVE by WebAIM is okay but there are better tools that scored higher for more coverage like Tenon or Asqatasun for checking during CI/CD pipes.

Not all tools are made equal so it's important to see which tool works best for you!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Those are great suggestions. I normally use Wave, but I have used Tenon too (I need to try Asqatasun).

I always tell people that their results must be taken with a grain of salt, as they mostly check the "technical parts" and miss many real issues (like some on the site that you linked, that would require a more "personal" approach), and many others are overzealous reporting things that could be considered false positives (which could be overwhelming, especially when you are beginning).

Collapse
 
kyleljohnson profile image
Kyle Johnson

Great article! It really bothers me when web developers do not think about accessibility.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks!

Collapse
 
bgavin profile image
Brian Gavin

Agree, these are examples of low hanging fruit but do not necessarily solve for the ux gap disabled users face . Creating Personal Accessible Experiences is a must - hubs.la/Q026r6v10

Collapse
 
sujan99969 profile image
Sujan-99969

the NVDA is not reading the first line in list. please help me out from this