Accessibility Best Practices

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 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.

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," "See More," or "Learn More" - 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. <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 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

Provide captions for video and transcripts for audio

  • Auto captions are not sufficient.  Captions must be accurate and synchronized with the video.  
  • If you have a transcript for your video, that can be used to create captions.
  • Make sure any podcasts contain a transcript of the audio.  
  • For more detailed information, please see our Captions and Transcripts page.  

Allow for font resizing

  • 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)
  • See screenshots of styled fonts by browser, each is listed by platform and font style or by method.
  • Read the W3C spec on CSS relative fonts and font size properties

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, often 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 basic header information for data tables (the <th></th> element)
  • Use linearized data tables for complex data

Create accessible forms

  • Ensure forms are logical and easy to use, are keyboard accessible, and also associate form labels with controls
  • Reference WebAim's Creating Accessible Forms to ensure forms are accessible

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.5
  • 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;">

All inquiries are welcome at accessibility [at] mit.edu.