Accessible Website Design Mike Elledge Sofware Accessibility/Usability Specialist University of Michigan [email protected] 734-764-3593

Accessible Website Design

Mike Elledge

Sofware Accessibility/Usability Specialist

University of Michigan

[email protected]

734-764-3593

12/5/03 Designing Accessible Websites 2

Today’s Objectives Provide you with knowledge to design more

accessible sites Give you tools to evaluate your work Be practical!


Reality Check! Is this what you had in mind, too? Is there anything in particular you want to review

today?

We have a lot of material to cover…so please hold your questions for one of the three mini-breaks during the presentation


Is Accessibility Important? Approximately 20 percent of the U S population has

a physical disability That includes approximately 400,000 university students Often no way of knowing who has disability

The U S population is aging Persons with disability spend a lot of money For those in education or government…it’s the law


Accessibility is Important!

20% = 54 Million People in the U.S.

= Texas + California



One-third of US population > 55 by 2040

Percent of Population Over 55

0%5%

10%15%20%25%30%35%40%

1900 1920 1940 1960 1980 2000 2020 2040 2050

85 up75 to 8465 to 7455 to 64



$ $175 Billion in Discretionary Income


Accessibility is Important! “No otherwise qualified individual with a disability…shall, solely by

reason of her or his disability, be excluded from the participation in, be denied the benefits of, or be subjected to discrimination under any program or activity receiving Federal financial assistance.”

--Section 504 (a), Rehabilitation Act of 1973 (as amended in 1998)

“No covered entity shall discriminate against a qualified individual with a disability because of the disability of such individual in regard to job application procedures, the hiring, advancement, or discharge of employees, employee compensation, job training, and other terms, conditions, and privileges of employment.”

--Title II, Americans with Disabilities Act of 1990


Accessibility is Important! “Individuals with disabilities…seeking information or

services from a Federal agency must have access to and use… comparable to the public who are not individuals with disabilities.”

--Section 508, Rehabilitation Act of 1973 (as amended in 1998)


Which Disabilities?

48%

23%

12%

9%5% 2% 1% 0% Hearing

VisionTBICognitionEpilepsyCPMSSpinal


Accessibility Basics Persons with disabilities use websites differently

Persons who are blind listen to sites Persons who are deaf read sites Persons who lack motor control use the keyboard or

pointers Persons with color blindness can’t differentiate between red

and green Persons with learning disabilities need focus


Accessibility Basics Implications…

You must design sites to accommodate the needs of persons with disabilities

Adaptation to your site is not an option!

Fortunately… Designing accessible sites improves everyone’s

experience


Designing for Blindness Blind persons need web content read to them:

Screen readers (JAWS, Window-Eyes) Talking web browsers (IBM Home Page Reader) Text-based browsers (Lynx) Braille displays (less often)

These technologies literally read through a website as users navigate with the keyboard

Users benefit from web pages with keyboard commands, special coding Like <accesskeys> and <alt> tags


Designing for Low Vision Persons with low vision need assistance reading text

and images: Screen enlargers (like ZoomText) Large screen CRTs Browsers set at high zoom levels and/or enlarged text Programs set to reverse (white on black) text

They benefit from sites that accommodate text enlargement and image magnification Style sheets, for example, and resizeable tables


Designing for Deafness Deaf people need text for information:

The same computer equipment as you or I Interpreters--Signing or note taking

They benefit from: Video that includes captioning or transcripts

• Captioning is best because it retains the most context

• Transcripts are preferable to nothing Video, Flash animation, or auditory prompts must have text

or visual supplementation—Section 508


Designing for Control Persons with impaired motor control need varying

assistance (according to severity): Modified mice Special keyboards Head mounted pointers Eye-based, “blink and click” tools

They benefit from large image maps and streamlined actions Like preloading cursors in text boxes


Designing for Cognition Persons with cognitive impairments need:

Enhanced focus Multiple representations Minimal distraction and a quiet environment Support for short term memory

They use: Text enlargers with audio and highlighting (Kurzweil)

They benefit from: Minimal animation, clear navigation, concise text, logical

organization, and visual representations• Like “breadcrumb” trails, paragraph headings, meaningful

icons and pictures


Designing for Accessibility Key things to remember:

1. Images are meaningless, until they are explained

2. Tables need column and row names to make sense

3. URLs are terrible descriptors

4. Screen readers provide context to users, but only if you give it to them first

