Accessible Web Design Techniques © 2001-2005 Knowbility, Inc. All rights reserved.

Accessible Web Design Techniques

© 2001-2005 Knowbility, Inc. All rights reserved

© 2001-2005 All rights reserved. Knowbility, Inc 2

Class Objectives

• Introduce accessibility terms / history• Experience the problem of access barriers• Learn accessible design techniques• Comparing Standards• Accessibility testing tools• Provide resources for further study


Introduce accessibility terms and history


Points to take away

• Good design is accessible design• Goal is to support full participation for all who

want it. Universal Access.• Separate is not equal: text-only is a last resort• Accessibility improves usability


What is Accessibility?

• A user experience• The ability of a user with a disability to obtain the

same information and perform the same tasks as any other user.

• Generally creating a better user experience for all.

True Test:Can people with disabilities use your web

page?


Types of Disability

• Cognitive/Learning• Auditory• Visual – blind, low vision, color blind• Motor/Physical• Speech


Quasi-Disabilities

These conditions create similar experience • Slow Internet Connection• Old Browser• Missing Plug-ins• No Speakers• Small Display• Eyes Busy/Hands Busy• Noisy Environment


Why is this important?

• More than 50 million Americans – 750 million worldwide – have disabilities.

• Numbers increasing as population ages.• $1 trillion in aggregate annual income.• Emerging best business practices.• Federal mandates.


Accessibility in law and policy

• Americans with Disability Act• Section 508 of the Rehabilitation Act• Texas Administrative Code • Chapter 206 State Web Sites

• University of Texas at Austin Guidelineswww.utexas.edu/web/guidelines/accessibility.html

http://www.utexas.edu/web/guidelines/accessibility.html


Section 508

• Requires Federal Agencies to make information technology accessible • 16 objective measurable standards for web

accessibility

• Many non-federal organizations are adopting Section 508 as their own standard.

• Effective date: June 21, 2001

www.access-board.gov/sec508/guide/1194.22.htm

http://www.access-board.gov/sec508/guide/1194.22.htm


Accessibility Standards

Two sets of Standards:• Section 508 Standards (United States)• Web Content Accessibility Guidelines, WCAG 1.0

(international)


Brief Look at WCAG

www.w3.org/wai

Developed by consensual process– Comprehensive: Includes over 60 checkpoints– Widely accepted: European Union, Canada, Australia have adopted WCAG.

Published in May 1999 (old and about to be replaced by 2.0 anticipated by end of 2005)

Priority 1: Critical

Priority 2: Moderately important

Priority 3: Useful but not essential

http://www.w3.org/wai


Brief Look at Section 508

www.access-board.gov/sec508/guide/1194.22.htm

Legally applies only to federal agencies:– Shorter: 508 has 16 checkpoints, WCAG over 60– Experience: 508 based on WCAG’s most critical accessibility checkpoints.– Measurable: 508 standards developed to be objective and measurable.

http://www.access-board.gov/sec508/guide/1194.22.htm


Assistive Technology

• ANY device (not necessarily electronic) that allows someone with a disability to perform daily tasks.

• Technology has enormous potential to level the playing field for those with disabilities.

• Accessibility is the key to realizing that potential.


Web Assistive Technology

Alternative Keyboard, Alternative Mouse, Slo-Mo Software, Refreshable Braille Display, Screen Magnifier, Screen Reader…

• Examples of Screen Magnifiers/Screen Readers:• Zoom Text by AI Squared - screen magnifying software

that makes computers accessible/friendly to low-vision users. www.aisquared.com

• JAWS by Freedom Scientific – popular screen reading software. Uses internal speech synthesizer and computer’s sound card to read info from computer screen aloud. www.freedomscientific.com

• Home Page Reader by IBM – a web access tool for blind and low vision users. www.ibm.com/able/

This technology works with very little help from web developers!

http://www.aisquared.com/

http://www.freedomscientific.com/

http://www.ibm.com/able/


Experience the problem

• In teams of two or three.• Experience accessible site, according to

instructions.• Turn off your monitor.• Complete assigned task.• Report on progress.


Learn accessible design techniques


Section 508

a) Alt Textb) Synchronized alternatives for multimediac) Colord) Use CSSe) Server-side image mapsf) Client-side image mapsg) Simple tables h) Complex tablesi) Framesj) Flickeringk) Text only versionl) Scriptingm) Appletsn) Formso) Skip Navigationp) Timed Response


508 a) Alt Text

