Common accessibility problems, and how to fix them
blog.scottlogic.com
blog.scottlogic.com
(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.)
An empty link error and several contrast errors. This alone was enough to get my company sued.
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.
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.
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.
<div><img/><span>label</span></div>
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.
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.