Universal Design

Ensuring access to the Internet for all

users

"The world is harder when it is not conceived for

you."

http://www.ad-awards.com/inc/video.swf?id=104

Universal Design

The design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.

The Issues

• Individuals with disabilities

• Universal user access

• Legal mandates

• Business productivity

Individuals with disabilities

• Adults, youth and children in every social sector and ethnic group

• Largest minority in the U.S. – and growing– Currently 55 million people in U.S.– 18.7% of population, not including LD– 75 million people worldwide

• Responsible for over $1 trillion in aggregate income

AARP Web Access Guidelines

• Use conventional interaction elements• Make it obvious what is clickable and

what is not• Make clickable items easy to target

and hit• Minimize vertical scrolling; eliminate

horizontal scrolling• Ensure the Back button behaves

predictably.

• Let the user stay in control• Is there clear feedback on actions?• Provide feedback in other modes than

visual• Make the structure of the website as

visible as possible (Yahoo, hhs.gov)• Clearly label content categories; assist

recognition and retrieval rather than recall

• Implement the shallowest possible information hierarchy

• Include a site map and link to it from every page

• Make pages easy to skim and scan• Make elements on the page easy to

read• Visually group related topics• Make sure text and background colors

contrast• Use adequate white space• Make it easy to find things on the page

quickly

• Focus the writing on audience and purpose

• Use the users’ language; minimize jargon and technical terms

User Access Issues

• Browser• Platform• Language• Connection speed• Bandwidth• Hardware• Software

•Input

•Output

• Americans with Disabilities Act of 1990– Public accommodations must be

accessible• Rehabilitation Act, Section 508

– Federal agencies required to be accessible

• World Wide Web Consortium– Web Accessibility Initiative (WAI)

Accessibility guidelines• Company/Institution policy

Legal Issues

Business Productivity Issues

• Increase your share of the market• Qualify for government contracts• Distinguish yourself from the

competition• Improve general usability• Bragging rights – IBM, Southwest

Airlines, others

Usability Issues

• Visual• Auditory • Manual• Cognitive

Usability Issues

• Blind – speaking browsers, screen readers• Low vision – magnifiers, high contrast• Deaf/hard of hearing – visual alternatives

for audio content• Mobility impairments – alternative

browsing, navigation devices, voice input• Cognitive/learning disabilities –

combination of solutions

• Present information in multiple formats– Visual/auditory, graphic/text

• Duplicate functions in two methodologies– Form/e-mail, table/no table, color/no color

• Test site for accessibility

Strategies for Accessibility

Visual Disorders

• Blind• Visually impaired• Color blind/color sensitive• Seizure disorder

Users Who Are Blind• Screen reader programs (text to speech)

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