5. Most assistive technology is PC-only, based on MicroSoft Active Accessibility (MSAA) standards


Persons with Disabilities Several illustrations from Enable: “People with

Disabilities and Computers” Jim Mullen, Ex-Chicago Policeman, Visual Highway, Spinal

Cord Injury (2:52-8:00) Les LeRoss, Business Executive, Stroke (8:14-11:00) Elizabeth Phillips, High School Student, Blind (15:34-18:47) Lindsay Dolich, High School Student, Hearing Impaired

(18:55-21:21)


Mini-Break #1 Stand up and stretch… Any questions so far?


Screen Reader Example This is what a screen reader “sees”

Reads html code like we read a book• Line by line, top to bottom

<ta ble bor der=" 1" cel lspa cing=" 0" cel lpad ding=" 0" summary="Thi s is a st r uctu r alta ble of 5 ro ws and 8 col umns; th e center si x col umns have been mer ged exceptin the second ro w where th ey provide mai n navigat i on"> <tr > <td col span="4" cl ass="MedBlueBackgr ound" > <fo r m met hod=" get"act ion=" http : // www.goo gle.c om/u/UMAccess" cl ass="SearchT ext"> <a name="Search " id ="Sear ch"></a ><la bel fo r ="search" >Search fo r(S ) :</l abel > <in put name="q" ty pe="text" cl ass="SearchBoxTex t " id ="sea r ch"accesskey="s" ta binde x="4" val ue="I nfor matio n" /> <in put ty pe="submit" name="sa" val ue="Searc h" /> <in put ty pe="hi dden" name="hq" val ue="i nurl : ltg-project s.ummu.umi ch.ed u/~mel led ge/ac cessi bilit ysite " /> </f orm>

</t d> <td col span="4" cl ass=" MedBlueBackgr ound" ><span cl ass="HideSki ps"><a

href="#Searc h" ti t le=" Go to Search: Al t + S" cl ass="HideSki ps" accesskey="S"ta binde x="1">Search ( Alt + S) </a >|</s pan><a href="#Content" ti t le=" Go to Content : Al t + C"cl ass="HideSki ps" accesskey="C" ta binde x="1">Content ( Alt + C)</a > <span cl ass="HideSki ps">| </s pan><a href="#PageNavi gati on"ti t le=" Go to Page Navigat i on: Al t + P" cl ass="HideSki ps" accesskey="P"ta binde x="2">Page Naviga t ion (Al t + P) </a > <span cl ass="HideSki ps">| </s pan><ahref="Access i bili t y.ht ml" ti t le=" Go to si t e accessi bilit y in f ormat ion: Al t + A"cl ass="HideSki ps" accesskey="A" ta binde x="3">Accessibi l ity I nfo (Al t + A)</a ><span cl ass="HideSki ps">| </s pan></t d> </ tr > <tr > <td cl ass="Logo"><img sr c="Images/ Logo.gi f " width="150" hei ght=" 50"al t ="Logo of ri sing sun" /><a href="L ogo.h t ml" ti t le=" Descr i ptio n of lo gomet aphor "></a ></t d> <td col span="6" cl ass="Logo"><img sr c="Images/ Logo2. gif" al t ="Onl ineaccessi bilit y makes a bet ter web fo r everyone!" width="450" hei ght=" 75" /></t d> <td cl ass="Si deGraphic" > </t d> </ tr >


Screen Reader Example This is what a screen reader “does”

Responds to specialized tags and talks out loud

Insert audio of code snippet


Website #1 Demonstration: Try to figure out this site by listening

to IBM Home Page Reader Shut your eyes Play audio of http://www.amazon.com

What do you think it is?


Website #2 A more accessible retail site

Download IBM Home Page Reader 3.021 30 day trial:

http://www-3.ibm.com/able/solution_offerings/ hpr.html

Type this URL: http://www.oldnavy.com Listen to page as it loads

• Press Control when you want to stop listening, press down arrow when you want to resume

• Use Tab to move through the document

• What happened?


Website #2 Try other controls

Go to Top of Page: Control + Home Listen to the Page Summary: Control + F1 Set HPR to read Links: Alt + L

• Move back and forth using the arrows Set HPR to read Headings: Alt + 1

• What happens?


Website #2 What did you hear? Do you think you could find your way around? How

about with your eyes closed?


Website #2 How was that different? Was it easier to understand? Why or why not?


IBM Home Page Reader You can download HPR at home and try it for thirty

