Accessibility 101

1

Accessibility 101

Dr. John Slatin, Director

Accessibility Institute

University of Texas at Austin

2

ObjectivesParticipants will learn: A working definition of accessibility Accessibility guidelines and standards,

including Section 508 federal standards Specific techniques for improving Web

accessibility Specific things to avoid Tools and resources for testing

accessibility

3

Points to take away

Good design is accessible design The goal is to support full participation

in learning for all Separate is not equal: text-only is a last

resort Accessibility is good for learners and for

you

4

Benefits to learners

Instructional resources are accessible to learners and faculty with disabilities

Instructional resources are better suited to multiple learning styles and multiple intelligences

Improved design makes instructional resources more engaging and effective for all participants

5

JAWS Demo

Screen reader

Reads top to bottom, left to right

Reads on screen text; also parses HTML

source, and for some applications relies on

MS Active Accessibility API

Demo at www.freedomscientific.com

6

What is accessibility?

Accessibility is not “in” the Web page

Accessibility is experiential: User is able to

use data, information, and services as

effectively as someone without a disability

Accessibility is environmental: it depends on

the interaction of the page with browsers,

assistive technologies--and people

7

Types of disability

Cognitive/learning

Auditory

Visual

Motor/physical

Speech

8

Some working numbers

54,000,000 Americans have disabilities 1 in 5 (1 in 2 for people over 65)

5.9 million children with disabilities in U.S. schools (462,000 in Texas)

Only 428,000 in all higher ed (1998-99)

9

Accessibility in law and policy

Section 504 of the Rehabilitation Act of 1973

Americans with Disabilities Act (1990) Section 508 of the Rehabilitation Act

(rev. 1998)

10

Section 504 and Section 508

Section 504 of the Rehab. Act (1973): all programs and activities of educational

institutions receiving federal funds must be accessible to otherwise-qualified individuals with disabilities

Complying with Section 508 accessibility standards is best way to meet 504 requirements where IT is concerned

11

Section 508 Web Standards

16 specific provisions, (a) – (p)

Effective date: June 21, 2001

We’ll concentrate on the most important

provisions of Section 508

12

508 Standards in 3 Categories

Every page accessibility (3 provisions) Apply to virtually every Web page We’ll add a few more

Accessible technologies (9 provisions) Appear on specific pages for specific

purposes Precautions/things to avoid (4

provisions)

13

Every Page Accessibility

Text equivalents (a) Skip navigation (o) Cascading Style Sheets (d) Plus…

Relative sizes for fonts, etc. Clear, informative link text

14

Alt Text: Provision

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

The issue: Imagine listening to all pages or using a browser that shows only text. Without text equivalents (alt text), people using these would be lost.

15

Alt Text Requirements

Every image element must have an alt attribute

Images that don’t convey meaning should have empty alt attributes (alt=“”)

Image links must have meaningful alt text

Graphical buttons and image map hotspots also need meaningful alt

16

Alt Text Examples & No-Nos

Accessibility Institute How-Tos and Demos at

http://www.utexas.edu/research/accessibility/resource/how_to/index.html

17

Alt Text Exercise

What should the alt text be for the following: A blue arrow that links to the next page; A blue arrow repeated around the borders

of a page Thumbnail photo of of blind woman that

links to home page from every page on site about blindness

Same image linked to information about the woman In the photo

18

Skip Navigation Links

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

The issue: Because screen readers read left to right and top to bottom, users often have to listen to all navigation links before getting to the main content on every page.

19

Skip Navigation Examples

UT Home Page at www.utexas.edu

20

Style Sheets

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

The issue: Style sheets are best for Web layout. But the visual order can be different from the order for reading aloud, so authors must take care to preserve readability.

21

Style Sheet Essentials

Style sheets are an asset to accessibility but are ignored by ssistive technology (screen readers, etc..). So: Don’t use style sheets to convey essential

information! Pages shouldn’t depend onstyle sheets for

content Be careful with color and positioning Check pages with style sheets turned off

22

Accessible Technologies

Forms (n) Tables (g, h) Multimedia (b) Applets and plug-ins/media players (m) Image Maps (e, f) Scripts (l) Frames (i)

23

Data Tables: Provisions

