Sunday, February 28, 2016

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


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+D Bookmark (Firefox), Favorite (IE)
CTRL+T New tab (Firefox, IE)
CTRL+V Paste
CTRL+X Cut (Copy and Delete)

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

  • Use link text that provides context. "Author website" is better than "click here".
  • Style your link differently than the rest of the text.
  • 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="" />
  • Use labels.
    Example code:
    <label="fname">First Name</label>
    <input type="text" id="fname" name="first_name" />
    <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>
    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.)


  • 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">

    Additional Links for Webmasters

    No comments:

    Post a Comment