Accessibility Checklist Arts

This accessibility checklist was created by the University of British Columbia, Centre for Teaching, Learning and Technology (CTLT). The hope and goal is to have all the UBC courses and projects comply with guidelines of the W3C accessibility standards.

The checklist may be of value to any web designer and can be used to help people with disabilities to perceive, understand, navigate, and interact with the web, as well as contribute to the web.

Auditory and Visual Context

• A text equivalent is provided for every non-text element (ALT code for images and transcript or Dlink for audios/videos)

• For time-based multimedia presentations (ie. movie), equivalent alternatives (ie. captions) are provided and synchronized with the presentation.

• All images and buttons have descriptive "ALT” tags.

• A link to required viewer/plug-in is provided.

• Details of the file (size, format) are provided.

Generic Graphics Specifications

• All included images add benefit to students and enhance learning.

• All images are optimised and saved as GIFs or JPEG files.

• Photographic images are saved as a JPEG of approximately 60% quality.

• Solid colour images are saved as a GIF.

• Reduce number of pixels in GIFs & maximise the compression in JPEGs.

• Text equivalents for images & 'ALT' tags are included.

• Avoid scaling of images.

• Avoid content that cause seizures (ie. anything that flashes more than three times in one second).

Colour

• Colour alone is not used to convey information (i.e correct answer is in green or click the yellow button to submit).

• Websafe colors are used throughout the course and web.

