
Common accessibility problems, and how to fix them - todsacerdoti
https://blog.scottlogic.com/2020/07/02/6-most-common-accessibility-problems.html
======
ghusbands
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
[https://wave.webaim.org/report#/https://blog.scottlogic.com/...](https://wave.webaim.org/report#/https://blog.scottlogic.com/2020/07/02/6-most-
common-accessibility-problems.html)

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

~~~
kps
Very common; ironic examples abound.
[https://wave.webaim.org/report#/https://developer.mozilla.or...](https://wave.webaim.org/report#/https://developer.mozilla.org/en-
US/docs/Web/Accessibility/Understanding_WCAG/Perceivable)

------
sradman
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](https://developers.google.com/web/tools/lighthouse)

------
corty
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
Related, is there any consensus as to which are the best screen readers?

~~~
ghusbands
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.

~~~
asadotzler
NVDA has surpassed JAWS as the most popular SR.
[https://webaim.org/projects/screenreadersurvey8/#primary](https://webaim.org/projects/screenreadersurvey8/#primary)

------
eska
According to this, if I have

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

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

~~~
ghusbands
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.

~~~
eska
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.

