Commonly abused HTML & CSS that hurt accessibility

by: Joe Watkins

  • 04 September 2015

After performing many website accessibility audits for clients, I find myself continually running into the same key offenders that cause inaccessibility. I thought it would be fun to gather up these few buggers and show them to you and offer up some solutions for each.

1. CSS outline: none;

The CSS outline property is one that designers and developers often abuse in hopes to remove the unwanted focus rings If outline: none; is used without offering a custom :focus state it can make it difficult for some users to navigate around the website. Some keyboard-only users tab around the interface. If there is no :focus state giving visual feedback to where the user is in the document it is easy for that user to be confused or lost. They will get frustrated and simply leave your website.

Solution: If you remove the outline back it up with a creative :focus state. Use this as an opportunity to take control of the look and feel of the :focus state by using CSS borders, backgrounds, and even text color. Try and build this into your design phase. Much like :hover states are defined in design :focus states can be as well.

UK.gov does a wonderful job handling focus state creatively.

UK.gov website

Using outline

a:focus {
	outline: 2px solid red;
	background: yellow;
}

Removing outline with fallback

a:focus {
	outline: none;
	border: 2px solid red;
	background: yellow;
}

2. HTML5 Placeholder Attribute

I’ve written about misusing HTML5 placeholder attributes before and would love to see that attribute deprecated. I’ve even submitted bugs to Google Chrome regarding how the default contrast ratio of the placeholder text fails WCAG 2.0 contrast ratio tests. Google claims the placeholder is “deliberately intended to be hard to see”.

The goal is to NOT use placeholder as a substitute for the label tag. This is common because the placeholder value will autohide when the user focuses on the field. It is very common for a developer to leverage this out-of-the-box functionality for infield labels.

Some assistive technology does not even recognize, or speak aloud, the value in the placeholder attribute so it should not be used as a <label>.

Solution: Use the placeholder attribute on forms wisely and sparingly. Remember that not all assistive technology recognizes the attribute. This is text that should coach the user for the input field only.

<form role="form">
	<p class="text-input">
		<label for="email-address">Email Address</label>
		<input type="text" name="email-address" id="email-address" placeholder="enter your email address" /> <button>Submit</button>
	</p>
</form>

3. Missing <label> tags

When authoring web forms remember to include the <label> tag for each input field. It is important to remember to tie that <label> to a particular field by adding the for attribute.

Solution: Below is a good example of a <label> tag. Notice the ID of the input field matches the for attribute.

<label for="first-name">First Name</label>
<input type="text" id="first-name">