Web Accessibility and Guidelines

Web Accessibility is the practice of making websites and web applications inclusive and usable by people with all levels of abilities and disabilities. When approached correctly, sites and applications can be made accessible, thus ensuring that all users have equal access to information and functionality.

The Accessibility team evaluates internal and external MIT websites and applications. We use a combination of web standards (W3C, WAI, WCAG 2.0), custom MIT and federal accessibility guidelines (Section 504 and 508) to assess projects.

Primary goals include:

Building awareness and an understanding of accessibility and its core principles across the institute.
Educating developers and stakeholders on laws related to accessibility and MIT's legal obligations.
Assisting product development groups in applying accessibility principles to their work.
Providing accessibility consulting services to clients across the institute and within IS&T.

Note: The UN Convention on the Rights of persons with Disabilities recognizes access to information and communication technologies, including the web, as a basic human right.

Basic Goals of Accessibility:

Site content should be accessible to users relying on any of the following:
screen readers, keyboard only navigation, low-bandwidth connections, Javascript disabled browsers, other assistive technologies and mobile devices. In short, sites should be accessible to the widest audience possible.

Special considerations for accessibility

Visual disabilities:

Difficulty accessing unlabeled graphics, icons, buttons, multimedia. Info may be lost in poorly marked up tables, forms and frames. May use keyboard navigation rather than a mouse. Use screen enlargement, screen readers or Braille displays. Problems with font sizes, color contrast or other display problems.

Hearing disabilities:

Need captioning for audio and video.

Physical disabilities:

May need to substitute mouse use with keyboard, voice input, or other input methods.

Cognitive disabilities:

Need consistent navigation structure. Overly complex presentation can be a problem. Flickering or strobing designs can be a problem.

Technology or bandwidth challenged:

May have older browsers or computers, may have a dialup connection. Large files or those requiring special plugins may be a problem.

Read the W3C's Overview:
Introduction to "How People with Disabilities Use the Web"

Best Practices

Label all images
Create structure (use headings <H1> - <H6> and lists)
Keyboard friendly shortcuts
Screenreaders & Assistive Technologies
Choose colors & contrast wisely
Allow for font resizing
Label form fields
Don't rely on Javascript
Avoid layout tables
Structure PDF Files
Label Flash & interactive content
Notify users when popping new windows
Caption video

Here is a 5 minute quick check you can do to look for accessibility problems on your website:

Turn off images in your browser
(make sure image place holders are turned on)
Turn off support for JavaScript
Tab through the page, try navigating without a mouse
Try to change the standard font colors and styles in your browser
Try to increase the font size by using the browser (view > text size > increase)
Turn off support for stylesheets, does your site still makes sense?

Web Accessibility Evaluation Tools for Free:

10 Tools for Evaluating Web Design Accessibility and Performance

The following techniques may be used to achieve a basic to intermediate level of accessibility.

Label all images: use ALT Tags

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.

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
Skip links should be used 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.

Keyboard friendly shortcuts or access keys

Access keys can provide a shortcut to major areas of the site (home, search, etc.).
Access keys are built by assigning a key within the <href> tag.
To follow access key links on the page, users must hit a combination of keys:
Mac: CONTROL + access key follows link.
Windows: ALT + access key brings focus to the link. Users must hit "enter" to follow link.
Here's the link code:
<a href="http://web.mit.edu/atic/www/index.html" accesskey=0> <img src="../images/spacer.gif" alt="link to home page accesskey=0" width="1" height="1" border="0" /> link to home page </a>
Let users know which keyboard shortcuts they can use by creating a page that lists each of these shortcuts and instructs how to use them on a mac or PC. The accessibility link to this page should appear at least on the homepage but ideally on all pages i.e. within the global navigation or footer links of your site.
Don't overuse access keys. Too many acces keys can create other issues and barriers for users.

Screen Readers & Assistive Technologies:

See WebAim's screen reader survey for helpful stats and information about screen reader usage and habits.
The addition of heading tags <H1 - H6> to add structure to a page, is one of the simplest ways to greatly increase the accessibility of your pages for a screen reader user.
Assistive Technologies encompass a wide range of software and hardware designed to aide in accessibility. See our list of Assistive (or Adaptive) Technology devices.
Skip links and access keys benefit 1.) users with screen readers e.g. software that's able to read web pages and operating system prompts out loud and 2.) those who rely on the keyboard alone.
Experience the web as a blind person would, see WebAim's screen reader simulation.

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:

See your website as a color blind person might, go to Vischeck to run a simulation.
An article from Lighthouse International: Effective Color Contrast
Download the Color Oracle colorblindness simulator for Windows, Mac and Linux
A full palette of hex values and how these colors are transformed for those with color deficient vision
New Architect Article: Considering the Color Blind

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 properties
Specify generic font family 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 accessiblity on A list Apart's web site
See screenshots of styled fonts by browser, each is listed by platform and font style. Or by method.

Avoid using layout tables

Use stylesheets and div tags for visual layout.
Use linearizeddata 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.

PDF Files

Is PDF necessary to deliver the information you're posting?
Users without the acrobat plugin and anyone relying on screenreaders may not be able to access the information contained within the PDF.
Always offer alternative redundant information in accessible HTML format i.e. Word, Powerpoint, etc.
If you can offer the information in HTML, that's ideal.
Learn to use the accessibility checker for Acrobat when creating PDF files from scratch.
Learn how to tag your PDF to increase accessibility for all users.
See MIT's PDF FAQ and Guidelines for PDF creation.
Tips and Techniques for creating PDF files.
PDF Zone's 10 Tips for Better PDFs.
Adobe Acrobat 9 How-Tos: 125 Essential Techniques (How-Tos) , a book by By Donna L. Baker

Accessible Forms:

(Source: list from Chapter 12 of Joe Clark's book Building Accessible Websites, New Riders, 2003)

Group related form options using <fieldset></fieldset> and <optgroup></optgroup>.
Do not code forms so that an action takes place as soon as the visitor makes a selection. Include a Go button (or similar function) so the visitor has control over what happens when using the form.
Use as many of the five possible form-element text equivalents - alt, name, value, id, and title - as is valid for the HTML version declared in that page's DOCTYPE.
Form example with detail from webaim.org

Interactive Content/Flash

Alternate, low-bandwith versions of all interactive content and Flash pieces should be provided.
Flash has support for coding access keys in actionscript and using keyboard equivalents for mouse movements such as onMouseOver, OnClick, etc. when possible.
Use the accessibility features provided in Flash.
Caption your Flash, use NCAM's free MAGpie Flash captioning tool.
More details and resources can be found on our Flash page

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

Other Significant Technologies

Please see the sections on AJAX, ARIA, Flash and Video for more details on how to make these technologies accessible.