days:

http://www-3.ibm.com/able/solution_offerings/ hpr.html


HPR Keystrokes Play = Space bar Stop = Control key Next = Right arrow Prior = Left arrow Current = Down arrow

Next link = Tab Prior link = Shift + Tab

Up 10 items = Page up Down 10 items = Page down

Pg summary = Cntrl + F1 Where am I? = Alt + F1

Read links = Alt + L Read headings = Alt + 1 Table navigation = Alt + T

Show links list = Cntrl + L

Top of Page = Cntrl + Home


Accessibility Requirements Web Accessibility Initiative (WAI)

Web Content Accessibility Guidelines• Priority One: MUST

• Priority Two: SHOULD

• Priority Three: MAY (helpful) Find the checklist at:

http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html


Accessibility Requirements Section 508

Mandated for products sold to the Federal Government and websites the Government hosts

Becoming a common standard for accessibility• For businesses

• For universities Find a summary at:

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


Section 508 Standardsa) Text equivalent for images b) Synchronized multimedia

captioningc) Information not color

dependantd) Readable without style

sheet e) Redundant text links for

image mapsf) Client-side image mapsg) Row and column headers

for data tablesh) Associate data with

headers in complex tables

i) Title frames with text j) No page flicker k) A text-only version only

when no alternativel) Accessible alternative to

scriptingm) Links to accessible plug-ins

or appletsn) Make forms accessibleo) Ability to skip repetitive

navigation linksp) Notification of timed

response and ability to notify more time is needed


Enhancing Accessibility Ways you can enhance accessibility

Structure Navigation Appearance Content Special Cases

• Multimedia

• Scripting


Structure Gives screen readers information about layout

Persons with visual impairments can’t see page• Adaptive technology has to give audio picture

HTML code provides context Metadata: Describes subject matter of web page Page titles: Describes page itself Headings: Subdivide page content Table tags: Explain how data is displayed Frames: Tell what each section contains


Structure Tags Metadata

“Description,” “Keywords,” “Author,” within <meta> element• Describes page to search engines

Example: <meta name="keywords" content="Accessibility,

usability” />


Structure Tags Page Titles

“Title” within <head> element• First item announced by a screen reader

Example: <title>Accessibility and Website Design</title>


Structure Tags Text Headers

“h1,” “h2”, etc. within <body> element• Are announced by readers

• Can be clicked through sequentially

• Create context for subsequent text

Example:

<h1>Welcome...</h1>

<h2>Site Description</h2> <p>This site has been developed to help you design

accessible websites and web-based software.</p>


Structure Tags Table Tags

Use percentages, i.e., width=“100%”• Instead of pixels

• Allows user to resize page

• Table-based layouts work in today’s screen readers Include “Summary” information in <table> element

Example: <table width=“100%” summary="This is a structural table of 5 rows and 8 columns; the center six columns have been merged, except in the second row where they provide main navigation”></table>


Structure Tags Frames

“Title,” “Name,” “% sizing” within <Frame> element Are acceptable if some rules are followed:

• <Noframes> also necessary

• Automatic refreshing not allowed• Will return user to top of page (HPR)• Give annoying reminders (“page has just refreshed”)

• “Title” and “Name” tags are necessary Frames can actually facilitate access

• By “containing” content areas

• By naming parts of page


Structure Exercise Try it with Home Page Reader

http://ltg-projects.ummu.umich.edu/~melledge/ presentation/pages/structure.html

Change shape of site by placing cursor at lower right hand corner of page and moving it

• Narrower, wider, longer, shorter Check out page summary: Control + F1 Go through site using Header tags: Alt + 1

What did you notice?


Navigation Enables users to move easily through site

Persons who can’t use mouse• Impaired vision

• Impaired motor control Move through site using the keyboard

Use screen reader features and web capabilities “Skip” links Page Links Access keys Tab ordering


Navigation Tags “Skip” Links

A href=“#Content,” A name=“Content” within <body>• Place link at very top of <Body> section

• Put anchor tag at beginning of page content Enables user to skip navigation bar

• Otherwise has to tab through every link on page

Example: <a href="#Content” title="Go to Content”

>Content</a><h1><a

name="Content”></a>Welcome...</h1>


Navigation Tags Page Links

Persons often surf using links• No surrounding sentences for context• Description must stand alone

Use text that makes sense• “Website for W3C” rather than “www.w3c.org”• Don’t include “Link to”

