This accessibility checklist was created by Afsaneh Sharif at the Centre for Teaching, Learning and Technology (CTLT) at University of British Columbia. The goal is to have all the CTLT courses and projects comply with guidelines of the W3C accessibility standards. Accessibility is about making sure all of the print and online content/materials including images and media as well as events are accessible by as many users/students as possible.
- 1 Policies relating to web accessiblity
- 2 Auditory and Visual Context
- 3 Generic Graphics Specifications
- 4 Colour
- 5 Clear Navigation Mechanisms
- 6 Useability
- 7 Markup and Style Sheets
- 8 Language and Cultural References
- 9 Time Sensitive Content Changes
- 10 Online Content Testing
- 11 WCAG 2.0 Guidelines
- 12 Resources
- 13 License
Policies relating to web accessiblity
- Canada legislation: Canadian Human Rights act of 1977 (UBC Policy 73 approved in 1999 - following human right code and Canadian charter of rights and freedom, approved by Board of Governors)
- Section 508 with amendment in 1998 (US)
- European Commission, Information Society (European Union)
- Special Educational Needs & Disability Act 2001 (UK)
Policies info at http://www.w3.org/WAI/Policy/
Accessibility Factors = Assistive Technologies + Developer/Designer + Disabled Individual
The six areas that can prove to have barriers for online users/learners are: sight, hearing, mobility, cognitive, cultural, and technical. These areas should be addressed and looked at in print and face to face situations as well.
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.
- “Create content that can be presented in different ways”
- Make it easier for users to separate foreground from background (i.e. audio background, colour to convey information)
YouTube video: Closed Caption
Source: The Tennessee Valley Authority
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 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.
Can you read the number in all?
- 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.
- 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.
- 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.
- 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.
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!
WCAG 2.0 Guidelines
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
Note: 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.
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/
CSS Validator http://jigsaw.w3.org/css-validator/
XHTML Validator http://validator.w3.org/
Please provide your comments and feedback to Afsaneh Sharif at email@example.com.