Blind people use the internet, too, so making your site accessible to them—and others with disabilities—will improve their experience with your business. Also, if you are a government contractor, this may be required of you by law.
What s Section 508?
Section 508 is a federal law that mandates federal websites must be accessible, much the same way buildings are designed with wheelchair ramps and automatic doors. Government websites must be easily viewable by screen readers and provide other accessibility tools. Section 508 is specifically just for .gov websites, but if you receive any form of government money, your website also has to be accessible under Section 504 of the Rehabilitation Act of 1973, or you can be sued and fined.
If you’re fully in the private sector, you don’t legally need to comply with Section 508/504. But you should still design your website keeping disabled people in mind. Often, these people will be accessing your website with the help of a screen-reading device, which will read your website to them. Making your website behave as expected through a screen reader is a key part of accessibility compliance.
How to Check Your Website’s Accessibility
A great toolkit for viewing accessibility issues is tota11y from Khan Academy. It’s a plugin you install on your website by adding a <script> tag with a link to it; this is something you’ll want to do with a development version of your website because otherwise it would show the button to everyone.
This plugin will display errors next to the corresponding elements, then tell you what to do to fix them:
It also has a very handy tool that shows you how a screen reader will view your website.
Additionally, you can run your entire site through an accessibility checker like PowerMapper, which checks for WCAG 2.0 compliance.
Common Accessibility Problems (and How to Fix Them)
Making your site accessible doesn’t require you to redesign everything, just crush a few bugs that you might have missed while creating it. Usually, this issues are minor, and just involve adding a few extra elements.
Alt Text
Alt text on images is a major issue. Text is easy for a screen reader to handle, but images can’t easily be translated automatically. So you need to provide a translation, even if it’s short and simple. This can be done by adding the alt tag:
<img src=”smiley.gif” alt=”Smiley face”>
Otherwise, a screen reader will read the filename. However, if the image is decorativnd you want the screen reader to ignore it, you can specify an alt tag but leave the content blank.
Capital Letters
Capital letters can cause some confusion for screen readers. For example, the word “us” is often read as “U.S.” when capitalized. To fix this issue, instead opt for using the CSS property text-transform instead of capitalizing the text itself.
text-transform: uppercase;
This has the added benefit of being applicable to all headings, and is able to be easily changed should your design change in the future.
Keyboard Navigation
Your website needs to be accessible using the tab key to cycle through elements. An important part of this is “Skip Navigation” links. Websites often have headers on every page, and tabbing through them is very frustrating when browsing. So, the first thing that a user navigating with the keyboard should see is an <a> tag with an href to your main content.
Obviously you don’t want this in your header all the time, only when someone tabs over it. This is usually done by setting an element with a low z-index to change z-index when focused, using the CSS selection modifier :focus:
.show-on-focus:focus {
z-index: 1;
top: 0;
left: 0;
}
Another issue is the lack of tabbable items. Major landmarks in your site should be easy to tab over. You can do this simply by adding the tabindex attribute to elements:
<div tabindex=”0″> … </div>
You can have multiple indexes on the same number, and they will be read in descending order, based on their position in the HTML. You can change the number to account for out-of-order blocks.
Contrast
This isn’t just an accessibility tip, as it applies to your site in general. If the contrast is too low, people with vision impairments may have trouble seeing it, but this can affect normal people as well if the problem is severe.
Luckily, tota11y does a great job of telling you which elements have problems:
It will even suggest replacement colors that can improve your contrast. Note that contrast also depends on size, as smaller text is harder to make out on similarly colored backgrounds.
Input Labels
Any <input> tag needs to have a corresponding <label> tag, so that the screen reader knows what the input is for. It can sometimes fall back on placeholder text, but that’s not enough.
<label for=”my-input”>
Label text here…
</label>
<input id=”my-input”>
The <label> tag is put directly above the input, and is linked to it with a for=”” attribute containing the input’s ID.
ARIA Landmarks
These are easy to add, and categorize regions of your site into blocks:
You can add these simply by adding a role attribute to your div tags:
<div role=”navigation”> … </div>
Make Elements Invisible to Screen Readers
If something is bugging a screen reader but needs to be on your site, you can cut it out with the aria-hidden attribute:
<span aria-hidden=”true”>
Additionally, the hidden HTML attribute and the CSS directive display: none will both cause an element to be invisible to screen readers. You’ll want to make sure the screen reader isn’t reading HTML from places it shouldn’t be able to see.