(a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

The Issue:• Think about listening to your web page• That is why text equivalents must be provided

for images and animations Related Guidelines: 508 1194.22(a), WCAG 1.1, IBM 1.


Alt-text for Images

• Every image must have a valid alt attribute. • Images which are not active and which do not

convey information should have alt=“”.• Image links must have a non-empty alt

attribute.• Each INPUT of TYPE=“IMAGE” must have

alt-text specifying the purpose of the button• Each AREA of a MAP must have a valid alt

attribute (more later)


Alt-text Examples

<IMG src=… alt=“United Nations Flag” width=… >

<IMG src=… alt=“Aeronautics” width=…>

Maybe title=“Visit the Aeronautics Home Page”

<IMG src=“spacer.gif” alt=“” width=“1” height=“1”>


Alt-text No-No’s

• Long: “Image of the United Nations Flag (Blue background with white olive branches surrounding map of world) about one and a quarter inches by one inch.”

• Reference to link: “link to aeronautics home page” – we know it’s a link.

• File information: “spacer.gif 236 bytes”• Meaningless out of context: “Click here”


Alt-text - Judgment

• Is it purely Visual? Use alt=“”.

• NLS uses NLS uses alt=“Image of NLS Users”alt=“Image of NLS Users”


Long Descriptions (not widely supported)

The issue: • Sometimes short alt text does not convey the

information in an image.• This is obviously true for charts and graphs.

Related Guidelines: 508 1194.22(a), WCAG 1.1, IBM 3.

Glenda’s recommendation. Don’t use longdesc. Put longer descriptions right

directly onto the page as a caption. Or create a second page with

additional details. Don’t limit the longdesc to Assistive Technology!


Long Descriptions

• Use the long description attribute (longdesc) on the IMG element to provide text equivalents for images like charts or graphs.

• Instead, such images may be described in the text of the page or with a caption.


Long Descriptions - Examples

Some images need “long Some images need “long descriptions”like charts and descriptions”like charts and graphsgraphs

< IMG src="traffic.jpg" ... longdesc="traffic.htm"

alt="traffic density graph“ >

traffic.htm :

<p>This graph shows traffic density on Main and Center streets measured in …


Long Descriptions - Examples


508 b) Synchronized Alternatives for Multimedia

(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

The issue is:• Audio files and the audio part of multimedia content

need to be made accessible to people who are deaf. • Information in the video part of multimedia content

needs to be accessible to people who are blind.

Related Guidelines: 508 §1194.22(a, b); WCAG 1.1, 1.4; IBM 4.


Multimedia

• Include a text transcript for each informational audio file.

• Provide synchronized text equivalents (captions) for the audio content of a multimedia presentation.

• Provide synchronized audio descriptions of significant video information in multimedia presentations.


Multimedia - Examples

Check out MAGPie at • http://ncam.wgbh.org/webaccess/magpie

Sample video with captions and audio descriptions:• NCAM Rich Media Project

http://ncam.wgbh.org/webaccess/magpie

http://ncam.wgbh.org/richmedia/showcase.html


508 c) Color and Contrast

(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

The Issue: information conveyed by color is lost for people who are color blind

• Whenever color carries information, make sure that other parts of the page convey the same information.

• Be sure there is adequate contrast between text and background.

Related Guidelines: 508 §1194.22(c); WCAG 2.1, 2.2; IBM 12.


Color Alone - Example


Color Alone - OK


Links – color alone?

Do you underline your links?

Or are your links obvious by color alone?

My personal philosophy:• I will underline links when they are found in context • I may or may not underline links when they are found in

obvious navigation bars

See Joe Clark’s book on underlining links at http://www.joeclark.org/book/sashay/serialization/Chapter09.html#h2-2475

http://www.joeclark.org/book/sashay/serialization/Chapter09.html

http://www.joeclark.org/book/sashay/serialization/Chapter09.html


Quality Link Text

The issue:• Will link text make sense out of context, in a

list of links?

Related Guidelines: WCAG 13.1.

Note: this is NOT part of the 508 guideline. It will be part of WCAG 2.0.


Links

• Use descriptive link text that lets the user know where the link goes.

• Links to the same place should have the same text; links to different pages should be different.


Links - Examples

Which goes with which?

To go where?


508 d) Use CSS

(d) Documents shall be organized so they are readable without requiring an associated style sheet.

The issue:• Style sheets are an asset to accessibility but they are

ignored by assistive technology so it is important not to convey information with style sheets

• Sometimes individuals use local style sheets for enhanced font size and color

