Strategies for AccessibilityNoVA UX Meetup

A panel discussion by Chris Merkel

Director of User Experience,The American Institute of Architects

Agenda: • Introduction

• Visual Perception

• Navigation and Forms

• People and Robots

• Managing Focus

• Review, Q&A

Strategies for AccessibilityNoVA UX Meetup

Agenda: • Introduction

• Visual Perception

• Navigation and Forms

• People and Robots

• Managing Focus

• Review, Q&A

The American Institute of ArchitectsDirector of User Experience

Computech, Inc.Design and UX Lead, FCC Licensing & Auctions

Spikesource, Inc.UX Manager, Microsoft & Intel contracts

Xerox Corporation,Creative Lead, Xerox.com & DocuShare

Yahoo!Producer, Yahoo! Personals

Who’s this Chris Merkel guy?

Disabled friends & veterans

Corporate responsibility

Personal fears: physical injury sight loss

What matters to me?

Changes in legal scope

Larger market share: 25.6 million

Prestige

(and angry mobs with torches)

Why should it matter to you?

What is it?• 1997 update to an

Amendment of the Rehabilitation Act of 1973

How to meet it?• 16 provisions

of Sub-part B, 1194.22*

Who needs to meet it?• All federal agencies

(with some exceptions*)

• State and local agencies Who enforces it?• Each organization

chooses the standards it wants to meet individually

What’s “Section 508”?

More official info: Section508.govComplete, handy practical checklist: webaim.org/standards/508/checklistOfficial federal standards are listed at: section508.gov/index.cfm?fuseAction=stdsdoc

What is it?• Web Content Accessibility

Guidelines from the W3C

How to meet it?• 3 levels of conformance:

A, AA, AAA

• WCAG 1.0 created 1999

• WCAG 2.0 updated in 2008

Who needs to meet it?• Not required by law (yet)

Who enforces it?• 3rd parties such as NFB

• Private companies

• DOJ may soon use WCAG

What’s “WCAG”?

* More info at w3.org/TR/WCAG20/ (2008) and w3.org/TR/WCAG10/ (1999)

Strategies for AccessibilityNoVA UX Meetup, 14 Aug. 2013

Agenda: • Introduction

• Visual Perception

• Navigation and Forms

• People and Robots

• Managing Focus

• Review, Q&A

In the U.S…

Affects 1 in 1225,121,794

8% of men11,882,851

0.4% of women611,703

Color Blindness

Delta: Full Color Vision

Delta: Red/Green Deficiency

Test in Adobe AI or PSD

Color hue combinations

Brightness and contrast

Pattern, shapes, borders

Font families and weights

Techniques for Color Blindness

Full Color 2 types of Red/Green

Blue/Yellow

Exercise 1 : Improve Delta.com

Hot Not

How would you improve this display for more vision types?

5 minutes.

Keep proper contrast

Carefully manage colors which change the most (Yellow, Green, Red)

Highlight interactive thingies better

No “Tiny Text” and wimpy controls

View your UI on more screens & devices

Visual Techniques

Strategies for AccessibilityNoVA UX Meetup

Agenda: • Introduction

• Visual Perception

• Navigation and Forms

• People and Robots

• Managing Focus

• Review, Q&A

Mobility DisordersThey Need Help to Reach That

Complete inability to use limbs

Repetitive stress disorder

Simple fatigue

Mobility Challenges

x Hard to spot

x Hard to click on

X Hard to use

Exercise 1 : Complex Controls

How would you make these controls easier for everyone to use?

5 minutes.

How would you improve these controls for the mobility impaired?

5 minutes.

Inability to use mouse actions:

Cannot rely on : hover or onMouseOver

Interact with elements out of order

Click + Drag

Instead, they:

TAB and Û Ü Ù Ú arrow keys to navigate

SPACE and ENTER to activate

Keyboard Use

Twitter: Visual Focus

Facebook: Visual Focus

Consider the TAB order

Surface intuitive directional and command keys, and common modifiers: , Shift, Control, Escape

Use common HTML controls, then enhance progressively

Make :hover and :focus the same

Keyboard Access Techniques

You, with the smartphone: Inability to use :hover or onMouseOver

Difficulty with Click + Drag

Limited viewing area

Difficulty with lighting

Patchy attention span

Multimedia access

Mobile Users

Exercise 1 : Keyboard Use

How would you make this interaction more equal for everyone?

5 minutes.

How would you improve interactions in this app for the disabled?

5 minutes.

Strategies for AccessibilityNoVA UX Meetup

Agenda: • Introduction

• Visual Perception

• Navigation and Forms

• People and Robots

• Managing Focus

• Review, Q&A

Non-Visual UsersSome People Can Only Hear the Web

Screen Readers Braille Printers

Sightless User’s Devices

Page Title: AccessibilitySkip main navigation linkList with six items...Introduction link...Barriers link... Assistive Technologies, and Alternative Access Strategies link...Accessibility in Law and Policy link...Designing accessible web sites link...Tools for accessibility link...Finding additional resources on Web accessibility link...

A “Soda Straw” Perception

A “Soda Straw” Perception

A “Soda Straw” Perception

A “Soda Straw” Perception

BROWSERS:

IE 8: 43.1%

Firefox 3+: 23.5%

IE 7: 12.5%

Safari: 9.6%

Others: 11.4%(incl. IE6, 9,

Chrome)

SCREEN READERS:

JAWS: 69.6%

NVDA: 34.8%

VoiceOver: 20.2%

Window-Eyes: 19.0%

Others: 29.7%(incl. System Access

& ZoomText)

For Statistics Junkies

2009 to 2010

Dispatch.com

Dispatch.com: Headers & Links

Dispatch.com: Headers & Links

Ongoing Stories, Heading Level 3

