Whenever I look over a website for Web Accessibility (a11y) issues, there are a few a11y mistakes that I see repeated many times.
Not every image needs alternative text
Incorrect alternative text is one a11y mistake I see everywhere, even on the websites of large corporations. Alternative text is only needed if the image conveys additional information that the text does not.
If an image doesn’t need alternative text, you still must not omit the
alt attribute! Instead, leave the
alt attribute empty, like so:
<img src="foo.png" alt="" />
alt attribute tells screen-readers that the image is not needed to understand the content. No
alt attribute causes some screen-readers to try and explain the image, such as reading the image’s URL. As you can imagine, this is a horrible user-experience; it’s even worse when the image does absolutely nothing to help understand the content.
Every form field needs a label
Omitting form field labels in exchange for just using placeholders is considered a trendy thing to do right now in the world of Web Design. It’s troubling that the trend caught on, as it’s horrible for a11y.
On some screen-readers, the placeholder is ignored entirely. Therefore, you should always use a label associated with each form field.
If you are dead set on using placeholders, at least include a label anyway, but with a class that allows screen-readers to see it. For example:
<label for="email_address" class="sr-only">Email</label>
<input id="email_address" type="text" placeholder="Email" />
clip: rect(0 0 0 0);
If you do go this route, make sure that the label text is the same as the placeholder text. The label text is what dictation-based assistive technologies use for navigating form fields on your website.
Too much ARIA
In HTML5, you can use
aria attributes that allows assistive technologies to understand parts of your website better.
However, if aria is misused, it’s worse than if you didn’t have any
aria attributes on your site at all.
The most common misused
aria attribute that I see is the
role one. I believe the reason this one is so widely misused is due to the programming method “Stack Overflow Copy/Pasting”. For example, if you style an
a element to look like a button for your CTA (Call to Action), example you see might have
role attribute doesn’t tell assistive technologies what the element looks like, but how it behaves. Link elements don’t have the same keyboard controls that
button elements do. For example, buttons can be toggled with the space bar, but that doesn’t do anything on a link, other than make your page scroll down on many browsers.