Related Guidelines: 508 §1194.22(d); WCAG 6.1; IBM 11.


CSS

• Make sure pages do not depend on style sheets for content

• Watch positioning, colors and the content property

• Check with style sheets turned off – is document still understandable and usable?


Bonus Points: Relative Units

The issue:• If you use relative units then your page will

resize to fit individual needs

Related guidelines: WCAG 3.4


Relative Units

• Use percentages to specify the width of tables. This refers to the percentage of the screen that the table will fill

• Use percent (%), em, or the terms larger, smaller, etc. for the font-size property. This sets font-size relative to the defaults specified by the user, and allows him or her to change font sizes as needed using the browser

• Question, when is it appropriate to use fixed units, i.e. pixels?


508 (e, f) Image Maps

(e) Redundant text links shall be provided for each active region of a server-side image map.

(f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

The issue:• Server side maps require the use of a mouse. Many disabled

users cannot use a mouse.

Related Guidelines: 508 §1194.22(e, f), WCAG 1.2, 9.1; IBM 2.


Image Maps

• Do not use server-side image maps. • Use client-side image maps.• Include alt-text on every AREA of the MAP

specifying the purpose of each hot spot. • Include alt-text on the actual image


Image Maps - Examples

<map name=m> <area coords="0,0,52,52" href=r/c1> <area coords="53,0,121,52" href=r/p1> <area coords="122,0,191,52" href=r/m1> <area coords="441,0,510,52" href=r/wn> <area coords="511,0,579,52" href=r/i1> <area coords="580,0,637,52" href=r/hw>

</map>



<map name=m> <area coords=“…" href=r/c1 alt=“My Yahoo!”> <area coords=“…" href=r/p1 alt=“Finance”> <area coords=“…" href=r/m1 alt=“Travel”> <area coords=“…" href=r/wn alt=“Email”> <area coords=“…" href=r/i1 alt=“Messenger”> <area coords=“…" href=r/hw alt=“Help”></map>



<area shape=poly coords="173,7,181,9,180,10,227,9,232,10,233,12,238,11,244,12, 250,13,257,14,263,15,267,17,259,27,251,27,245,36,249,41,246,48, 254,53,256,57,257,61,258,66,262,68,263,73,264,75,263,77, 262,78,260,78,259,80,258,82,257,84,256,86,254,87,243,87,243,88, 229,88,229,92,207,92,206,90,186,90,184,85,173,82,170,45, 172,30,172,7,174,8" href=" ... " alt="North Dakota, Minnesota, South Dakota, Nebraska, Iowa">


508 (g & h) Tables

(g) Row and column headers shall be identified for data tables.

(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

The issue:

• Data tables are designed for viewing; column and row headers can be discerned while reading data.

• Accommodation is needed so that screen readers will announce headings as the user navigates a table.

Related Guidelines: 508 §1194.22(g, h); WCAG 5.1, 5.2; IBM 10.


Data Tables

• Place column headings in the first row and place row headings in the first column.

• Use the scope attribute on all heading cells specifying whether the heading labels a column or a row e.g., scope=“row”.

• Use the TH element for all heading cells. • For complex tables: Assign an id to each heading cell

and string of id’s as the header attribute for each data cell to say which are heading cells for that data cell.

• Use the summary attribute and/or CAPTION element.


Simple Data Tables

<table border="1" bgcolor="#ffffcc" Width="60%“ summary=“Fund performance for 1998-2000" > <tr><td colspan="5"align="center"> <strong>Performance</strong></td></tr> <tr> <td width="20%"></td> <th width="10%“ scope=“col”>1998</th> <th width="10%“ scope=“col”>1999</th> <th width="10%“ scope=“col”>2000</th></tr> <tr> <th scope=“row”>Fund</th> <td>17.7</td>...</table>


Complex Data Tables

They do exist (http://workshops.fedstats.gov/htmlSamples.htm).


Complex Data Tables - Example

The “usual” Example:


Complex Data Tables - Code

<table border="1" bgcolor="#ffffcc"> <caption><strong>travel Expense Report</strong></caption> <tr> <td></td> <th id="c2">Meals</th> <th id="c3">Hotels</th> <th id="c4">transport</th> <td id="c5">subtotals</td> </tr> <tr> <th id="r2">San Jose</th> <td></td><td></td><td></td><td></td> </tr> <tr> <td id="r3" >25-Aug-97</td> <td headers="c2 r2 r3">37.74</td> <td headers="c3 r2 r3">112.00</td> <td headers="c4 r2 r3">45.00</td>


508 i) Frames

(i) Frames shall be titled with text that facilitates frame identification and navigation.

The Issue:• Frames are presented to users of assistive

technology as lists of pages. This requires that meaningful text be available for those lists.

Related Guidelines: 508 §1194.22(i); WCAG 12.1; IBM 9.


Frames

• Provide title attributes for each FRAME element in the FRAMESET that make clear the purpose of the frame.


Frames - Examples


Frames - Examples

<frameset rows="40,*" > <frame src="Title.htm" name="Title" frameborder="yes" title="Title Content"> <frameset cols="150,*,150"> <frame src="Left.htm" name=“Main_Navigation" frameborder="yes" title=“Main Navigation"> <frameset rows="40,*" border="2"> <frame src="Banner.htm" name="Banner_Ad" frameborder="yes" title="Banner Ad"> <frame src="Content1.htm" name="Main_Content" frameborder="yes" title="Main Content"> </frameset> <frame src="Right.htm" name=“Local_Navigation" frameborder="yes" title=“Local Navigation"> </frameset><noframes>


Frames - Examples

As seen with Lynx: FRAME: frame 70890 FRAME: frame 70888


508 j) Flickering

(j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

The issue is:• Flicker in the range 2Hz to 55Hz may cause

seizures in people with photosensitive epilepsy.

Related guidelines: 508 §1194.22(j); WCAG 7.1; IBM 13.


Flickering

• The frequency of flicker (image appearing and disappearing) in animated GIF’s, Flash or other objects must be less than 2 Hz or greater than 59 Hz.


Flickering- Examples

• Warning! Flash Example of Flicker (http://ncam.wgbh.org/richmedia/flicker_demo.html)

• For comparison, the caret blink rate (or cursor blink rate) in Windows 2000 varies from 1/2 Hz at the slowest setting to 3 Hz at the fastest; the middle setting is about 1 Hz.

http://ncam.wgbh.org/richmedia/flicker_demo.html


508 k) Text-Only Version

(k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

LAST RESORT


Text Only?

• No other way to make content accessible• Text only version is up-to-date with “main”

version• Text only version provides equivalent

functionality as “main” version


508 l) Scripts

(l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

The issue:• Content created with scripts may be inaccessible,

especially to people using screen readers and/or unable to use the mouse.

Related Guidelines: 508 §1194.22(l); WCAG 6.3, 6.4, 8.1, 9.3; IBM 5.


Scripts – Some Cautions

• If text is made visible through attribute changes with JavaScript, then the interactions must be keyboard accessible, or the content must be readily available in some other accessible way.

• Do not use the onChange event on select menus for form submission.

• For more information on Accessible Javascript see WebAim www.webaim.org/techniques/javascript/

http://www.webaim.org/techniques/javascript/

http://www.webaim.org/techniques/javascript/


508 m) Applets

(m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).

The issue:• Software associated with a web page must be

accessible.

Related Guidelines: 508 §1194.22(m); WCAG 6.3, 6.4, 8.1; IBM 6.


Applets and Plugins

• Information conveyed and the function provided by applets, plugins or other objects must be available to users of screen readers and other assistive technology

• Check that the software is directly accessible (desktop players, for example) or provide accessible alternatives.


508 n) Forms

(n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

The issue:• “Tell me what this form control is for!”• People using screen readers need to be told the

purpose of an edit field or check box.Related Guidelines: 508 §1194.22(n); WCAG 10.2, 12.4, 9,3; IBM 7


Accessible Forms

• Position prompts immediately adjacent to input controls

• Associate prompts with the corresponding INPUT element using the LABEL element with the for attribute

• Use the title attribute on form controls when text not available for LABEL


Accessible Forms - LABEL

<LABEL for="name">Last Name:</LABEL> …

<INPUT size="20" type="text" id="name" name="Name"> …

<LABEL for="old">I have visited before.</LABEL>…

<INPUT type="radio" checked id="old" name="visited" value="yes">


Accessible Forms -Title

• Some times there is no text to use with Label:

<INPUT type="radio" … title=“disagree 3">


508 o) Skip Navigation

(o) A method shall be provided that permits users to skip repetitive navigation links.

The issue:• Navigation links often precede the main

content on every page. People listening to the page have to listen to those links on every page making the main content difficult to find

Related Guidelines: 508 §1194.22(o); WCAG 13.5, 13.6; IBM 8


Skip Navigation

• If there are navigation links before the main content of the page, provide a link at the top of the page that jumps over the navigation to the main content.


Skip Navigation – The Problem

A screen reader user has to listen to everything before the “main content.”


Skip Navigation – Example


Skip Navigation – Example

<a href="#ContentArea">

<img src= … alt="Click here to skip to main content" …

<a name="ContentArea"></a> … Updated: 12:03 …


Skip Navigation – Hidden or Far Left?

Hidden –

.skiplink {display:none}

Far Left –

#skiplink { position:absolute; left:-999px; width:990px;

}


