Most Common (well-meaning) A11y Mistakes
Tags: a11y, html, css, webdev
Published: 2018-08-09 16:58:37

---
title: Most Common (well-meaning) A11y Mistakes
published: true
tags: accessibility, html, css, webdev
canonical_url: https://laken.net/blog/most-common-a11y-mistakes/
---

<!-- wp:paragraph -->

Whenever I look over a website for Web Accessibility (a11y) issues, there are a few a11y mistakes that I see repeated many times.

<!-- /wp:paragraph -->

<!-- wp:more -->  
  
<!-- /wp:more -->

<!-- wp:heading -->

## Not every image needs alternative text

<!-- /wp:heading -->

<!-- wp:paragraph -->

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.

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

If an image doesn’t need alternative text, you still must not omit the `alt` attribute! Instead, leave the `alt` attribute empty, like so:

<!-- /wp:paragraph -->

<!-- wp:preformatted -->

```
<img src="foo.png" alt="" />
```

<!-- /wp:preformatted -->

<!-- wp:paragraph -->

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.

<!-- /wp:paragraph -->

<!-- wp:heading -->

## Every form field needs a label  

<!-- /wp:heading -->

<!-- wp:paragraph -->

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.

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

On some screen-readers, the placeholder is ignored entirely. Therefore, you should always use a label associated with each form field.

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

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:

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

HTML:

<!-- /wp:paragraph -->

<!-- wp:preformatted -->

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

<!-- /wp:preformatted -->

<!-- wp:paragraph -->

CSS:

<!-- /wp:paragraph -->

<!-- wp:preformatted -->

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

<!-- /wp:preformatted -->

<!-- wp:paragraph -->

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.

<!-- /wp:paragraph -->

<!-- wp:heading -->

## Too much ARIA

<!-- /wp:heading -->

<!-- wp:paragraph -->

In HTML5, you can use `aria` attributes that allow assistive technologies to understand parts of your website better.

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

However, if aria is misused, it’s worse than if you didn’t have any `aria` attributes on your site at all.

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

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.

<!-- /wp:paragraph -->

The post [Most Common (well-meaning) A11y Mistakes](https://laken.net/blog/most-common-a11y-mistakes/) appeared first on [Laken Hafner](https://laken.net).