Common accessibility problems, and how to fix them

https://blog.scottlogic.com/2020/07/02/6-most-common-accessibility-problems.html

by todsacerdoti • 6 years ago

55 12 6 years ago

blog.scottlogic.com

ghusbands3• 6 years ago

This page about common accessibility problems actually has an accessibility problem of its own; the text is too thin, as it applies a font-weight of 300. The increased size helps but doesn't fully compensate. It's not just the mentioned color contrast that matters.

(Notably, many OSX-based designers will apply this lighter font weight because OSX increases the stroke thickness of all fonts, on display. So you'll not see the problem if you're using a Mac and you'll probably only see it on a hi-dpi display.)

LeftCorner• 6 years ago

https://wave.webaim.org/report#/https://blog.scottlogic.com/...

An empty link error and several contrast errors. This alone was enough to get my company sued.

kps• 6 years ago

Very common; ironic examples abound. https://wave.webaim.org/report#/https://developer.mozilla.or...

corty• 6 years ago

Most problems I've seen there stem from "but the outdated screenreaders everyone uses cannot parse this". So after of course doing what the original article recommends, you also need to think long and hard about what kinds of new markup or gasp javascript you want to allow. Because the average screenreader out there will beat IE6 in crappyness.

evolve2k• 6 years ago

Related, is there any consensus as to which are the best screen readers?

ghusbands3• 6 years ago

Jaws (for Windows) in the most popular and widely regarded as the best, though it can be a bit costly (like $200-$300 per year).

On windows, NVDA is also widely used and is free, but you will need to buy a good vocaliser/voice for it. Windows has a built-in Narrator, but the voice is not clearly audible at high speed, so people tend to move on.

On phones, iOS and Android both have built-in, capable screen readers, but they lack flexibility for internet usage.

On OSX, the built-in VoiceOver technology is apparently good, and widely used.

If you're wanting to test what the screen-reader experience might be like, you could do worse than trying the one built in to your operating system (Windows Narrator or iOS VoiceOver). Increase the voice speed for a better experience.

forgotmypw17• 6 years ago

This is one of the reasons I still test in IE6 (as well as IE3, Lynx, Netscape 3, and Mosaic.)

It is hard to anticipate all the different ways a client (user agent) can interpret the page.

I did not know much about aria or modern Web accessibility techniques before I had someone using a screen-reader (one I had never heard of before) test the site.

I had already tested with so many other clients, kept it mostly text-based, and took care to use elements as they are intended.

The user was able to complete the tasks without issues.

sradman• 6 years ago

1. Low Contrast Text: use Google Lighthouse [1]

2. Missing Alternative Text for Images: use attributes alt=, aria-label=, aria-labelledby=

3. Empty Links: use attributes aria-label=, aria-labelledby=

4. Empty Buttons: use attributes aria-label=, aria-labelledby=

5. Missing Form Input Labels: use <label>s

6. Missing Document Language: use lang=

Like many problems with the modern web, the solution is to use well formed HTML5 with the aria-label* attributes used to address edge cases.

[1] https://developers.google.com/web/tools/lighthouse

eska2• 6 years ago

According to this, if I have

    <div><img/><span>label</span></div>

should the img have aria-labeled-by as well?

ghusbands3• 6 years ago

It depends. Essentially, the label of the image should be what you would read out to someone in place of the image if you were reading the page out loud.

So if the image is of Jerry running away from Tom and the nearby label is "Classic mayhem", then you should instead use an alt-text like "Classic cartoon with Jerry running away from Tom". But if the image is of Tom Hanks accepting an Emmy and the nearby label is "Tom Hanks accepting an Emmy" then an aria-labeled-by with the span's id is fine.

Note that this is why an alt-text of "Company logo" is almost never what you want; it isn't what you'd read when reading the page out to someone.

eska2• 6 years ago

I see. I'm using Markdown ![alt text](/src/of/image.jpg "title")

So I suppose I can put the title in the <span> and the alt text in the img alt tag, then only use aria-labelledby if no alt text is provided.

Common accessibility problems, and how to fix them

Related Stories