Planning an Accessible Website:Beyond Alt TagsStephanie M. RandolphSchool of Health, Physical Education, and RecreationIndiana University

Session Outline

What is web accessibility? Why is accessibility

important? What are the guidelines for

evaluating accessibility? How do I evaluate my

website? Resources

What is Web Accessibility? Anyone regardless of ability can

use the web. People can understand, navigate,

interact and contribute to the web.

Accessibility benefits everyone, not just individuals with disabilities.

Why is Accessibility Important? The Web is becoming a bigger

part of everyone’s lives The Web can make many tasks

easier for individuals with disabilities

Accessibility is good for business Some websites are required by

law to be accessible (Section 508) Web accessibility benefits

everyone

Different Disabilities That Can Affect Web Accessibility Visual disabilities

Blindness Low vision Color blindness

Hearing impairments Deafness Hard of hearing

Physical disabilities Speech disabilities Cognitive and neurological disabilities

Dyslexia and dyscalculia Attention deficit disorder Intellectual disabilities Memory impairments Mental health disabilities Seizure disorders

Multiple Disabilities Aging-related conditions

Other Considerations

There are a wide array of different browsers to consider when designing accessible websites Internet Explorer, Firefox, Opera,

text only, screen readers Different versions

Many individuals still use a dial-up modem to connect to the internet

Some people may only use one type of input devise

Section 508 1998 Amendment to the

Rehabilitation Act Federal agencies are required to

make their electronic and information technology accessible to employees and the public

Criteria for web-based applications based on the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI).

What are the guidelines for evaluating accessibility? Web Content Accessibility Guidelines Current version 1.0 2.0 due out soon WCAG 1.0 versus WCAG 2.0

Applies more broadly to different technologies

More comprehensive Testable Organized differently (guidelines and

checkpoints versus principles and success criteria)

If you conform to 1.0, you will probably conform to 2.0

Themes of Accessible Design Ensure graceful transformation

Guidelines 1-11 Separate structure from

presentation Provide text alternatives Provide info that serves the same

purpose as audio or visual in ways suited for alternate sensory channels

Create documents that do not rely on one type of hardware

Themes of Accessible Design Make content understandable

and navigable Guidelines 12-14 Make language clean and simple Provide navigation tools and

orientation info that is understandable

Priorities

Priority 1: Must satisfy this checkpoint

Priority 2: Should satisfy this checkpoint

Priority 3: May address this checkpoint

Guideline 1

1. Provide equivalent alternatives to auditory and visual content Be as descriptive but succinct as

possible

Long descriptions <IMG src="97sales.gif"

alt="Sales for 1997" longdesc="sales97.html"> Caption video and multi-media

http://www.ncaonline.org/monographs/19inclusion.shtml

Not So Good – wedding photoGood – a bride feeds wedding cake to the groom

Guideline 2

2. Don’t rely on color alone Examine with colors turned off Provide sufficient color contrast

Not So Good – Our school is the best in the nation.Good – Our school is the best in the nation.

Guideline 3 and 4

3. Use markup and style sheets and do so properly Separate structure from

presentation HTML and CSS

Use the right DOCTYPE HTML 4.01 Transitional

4. Clarify natural language usage Identify primary language – EN Write out abbreviations the first

time they occur in a document

Guideline 5 and 6

5. Create tables that transform gracefully Avoid using tables for layouts Identify row and column headers

<TH id="header1"> and <TD headers="header1">

6. Ensure that pages featuring new technologies transform gracefully Test pages without style sheets and

scripting

Guideline 7 and 8

7. Ensure user control of time-sensitive content changes Avoid screen flicker and text blink

8. Ensure direct accessibility of embedded user interfaces http://www.indiana.edu/~hperdev/

webrequest/index.php

Guideline 9 and 10

9. Design for device-independence Tab indexes and access keys

http://www.ncaonline.org/index.shtml