Include the “title” tag• Users can set screen reader default to link titles • Description will display on mouseover for IE

Example:<a href="About.html" title="Information about this site”> About this site</a>


Navigation Tags Access keys

“Accesskey” within <a href> element User can go to directly to link

• Main navigation• Inputs on forms• Use Alt or Control button plus keystroke: Alt + A• Identify access key in label: About (alt + A) or About

Note: Does not work in Home Page Reader

Example:<a href="About.html" title="Information about this site: Alt+A” accesskey=”A”>About this site (A)</a>


Navigation Tags Tab Ordering

“Taborder” within the <a href> element Generates “reading” order for links and inputs

• Any number from 1 to 1000+• Can skip numbers

User can tab through non-sequential site• If “Feature” visuals come before content• If multiple links appear in an image

Example:<a href="About.html" title="Information about this site: Alt + A" class="BottomNav" accesskey=”A" tabindex="121”> About this site (A)</a>


Navigation Exercise Try it with Home Page Reader

http://ltg-projects.ummu.umich.edu/~melledge/ presentation/pages/navigation.html

Tab through document Navigate using links: Alt + L Go to top of page (Cntrl + Home) and click on “Go to

content” link Try accesskey Alt + S--What happens?

What did you notice?




Appearance Know how and what to control

Blind or low vision persons need image descriptions Color blind need contrast and proper color combinations

Can accommodate a variety of needs with: Alt tags Text images Contrast Color


Appearance Tags Alternative Text for Images

“Alt” within the <img> element• Provide concise, relevant description of image• For more information, provide link to a separate page

• Remember to give the link a title!

Example:<td><img src="Images/Logo.gif” alt="Logo of rising sun" /></td>

<td><img src="Images/Logo.gif” alt="Logo of rising sun" /><a href="Logo.html" title="Description of logo metaphor” ></a></td>


Appearance Tags Text Images

Pixel based images of text, such as .gif or .jpg files Problem for people using software to enlarge text

• Images deteriorate at high magnification

• Will not enlarge when zoom used in browser Solutions:

• Use relative values for text (i.e., “ems”)

• When text is contained in images, use vectors to scale without loss


Appearance Tags Color

10% of male population is color-blind• See green and red as grey

Cannot rely on color only to differentiate objects• Bad Example: “Required fields are shown in red”

Need “*” or some other identifying characteristic


Color Blindness Example To a person without color blindness…

…these circles look different.


Color Blindness Example To a person with color blindness…

…these circles look quite similar.


Appearance Tags Contrast

Persons with low vision benefit from • Between objects, text and background

Make sure text stands out from the background• Use and not color to differentiate

high contrast

Saturation


Appearance Exercise Try it with Home Page Reader

http://ltg-projects.ummu.umich.edu/~melledge/ presentation/pages/appearance.html

Go to top of page (Cntrl + Home)

• Listen to the image description

• Go to the “D (description) link” and press Enter Check out Contrast section--hard to read?


Appearance Exercise Open Vizcheck link:

http://www.vischeck.com/vischeck/ vischeckURL.php

Copy the URL into color check Go to the Color heading on the page What do you see?


Content Make your site easy to read and understand

Allow low sight persons to enlarge text Provide focus for persons with cognitive impairment

Everyone benefits See words as large as necessary Common words and phrases Linear sentence structure Table mark up Form mark up


Content Techniques Relative Sizing

“Em,” “%,” preferably in style sheets• Key to enlarging text, setting font and color

Example:<h1 class="Title">Welcome...</h1>

.Title {font-family: Arial, Helvetica, sans-serif;font-size: 1.25em;font-weight: bold;margin-left: 5%;}


Content Techniques Common Words and Phrases

Your goal is to communicate Use language your users understand Simplify!


Content Techniques Sentence Structure

Be consistent in style and formatting Lead with the subject Position link on meaningful text

Example:“More information is available from Mike’s Accessibility website

