Web Accessibility Guidelines

Web Accessibility is the practice of making websites and web applications usable by people with disabilities.  The goal is for all users have equal access to information and functionality.    The following is a compilation of principles and best practices to help anyone get started with accessibility.  Our guidelines are based on global industry web standards created by the W3C Web Accessibility Initiative opens in new window:  

Guiding Principles of Accessibility (POUR)

Four (4) guiding principles form the foundation of all web accessibility guidelines:

  • Content is Perceivable in multiple ways
    • Audio content is captioned for those that cannot perceive the audio through hearing alone.
    • Text alternatives are provided for non-text content.
  • Content is Operable by multiple means
    • All functionality is available through the keyboard only
    • Users can navigate and find information easily
  • Content is Understandable
    • ​Text is readable and understandable
    • Content appears and is operable in predictable ways
  • Offerings are Robust across multiple platforms
    • Site interacts with standard mobile devices and assistive technologies

Reference:  WCAG 2.0 At a Glanceopens in new window

Persons with Disabilities on the Web

15-20% of the world's population has some kind of a disability.   To create an inclusive web experience for all users, it is helpful to understand the ways in which different disability types need to access web content and what you can do to make your website more accessible to them.

  • Hearing Disabilities (Deafness and Hard-of-Hearing)
    • Users with hearing impairments can use the web if provided captions for multimedia content (any video content that also has audio) and transcripts for audio-only content.   Without captions or transcripts, only the visual content is accessible. 
  • Motor Disabilities (Physical impairments) 
    • Users with motor impairments are more likely to use only a mouse, only a keyboard, voice or other inputs to control and navigate the web.   Websites developed with flexibility of input options are more accessible to these individuals.  Requiring mouse-only or keyboard-only control will create a barrier for some of these individuals.
  • Visual Disabilities (Blindness and Low Vision)
    • Users with vision loss can rely on screen enlargement, keyboard-only navigation, and/or the use of screen reader technology.  Access to information via these means is dependent on: sizable fonts, good color contrast, and well-structured websites that label all graphics, icons, buttons, and multimedia, using web standards for coding tables, forms, and frames. 
  • Cognitive Disabilities
    • User with cognitive impairment rely on consistent navigation structure. Overly complex presentation, flickering or strobing designs can be confusing to these users.

Reference the W3C Introduction to "How People with Disabilities Use the Webopens in new window

Basic Accessibility Best Practices

Create structure: use headers and proper markup

  • Pages that are well structured, follow proper syntax, and pass the W3C validator are most accessible.
  • Headers (<H1> - <H6>) can be skipped and can make the site more navigable to users with screenreaders, text only browsers, etc.
  • Label links properly, avoid using "click here" - be brief but descriptive.
  • Use skip links to allow screen readers to go directly to desired content or to skip over navigation elements that are common to each page.
    To create a skip link: Use an tag to link a 1 x 1 clear image gif to an anchor on the page. Like so:
    <a href="#content"><img src="images/1pixel.gif" alt="Skip to content" /></a>
  • Use both id and name when creating anchor tags: <a id="content" name="content">
  • You may also create a skip link that's visible, this will benefit those relying on keyboard shortcuts as well as screen readers. This is often a "skip to content" link on the immediate top left of the page.

Choose color and contrast wisely: never use color alone to convey information

  • Use a symbol or graphic or another treatment that will work in a monochromatic environment.
  • To test a page for effective contrast, print it on black and white printer with the background color included.
  • Color vision deficiencies affect interpretation of red and green as well as yellow.  Beige, yellow and orange can be confused with red and green.
Color-related resources
Tools to test for sufficient contrast

Allow for font resizing: ensure control over fonts

  • Stylesheets created with pixel measurements (px) cannot be resized in Internet Explorer for Windows. To allow for resizing on windows size your stylesheets using another measurement such as em, pt, or relative sizes.
  • Read the W3C spec on CSS relative fonts and font size propertiesopens in new window
  • Specify generic font familyopens in new window with font declarations in stylesheets.
  • Specify all five attributes: text color, link, vlink, alink, and background colors in all documents (HTML and CSS files) to avoid a clash between your stylesheet and one that the user may have set by default.
  • We recommend using a body font of 95% or 12 points (similar to 12 pixels in size but percents and ems are resizeable on IE for windows). This is roughly equivalent to .85 - .95em depending on screen resolution settings (i.e. 96 or 72dpi).
  • Read more about relative font sizing and accessibility on A list Apart's web siteopens in new window
  • See screenshots of styled fonts by browseropens in new window, each is listed by platform and font style. Or by method.

Use ALT tags on all images

  • Alt tags and title tags should be added to the source code for the embedded images.
  • Structural images (spacers, backgrounds) can contain empty tags , i.e. alt="".
  • Images (navigational buttons, banners, and image maps) with descriptive text can borrow the text shown in the graphic and use this text for both ALT and title attributes.
  • If an image conveys complex information, such as a graph, use a brief ALT tag and link the image to a longer page with an extended explanation using the longdesc tag: <IMG SRC="graph.gif" ALT="graph of donations by donor type" LONGDESC=http://www.website.com/donationsgraph.txt title="graph of donations by donor type">
  • ALT tags are often misused, mostly people overuse them. It's better to leave the ALT tag blank (ALT="") then to enter a text description that's not useful or is redundant. For example an image with a caption below it does not need alt text that matches the caption, leave the alt text blank to avoid redundancy.

Note: Images used to convey content (e.g. equations, diagrams), should be delivered to the site developer with alt tag tag and long description text (via email or separate document). Developers should not be responsible for creating this text.

Avoid using layout tables

  • Use stylesheets and div tags for visual layout.
  • Use linearizedopens in new windowdata tables for complex data.
  • Use basic header information for data tables (the <th></th> element).
  • Use elements and summary attributes whenever possible; summary=" " is desirable for layout tables.

Create Accessible forms

  • Ensure forms are logical and easy to use 
  • Ensure forms are keyboard accessible
  • Associate Form Labels with Controls 

Reference WebAim's Creating Accessible Forms opens in new window

Javascript

  • All javascript-based navigation should include alternate navigational images or text links within <noscript> tags.
  • The href tag should be used for a direct link to content, either in the parent (target="_parent") window or a new (target="_blank" ) window, so non-javascript enabled browsers can access the content.
  • Use keyboard event handlers in addition to mouse event handlers
    e.g. <onclick=openWin(index.html) onkeypress=openWin(index.html)>
  • Read about how to make Javascript "jump lists" accessible: http://jimthatcher.com/webcoursea.htm#Webcourse10.1.5opens in new window
  • See detailed information about non-mouse event handlers at watchfire.org
  • When using javascript event handlers, return false so the href link is not followed by javascript enabled browsers.
  • The Trace Center's Javascript accessibility issues in detail

Pop-up windows

  • When pop-up windows are invoked to display separate html content, use the onclick and onkeypress event handlers to open the window (both returning false so the href is not followed by javascript enabled browsers) and point the the href directly to the html content, targeting a "_blank" window. This will allow javascript-enabled keyboard users to benefit from javascript window control, while allowing non-javascript enabled users to view the content, albeit in a full browser window.
    <a href="index.html" target="_blank" onclick="openWin(index.html); return false;" onkeypress="openWin(index.html); return false;">

Other significant technologies

See our Media page for information on AJAX, ARIA, Flash and Video.