Designing with Accessibility in Mind: How IA and Visual Design Decisions Impact Persons with...

1

Designing with Accessibility (#a11y) in Mind: How IA and Visual Design Decisions Impact Persons with Disabilities

November M. Samnee

@novie

Manager, Product Development

Thomson Reuters

What we’re doing today

• Review of how people with disabilities

access the web

• Learn by example:

– Presented with two options of design treatments

– You make a choice

– We discuss which is the most accessible, and why

• Review of tools you can use to help make

your designs more accessible

2

3

Credit: Reuters/Toby Melville

How people with disabilities access the web

Types of Disabilities Visual Vision Loss, Blindness, Color-

Blindness

Hearing Diminished or partial hearing,

Deafness

Mobility Muscle fatigue/weakness, fine motor

control, paralysis

Cognitive Dyslexia, Autism, ADD/ADHD

4

No Vision/Blindness Assistive Technologies

• Screenreader (reads aloud

what’s on the screen)

– Can be free: NVDA,

VoiceOver (for Apple

products)

– Or Expensive: JAWS,

WindowEyes

• May be used in conjunction

with a refreshable Braille

display

5

Low Vision Assistive Technologies

• Have many options:

– Screen Magnifiers/Zooming

• Can be part of the OS

• Or Expensive: ZoomText,

WinZoom, MAGic

– High-contrast mode

– May use a high-contrast

keyboard

• Or may use nothing

6

Mobility Assistive Technologies

• May use voice

recognition software,

like Dragon

• And/or different

keyboards or mice

7

Cognitive Assistive Technologies

• Can use voice

recognition or screen

reading software

• May use custom CSS

to control web page

presentation

8

9

Learn by Example

Credit: Reuters/Thomas Hodel

Practice Round 10

CC Image courtesy of .m for matthijs on Flickr

11

A B

12

A B

Q: Why is this more accessible?

A: Many screen reader users like to pull

up links lists when viewing a page.

Links need to be determinable

independent of surrounding content.

13

CC Icon courtesy of Icons Land

14

A B

15

A B

Q: Why is this more accessible?

A: The more advanced the language, the

more difficult it is for some people with

cognitive issues to understand the

intent of your web content.

Your content should be clear and

concise.

16

Round 1 (no, this won't be graded)

17

18

A B

19

A B

Q: Why is this more accessible?

A: For those people with a vision

impairment who can’t perceive the

shade you selected, the underline lets

them determine that the link text is

different than the surrounding text.

Don’t rely on color alone to

communicate information.

20

21

A B

22

A B

Q: Why is this more accessible?

A: For screen magnifier users, labels

are hard to match up. When they are

far from the corresponding field they

may not show up on their screen.

Be mindful of proximity when

designing the layout of forms.

23

24

A B

25

A B

Q: Why is this more accessible?

A: People with limited hearing need text

or the audio content of a video is

unavailable to them (plus, the

services that do captioning are pretty

cheap).

Always provide captioning for videos.

26

27

A B

28

A B

Q: Why is this more accessible?

A: Many shades of gray are not readable

to people with low vision (or even

those of a certain age).

Full or right justification can cause

some people with cognitive issues to

lose their place when moving to the

next line.

Always have appropriate contrast and

proper justification. 29

30

A B

31

A B

Q: Why is this more accessible?

A: When targeting a mouse pointer with

voice recognition software, or with

an enlarged cursor sometimes used

by people with low vision, an

indication that focus is on a button

can be really helpful and save time.

Use some visual indication of focus.

32

33

A B

34

A B

Q: Why is this more accessible?

A: Screen reader users need alternative

text for images with text, and people

with low vision can have trouble with

imaged text – when enlarged, it can

become pixilated.

For blocks of text more than a few

words, use true text instead of

images. 35

36

A B

37

A B

Q: Why is this more accessible?

A: Some with mobility impairments can

have trouble isolating small links.

Links (and other mouse targets) need

a space buffer, and should be more

than a few characters large.

38

Extra Credit (i.e. this isn’t just UX)

39

40

A B

41

A B

Q: Why is this more accessible?

A: For those using screen magnification,

it can be disconcerting for focus to go to

a completed form field when the error

message isn’t nearby.

It takes specific developer techniques to

get the error message to read for

screen reader users.

42

43

A B

44

A B

Q: Why is this more accessible?

A: It is difficult (if not nearly impossible) for

a voice recognition user to scroll when

there are two scrollable areas on a

page.

It takes special developer effort to

make lightboxes accessible for users of

screen readers.

45

Resources

46

CC Image courtesy of zzpza on Flickr

Tools you can use

Check flow while magnified with:

• Windows Magnifier, or

• Apple Zoom

Check color contrast

• many free Firefox browser plug-ins available (I use ColorZilla, and

WebAim’s site)

• NoCoffee is a vision simulator for Chrome that checks for contrast &

other low vision personas

Check the readability of your content

• Turn on the checker in MS Word

• Use the readability bookmarklet produced by NC State University’s IT

Accessibility department

47

CC Icon courtesy of Keyamoon

48

A B

Tools you can use Check flow while magnified with:

• Windows Magnifier, or

• Apple Zoom

Check color contrast

• many free Firefox browser plug-ins available

(I use ColorZilla, and WebAim’s site)

• NoCoffee is a vision simulator for Chrome

that checks for contrast & other low vision

personas

Check the readability of your content

• Turn on the checker in MS Word

• Use the readability bookmarklet produced by NC State University’s IT

Accessibility department

49

50

A B

Tools you can use Check flow while magnified with:

• Windows Magnifier, or

• Apple Zoom

Check color contrast

• many free Firefox browser plug-ins available (I use ColorZilla, and

WebAim’s site)

• NoCoffee is a vision simulator for Chrome that checks for contrast &

other low vision personas

Check the readability of your content

• Turn on the checker in MS Word

• Use the readability bookmarklet

produced by NC State University’s IT

Accessibility department

51

52

A B

Tools you can use

Check flow while magnified with:

• Windows Magnifier, or

• Apple Zoom

Check color contrast

• many free Firefox browser plug-ins available (I use

ColorZilla, and WebAim’s site)

• NoCoffee is a vision simulator for Chrome that checks for

contrast & other low vision personas

Check the readability of your content

• Turn on the checker in MS Word

• Use the readability bookmarklet produced by NC State

University’s IT Accessibility department

53

What We Learned

• Links need to be determinable independent of

surrounding content.

• Your content should be clear and concise.

• Don’t rely on color alone to communicate

information.

• Be mindful of proximity when designing the layout

of forms.

• Always provide captioning for videos.

• Always have appropriate contrast and proper

justification.

54

What We Learned

• Use some visual indication of focus.

• For blocks of text more than a few words, use true

text instead of images.

• Links (and other mouse targets) need a space

buffer, and should be more than a few characters

large.

• Be careful with error message handling.

• Be careful with lightboxes/modal dialogs.

55

Questions?

56

@novie

november.samnee@

gmail.com

CC Icons courtesy of Andres Antonio