There are lots of reasons you should be concerned with your website’s accessibility. In the United States, Section 508 dictates that all government websites (and some educational institutions) must meet certain accessibility guidelines. In addition, a recent case against retailer Target was tried under the Americans with Disabilities Act, and was settled for $6 million!
And let’s not forget the biggest reason – there are people with disabilities trying to view your website and read your content. Are you making it easy for them or is it virtually impossible to access your site?
Below, we’ll take a look at how you can determine your website’s current accessibility level, and steps you can take to move forward in making it more accessible.
Check Your Current Accessibility
There are several tools available to help you check your website’s level of accessibility. Very few websites are perfect in this area, so don’t get discouraged if there are several issues uncovered.
Validate Your Website
Errors in your HTML code can prevent screen readers and other accessibility tools from accessing your website’s content. One of the easiest ways to ensure accessibility is to make sure your website validates to web standards and is free of errors. The W3C Validator will validate your website to one of several standards (HTML 4.01, XHTML 1.0, etc) and give you specific errors, with recommendations on how to resolve problems.
Focus on the major errors. At least for the purpose of accessibility, you don’t have to worry about warnings.
WAVE Online Accessibility Test
The WAVE Online Accessibility Test displays your actual website, with accessibility concerns and problems overlaid in tooltips. The tool provides lots of suggestions and recommendations on how to improve your accessibility.
Cynthia
Cynthia Says evaluates websites based on either Section 508 or WCAG (Priority 1-3) accessibility guidelines. The report provides a list of problems on your website, citing the specific rules or sections that failed validation.
Cynthia is pretty technical, and only links to the Section 508 or WCAG guidelines (which can be fairly cryptic) but it’s an excellent way to determine your site’s accessibility. If you’re not familiar with HTML, you might need a developer to help you understand what the problems actually mean.
Steps You Can Take to Make Your Website More Accessible
The first step to making your website more accessible is to validate your code. Clean, valid markup is half the battle. Below are some additional tips and suggestions.
ALT Attributes on All Images
Technically, you have to have ALT attributes on all images for a website to validate. But all the validator will check for is that there is an ALT attribute and that it is not empty. For it to really be accessible, the attribute has to accurately describe the image.
Make sure all your images have descriptive ALT attributes. If the image is a button or some other representation of text, make the ALT attribute the exact text that the image represents. If the image is a photo, describe the photo in the ALT attribute.
<img src="/images/john_doe.jpg" alt="John Doe">
Correct Table Structure
Tables should just be used for tabular data (data you would typically see in a spreadsheet). HTML tables are an excellent way to display tabular data, and can be made to be very accessible. Here are some tips for optimizing your HTML tables.
CAPTION
The caption is the header or title of the table. It is the name of the table. An effective caption might be “2010 Income Statement” or “Hosting Plan Comparison.”
Table Summary
The summary attribute offers a longer description of the table. Summaries are hidden from regular viewers, and are typically only used by screen readers and other accessibility tools.
<table summary="Comparison of Hosting Plans and Features"> ... </table>
THEAD, TFOOT, TBODY
Tables can be broken up into three sections. THEAD is the header, often consisting of TH’s describing the columns. The TBODY is the actual data, and the TFOOT is often used as a summary or totals row.
Table Header and Table Data
Proper use of TD and TH tags is important. For all column and row headers, use <TH>. For all data, use <TD>.
Below is an example of an entire HTML table:
<table summary="Comparison of Acme, Inc. Hosting Plans"> <caption>Hosting Plans</caption> <thead> <tr> <th>Feature</th> <th>Basic</th> <th>Business</th> <th>Enterprise</th> </tr> </thead> <tbody> <tr> <th>Storage</th> <td>5 GB</td> <td>10 GB</td> <td>20 GB</td> </tr> <tr> <th>Data Transfer</th> <td>20 GB</td> <td>50 GB</td> <td>100 GB</td> </tr> </tbody> </table>
And the actual table:
| Feature | Basic | Business | Enterprise |
|---|---|---|---|
| Storage | 5 GB | 10 GB | 20 GB |
| Data Transfer | 20 GB | 50 GB | 100 GB |
JavaScript Degrades Gracefully
JavaScript and AJAX are amazing technologies. They allow us to do more with websites than ever before, but without proper planning they can also cripple our website’s accessibility. Inline JavaScript can render your website unusable by any browser without JavaScript capabilities, or with JavaScript disabled.
If you use JavaScript on your site, make sure your site still functions with JavaScript disabled in your browser.
Sitemap
A sitemap can provide a website visitor with quick, easy access to a page deep within your website. A page that may have taken 5 or 6 clicks to find. 5 or 6 clicks may not be a lot to a typical website visitor, but can take a long time using a screen reader or other accessibility device.
Informative Link Targets
“Click here” is not informative to users. Make your links’ targets actual actions. Not only will it help with accessibility, having keywords in your links can increase your pages’ search engine ranking.
Do this:
View our ACME widget specials.
Not this:
To see our ACME widget specials, click here.
Semantic Forms
Forms can be especially troublesome for accessibility. Forms often incorporate JavaScript, and are often laid out in tables — two things that can adversely affect accessibility. Below are a few basic guidelines for accessible web forms.
Use Fieldsets to Separate Sections
Fieldsets separate forms into groups. They provide an easy way to break up long forms into sections. If your form has more than 5 fields, consider breaking it up into two or more fieldgroups.
Each fieldgroup can have a caption, or title, that describes the information collected. Some captions might be personal information, billing and/or shipping address, or credit card information.
Use Labels to Describe Form Elements
Labels are perfect titles for form elements, because they have a “for” attribute that relates to the specific form element. This tells accessibility tools which label is associated with which element.
Semantic Form Layout
Below is an example of an accessible and semantic web form:
<form action="#"> <fieldset> <legend>Personal Information</legend> <p><label for="name">Name:</label> <input type="text" name="name" id="name" value=""></p> <p><label for="email">Email</label> <input type="text" name="email" id="email" value=""></p> <p><label for="phone">Phone</label> <input type="text" name="phone" id="phone" value=""></p> </fieldset> </form>
Provide Transcripts
If you have online video or a podcast, also provide transcripts of rich media. Not only will the transcripts allow hearing-impaired people to access the content, it will also make the content accessible to search engines.
Further Reading
Section 508 Accessibility Guidelines
Section 508 requires federal agencies and government bodies’ websites (and other information technology) to be accessible to people with disabilities. The Section 508 website defines the laws and regulations regarding Section 508, and offers information on how to comply.
Even if your site isn’t required to be Section 508 compliant, it’s a great resource to check the overall accessibility of your website.
The Web Accessibility Initiative
The W3C has started the Web Accessibility Initiative, an online portal with extensive information on website accessibility guidelines, tools, best practices and resources. The website has a wealth of accessibility information.
Dive Into Accessibility
Dive Into Accessibility is a free 30-day online course designed to walk you through creating an accessible website. The guide is available online, and is downloadable for free in HTML and PDF versions.
{ 6 comments… read them below or add one }
Excellent summary of simple ways for improving accessibility on websites. For videos, I would add the tip to include captions in addition to transcripts.
I think the “semantic form layout” is missing the “ID” attribute inside forms elements.
Reinaldo, great catch. I’ve updated the form elements with the ID attribute. Thanks!
It´s a small, but very important detail. Congratulations for the post!
A good introduction. My only comment is that all *important* images need ALT attribs. Eye candy which adds no value to the content don’t – so empty will do.
Steve, you make a good point. I would say that images with no intrinsic value could be shown using CSS, so there wouldn’t be any markup for them in the HTML at all. But otherwise, you’re right — no ALT attributes needed on images shown just for style/design.