508 (p) Timed Response

(p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

The issue:• A person with a disability may not be able to

read, move around, or fill in a Web form within the prescribed amount of time.

Related Guidelines: 508 §1194.22(p)


Timed Response

• Do not set a time limit on the users response.• Notify the user if a process is about to time-out• Provide a prompt asking whether additional time

is needed.


Just Do IT!


Correct Markup

The issue:• If you use structural markup for its intended

purpose then assistive technology can take advantage of the structure when navigating the page

• If you use structural markup in the wrong way, a user of assistive technology may be confused when navigating the page

Related Guidelines: WCAG 3.1, 3.5, 3.7, 5.4

Will be part of WCAG 2.0


Correct Markup

• Use structural markup (H1, UL, P, …) for their designated purpose; don’t simply change font size and weight for a heading, for example.

• Don’t use structural markup to replace style changes, e.g., don’t use headings to achieve large font.

• Use BLOCKQUOTE for quotations, not for indentation


17. Pop-up Windows

The issue:• It is extremely disorienting to some people

when content opens in a new window. • If you cannot see the screen or if your browser

is maximized you probably won’t know that a new window has appeared.

Related guidelines: WCAG 10.1.


Pop-up Windows

• Do not use spontaneous pop-up windows.• If you must display content in a new window,

include the fact that a new browser window will be opened in the link text (“product list in a new window”).

• Provide a simple way to close the pop-up.


Bonus Points

• Abbreviations and/or acronyms expanded

• Identify primary natural language and language changes

• Logical tab order

• Provide keyboard shortcuts (access keys)

• Include non-link, printable characters between adjacent links.

• Provide abbreviations for long headers in data tables.

• Use XHTML 1.0 to create site. With strict DTD.

Comparing Standards

and looking forward…



WCAG 1.0, 508 or WCAG 2.0?

• WCAG 1.0 – May 5, 1999• 508 – effective June 21, 2001• WCAG 2.0 – target date December 2005


WCAG 1.0 P1 vs 508WCAG 1.0 (Priority 1) Compare 508

1.1 Alt text Very similar a) Alt text (just doesn’t specify all the non-text element types)