Ted Williams… Heading Level 2

Where we live… Heading Level 2

Just like making an outline

Gives blind users a sense of a document’s contents and structure

Search engines will be better able to index your site with this grouping

This only works with real heading tags

Headers

Do your links make sense by themselves?

Links

Do your links make sense by themselves?

Links

Do your links make sense by themselves?

No one wants to…

“Read more, read more, read more, read more, read more”, or;

“Click here, click here, click here, click here, click here”

Links

United.com: Visual Display

Same Site: No Images

<img src="logo-ymail-wh-beta.png" alt=“ " >

<img src="logo-ymail-wh-beta.png" alt=“Home" >

<img src="logo-ymail-wh-beta.png" alt="Yahoo! Mail" >

<img src="logo-ymail-wh-beta.png" alt="Yahoo! Mail homepage" >

What’s the Right Description?

You are designing for sightless users,or who cannot make use of images alone

<img src="logo-ymail-wh-beta.png" id="ymail-image" alt="Yahoo! Mail" >

3 Types of Text Alternatives:1. Blank: alt=“ ” for purely decorative images2. Short: most common alternatives3. Long: for very complex images, e.g. charts

Images and ALT Tags

<table summary=“Items, quantity, and description”>

<caption>Equipment in stock</caption>

<thead> <tr><th>Item</th></tr></thead>

<tbody> <tr><td>Cleats</td></tr></tbody>

</table>

Tables

Equipment in stock

<ol> Ordered List<li> List Items

<ul> Unordered List<li> List Items

<dl> Definition List<dt> Definition Terms

<dd> Definition Description (s)

Types of Lists

Lists: Google Search Results

List with 10 items…Out of list, List item one…Accessibility and Assistive Technology…

How to Emphasize Text?

<em>Accessibility 2011</em>:

Escape! | <em>Facebook</em>

Skip Links

A different version of this web site containing similar content optimized for screen readers and mobile devices may be found at the web address www.amazon.com/access ... Link.

Document Landmark Roles

articlebannercomplementarycontentinfomainnavigationsearch

Introduction to WAI ARIA

banner

main

navig

ati

on

contentinfo

article

article

Document Landmark Roles

Introduction to WAI ARIA

banner

main

navig

ati

on

contentinfo

article

article

<li role=“article“ > ... </li>

<div role=“main“ > ... </div>

1. Use real headings in an outline order

2. Include a text alternative for all images

3. Write intuitive linked text & commands

4. Construct tables properly

5. Give users ways to skip through content

6. Don’t rely on mouse interactions

Non-Visual Techniques

Improve Twitter for Access

How would you make this application more equal for everyone?

5-10 minutes.

How would you improve Twitterfor the disabled?

7 minutes.

Form ConstructionMaking Pesky Forms Accessible

NORMAL READING

Speaks the content of an entire window

Most users skip through content via shortcut keys

FORMS EDIT MODE

Turns on when focusing on a form control

Users then TAB from one field or control to another

They do not hear any text that is not part of a field

Screen Reader Modes

All form fields need a label

United.com: Field Labels

<label for="shipping-user-companyName" > <span>Company Name (optional)</span></label><input name="shipping-user-companyName" type="text" id="shipping-user-companyName" aria-label="Company Name (optional)" >

Apple.com: Advanced Labels

Asterisks aren’t good enough• Add understandable text to form labels

Use additional attributes:

<input type="text" id="contactname“ name="contactname" size="30“ aria-required="true" >

Mark Form Fields Required

Make the form easy to find

Associate labels and instructions with all controls

Carefully manage page refreshes, focus, and error display

Number items in long forms with <OL>

Mark required fields in meaningful ways

Form Construction Techniques

Your Best Friends are Blind

BingGoogle

Android Voice or iOS Siri

Desktop screen reader (e.g. JAWS)

Strategies for AccessibilityNoVA UX Meetup

Agenda: • Introduction

• Visual Perception

• Navigation and Forms

• People and Robots

• Managing Focus

• Review, Q&A

Highlight & Announce Focus

Negative “tabindex” lets an element receive programmatic focuswithout getting in the way of TAB key

<div id="progaccess" tabindex="-1" > ... </div>

var objDiv = document.getElementById('progaccess'); // Focus on the element objDiv.focus();

TAB Order

ARIA Live Regions

off: <ul aria-live="off" > … </ul>

polite: <ul aria-live="polite" > … </ul>

assertive: <ul aria-live="assertive" > … </ul>

Handle Data Refresh with ARIA

Twitter: Page Changes

Twitter: Page Changes

Roles:applicationgridgridcellalertbutton

States and properties:aria-labeledbyaria-disabledaria-grabbedaria-dropeffect

Announce States with ARIA

Carefully manage page refresh & errors

Alert non-visual users to any changes

Ensure the proper focus in widgets and dialogs during user interaction

Keep keyboard commands in mind

Use libraries: YUI, jQuery UI, GWT, etc.

Scripting Techniques

Strategies for AccessibilityNoVA UX Meetup

Agenda: • Introduction

• Visual Perception

• Navigation and Forms

• People and Robots

• Managing Focus

• Review, Q&A

Visual Display

Test your color use

Highlight your controls

No more “Tiny Text”

Navigation

Use real headings

Links make sense alone

Functionality

Test with more devices

Label carefully

Manage focus properly

Content

Supplement controls with instructions

Don’t assume that your users share your same abilities

Perceptible

Sight /not

Hearing /not

Touch /not

Understandable

Meaning and context

Alternatives

Operable

Interaction methods

Control over time, focus

Error recovery

Robust

Universal across devices

Future-proof across time

P.O.U.R. it Out

Contact me anytimechristophermerkel@yahoo.com |

@merkelwerks