(http: //ltg-projects.ummu.umich.edu/~melledge/accessibilitysite/index.html).”


Content Techniques Table Mark up

“Summary”; “Id” and “Headers”; “Scope=“Col” or “Row””• Context has to be provided for blind persons

1. Give information about the table using summary tag

2. Associate cell information with headings• Row and column headers, or Scope


Content Techniques Table Mark up using “id” and “headers” tags

Example:

<thead><tr><th id="category1”>Tutorial</th> <th

id=“category2”>Formats</th></tr></thead><tbody>

<tr><td headers="category1">Introduction</td>

<td headers="category2”>Stylesheets</td></tr>

</tbody>


Content Techniques Table Mark up using “scope” tag

Example:

<thead><tr><th scope="col”>Tutorial</th> <th

scope="col”>Formats</th></tr></thead><tbody>

<tr><td>Introduction</td> <td>Stylesheets</td></tr>

</tbody>


Content Techniques Forms

“Label For” and “I D”; “Fieldset” and “Legend” Accessible so long as they

1) Associate a label with its input, and

2) Provide context for users.


Content Techniques Forms (continued)

Associating a label with input--Can be done two ways:1. Make input relationships explicit

• Use Label and I D For tags

or

2. Structure content logically• Left-to-right and up-to-down in cells• Labels precede text boxes and labels follow checkboxes

and radio buttons



Example:

<label for="FirstName” >First name:</label>

<input name="fn" type="text” id="FirstName" />



Context• Group questions or sections logically

• Identify them by Fieldset and Legend

Example:<fieldset>

<legend>Contact Information</legend></fieldset>


Content Exercise Try it with Home Page Reader

http://ltg-projects.ummu.umich.edu/~melledge/ presentation/pages/content.html

Go to “View” in browser and increase font size Put your cursor in the content area, close your eyes and let

HPR read through the document• Listen to word order and sentence structure


Table Exercise Navigate a table with HPR

http://ltg-projects.ummu.umich.edu/~melledge/ presentation/pages/SampleTable.html

Move your cursor to the table on the page Type “Alt + T” to set up HPR to navigate tables

• Read through the table using the arrow keys

• Move between columns--What do you hear?

• Press space bar to determine location in table Look at the code (handout) and see how the table is

structured


Form Exercise Navigate a form using HPR

http://ltg-projects.ummu.umich.edu/~melledge/ presentation/pages/SampleForm.html

Tab through the form Listen to “prompts” from the screen reader

Look at the code (handout) and see how the form is structured




Multimedia Accessibility has become more challenging with

interactive websites Blind persons are excluded from animation Deaf persons are excluded from audio prompts Persons with cognitive difficulties can find animation

perplexing

Communicate information in an accessible way Captioning Visual prompts Media players


Multimedia Captioning

Provide alternative, accessible content to• Audio

• Video

• Flash Captioning preferred to transcripts

• Better context since contiguous with action

• Improves comprehension: non-impaired and EASL persons

• Required by Section 508

• Still, transcripts better than nothing


Multimedia MAGpie

ncam.wgbh.org/webaccess/magpie Multiple format captioning tool from National Center for

Accessible Media (NCAM)• Free

• Easy to use

• Addresses most popular web formats: QuickTime, RealPlayer, Windows Media Player

Flash captioning tool in beta


Scripting Alternative html content must be provided whenever

scripting (JavaScript) is used Users will sometimes disable JavaScript

• Eliminate distraction

• Requires mouse

• Not all assistive technology reads script accurately “Noscript” follows JavaScript coding in Body


Scripting Exercise Open Internet Explorer and go to:

http://ltg-projects.ummu.umich.edu/~melledge/ accessibilitysite/

Look at JavaScript dropdown for “Tutorial” Go to “Tools” > “Internet Options” > “Security” > “Custom

Level” > “Scripting”• Uncheck “Enable Active Scripting”

• Refresh page

• What happens?

Review JavaScript and “Noscript” code in handout


Website Evaluation Creating accessible code is not enough! Have to validate and evaluate your code Validation

W3C html Code Validator (http://validator.w3.org) W3C CSS Validator (http://jigsaw.w3.org/css-

validator)


Website Evaluation Evaluation

Bobby A-Prompt (University of Toronto) WAVE (Temple University)


Evaluation Tools Bobby

http://bobby.watchfire.com/bobby/html/en/index.jsp The best known of the tools Not overly user-friendly But has great diagnostic features

• Can drill down to W3C and Section 508 regulations


Evaluation Tools A-Prompt

http://aprompt.snow.utoronto.ca Downloadable onto PC Very helpful for evaluating and repairing sites

• Shows problem code and presents window for repair


Evaluation Tools The WAVE

http://wave.webaim.org More readable than Bobby Shows how site will linearize (i.e., tab) Will be used in next exercise


Evaluation Exercise Choose a partner Review this website, find the missing code

