Most Common (well-meaning) A11y Mistakes

Laken Hafner — Sun, 29 Apr 2018 14:06:32 +0000

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="" />

An empty 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:

HTML:

<label for="email_address" class="sr-only">Email</label>
<input id="email_address" type="text" placeholder="Email" />

CSS:

.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 margin: -1px;
 padding: 0;
 border: 0;
 clip: rect(0 0 0 0);
 overflow: hidden;
}

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 allow 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), the example you see might have role="button". The 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 making your page scroll down on many browsers.

The post Most Common (well-meaning) A11y Mistakes appeared first on Laken Hafner.

Forem: Laken Hafner

Most Common (well-meaning) A11y Mistakes

Not every image needs alternative text

Every form field needs a label

Too much ARIA