Web Accessibility Workshop

1

Web Accessibility Workshop

Erasmus IP:

FORTE project

Valencia, Spain

03/04/2009

2

What is web accesibility?

Web accessibility means access to the Web by

everyone,

regardless of disability.

3

Web accessibility involves:

• Web sites and applications that people with disabilities can perceive, understand, navigate,

and interact with;

• Web browsers and media players that can be used effectively by people with disabilities, and that work well with assistive technologies that some people with

disabilities use to access the Web;

• Web authoring tools, and evolving Web technologies that support production of accessible Web content and Web sites,

and that can be used effectively by people with disabilities.

4

Web accessibility is a social issue:

• The Web has become a key resource for:

news, information, commerce, entertainment, classroom education, distance learning, job searching, workplace interaction, civic participation, government services.

• It is displacing traditional sources of information and interaction:

schools, libraries, print materials,

discourse of the workplace;

some of the traditional resources were accessible; some not -> A NEW WAY

Dadfa

5

An open door to knowledge

An accessible Web means

unprecedented access to information for people with disabilities.

6

Web accessibility is a marketplace issue

At least 10% of the population in most countries has disabilities;

visual, auditory, physical, speech, cognitive, and neurological disabilities can all affect access to the Web

Average age of population in many countries is increasing; aging sometimes results in combinations of accessibility issues;

vision & hearing changes, changes in dexterity & memory.

Few organizations can afford to deliberately miss this market sector.

7

Web accessibility is, sometimes, a must

• A number of governments require accessibility of specific kinds of Web sites.– often required for government Web sites first; – sometimes for educational or commercial sites; – provinces, states, municipalities may have

requirements; – corporations and non-governmental organizations

sometimes set own requirements.

8

W3C Plays Leading Role in Development of Web Technologies

• The World Wide Web Consortium (W3C) – is an international, vendor-neutral consortium, with over 400

members– it promotes evolution and interoperability of the Web

and has a strong focus on the universality of the Web. • W3C operates from three host sites:

– MIT for North America, ERCIM (European Research Consortium for Informatics and Mathematics) for Europe, Keio University for Asia;

– has outreach offices in sixteen countries – and has five "domains":

Architecture, Interaction, Technology and Society, Ubiquitous Web, Web Accessibility Initiative.

9

W3C Hosts the Web Accessibility Initiative (WAI)

• The Web Accessibility Initiative (WAI): – coordinates with all the other domains of the W3C; – operates internationally in all three host sites of W3C.

• WAI is sponsored by a variety of government and industry supporters of accessibility: – Government:

• U.S. Department of Education • European Commission's Information Society Technologies

Programme• Canada's Assistive Devices Industry Office.

– Industry: CA, Fundación ONCE, HP, IBM; Microsoft Corporation; SAP, Verizon

Foundation, Wells Fargo.

10

Disabilities and their relation to accessibility issues on the Web

• There are four major categories of disability types:– Visual

– Hearing

– Motor

– Cognitive

11

W3C Accessibility principles

Focusing more on principles rather than techniques, makes easier for web developers keeping accessibility basics.• Perceivable: • Operable (Keyboard accessibility, time controls,

etc…)• Understandable• Robust (different operating systems, different

browsers, and different versions of browsers…)

12

Visual disabilities (Ia)

• Blindness Key Web accessibility principles (KWAP) for users who are blind are:

Perceivable: because they cannot perceive (see) visual information such as graphics, layout, or color-based cues

Operable: because they usually depend on a keyboard to operate (navigate) web content functionality, rather than a mouse

Understandable: because they cannot understand content that is presented in an illogical linear order, or which contains extraneous text not meant to be read word for word or character by character (such as long Web addresses), etc.

Robust: because the assistive technologies used by the blind are not always capable of accessing a broad range of technologies, especially if those technologies are new (Flash, Lightsilver…)

13

Visual disabilities (Ia)

• BlindnessCHALLENGES SOLUTIONS

Users generally do not use a mouse Don't write scripts that require mouse usage. Supply keyboard alternatives.

Images, photos, graphics are unusable Provide text descriptions, in alt text and, if necessary, longer explanations (either on the same page or with a link to another page).

Users often listen to the web pages using a screen reader

Allow for users to skip over navigational menus, long lists of items, ASCII art, and other things that might be difficult or tedious to listen to.

Users often jump from link to link using the “Tab” key

Make sure that links make sense out of context ("click here" is problematic).

It may be difficult for users to tell where they are when listening to table cell contents

Make sure that tables—especially those with merged cells—make sense when read row by row from left to right.

Complex tables and graphs that are usually interpreted visually are unusable

Provide summaries and/or text descriptions.

Colors are unusable Do not rely on color alone to convey meaning

14

Visual disabilities (Ib)

• Low vision

KWAP for people with low vision is:

