10 Easy Accessibility Tips Anyone Can Use
May 9, 2013
Today is Global Accessibility Awareness Day (GAAD). To celebrate and to help promote accessibility, here are 10 simple accessibility tips that most anyone can implement today into their web site’s HTML and CSS to make it more accessible.
1. Add Alternative Text to Your Logo
Alternative text is presented to blind screen reader users in place of images they cannot see. Every image that conveys content or has a function on your web site should be given alternative text. But to get started, adding alternative text to your site logo presents your company or organization name to help users know which site they are on.
Simply find your logo image in your markup, and if it’s not present, add an alt attribute with your company or organization name as its value.
<img src="webaimlogo.jpg" alt="WebAIM - Web Accessibility In Mind">
2. Add Basic Landmarks
ARIA landmarks identify significant page areas, giving them meaning and making them more keyboard navigable. There are several available landmark types, but simply adding 3 of them – main, navigation, and search – can greatly enhance the accessibility of your page. Find the elements on your page that surround or contain the main body content, main navigation, and site search (this one will probably be a <form> element) and add the appropriate landmark role attribute (role="main", role="navigation", or role="search". If your site uses HTML5 <main> or <nav>, add the role to these elements.
<div id="maincontent" role="main">
<form action="search.php" role="search">
3. Enhance Focus Indicators
Sighted keyboard users generally navigate through the links and form fields on a web page using the Tab and Shift+Tab keys on the keyboard. To help ensure they can visually identify which link or form field they have navigated to, you can add the following to your CSS file:
a:focus {
outline:1px solid red;
background:yellow;
}
The colors may need to be customized to fit your site design, but they should be fairly distinctive.
To take this tip one step further, you can search your CSS files for a:hover and in each instance change it to a:hover, a:focus. This will ensure that keyboard users get the same visual highlighting when they navigate to items as mouse users get when they hover over an item.
4. Identify Required Form Fields
If your form has a mix of required and non-required form fields, add the aria-required="true" attribute to each input that is required. This will identify them as required to screen reader users.
<input type="text" name="username" aria-required="true">
5. Make Your Page Title an <h1>
Your page title (not to be confused with the <title> element, though this should be brief and descriptive of the page content) is generally the big, bold text typically at the beginning of the main content that describes the content or functionality of that page. While a good heading structure for your entire document is great for accessibility, simply making your main page title an <h1> will facilitate page navigation and comprehension.
6. Identify Table Headers
If your site has data tables, you can make them much more accessible by marking up table header cells appropriately. Find the row and/or column headers (almost always the cells in the first row and first column) and make sure they are marked up using the <th> element (stands for table header) instead of the <td> element (stands for table data). The <th> element should be given a scope attribute value of col if it’s a column header or row if it’s a row header.
Change <td>Date</td> to <th scope="col">Date</th>
7. Identify Table Captions
Most data tables have short descriptive text immediately before the data table that describes that table. You can associate that description or table caption to the table itself using the <caption> element. This element should be the first thing inside your <table> tag.
For example, you would change
<p>Class Schedule</p>
<table><tr>....
to
<table>
<caption>Class Schedule</caption>
<tr>....
8. Avoid "click here"
Search your site for the words "click here". This link text is ambiguous for all users, but is particularly difficult for screen reader users. It always adds additional, unnecessary text. Change the link text to be more descriptive of the content or function of the link.
For example, you would change
<a href="prices.htm">Click here</a> for prices
to
<a href="prices.htm">Prices</a>
9. Remove tabindex
Search your site's code for any tabindex attributes. If the attribute value is 1 or higher, and you're not absolutely sure why it was added or that it was added correctly, remove this attribute. Tabindex specifies a keyboard navigation order, but almost always causes more accessibility issues than it solves. If your navigation order is not logical (you can test this by navigating with the Tab key), you should restructure your underlying code so that it is logical.
10. Check Your Page in WAVE
The WAVE web accessibility evaluation tool is an easy-to-use tool that gives you feedback about your web site and facilitates additional evaluation. Simply go to http://wave.webaim.org/, enter your web page URL, and hit the button to get feedback on your page's accessibility.
Sergio has established himself as one of the foremost experts in web accessibility in Spain and has written extensively on the topic.