http://ltg-projects.ummu.umich.edu/~melledge/ presentation/pages/exercise.html

Look over the code (handout), or Review it with Home Page Reader


Evaluation Exercise Have you checked for all these?

Images without descriptions Links without titles Unmarked headings Unmarked tables

What else?


Evaluation Exercise #2 Now review it using the WAVE

Open your browser Go to: http://wave.webaim.org Put in this URL:

http://ltg-projects.ummu.umich.edu/~melledge/ presentation/pages/exercise.html

Run it, and look over the results

Did you miss anything?


Home Grown Evaluation You can also check your site informally by resetting

browser preferences Check for:

Image alt tags Alternative html for JavaScript Color contrast That it works without style sheets That it works without plug-ins

Not complete, but helpful in a pinch!


Home Grown Evaluation Reset browser preferences

Internet Explorer 6.0• “Tools” > “Internet Options”

• Check “Always expand ALT text for images”• Uncheck “Play animations” and “Show pictures”

• “Tools” > “Internet Options” > “Security” > “Custom Level” > “Scripting”

• “Tools” > “Internet Options” > “General” > “Colors”• Uncheck “Use Windows colors”

• “Tools” > Internet Options” > “General” > “Accessibility”• Check “Ignore colors…” “Ignore font styles…” “Ignore font

sizes…”


Home Grown Evaluation Reset browser preferences (continued)

Netscape Navigator• “Preferences” > “Appearance” > “Colors”

• Change “Background” and “Unvisited” and “Visited Links” as for Internet Explorer

• “Preferences” > “Privacy & Security” > “Images”• Check “Do not load any images”• Change “Animated images should loop” to “Never”

• “Preferences” > “Privacy & Security” > “Scripts & Plugins”• Uncheck “Enable JavaScript for” Navigator


Conclusion Building accessible websites is easy to do

Plan ahead Become familiar with tags and techniques Check your work

It is a collaborative process…so share what you’ve learned!


Questions?


Resources Online

"Dive Into Accessibility, 30 days to a more accessible web site," Mark Pilgrim, 2002, (diveintoaccessibility.org)

UM Accessibility Website(

ltg-projects.ummu.umich.edu/~melledge/ accessibilitysite/pages/index.html)

W3C Website (http://www.w3.org/)


Resources Tools

A-Prompt (http://aprompt.snow.utoronto.ca) Bobby

(http://bobby.watchfire.com/bobby/html/en/index.jsp) IBM Home Page Reader

(http://www-3.ibm.com/able/solution_offerings/ hpr.html)

W3C html Code Validator (http://validator.w3.org/) W3C CSS Validator (http://jigsaw.w3.org/css-validator) Vizcheck

(http://www.vischeck.com/vischeck/vischeckURL.php) WAVE (http://wave.webaim.org/)


Resources Text

"Accessible Web Sites," Jim Thatcher, et al, glasshaus, 2002

"Flash Usability Guide," Chris MacGregor, et al, friends of ED, 2002

"Maximum Accessibility, Making Your Web Site More Usable for Everyone," John M. Slatin and Sharron Rush, Addison-Wesley, 2003

"Usability for the Web," Tom Brinck et al, Morgan Kaufmann, 2002


Home Grown Evaluation Reset browser preferences (continued)

Internet Explorer 5.0• “Preferences” > “Web Content”

• Turn OFF: “Show Pictures,” “Animate GIFS,” “Show style sheets,” “Enable scripting,” “Enable plug-ins”

• Change “Background” to light grey (CCCCCC) web color• Change “Read Links” to dark grey (666666) and “Unread Links”

to Black web safe colors


Structure Example Sample Page

ltg-projects.ummu.umich.edu/~melledge/presentation/pages/structure.html

JAWS Rendering


Navigation Example Sample Page

ltg-projects.ummu.umich.edu/~melledge/presentation/pages/navigation.html

JAWS Rendering


Appearance Example Sample Page

ltg-projects.ummu.umich.edu/~melledge/presentation/pages/appearance.html

JAWS Rendering


Content Example Sample Page

ltg-projects.ummu.umich.edu/~melledge/presentation/pages/content.html

JAWS Rendering


Scripting Example Sample Page

ltg-projects.ummu.umich.edu/~melledge/accessibilitysite/pages/index.html

JAWS rendering

Documents

Accessible Website Design Mike Elledge Sofware Accessibility/Usability Specialist University of Michigan [email protected] 734-764-3593