WebAIM - Web Accessibility In Mind

10 Easy Accessibility Tips Anyone Can Use

Translation

A translation of this post is available at http://financesonline.com/WebAIM_10Tips.html courtesy of FinancesOnline.

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.

Comments

  1. VaShaun

    I agree with this and the post gives us a greater understanding of not only web accessibility but how to do it and even what to look for to correct it. Great post!

  2. Rakesh

    Nice blog to let the people aware of accessibility Jared. Thanks for the post.

    I would like to know is it required to have role=”navigation” in a of HTML 5?

  3. Jared Smith

    Rakesh-

    There is no requirement to have role=”navigation”. In HTML5, you would use the nav element, but because screen readers currently recognize role=”navigation”, but not the nav element, we recommend combining them – <nav role=”navigation”>.

  4. Rakesh

    Thank you Jared, I have found the inconsistent behavior of screen readers in different browsers.

  5. Staci

    Any recommendations on tools to test accessibility that can be downloaded? I would use the link to the website provided, but the URL I am attempting to test is behind a firewall.

    Thanks! Nice information.

  6. Jared Smith

    Staci-

    We have a toolbar version of WAVE available at http://wave.webaim.org/toolbar that you can download and perform all of the analysis directly within the Firefox web browser.

  7. Shankar

    Nice post with a minimum level of accessibility to be ensured by very website developer.

    Thanks Jared!

  8. Robert Jaquiss

    Hello:

    Great post. The comment on tabindex is interesting. Last year, I was creating some sample pages and when I set up a page using tabindex, the navigation with the tab key resulted in very odd behavior.

  9. Ali

    Thank you for these tips. I run a small amateur website which I endeavour to render accessible, and you’ve given me some simple changes I can make to improve it further.

  10. Susie Dunn

    Good tips. I’d like to have permission to share (with attribution) with our faculty and instructional designers, in a monthly e-news please.

  11. Web Axe

    For #7, suggest changing “Identify Table Captions” to “Identify Table Titles” so it’s more clear to the everyday person.

  12. Sveta

    What about captions and transcripts for video and audio? They are also very important.

  13. Sveta

    Accessibility is not only for blind users..

  14. Jared Smith

    Sveta-

    Note the word “easy” in the article title. I would not categorize captions and transcripts as “easy”. Important, yes, but not easy.

  15. Daniel

    Good, easy-to-implement tips.
    Regarding “aria-required”, is this not needed if the HTML5 “required” attribute is used instead?

  16. Jared Smith

    Daniel-

    aria-required and HTML5’s required attribute will provide identical accessibility information. The problem is that screen reader support for the ARIA attributes are better than for the native HTML5 attributes. You might consider using both for now until support improves.

  17. Chrystian Rokicki

    Nice post. Before reading it I had no idea of avoiding tabindex which I strongly used. Now I know that navigation with tab key resulted with weird behavior. Good tips! Thanks

  18. Matt

    Great post! I’ve dedicated a portion of a site I’m working on to web accessibility, and touch on several of these points.

    It’s Tired in Here

  19. magda saina

    Thank you for your tips! I am very new to this and am creating Poster in Adobe InDesign that needs to be a PDF compliant PDF to post on the Web. When I read out-loud within Acrobat, it only reads on line at a time, even though the text is definitely continuous and tagged and ordered properly. Any suggestions?

  20. High Score

    The advice to not use tabindex is confusing to me.

    When implementing a page that contains a large number of focusable elements arranged via CSS and using methods to adapt the layout to multiple device form factors, what alternatives would you recommend to control the tab order?

    Also, I would appreciate any elaboration on why tabindex “causes more accessibility issues than it solves”.

    Thanks

  21. Paul Divers

    Very useful article. I bookamrked it and then came back and read the comments.

    @Staci – TotalValidator is a downloadable tool and a good one. The Web Developer Toolbar for the Firefox browser is good and there is also an Accessibility toolbar for Firefox.