(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.

Issue: Tables are meant for the eye, not the ear

24

Table Examples: Simple Table

Identifying row and column headers http://www.utexas.edu/research/accessi

bility/resource/how_to/table/headers/headers.html

25

Table Example: Complex Table

Associating data cells and header cells http://www.utexas.edu/research/accessi

bility/resource/how_to/table/complex/complex.html

26

Forms: The Provision

When electronic forms are designed to be completed online, the form shall allow people using assistive technologies to access the information, field elements, and and functionality required for completion and submission of the form, including all directions and cues.

27

Forms: The Issue

“”What am I supposed to do here?” People using screen reders and other assistive technology need to know what information is required, what’s optional, and what choices are available.

28

Form Requirements: Position Prompts

Position prompts immediately adjacent to form controls: To the left of text boxes and select

menus To the right of radio buttons and

checkboxes

29

Form Requirements: Associate Prompts with Controls

Use the <label> element to associate prompts with form controls (<input>, <select>, <textarea>, etc.)

Use the title attribute if there isn’t room for a <label> on the screen

Use <fieldset> and <legend> to associate groups of radio buttons with questions/prompts

30

Form Examples

Bad form Labeling input fields with <label> Labeling input fields with the title attribute Radio buttons using <fieldset>, <legend>,

and <label> http://www.utexas.edu/research/

accessibility/resource/how_to/index.html

31

Multimedia: The Provision

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

The issue: people with impaired hearing can’t follow soundtrack; people with impaired vision can’t follow video track

32

Transcripts, captions, and descriptions

Transcripts and captions benefit people who… Can’t hear the soundtrack Aren’t native speakers Are learning to read or have reading

difficulties Audio description benefits people who

can’t see the video

33

Transcripts

Word-for-word transcription of speech and other significant sounds, e.g., laughter, applause, song lyrics; indicate speaker changes

Required for audio-only spoken word materials

Display on screen with link to audio or vice versa

Transcript is basis for captions

34

Captions

Word-for-word text representation of speech and other significant sound in video or Flash movies that include soundtracks

• Synchronize with video so captions appear as words are spoken

• Show speaker changes, significant sounds such as laughter, applause, song lyrics, ringing telephones, off-screen speech

• May be open (everyone sees) or closed (user chooses)

35

Audio description

Brief narrative description of significant onscreen events that can’t be inferred or understood from the soundtrack alone

Synchronized with video Audio descriptions are inserted into

natural pauses in the dialogue so as not to interfere with primary audio track

Not all video requires audio description

36

Multimedia Examples

Captioned and described video Sextet video clip at

http://realaudio.cc.utexas.edu:8080/ramgen/research/accessibility/video/real/real_sextet_short.smil

National Center for Accessible Media http://ncam.wgbh.org

37

Other Multimedia Issues

Flash and Shockwave pose severe accessibility problems

SMIL (Syncrhonized Multimedia Integration Language) is a good solution

MAGpie (Media Access Generator from National Center for Accessible Media)

38

Testing and Evaluating

Types of testing Automated testing Compliance checking Expert review User testing

39

Automated Testing: Bobby

Bobby Worldwide Bobby Client Automated check detects about 28% of

potential problems Reports items that require user check

40

Compliance Checking: Bobby’s User Checks

Bobby and other automated tools report items that require informed manual review

User checks are listed even if the item is OK

Compliance does not equal accessibility!

41

Expert Review

Performed by someone who is experienced with assistive technology, Web design, plus accessiblity standards and usability practices

42

User Testing

Include people with disabilities in user tests

Design test scenarios Evaluate results Go back to drawing board…

43

Participate in AIR-Austin!

A one-day “rally” for accessible design Donate your expertise to help an Austin-

area nonprofit put up an accessible Web site

Win recognition for your work Info at http://www.knowbility.org

44

Participate in AIR-UT!

Accessibility Internet Rally for UT Kick-off in May Deadline Fall Produced by Knowbility in conjunction

with annual AIR-Austin competition See last year’s event info at

http://www.utexas.edu/events/air-ut/

45

Contact Information

John SlatinAccessibility Institute, FAC 248C

495-4288 (ph), 495-4524 (fax)www.utexas.edu/research/accessibility

[email protected]