Document

Transcript Document

Accessible Web Design Techniques

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 © 2001-2005 All rights reserved. Knowbility, Inc 2

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.

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

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 © 2001-2005 All rights reserved. Knowbility, Inc 7

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 Guidelines 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

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 © 2001-2005 All rights reserved. Knowbility, Inc 12

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:

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

users. by AI Squared - screen magnifying software that makes computers accessible/friendly to low-vision 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!

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 Text b) Synchronized alternatives for multimedia c) Color d) Use CSS e) Server-side image maps f) Client-side image maps g) Simple tables h) Complex tables i) Frames j) Flickering k) Text only version l) Scripting m) Applets n) Forms o) Skip Navigation p) Timed Response © 2001-2005 All rights reserved. Knowbility, Inc 18

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.

Alt-text Examples

alt=“United Nations Flag”

width=… >

alt=“Aeronautics”

width=…> Maybe

title=“Visit the Aeronautics Home Page”

alt=“”

• • • •

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.

•

Alt-text - Judgment

Is it purely Visual? Use

alt=“”

• NLS uses

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! © 2001-2005 All rights reserved. Knowbility, Inc 24

• •

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. © 2001-2005 All rights reserved. Knowbility, Inc 25

Long Descriptions - Examples

Some images need “long descriptions”like charts and graphs < IMG src="traffic.jpg" ...

longdesc="traffic.htm"

alt="traffic density graph“ > traffic.htm :

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

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/Chapte r09.html#h2-2475 © 2001-2005 All rights reserved. Knowbility, Inc 34

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. © 2001-2005 All rights reserved. Knowbility, Inc 36

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.

Image Maps - Examples

alt=“My Yahoo!”

alt=“Finance”

alt=“Travel”

alt=“Email”

alt=“Messenger”

alt=“Help”

Image Maps - Examples

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 and string of id ’s as the header to each heading cell 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

width= width= "10% “ width= "10% "10% “ “ scope= “ col ” > 1998 scope= “ col ” > 1999 scope= “ col ” > 2000 ...

Performance
	17.7
Fund

Performance

17.7

Fund

Complex Data Tables

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

Complex Data Tables - Example

Complex Data Tables - Code

id="r2">San Jose

id="r3" >25-Aug-97

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

name="Title"

frameborder="yes"

title="Title Content"

name=“Main_Navigation"

frameborder="yes"

title=“Main Navigation"

name="Banner_Ad"

frameborder="yes"

title="Banner Ad"

name="Main_Content"

frameborder="yes"

title="Main Content"

name=“Local_Navigation"

frameborder="yes"

title=“Local Navigation"

**travel Expense Report**


id="c2">Meals	Hotels	transport	subtotals					headers="c2 r2 r3">37.74	112.00	45.00