Accessibility basics for author websites

This post provides tips for how to test your website to ensure it is accessible to readers with visual impairments or mobility impairments. While these tips can work for all websites, the features we targeted are common on author websites.

Primary considerations for testing your website's accessibility

• Keyboard accessibility: can you navigate via keyboard to everything, especially using the TAB button?
• Color and style: have you considered users with color-blindness or poor vision?
• Text and images: can a screen-reader handle the text on your webpage? Do the images provide captions or alternative text that describe what they are?

Tools that webmasters can use to test your website

• Color Contrast Analyzer
• Fangs screen reader emulator (Firefox addon)

Navigation

Try this: To discover how easy it is for a disabled user to navigate your website, put away your mouse/touchpad and use the keyboard only! The short-keys below can be used in place of mouse-clicks.

Key	Use
Tab	Move to the next focus item (links, text boxes, and other items that can be interacted with)
Shift+Tab	Move to the previous focus item
ALT+Tab	Change to next window
ALT+F4	Close window
CTRL+W	Close tab
CTRL+A	Select all
CTRL+S	Save
CTRL+D	Bookmark (Firefox), Favorite (IE)
CTRL+Q	Quit
CTRL+T	New tab (Firefox, IE)
CTRL+C	Copy
CTRL+V	Paste
CTRL+X	Cut (Copy and Delete)
CTRL+Z	Undo

Website Design Basics 

When you (or your web designer) is creating the site, please consider the following accessibility recommendations.


Color Alone for emphasis

• Do not use color alone for emphasis. (For those with color-blindness, certain colors--such as green and red--might appear gray or black.) Instead, use color with either italics or bold to emphasize text.
• Inaccessible example:
  
  The books in green are available for purchase. The books in red are coming out next year.
  

  • A
  • B
  • C
  • D
• Accessible example:
  
  The books in green italics are available for purchase. The books in red bold are coming out next year.
  

  • A
  • B
  • C
  • D
   

Links

• Use link text that provides context. "Author website" is better than "click here".
• Style your link differently than the rest of the text.

Images

• Provide alt text for all images.
• Important images should have meaningful alt text.
  

  <img src="Arabian_knights_book_cover.jpg" alt="Arabian Knights" />

• Presentation images should have an alt text of ""
  

  <img src="background_pattern.gif" alt="" />

Forms

• Use labels.
  Example code:

  <label="fname">First Name</label>

  <input type="text" id="fname" name="first_name" />
  <fieldset>
  <legend>Gender</legend>
  <input id="gender_f" name="gender" value="female" type="radio" />

  <label for="gender_f">Female</label>
  <input id="gender_" name="gender" value="male" type="radio" />

  <label for="gender_m">Male</label>
  </fieldset>
         

  Example in action. (Note that you can click the word "female" or "male", and the radio button gets marked. This is because we used labels, and it provides mouse/touchpad users a larger target to click when they fill out a form.)
  First Name
  

  Gender

  Female
  Male

Tables

• Tools for webmasters: ARIA (Accessible Rich Internet Applications) is now a part of HTML5, and most attributes and roles are supported by all major browsers. Here's a link to the W3C's documentation on ARIA
• Use the ARIA attribute role: "grid" for data, "presentation" for layout tables. This helps improve navigation for screen-reader users.

Example for role="grid"

Name	Gender	Age
Julie	Female	21
Michael	Male	20
Sam	Unspecified	19

Example for role="presentation"

A variety of opportunities available as a part of Given University's student life

Activities	Clubs	Greek Life
Housing	Sports	Student Union
Stuff	Theater

 Use the ARIA attribute scope.
Row headers (<th>) should have scope="row". (Here with light green shading)
Column headers should have scope="col". (Here with light blue shading and bolded, centered text)

Name	Population	GDP (USD)
Australia	21,507,717	915,098,000,000
Canada	33,476,688	1,445,000,000,000
New Zealand	4,451,017	122,193,000,000
United Kingdom	63,181,775	2,316,000,000,000
United States	315,317,000	15,094,000,000,000

Multimedia

• If you have video or audio, have transcripts available.
• If you have video or audio, provide controls to allow users to, at minimum, pause and play the media. Volume controls are also ideal. Using the native controls available in HTML5 generally provides the most ideal experience.

  <video width="320px" height="240px" controls="controls">
  <source src="interview.mp4" type="video/mp4">
  </video>

Additional Links for Webmasters

• WebAIM: a developer-friendly collection of resources
• W3C's official documentation