Recently, I heard an informative presentation on accessibility in web design but was disappointed that the speaker didn’t provide many practical examples. Articles dealing with accessibility tend to be very technical and difficult to digest. The goal of this article is to fill the gap between accessibility information and application by providing some practical tips and helpful code snippets.
Accessibility Checkers
I’m going to jump right in by sharing 2 tools that I use to test websites for accessibility issues. Sometimes these give false alerts, but for the most part, they are very helpful and are a great place to start when diving into accessibility.
Things to check
- Be sure to include ALT tags on every image. The added benefit to this is that it will help your SEO as well—two birds with one stone.
- Form labels are a must. All the cool kids are using placeholders instead of the old school form labels, but I have good news—you can still use placeholders instead of labels—just use the .sr-only (screen reader only) class on elements that you want to provide for accessibility without hurting aesthetics. So what is this sr-only class? Here it is:
[css]
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
[/css]
Source: webaim.org
Example usage:
[html] <label class=”sr-only” for=”country-select”>Select Country</label> [/html]
- Font Awesome is not accessible – Fortunately, this isn’t too difficult to fix. All you need to do is change the i tag to a span. You should also use the aria-label attribute when you are using icons in place of text. See examples below:
Not Accessible:
[html]
<i class=”fa fa-search”></i>
[/html]
Accessible:
[html]
<span class=”fa fa-search” aria-label=”Search”></span>
[/html]
- Add a Skip to the main content link. This is extremely important! This link should be the first content in the document. See the example below and notice that it has the sr-only class I talked about above.
Usage Example:
[html] <a href=”#maincontent” class=”sr-only”>Skip to main content</a> [/html]
Main content container:
[html] <section class=”container” role=”document” id=”maincontent” tabindex=”-1″> [/html]
Important: You should include a tabindex=”-1″ on the target of the skip link. IE and Chrome both require this attribute to be present to make the skip link work consistently.
- “Read More”/”Learn More” links are a big no-no. These are defined as uninformative link phrases. In order to be accessible, links need to be more descriptive. Links need to make sense when taken out of context.
- Never ever use all caps for headings or anything other than abbreviations. Screen readers read all caps as individual letters which are very A-N-N-O-Y-I-N-G for people with disabilities. Instead, use CSS text-transform: uppercase;
- Make sure downloads are clearly marked as downloads with text or ALT text.
- Make sure there is plenty of contrast between the text and the background. Smaller text needs more contrast or needs to be bolded if using a lighter color. Text larger than 18px requires less contrast.
- Avoid PDFs at all costs. “Unless authored with accessibility in mind, PDF documents often have accessibility issues. Additionally, PDF documents are typically viewed using a separate application or plug-in, and can thus cause confusion and navigation difficulties.” – WebAIM
- Never skip over header levels. Wrong: h1 -> h3 Correct: h1 -> h2 Screen readers use headers to navigate through content. Skipping header levels causes screen readers to miss blocks of content.
ARIA Landmarks
ARIA Landmarks make it easy for screen readers to navigate through the website content. Fortunately for us, these landmarks are so simple to implement that a toddler could do it.
Example Usage:
[html] <div id=”header” role=”banner”> [/html]
List of ARIA Landmark roles:
- application
- banner (site-specific such as a header)
- complementary
- content info (copyrights and links to privacy statements, typically the footer)
- form
- main – body
- navigation
- search
Reference: w3.org
ARIA attributes
There are a number of ARIA attributes but I found that I typically only use two: aria-hidden and aria-label. I mentioned aria-label — it is used to describe an icon that doesn’t have any text. aria-hidden is for extra content that a screen reader doesn’t need but that is there for usability reasons or for mobile devices. In my situation, I used the aria-hidden attribute on a mobile logo and mobile navigation.
aria-hidden Example:
[html]
<nav class=”tab-bar show-for-small-only hide-on-print” aria-hidden=”true”>
[/html]
Something worth knowing about iframes and the Tenon accessibility checker
Note that iframes do not need the title attribute according to webaim. However, the Tenon accessibility checker throws an error when an iframe doesn’t have a title attribute.
Learn more about this topic here.
