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:
Special considerations for accessibility
- Visual disabilities:
- Hearing disabilities:
- Physical disabilities:
- Cognitive disabilities:
- Technology or bandwidth challenged:
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.
Need captioning for audio and video.
May need to substitute mouse use with keyboard, voice input, or other input methods.
Need consistent navigation structure. Overly complex presentation can be a problem. Flickering or strobing designs can be a problem.
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"
- 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
- 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)
- 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:
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.
<a href="../index.html" accesskey="1">
- 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.
- 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
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 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).
elements and summary attributes whenever possible; summary=" " is desirable for layout tables.
- 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
- 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
- Use keyboard event handlers in addition to mouse event handlers
e.g. <onclick=openWin(index.html) onkeypress=openWin(index.html)>
- See detailed information about non-mouse event handlers at watchfire.org
Pop up windows