1.2 Server-Side Image Maps

Same e) Server-Side Image Maps

1.3 Auditory Description Not in 508 508 encourages audio descriptions within the synchronized alternatives, not as a separate track

1.4 Synchronized multimedia

Same b) Synchronized multimedia

2.1 Color Same c) Color

4.1 Natural Language Not in 508 Not many AT support language change markup


WCAG 1.0 P1 vs 508 continued…

WCAG 1.0 (Priority 1) Compare 508

5.1 Table Headers Same g) Simple Tables

5.2 Complex Tables Same h) Complex Tables

6.1 Style Sheets Same h) Style Sheets

6.2 Dynamic Content Not in 508 Deemed unclear. Just a backup to other checkpoints

6.3 Scripting WCAG more restrictive

l) Scripting & m) applets


WCAG 1.0 P1 vs 508 continued…

For a detailed comparison of WCAG 1.0 to 508 see http://www.jimthatcher.com/sidebyside.htm

WCAG 1.0 (Priority 1) Compare 508

7.1 Flicker 508 More specific

j) Flicker

9.1 Client Side Image Map Same f) Client Side Image Map

11.4 Text only – last resort Same k) Text only – last resort

12.1 Frames Same i) Frames

14.1 Clear Language Not in 508 Subjective. Deemed to difficult to enforce.

http://www.jimthatcher.com/sidebyside.htm


WCAG 2.0 Design Principles

• Content must be perceivable• Interface elements in the content must be

operable• Content and controls must be understandable• Content must be robust enough to work with

current and future technologies


WCAG 2.0 Working Draft (June 2005)

1 Perceivable1.1 Provide text alternatives for all non-text content1.2 Provide synchronized alternatives for multimedia1.3 Ensure that information, functionality, and structure can be

separated from presentation1.4 Make it easy to distinguish foreground information from

background images or sounds