– IBM Home Page Reader (http://www-3.ibm.com/able/hpr.html)– ReadPlease 2000 – (http://www.readplease.com/)

– Connect OutLoud (web access) – (

http://www.freedomscientific.com/fs_products/software_connect.asp)

Users Who Are Blind

•Braille output programs

– PowerBraille (http://www.freedomscientific.com/fs_products/displays_40.asp)

– ALVA Braille Display(http://www.alvabraille.com/BrailleDisplays/)

Users Who Are Blind

Potential problems:– Graphics (photos, clip art, diagrams, etc.)– Links– Navigation– Image maps– Tables– Frames– Forms– Abbreviations, acronyms, other languages

Users Who Are Blind

•Suggested solutions–Graphics

•Include an “ALT” tag in the <IMG SRC> code. The ALT tag should tell the user what the graphic is in a few words.

– EX: <IMG SRC=“mydog.jpg” ALT=“Photo of my dog Spot”>

•Non-active images that do not convey information should have ALT=“”.

•For longer descriptions, use the “LONGDESC” tag in the <IMG SRC> code, which links to another .html page with a longer text description.

EX: <IMG SRC=“mydog.jpg” ALT=“Photo of my dog Spot” LONGDESC=“mydog.html”>

•Insert a “D-link” immediately after the image.

EX: <IMG SRC=“mydog.jpg” ALT-”Photo of my dog Spot”><A HREF=“./mydog.html”>D</A>

– Graphics •Use appropriate markup language

or text instead of graphics where available.

–EX: Mathematical equations»Identify the meaning of

variables, provide the formula in text as well as graphics, use MathML or TeX markup language.

3

236

32

36

32

36

32

36

• Find the square root of 36, then divide that by 2, then multiply the answer by 3.

• Divide 36 by 2, find the square root of the answer, then multiply that by 3.

• Multiply 2 times 3, divide the answer into 36, then find the square root of that number.• Divide the square root of 36 by the product of 2 times 3.

Users Who Are Blind– Links

•Clearly label graphics used as links with descriptive “alt” tag

•Include alternate text links on page•Separate text links with spacesEX: <A HREF=“courses.html” ALT=“Link to list

of courses”> Courses</A> �|�<A HREF= “faculty.html” ALT=“Link to list of faculty teaching courses”>Faculty</A> �|�<A HREF=“registr.html” ALT=“Registration form”>Registration</A>

Users Who Are Blind

• Navigation– Keep links together– If navigation links precede page

content, provide a method to skip to main content•Ex: <html><body><A

HREF=“#main” ALT=“Skip to main content”>&nbsp;</A>

– Image maps•Use “client side” maps, not server maps•Include an “ALT” tag for each area of the

map.•Include a “LONGDESC” to a file with a more

complete site map if the image map is extensive.

EXAMPLE: <MAP NAME="map1"><area shape="rect"

COORDS="92,55,257,85“HREF="./preview.html" ALT=“Link to

Program Preview">

•Include separate descriptive text links on the page.

Users Who Are Blind

Users Who Are Blind– Tables

• Include the <TH> tag and use the table header to give a description of the contents of the table column.

•Use the <TITLE> tag to give the table a title that helps the user understand what is in the table.

•Also include the information in the table in text somewhere in the document.

•Avoid using multiple columns of text.•Avoid using the <TABLE> code for page

layout.

• Frames•Clearly NAME and TITLE frames and

indicate how they relate to each otherEX: <FRAMESET ROWS="100,*">  <FRAME NAME="titlebar" SRC="titlebar.html" TITLE="Title Bar">   <FRAMESET COLS="25%,*">    <FRAME NAME="navbar" SRC="navbar.html" TITLE="Navigation Bar">     <FRAME NAME="main" SRC="main.html" TITLE="Main Content Frame">   </FRAMESET> </FRAMESET>

Users Who Are Blind

•Provide alternative format for non-frame browsers.

–Separate HTML page with link from the main page

–“NOFRAME” markup in main page

Users Who Are Blind

– Forms•Include an e-mail address or e-mail

link as an alternative method of sending the required information.

•Ensure that labels for all form controls are properly positioned.

EX: <LABEL for="firstname">First name: <INPUT type="text" id="firstname" tabindex="1"> </LABEL>

Users Who Are Blind

•Downloadable/Printable Documents•Include downloads in multiple

formats that are accessible to screen readers, enlargers, etc.

– Newest version of Adobe Acrobat can be made readable with screen reader in Windows 2000.

EX: On-line registration form Registration form in .pdf format Registration form in HTML format

– Lists•Number the text manually rather

than through the <OL> tag if the numbers are important.

•Numbered items 1.1, 1.2, 1.3, 2.1, etc. is more meaningful than embedded lists.

•Do not use lists for page formatting

Users Who Are Blind

Users Who Are Blind

• Use structural markup for its designated purpose– Ex: Use H1, H2, etc. for true headings– Use “font size=“__” to change font

size– Use <BLOCKQUOTE> for quotations,

not for indentation

Users Who AreVisually Impaired

• Screen display enlargement programs

– Zoomtext (display enlargement + voice output)(http://www.aisquared.com/)

– MAGic(http://

www.freedomscientific.com/fs_products/software_magic.asp)

• Potential Problem– Poor quality graphics or graphics too

small

• Potential solutions– Create graphics with accessibility in

mind– Add <alt> tags to graphics

Users Who Are Visually Impaired

• Potential Problem– Difficult navigation (e.g. links are not

underlined, dotted box is difficult to see)

• Suggested solutions– Make links appear underlined, even if

they are graphical– Use correct stylesheet elements to

highlight text links

Users Who Are Visually Impaired

Dotted box around “Resources” is difficult to see.

Put this code in a file called "highlight.css"

a:active, a:focus, a:hover { background: #FFFF66; color: #000000;border: solid #990000; font-weight: bold; padding: 3px; }

and you will get -

Internet Explorer text link

To highlight input boxes –

Use the <span> or <div> element around each form element and you will get

Users Who Are Visually Impaired

Other Potential problems– Poor contrast on the screen– Embedded style cannot be changed

Users Who Are Visually Impaired

• Suggested solutions– Use the ALT tag for graphics– Include text links as well as graphic

links– Use style sheets to set page display so

that users can change the appearance using the “preferences” feature

– Be sure that documents can be read without the associated style sheets

Users Who Are Visually Impaired

– Use relative units rather than defined units

• Ex: Table width=“100%”, FONT SIZE=“+1”

– Do not set pages to automatically refresh or redirect

– Use navigation mechanisms in a consistent manner – links to the same page should have the same text every time they occur

Users Who Are Color-Blind or Color-

Sensitive

Potential problems– Red/green deficiency– Sensitivity to certain colors or bright

lights

www.visibone.com/colorblind/http://more.btexact.com/people/rigdence/colours/

Users Who Are Color-Blind or Color-

Sensitive• Suggested solutions

– Do not depend on color to convey information• Ex:

Tell us who you are (required fields in red) Company Salutation First name Last name Job title

Users Who Have Seizure Disorders

Potential Problems– Flashing lights, moving graphicsSeizures can be triggered by flashing lights

in the range of 2Hz to 55Hz in people with photosensitive epilepsy (animated gifs, Flash screens, etc.)

WARNING! Flash example of flicker http://ncam.wgbh.org/richmedia/flicker_demo.html

Users Who AreDeaf/Hard of Hearing

Potential problems– Sound effects– sound cues– Audio descriptions– Background music

Users Who AreDeaf/Hard of Hearing

• Suggested solutions– Provide alternate descriptive text of the

audio.– Provide alternate visual cues.– Include a short acknowledgement of the

title/composer of background music.– MAGpie software adds captioning to

audio/video content– (http://www.webaim.org/techniques/

captions/magpie/)

Users With Manual Impairment

Potential problems• Limited range of motion• Limited manual dexterity• Alternate input devices

– Voice recognition technology– Switches, buttons, touch screens, light

beams, on-screen keyboard, TAB key

• Potential Problem– Resizing frames

• Suggested Solutions– Avoid frames altogether– Make sure text fits within frame size,

even if the user enlarges the font– Make the border thicker or add a

“handle” to make it easier to grab

Users With Manual Impairment

Users With Manual Impairment

• Potential Problem– Image links that are too small

• Suggested Solutions– Add an invisible border around the image– Add text with the image Next

• Potential Problem– Small form objects (radio buttons,

check boxes)

• Suggested Solutions– Use the <label> tag to link the text

and the form object

Users With Manual Impairment

• Potential Problem– Server-side image maps are mouse

dependent

• Suggested Solutions– Use client-side image maps– Provide alternate text links

Users With Manual Impairment

• Potential Problem– <Onmouseover> requires a mouse

• Suggested Solution– Avoid using mouseovers to display

important information– Use device-independent scripts

(e.g. onFocus)– Include an alternate keyboard-accessible

way to access the information

Users With Manual Impairment

• Potential Problem– Too many links on one page (tabs)

• Suggested Solutions– Group links under main headings– Provide shortcut links whenever possible

(e.g. “skip to main content”)– Avoid using access keys as they may

conflict with special accessibility software

Users With Manual Impairment

Users With Manual Impairment

• Suggested Solutions– Keep links in the same area– Make buttons/image map areas larger– Make sure that links are “tab”-able– Provide alternative response form, i.e.

an e-mail link

Users With Manual Impairment

• Adaptive Software– IBM Viavoice

• http://www-4.ibm.com/software/speech/

– Dragon Systems Naturally Speaking• http://

www.dragonsys.com/naturallyspeaking/

– Synapse TAP System• http://

www.synapseadaptive.com/synapse/stap.htm

Users With Cognitive Disorders

• Potential problems– Reading

• Provide alternative graphics which explain the text

• Use the clearest and simplest language appropriate for a site’s content

• Divide large blocks of information into more manageable groups where natural and appropriate

– Visual cues• Provide alternative sound cues.

Users With Cognitive Disorders

• Potential problems– Complicated navigation

• K.I.S.S.• Provide simpler alternative navigation

links such as a site map with links• Clearly identify links and what they are

for• If search functions are provided, enable

different types of searches for different skill levels and preferences

Other Issues

• Scripts– May be inaccessible to people using

screen readers and/or unable to use a mouse

• Applets and Plugins– Software associated with a web page

should also be accessible

Other Issues

• Pop-up windows– Can be confusing, disorienting– Users who maximize the display won’t

know the window has appeared– Cannot be read by screen readers

World Best Websiteshttp://www.worldbestwebsites.com/

Gold Award Winners• http://www.balthaser.com/builder/

fx_boot.asp• http://www.questacon.edu.au/

index_flash.asp• http://www.profitpatterns.com/• http://www.penguinclassics.com/• http://www.davidplant.net/B4UStart/

excellent_cheap_websites.htm

Which one?

Based on what you have learned about accessibility, which one

would you choose as most accessible?

http://www.amazon.com

http://www.barnesandnoble.com

www.airfrance.com

www.dreamworks.com

www.oscars.org

http://www.hp.com/hpinfo/abouthp/accessibility/index.html

Web Access Guidelines

• World Wide Web Accessibility Initiative– http://www.w3.org/WAI/Resources/#gl

• Microsoft Access Guidelines– http://www.microsoft.com/enable/

• Federal Access Board Guidelines for Government Purchases– http://www.access-board.gov or

http://www.section508.gov

• IBM Web Accessibility Checklist and Tutorial– http://www-3.ibm.com/able/guidelines/we

b/ accessweb.html

• Information Technology Technical Assistance Training Center (ITTATC)– http://www.ittatc.org/training/webcourse

• AARP Web Accessibility Guidelines– http://www.aarp.org/olderwiserwired/

oww-resources/designing_web_sites_for_older_adults_heuristics.html

HELP for Web Authors• “Getting Started: Making a Web Site

Accessible”– www.w3.org/WAI/gettingstarted

• “Worldwide Access: Accessible Web Design” video and workbook– http://

www.washington.edu/doit/Video/www.html• “EASI Online Workshops”

– http://www.rit.edu/~easi/access.htm

• “Resources for Web Authors”– www.mtsu.edu/~itres/help/Accessibility/index.html

• “Designing Accessible Websites”– http://www.infouse.com/disabilitydata/guidel

ines98.html

• “W3C Accessibility Guidelines”– http://www.w3.org/WAI/GL/

• AWARE (Accessible Web Authoring Resources and Education)– http://aware.hwg.org/#resources

• Web Design Group – HTML Help– http://www.htmlhelp.com/

• TRACE: Design of HTML– http://trace.wisc.edu/world

• Creating Accessible Web Pages with Composerhttp://www.htctu.net/trainings/manuals/tutmain.htm

Other Helpful Resources

• See how your page looks to someone who is color blind– http://www.vischeck.com

• View your page in Lynx (text browser)– www.delorie.com/web/

lynxview.html

• Dreamweaver accessibility information– http://www.macromedia.com/

macromedia/accessibility/mx/dw/• Flash accessibility information

– http://www.macromedia.com/macromedia/accessibility/features/flash/

• Information on Web CT Web Accessibility features– http://booboo.webct.com/otln/

webct_accessibility.htm• Convert pdf files to html files

– http://access.adobe.com/• Create accessible rich media

– http://ncam.wgbh.org/richmedia/index.php

Multimedia Tools

• MAGpie (Media Access Generator)– http://ncam.wgbh.org

• Apple Quicktime Pro– http://www.apple.com/quicktime/products

• SMIL (Synchronized Media Integration Language)– http://www.w3.org/AudioVideo

• OptiMap (translates searchable databases to text)– http://www.corda.com/accessibility

• Check your web site’s accessibility– www.cast.org/bobby– http://www.webaim.org/techniques/articles/

aac/whitepaper#tool– http://www.accent.webaim.org– http://www.webable.com/linkspage.html– http://aprompt.snow.utoronto.ca/– http://www.usablenet.com– http://www.w3.org/WAI/ER/existingtools.html

Prepared by Carol PopeAsst. Dir. for disAbled Student Support Services

Kennesaw State University, 770-423-6443Feb. 22, 2005