Is Your Website Accessible?

Stephanie M. BrownSchool of Health, Physical Education, and RecreationIndiana University

Session Outline

What is web accessibility? Web accessibility guidelines Evaluating your own website Resources

Web Accessibility - What it is Everyone, regardless of ability, can

use the web Navigate Understand Interact Contribute

If you are conveying information, everybody should have equal access to it

Disabilities to Keep In Mind

Visual Blindness Low vision Color blindness

Auditory Deafness Hard of hearing

Physical Motor disabilities

Speech Speech disabilities

Cognitive/neurological Dyslexia/dyscalculia Attention deficit Intellectual disabilities Memory impairments Seizure disorders

Web Accessibility - Why is it so Important? It’s the right thing to do

It’s easy to do

It’s the law Section 508 ADA

It can increase your market

It can improve the experience for those without disabilities

What are the guidelines for evaluating accessibility? World Wide Web Consortium (W3C)

Web Accessibility Initiative (WAI). 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

Alternative Text

“Provide equivalent alternatives to auditory and visual content”

Be as descriptive but succinct as possible

Use longdesc="my_description.txt“ if necessary Caption video and multi-media (

http://www.hper.indiana.edu/advancement/Carlson%20Lecture%20February%202008.qt.smil)

Alt Text turned off (http://www.brucelawson.co.uk/2008/is-alt-text-necessary-for-photo-sharing-sites)

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

Color

“Don’t rely on color alone” Information conveyed in color

should also be available without color

Provide sufficient color contrast http://www.angelfire.com/super/badwebs/

Style Sheets

“Use markup and style sheets and do so properly”

Pages should be readable without a style sheet Separate structure from

presentation HTML and CSS (

http://www.brucelawson.co.uk/2008/is-alt-text-necessary-for-photo-sharing-sites/)

Use the right DOCTYPE HTML 4.01 Transitional

Natural Language

“Clarify natural language usage” Identify primary language – EN Avoid abbreviations and acronyms

or write them out the first time

Tables

“Create tables that transform gracefully”

Avoid using tables for layouts Use CSS for style AND positioning

Identify row and column headers <TH id="header1"> and <TD

headers="header1">

Newer Technologies

“Ensure that pages featuring new technologies transform gracefully” Check to make sure that pages which

use scripts work when scripts are turned off (http://www.w3schools.com/js/tryit.asp?filename=tryjs_text)

NOSCRIPT elements <script type="text/javascript"> <!-- document.write("Hello World!") //--> </script> <noscript>Your browser does not support JavaScript!</noscript>

Time-Sensitive Content Changes

“Ensure user control of time-sensitive content changes”

Avoid screen flicker, scrolling and text blink (http://www.angelfire.com/super/badwebs/)

Embedded User Interfaces

“Ensure direct accessibility of embedded user interfaces”

Javascripts, applets, embedded video Event-handlers

Use onmousedown with onkeydown

Device Independence

“Design for device-independence”

Input/output devices Mouse, keyboard, voice, head wand

Tab indexes and access keys (http://www.ncaonline.org/) (http://www.alistapart.com/articles/accesskeys/)

Interim Solutions

“Use interim accessibility solutions”

No pop-ups or new windows without alerting user

Don’t use auto refresh

Accessible Technologies

“Use W3C technologies and guidelines”

HTML, XHTML and XML for structure CSS and XSL for style Avoid deprecated tags Provide alternatives to non-

accessible technologies (PDF’s, etc.)

Context and Orientation Info

“Provide context and orientation information”

Helps users understand complex pages Group blocks of information

appropriately

Navigation

“Provide clear navigation mechanisms”

Site map, understandable navigation, skip over navigation

<a href="#content" accesskey="2" title="Skip to content">content</a>

http://www.w3.org/WAI/

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

Clear and Simple

“Ensure that documents are clear and simple”

Use simple language and grammar

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

Screen Reader Simulator (http://www.webaim.org/simulations/screenreader.php)

Check PDF’s and other technologies PDF Read Out Loud Feature (

http://www.webaim.org/resources/reader/#outloud) Validate site for accessibility when doing other validation

checks Have actual users test it out

http://www.indiana.edu/~iuadapts/index.html

Browser ChecksIE7 Firefox 1.5 Opera 9.2

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, Accessibility, Ignore Colors

-Tools, Options, Content, Colors

-Tools, Preferences, Web Pages-Or User Mode

Change text size

-Page, Text Size, largest – smallest

-View, Text Size, Increase/Decrease

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

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

-Tools, Options, Content, Fonts and Colors

-Tools, Preferences, Web pages

Turn off style sheets

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

-View, Page Style, No Style -User Mode

Turn off images

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

-Tools, Options, Content, uncheck Load Images

-Show Images

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

Resources Web Accessibility

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

WebAIM (http://www.webaim.org/) Dive Into Accessibility (http://

diveintoaccessibility.org/) Web Axe (http://webaxe.blogspot.com/) IU Standards (http://visualidentity.iu.edu/media/

standards.shtml) Section 508

Section508.gov (http://www.section508.gov) Validation Tools

Accessify.com (http://accessify.com/tools-and-wizards/)

ATRC Web Accessibility Checker (http://checker.atrc.utoronto.ca/index.html)

Hermish (http://www.hermish.com/) Cynthia Says (http://www.cynthiasays.com/)

Resources Browsers

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

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

Screen Reader Simulator (http://www.webaim.org/simulations/screenreader.php)

Opera (http://www.opera.com/) Firefox Add-ons (https://addons.mozilla.org/en-US/firefox/)

Other Colorblind Web Page Filter (http://colorfilter.wickline.org/) Anybrowser.com (http://www.anybrowser.com/siteviewer.html) 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/) Flash (http://www.webaim.org/techniques/flash/) RIA (http://webaim.org/techniques/aria/) PDF Read Out Loud

(http://www.webaim.org/resources/reader/#outloud)