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 :
- WCAG 2.0 - Web Content Accessibility Guidelines
- ATAG - Authoring Tool Accessibility Guidelines , and
- UAAG - User Agent Accessibility Guidelines
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 Glance
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 Web
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.
- 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
- Download the Paciello Group's contrast tool to test for contrast, color blindness, and luminosity
- Juicy Studio's color/contrast online test site to test hex values for foreground and background colors
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 accessibility 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.
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 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.
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
- 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
<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.