• Colour combinations cater to colour-blind guidelines (accessibility information can be found at: http://www.w3.org/WAI/. Specific information on colour blindness can be found at: http://en.wikipedia.org/wiki/Color_blindness)

• Avoid low contrast colour combinations.(ie. don’t use pale fonts on a pastel background, avoid light and golden tones of text on dark backgrounds and background textures and patterns). Separate foreground from background.

Clear Navigation Mechanisms

• Ensure navigation is consistent and intuitive.

• Ensure page titles are meaningful and unique.
• Link labels are unambiguous and indicate what content they lead to (ie. “see Activity 1” not for Activity 1 "click here”). Position labels to maximize predictability (i.e. let users know in advance that the link will open in a new window).

• Links consistently differentiate between visited and unvisited – Browser default is encouraged.

• Avoid extensive use of links in main body of text.

• Graphical links are easily recognized.

• Site can be navigated by keyboard and all functionality available from a keyboard.

• Dropdown menus can be used without precise mouse control.

• (Navigation still works with Javascript turned off. Does this work for Vista???)

• Do not add underline to text that are not hyperlinks to avoid users confusion (users assuming the underlined is a dead link).

• provide visual cues to assist users with different ways to navigate, find content and determine where they are (i.e. table of content, site map, bread crumbs).

• Make pages appear in predictable way.

Useability

• Content is easily locatable.

• All online supported services are referred to and described.

• Provide contact details for additional assistance.

• Specify download times (i.e if you have a movie clip, indicate total run time. If you have a pdf document, list the size and pages)

• Conduct usability trials (if you have complicated quizzes, create a trial quiz or a self-test using the same format.).

• "Help users to avoid and correct mistakes" (i.e. if an error is detected, user is warned in text).

• Pages can print adequately or alternatives are provided.

• Create content that can be displayed in different ways without losing information; use relative font sizes that can be adjusted in the browser.

• Pages are usable when programmatic objects are turned off or not supported.

• Programmatic elements such as scripts and applets are directly accessible or compatible with assistive technologies.

Markup and Style Sheets

• Markup language rather than images is used to convey information.

• CSS is used to control layout and presentation in formatting and structuring.

• CSS is compatible with all browsers.

• Make the CSS external/independent.

• Pages should be readable without style sheets.

• Declare the language encoding of the webpage in the <html> tag.

• Avoid declaring properties of the tags in the html code. Try to set all properties in the stylesheet. I.e. try to avoid div align="left". Give that div an id/class name in the stylesheet and set its alignment to left in the stylesheet.

Tabels

• Avoid layout pages ("layout tables"; use CSS - only use tables for data).

• If tables are required for content layout, then ensure that the content of the table is text-reader friendly.

• Row and column headers are identified in data headers.

Language and Cultural References

• Use Clear, straightforward language. Make content understandable.

• Provide proper information and resources to make the content readable and understandable for users (ie. Glossary, Abbreviation list)

Time Sensitive Content Changes

• Provide users with enough time to read and use web content.

• Allow users to turn off, adjust or extend the time limit with a simple action.

• Warn users before time expires for real-time or essential exception (i.e. an auction).

• Moving, blinking, scrolling, or auto-updating objects or pages are avoided, and where this cannot be avoided, objects can be paused or stopped.

Use of Java and JavaScript

• Java must not be used (where possible)

• Use of javascript is permitted provided that, where javascript is disabled, the user is not prevented from accessing content.

Online Content Testing

• Check site using different operating systems.

• Test in multiple browsers.

• Check colours in Vischeck at http://www.vischeck.com/vischeck/ .

• Check How to Meet WCAG 2 at http://www.w3.org/WAI/WCAG20/quickref/ .

• Navigate the site with just a keyboard.

• Do your best and use available resources to make your project accessible.

• Ask questions, ask people!

UBC Resources

Accessibility in online learning http://www.eplt.educ.ubc.ca/about/accessibility/accessibility/index.htm

Access and Diversity http://www.eplt.educ.ubc.ca/about/accessibility/accessibility/index.htm

WCAG 2.0 Guidelines

WCAG 2.0 Guidelines

   * 1 Perceivable
          o 1.1 Provide text  alternatives for any non-text content so that it can be changed into  other forms people need, such as large print, braille, speech, symbols  or simpler language
         o 1.2 Provide alternatives for time-based media
          o  1.3 Create content that can be presented in different ways (for example  simpler layout) without losing information or structure
          o 1.4 Make it  easier for users to see and hear content including separating foreground  from background 
   * 2 Operable
         o 2.1 Make all functionality available from a keyboard
         o 2.2 Provide users enough time to read and use content
         o 2.3 Do not design content in a way that is known to cause seizures
          o 2.4  Provide ways to help users navigate, find content, and determine where  they are 
   * 3 Understandable
         o 3.1 Make text content readable and understandable
         o 3.2 Make Web pages appear and operate in predictable ways
         o 3.3 Help users avoid and correct mistakes 
   * 4 Robust
          o 4.1 Maximize  compatibility with current and future user agents, including assistive  technologies

W3C Validating Methodology http://www.w3.org/TR/WAI-WEBCONTENT/#validation

Resources

Fundamentals

W3C Web Accessibility Initiative (WAI) http://www.w3.org/WAI/

The Web Accessibility Initiative (WAI) works with organizations around the world to develop strategies, guidelines, and resources to help make the Web accessible to people with disabilities. They developed: WCAG Guidelines 1.0 http://www.w3.org/TR/WAI-WEBCONTENT/

WCAG Guidelines 2.0 http://www.w3.org/TR/WCAG20/ These are the second set of guidelines developed by WCAG.

Accessify http://www.accessify.com News & articles, tutorials, discussion forum.

Developing sites for users with cognitive/learning disabilities http://juicystudio.com/article/cognitive-impairment.php

Dive Into Accessibility http://www.diveintoaccessibility.org

Accessibility Tips http://www.accessibilitytips.com/

Accessibility Success Stories http://www.cantoraccess.com/stories/stories.html

Online Accessibility Check Tool

http://checker.atrc.utoronto.ca/index.html

http://fae.cita.uiuc.edu/

A Few Notes: The accessibility checker developed by University of Toronto tend to be more lenient than FAE (by University of Illinois). It is common to receive a 100% pass in the UofT checker while receiving a 33% pass in FAE. Keep in mind that it is very RARE to be able to meet 100% satisfactory in every accessibility checker since each checker consists of different checking criteria.

Technical

XHTML Tutorial http://www.w3schools.com/xhtml/default.asp

CSS Tutorial http://www.w3schools.com/css/default.asp

Zen Garden http://www.csszengarden.com/ CSS design

Creating Accessible Page Layouts http://www.utoronto.ca/atrc/tutorials/actable/index.html How and why to avoid using tables for layout.

PDF Accessibility http://www.alistapart.com/articles/pdf_accessibility Editorial about specific purposes for which you should use PDF files, and reasons why for everything else you should leave it alone.

Flash Accessibility http://www.webaim.org/techniques/flash/

Captioning Guides http://www.cab-acr.ca/english/social/captioning/captioning.pdf http://www.cfv.org/caai/nadh7.pdf

Tools & Validators

EASI Equal Access to Software and Information http://people.rit.edu/easi/

A-Prompt Web Accessibility Verifier http://aprompt.snow.utoronto.ca/index.html

A-Prompt (Accessibility Prompt) has been developed to assist Web authors in improving the accessibility and usability of HTML documents. By checking Web pages for barriers to accessibility and making repairs to correct any problems, A-Prompt will ensure that you are reaching the widest possible audience. A-Prompt is based on the guidelines for accessibility which are created and maintained by the Web Access Initiative of the World Wide Web Consortium.

Evaluation & Repair Tools from WAI (W3C) http://www.w3.org/WAI/ER/existingtools.html

Watchfire WebXACT (previously known as Bobby) http://webxact.watchfire.com/ "WebXACT is a free online service that lets you test single pages of web content for quality, accessibility, and privacy issues."

CSS Validator http://jigsaw.w3.org/css-validator/

XHTML Validator http://validator.w3.org/

Vischeck http://www.vischeck.com/vischeck/ See what images and web pages look like to people with different types of colourblindness.

Lynx Viewer http://www.yellowpipe.com/yis/tools/lynx/lynx_viewer.php See what your webpage would look like in a text only web browser