Practical AccessibilityMidwest UX Conference 2011

A workshop by Chris Merkel

UX Designer/IA, Computech Inc.

Agenda: 2:10 - 4:00 pm

• Introduction• Visual Perception

• Navigation and Forms

• Scripting

• Review, Q&A

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)

Practical AccessibilityMidwest UX Conference 2011

A workshop by Chris Merkel

UX Designer/IA, Computech Inc.

Agenda: 2:10 - 4:00 pm

• Introduction

• Visual Perception

• Navigation and Forms

• Scripting

• Review, Q&A

In the U.S…

Affects 1 in 1225,121,794

8% of men11,882,851

0.4% of women

611,703

Color Blindness

Delta: Full Color Vision

Delta: Red/Green Deficiency

Test in Adobe AI or PSD

Avoid certain color combinations

Color brightness & contrast

Pattern, shapes, borders

Font families & weights

Techniques for Color Blindness

Full Color 2 types of Red/Green

Blue/Yellow

How to improve Delta.com?

Normal R/G Deficient

How would you make this display more accessible for the visually impaired?

Facebook: Low Vision

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

Practical AccessibilityMidwest UX Conference 2011

A workshop by Chris Merkel

UX Designer/IA, Computech Inc.

Agenda: 2:10 - 4:00 pm

• Introduction

• Visual Perception

• Navigation and Forms

• Scripting

• 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

Small Click Targets

How would you make these controls easier for the mobility impaired to use?

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

Keyboard Access Techniques

Keyboard Use

What would you do to make this playlist accessible for mobility handicapped?

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

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)

Damned Lies & Statistics

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 writing for people who cannot see or make use of images alone…or at all!

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

3 Types of Text Alternatives:• Blank: alt=“ ” for decorative-only

images• Short: most common alternatives• 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)

Lists

Lists: Google Search Results

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

Bold, Strong? Italic, Emphasis?

<em>Accessibility 2011</em>:

Escape! | <em>Facebook</em>

Skip Links

“Link: 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.”

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>

Improve Twitter for the Blind

How would you make this application more accessible for sightless users?

Use real headings in an outline order

Include a text alternative for all images

Make links and commands intuitive

Construct tables properly

Give users ways to skip through content

Don’t rely on mouse interactions

Non-Visual Techniques

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 ARIA 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 fields with <OL> in long forms

Mark required fields

Form Construction Techniques

Practical AccessibilityMidwest UX Conference 2011

A workshop by Chris Merkel

UX Designer/IA, Computech Inc.

Agenda: 2:10 - 4:00 pm

• Introduction

• Visual Perception

• Navigation and Forms

• Scripting• Review, Q&A

Yahoo UI: Dialog Boxes

developer.yahoo.com/yui/examples/container/container-ariaplugin.html

Negative “tabindex” lets an element receive programmatic focus without 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 Index

Twitter: Page Changes

www.twitter.com

Twitter: Page Changes

www.twitter.com

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

Roles:applicationgridgridcellalertbutton

States and properties:

aria-labeledbyaria-disabledaria-grabbedaria-dropeffect

Announce States with ARIA

test.cita.illinois.edu/aria/draganddrop/draganddrop1.php

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

Practical AccessibilityMidwest UX Conference 2011

A workshop by Chris Merkel

UX Designer/IA, Computech Inc.

Agenda: 2:10 - 4:00 pm

• Introduction

• Visual Perception

• Navigation and Forms

• Scripting

• Review, Q&A

Visual Display

Test your color use

Highlight your controls

No more “Tiny Text”

Navigation

Use real headings

Links must make sense

Functionality

Test with more devices

Label things

Manage focus properly

Content

Supplement controls with instructions

Don’t assume your users share your sensory

perceptions

Dive Into Accessibility“30 days to a more accessible web site”

Javascript Accessibility“JavaScript should be applied in a way that enhances the page, rather than requiring it”

Just Ask: Integrating Accessibility Throughout Design

“A different kind of accessibility book”

Yahoo! Accessibility Code Library“Code snippets, patterns, presentations and tutorials…”

Establishing a Screen Reader Test Plan

Techniques

JavaScript and screen readers“How Screen Readers Read Webpages”

How Blind People See the Interneton NBC Technolog

Accessibility for Web Writers“Some web writers may not know how much their work can affect accessibility. That needs to change.”

Can the Visually Impaired Access Your Site?

On the Web: Mobile and Accessible?

Articles

Web Axe: webaxe.blogspot.com | @webaxe

Web Accessibility In Mind: webaim.org

Windows Developers: msdn.microsoft.com…bb735024

The Paciello Group: paciellogroup.com/blog

Opera Community: dev.opera.com/articles/accessibility

AOL Developers: dev.aol.com/accessibility/bestpractices

Accessibility Insights: accessibilityinsights.com

Twitter: #a11y , #accessibility , #wcag , #wcag2 , #axs

Organizations & People

Web content accessibility validation - CynthiaSays.com

AIS accessibility toolbar - VisionAustralia.org.au

Color contrast checker - WebAIM.org …/contrastchecker

Web accessibility evaluation tool - WAVE.webaim.org

Firefox extensions - Addons.Mozilla.org…accessibility

Deque’s web accessibility products - Deque.com

Web markup eval tool list - WebAIM.org …/markup

Tools

Section508Easy checklist: WebAIM.org/standards/508/checklistOfficial specifications: Section508.gov

WCAGEasy checklist: WebAIM.org/standards/wcag/checklistOfficial specifications: w3.org/TR/WCAG20/

Standards & Compliance

Keep up the Conversation

christophermerkel@yahoo.com | @merkelwerks