10. Use interim solutions No pop-ups without alerting user Don’t use auto refresh

Guideline 11 and 12

11. Use W3C technologies and guidelines HTML, XHTML and XML for structure SMIL for multi-media CSS and XSL for style PNG for graphics Avoid deprecated tags

12. Provide context and orientation information Identify frames (or don’t use them)

Guideline 13 and 14

13. Provide clear navigation mechanisms

Skip over navigation <a href="#content" accesskey="2"

title="Skip to content">content</a>

14. Ensure that documents are clear and simple

Simple language and grammar

Not So Good – for a description of our program, click hereGood – for a description of our program, please visit our program info page.

How Do I Evaluate My Website? Review guidelines and plan ahead! Examine pages using graphical

browsers Use different types and versions Turn off style sheets, images, etc.

Examine pages using specialized browsers Text-only Screen readers

Check PDF’s and other technologies Validate site for accessibility when

doing other validation checks Have actual users test it out

Browser ChecksIE7 Firefox 1.5 Opera 9.2 Netscape

8.1

Zoom -lower right hand side of screen-magnifying glass-up to 1000%

Needs add-on -upper right hand side of screen-magnifying glass-up to 1000%

Change colors

-Tools, Internet Options, Colors

-Tools, Options, Content, Colors

-Tools, Preferences, Web Pages-Or User Mode

-Tools, Options, General, Fonts and Colors

Change text size

-Page, Text Size, largest – smallest

-View, Text Size, Increase/Decrease

-Author/User Mode, A++, A+ or A

-View, Text Size, Increase/Decrease

Choose font

-Tools, Internet Options, Fonts (webpage and plain text)

-Tools, Options, Content, Fonts and Colors

-Tools, Preferences, Web pages

-Tools, Options, General, Fonts and Colors

Turn off style sheets

-Tools, Internet Options, Accessibility, Formatting (check all 3)

-View, Page Style, No Style

-User Mode -View, Page Style, No Style

Turn off images

-Tools, Internet Options, Advanced, Multi-media, uncheck Show Pictures

-Tools, Options, Content, uncheck Load Images

-Show Images -Tools, Options, Site Controls, uncheck Allow Images to be displayed

Turn off scripting

-Tools, Internet Options, Security, Custom Level, Scripting, disable all

-Tools, Options, Content, uncheck Enable Java and Enable Javascript

-Tools, Quick Preferences, uncheck Enable Java and Javascript

-Tools, Options, Site Controls, uncheck Enable Java and Javascript

Resources Web Accessibility

Web Accessibility Initiative (http://www.w3.org/WAI/) WebAIM (http://www.webaim.org/) Accessibility Forum (http://

www.accessibilityforum.org/) Dive Into Accessibility (http://diveintoaccessibility.org/) Web Axe (http://webaxe.blogspot.com/)

Section 508 Section508.gov (http://www.section508.gov)

Validation Tools Accessify.com (http://accessify.com/tools-and-

wizards/) Watchfire (http://webxact.watchfire.com/) ATRC Web Accessibility Checker (http://

checker.atrc.utoronto.ca/index.html) Hermish (http://www.hermish.com/) Cynthia Says (http://www.cynthiasays.com/) Anybrowser.com

(http://www.anybrowser.com/siteviewer.html)

Resources Browsers

Lynx (http://www.vordweb.co.uk/standards/download_lynx.htm)

JAWS (http://www.freedomscientific.com/fs_products/software_jaws.asp)

Opera (http://www.opera.com/) Other

Colorblind Web Page Filter (http://colorfilter.wickline.org/)

Using Opera to check accessibility (http://www.webaim.org/resources/opera/)

Magpie (http://ncam.wgbh.org/webaccess/magpie/) Adobe Accessibility Resource Center (http://

www.adobe.com/accessibility/) Web developer toolbar

(http://chrispederick.com/work/web-developer/) Flash (http://www.webaim.org/techniques/flash/)