Perceivable: because they cannot perceive (see) content that is small, does not enlarge well, or which does not have sufficient contrast

15


• Low vision

Types of low vision:

1) Macular degeneration: problems on the center of the sight

16


• Low vision


2) Glaucoma: loss of peripheral vision and a blurry central area of vision.

17


• Low vision


3) Diabetic Retinopathy: dark patches in the field of vision where the leaks of retinal blood vessels occur.

18


• Low vision


4) Cataract: blurred or hazy effect, especially in bright light.

19


• Low visionCHALLENGES SOLUTIONS

Text in graphics does not enlarge without special software, and looks pixilated when enlarged

Limit or eliminate text within graphics

Users may set their own font and background colors

Allow them to do so by using as much real text as possible, rather than text within graphics.

Screen magnifiers reduce the usable window size

To reduce that amount of horizontal scrolling, use relative rather than absolute units (e.g. use percentages for table widths instead of pixels)

20

Magnified graphical text

21

Visual disabilities (Ic)

• Color-blindness

KWAP for people with low vision is:

Perceivable: because they cannot perceive (see) the difference between certain color combinations

22

London underground

· We need to supplement the color-dependent method of distinguishing between routes.

23

Visual disabilities (Ic)

• Color-blindnessCHALLENGES SOLUTIONS

Reds and greens are often indistinguishable

This is not normally a problem except in cases where the colors convey important information. Under these circumstances you will need to either change the graphic or provide an additional means of obtaining the same information. Oftentimes the most appropriate way to do this is to provide an explanation in the text itself.

Other colors may be indistinguishable

Same as above.

24

Auditory disabilities (II)

• Hearing loss Key Web accessibility principles (KWAP) for users with auditory

disabilities is :

Perceivable: because they cannot perceive (hear) auditory content

CHALLENGES SOLUTIONS

Audio is unusable · Provide transcripts for audio clips.· Provide synchronous captioning and transcripts for video clips

25

Motor disabilities (III)

Involves:

• Traumatic injuries• Spinal cord injury or loss or damage of

limb(s)

• Diseases or congenital conditions• Parkinson’s desease• Cerebral palsy• Muscular distrophy• Spina bifida

26


The KWAP for users with motor disabilities is:

· Operable: because not everyone can use a mouse, click on small links, or operate dynamic elements effectively

27


CHALLENGES SOLUTIONSUsers may not be able to use the mouse.

Make sure that all functions are available from the keyboard (try tabbing from link to link).

Users may not be able to control the mouse or the keyboard well.

Make sure that your pages are error-tolerant (e.g. ask "are you sure you want to delete this file?"), do not create small links or moving links.

Users may be using voice-activated software.

Voice-activated software can replicate mouse movement, but not as efficiently as it can replicate keyboard functionality, so make sure that all functions are available from the keyboard.

Users may become fatigued when using "puff-and-sip" or similar adaptive technologies.

Provide a method for skipping over long lists of links or other lengthy content.

28

Cognitive disabilities (IV)

KWAP for users with cognitive disabilities is:

· Understandable: because they have difficulties with memory, dislexia, attention, etc…

29

Cognitive disabilities (IVa)

· Accommodating Memory Deficits

Design tips:

· Reminders of the overall context of a web site. (i.e. “Step 2 of 4”).

· Keep processes (i.e. buying) as simple an brief as possible

30

Cognitive disabilities (IVb)

· Accommodating Problem-Solving DeficitsSome individuals have a exagerated tendency to accidentally click on the wrong

link, misspell a word, or commit some kind of error on the web.

Design Tips:• Error messages should be as explanatory as possible

• Users should be warned when actions can cause potentially serious consequences, such as deleting a file

• Search features should suggest alternate spellings to users if the original spelling seems suspicious or if it returns no results

• All functionality should be as predictable as possible.

31

Cognitive disabilities (IVc)

· Accommodating Attention Deficits

Design tips:• Focus the attention of users: visual cues to highlight important

points or sections of the content• Use headings to draw attention to the important points and

outline of the content• Avoid background noises or images that distract. Use them

instead to focus the users attention.

32

Cognitive disabilities (IVc)

· Accommodating Reading, Linguistic, and Verbal Comprehension Deficits

Design tips:• Suplemental media: illustrations, icons, video and audio have the potential to greatly

enhance the accessibility of web content for people with cognitive disabilities.

• Document organization and structure: the more structured your document is, the easier it will be to understand (headings, bulleted lists, indent sub-items in a hierarchical list, short paragraphs, etc…)

33

Example: dislexia

Tob eornot obe

34

Example: dislexia

With suplemental media:

Tob eornot obe

35

The main actors… THE USERS

Let’s listen to them…

Video

Transcription

36

And finally…. the practical side.

· Activity 1: Web voice navigator experience.

· Activity 2: Tourism web accesibility evaluation.

37

Thanks for your attention

Please, keep accessibility

always in mind.