2 Operable2.1 Make all functionality operable via a keyboard interface2.2 Allow users to control time limits on their reading or interaction2.3 Allow users to avoid content that could cause seizures due to

photosensitivity2.4 Provide mechanisms to help users find content, orient

themselves with it, and navigate through it


WCAG 2.0 Working Draft (June 2005)

3 Understandable3.1 Make text content readable and understandable

3.2 Make the placement and functionality of content predictable

4 Robust4.1 Use technologies according to specification

4.2 Ensure that user interfaces are accessible or provide an accessible alternative(s)


Accessibility testing


Accessibility Testing tools

• Accessibility Validators – Page by Page• Listening to Your Pages• Screenreaders/Talking Browsers

• Accessibility Reports • Practical Testing Plan


Accessibility ValidatorsPage by Page

• WebXact• The Wave• Web Developer for Firefox (extension)• Accessibility Toolbar for IE

Accessibility Tools can only automatedly test approximately 27% of the issues.

Accessibility Testing requires human brain power!


3 Free Accessibility Validators

Tool + -WebXact *New tool from the folks at

Watchfire (replaces bobby)

*Excellent resource

•Doesn’t have visual info you used to get from Bobby

Wave •Good for seeing “reading order” & alt text

•Report not as intuitive•Doesn’t explain how to solve problems

Accessibility Toolbar Great tool that combines many accessibility validators and simulations

•Beta version (occasional bug)•Only available for PC/IE


Evaluation of Free Accessibility Testing Tools

www.webaim.org/techniques/articles/freetools/

Articles has links

to all the free

accessibility testing tools

http://www.webaim.org/techniques/articles/freetools/


Testing a Site

• http://www.geocaching.com• WebXact• Wave• Web Developer in Firefox• Accessibility Toolbar in IE

http://www.geocaching.com/


Listening to Your Site

The real test – can users with disabilities actually use your site?

Two examples of assistive technology

•JAWS by Freedom Scientific – popular screen reading software. Uses internal speech synthesizer and computer’s sound card to read info from computer screen aloud. www.freedomscientific.com

•Home Page Reader by IBM – a web access tool for blind and low vision users. www.ibm.com/able/

http://www.freedomscientific.com/

http://www.ibm.com/able/


Demo of Home Page Reader

• Home Page Reader – a talking browser• Listen to UT Home Page

• Link Lists (control + L)• Skip to Main

• Listen to Dreamworks• http://www.dreamworks.com/

http://www.dreamworks.com/


Demo of JAWS

• JAWS – a true screenreader for PCs• reads IE, Word, Excel, Powerpoint, Desktop…

• Listen to UT Home Page• Links on page (tab to move from link to link)• Link Lists – alpha and page order (Insert F7)

• Listen to Dreamworks• http://www.dreamworks.com/

http://www.dreamworks.com/


LIFT Machine

• Tests entire sites for accessibility

• Builds accessibility reports• Results by checkpoints• Checkpoints expanded• Edit Preferences• Create Reports• Resources – How to fix• Previews of pages for debugging


Review LIFT Report

• www.geocaching.com• http://lm-ny.usablenet.com/lm/index.jsp

http://www.geocaching.com/

http://lm-ny.usablenet.com/lm/index.jsp


Tools for Prioritizing

Accessibility Errors

• LIFT – www.usablenet.com

• WebXM –www.watchfire.com/products/webxm/

• Step508 - http://www.section508.gov/index.cfm?fuseaction=content&id=155

http://www.usablenet.com/

http://www.watchfire.com/products/webxm/

http://www.section508.gov/index.cfm?fuseaction=content&id=155

http://www.section508.gov/index.cfm?fuseaction=content&id=155


Watchfire WebXM

• http://webq.austin.utexas.edu/webxm/• austin\gsims• Dashboard – Site Health• Favorites - Reports• ITS Accessibility• Section 508 Issues

http://webq.austin.utexas.edu/webxm/


A Practical Plan

1. Test with your browser• Turn off images• Don’t use the mouse• Increase font size• Change window size

2. Run online Accessibility Tests on representative pages

• use more than one tool, example: Watchfire & Wave

3. Listen to your pages• Home Page Reader or JAWS

4. Run a LIFT or WebXM Report5. Hands on Accessibility Testing

Next Steps


What accessibility actions do you plan to take next?

What resources do you need now?

Accessible Web Design Techniques © 2001-2005 Knowbility, Inc. All rights reserved.

Documents

web page

objective measurable

better user experience

accessible designgoal

federal agencies

screen magnifying software

federal mandates

awaygood design