1

Accessibility basics:A library for everyone

Whitney QuesenberyCenter for Civic Design@awebforeveryone | @whitneyq | @civicdesign

Designing for Digital 2017

2

Hello!

MeCivic designUser research, accessibility, plain languageStorytellingFormer theatre designer

You?

3

Make digital library services for everyoneStarting from principles• Accessible UX• People first

Building blocks of accessibility• Structure• Plain language• Tables and forms• Images and media

Laws and other regulations• ADA, Section 508, CVAA• UN Convention

Making it happen• Creating a process

Principles And a few definitions

5

Which of these are for people with disabilities?

Disability

the outcome of the interaction between a  person ... and the environment and attitudinal barriers they may face

International Classification of Functioning (ICF),World Health Organization

Usability

The effectiveness, efficiency and satisfaction with which a specified set of users can achieve a specified set of tasks in a particular environment.ISO 9241-11

Accessibility

The usability of a product, service, environment or facility by people with the widest range of capabilities.ISO 9241-20

Plain language means users can

find what they needunderstand what they finduse the information

to meet their goals

This definition was written by Ginny Redish and adopted by international plain language organizations

Many barriers to cognitive accessibility are the same as usability problems for general audience…but more severe.

- Clayton Lewis

The POUR Principles

Perceivable

Operable

Understandable

Robust

12

What if we think about accessibility as user experience?

Not rules, but thoughtful design

Not disability, but experience

Not tech, but people

13

Principles of Accessible UX1. People first: designing for differences

2. Clear purpose: well designed goals

3. Solid structure: built to standards

4. Easy interaction: everything works

5. Helpful wayfinding: guides users

6. Clean presentation: supports meaning

7. Plain language: creates conversation

8. Accessible media: supports all senses

9. Universal usability: creates delight

People FirstWe can’t design for people we don’t know

15

People FirstDesigning for differencesPeople are the first consideration, and sites are designed with the needs of everyone in the audience in mind.

15

Steven• Graduated from the Art

Institute• Graphic artist in a small

ad agency• iPad, iPhone, MacBook

Pro, super monitor

Jacob• College graduate,

legal training courses• Paralegal, writes case

summaries• Shares an apartment

with a friend• Laptop, iPhone

Emily• Graduated from high

school and working on a college degree

• Lives in a loft with a group of friends

• Works part-time at a local community center

16

Accessible UX Personas

Meeting all kinds of peopleCarol

Jacob

Lea

Emily Steven

Maria

Trevor

Vishnu

17

I like consistent, familiar places on the web

Ability: Autism Spectrum Disorder. Uses larger text and a program that hides everything but the text, so he doesn’t get distractedAptitude: Uses the computer well for games, but doesn’t learn new sites easilyAttitude: Prefers familiar sites in an established routineAssistive Technology: Text preference settings, power keyboard user.

Trevor

• 18 years old• Lives with family• Goes to secondary

school• Computers at school;

laptop at home; basic mobile phone with SMS

18

Emily

I want to do everything for myselfAbility: Cerebral palsy. Difficult to use hands and has some difficulty speaking clearly; uses a motorized wheel chair Aptitude: Uses the computer well, with the right input device; good at finding efficient search termsAttitude: Wants to do everything for herself; can be impatient Assistive Technology: Communicator (AAC) with speech generator, iPad, power wheelchair

• 24 years old• Graduated from high

school and working on a college degree

• Lives in an independent living facility

• Works part-time at a local community center

19

Jacob

The right technology lets me do anything.Ability: Blind since birth with some light perception Aptitude: Skilled technology userAttitude: Digital native, early adopter, persists until he gets itAssistive Technology: Screen reader, audio note-taker, Braille display

• 32 years old• College graduate, legal training

courses• Shares an apartment with a

friend• Paralegal, reviews cases and

writes case summaries• Laptop, braille display, iPhone

20

Lea

No one gets that this really is a disability.

Ability: Fatigue from fibromyalgia, trackball, and special keyboardAptitude: Average userAttitude: Wishes people would understand how hard it can be for her to make it through the day Assistive Technology: Split keyboard, power keyboard user, Dragon Naturally Speaking

• 35 years old• Masters degree• Writes for a trade

publication; works from home

21

Steven

My only disability is that everyone doesn't sign.Ability: Native language is ASL; can speak and read lips; uses SMS/IM, Skype, and video chatAptitude: Good with graphic tools, and prefers visuals to text; poor spelling makes searching more difficult Attitude: Can be annoyed about accessibility, like lack of captionsAssistive Technology: Sign language, CART, captions, video chat

• 38 years old• Art school• Graphic artist in a small

ad agency• iPad, iPhone, MacBook

Pro; good computer at work

22

Vishnu

I want to be on the same level as everyone else.Ability: Speaks three languages: Gujarati, Hindi, English, and a little spoken Mandarin. Uses contrast adjustment to see the screen clearlyAptitude: Expert user of technical tools; frustrated searching across languages Attitude: Sees himself as a world citizen, and wants to be able to use any site Assistive Technology: Contrast adjustments, screen magnification, personalized stylesheets

• 48 years old• Engineering degree• Works for a medical software

company on int’l projects• Born in India, graduate school

in Malaysia, lives in Singapore• High tech all the way at work;

two mobile phones and a personal laptop

23

Maria

I love this. It's all here...when I can find it.Ability: Prefers Spanish language sites, when she can find them; needs information and instructions written clearlyAptitude: Adventurous, but not very proficient; husband and daughter set up bookmarks for herAttitude: Thinks it’s wonderful to be able to have her favorite websites with her at all timesAssistive Technology: Skype, online translation sites

• 49 years old• Community college +

healthcare certificate• Married, grown children• Spanish – English bilingual• Community health worker• Smartphone from her phone

service, computer primarily her husband’s, for his work

24

Carol

My grandkids are dragging me into the world of technology.

Ability: First signs of macular degeneration, mild arthritis; hearing aid; no special AT on computerAptitude: Used computers when she worked as a bookkeeper, but now her grandkids keep her old home computer updatedAttitude: Willing, but not adventurousAssistive Technology: Enlarges text, but makes few other adjustments

• 74 years old• Husband passed a year ago• Lives in an apartment near

one of her daughters, and her six grandkids (ages 6 to 16)

• Retired; worked 25 years as a bookkeeper

• Older computer at home; basic mobile phone

Get to know the personasIn groups of 4

Each choose a persona and introduce yourself:What are your top needs and goals?What barriers do you face?

Group input:What can you add to understanding the

personas?How can we design to help them succeed?

Building blocksStructure and semantic meaning

27

Solid structure

28

Solid structure starts with designDesign structure • Clear layout design that

supports users through the interaction or information

• Standards-based markup • Design for linearization and

responsiveness

Code structure• Standards-based markup• HTML5 layout elements• ARIA roles (used wisely)

You don’t have to know how to code, but you need to understand how a web page or app is structured to design it well

29

Solid structure: Built to standardsWhich one is accessible?

A big hat tip to @AccessibleJoe and all the folks working on making WordPress more accessible, and to Sylvia Eggers, original author of the accessible child theme shown here.

30

Unfriendly structure:Find the content!

31

Unfriendly structure:Reading order

32

Friendly structure: Good wayfinding cues

33

Identify the areas of a page visually and in code

A clean presentation is easier to navigate – for everyone.

role = banner

role = main

role = contentinfo

role =complementary

role = form

role = navigation

role = navigation

role = search

34

Design for responsive as a step to accessibility

How might you simplify this page?

Identify the content structures and what order they go in

MenusTextHeadingsContainersListsImagesFormsLinks

http://www.open.ac.uk/library/

37

Use tables (only) for tabular dataDon’t use tables for layout

Use row and column headings (coded correctly)

Check that the table will be intelligible if linearized.

Do use “zebra stripes”

Two articles on zebra stripinghttp://alistapart.com/article/zebrastripingdoesithelphttp://alistapart.com/article/zebrastripingmoredataforthecase

38

Use headings correctlyThe basicsOne <H1> per page

The controversies• Heading order• Empty headings• An <H1> in every <div>• Headings that should really be

a link or paragraph style

<H1>The visible title of the page</H1>

<H2>A major section of the page</H2>

<H3>A subheading</H3><H3>A subheading</H3><H3>A subheading</H3>

<H2>A major section of the page</H2>

<H3>A subheading</H3><H3>A subheading</H3>

39

Support preferences for text sizeSupport text zoom with good wrapping. Don't let text be cut off.

40

Easy interaction requires correct codeDesigning interaction• Start with a layout in a logical

order• Design the flow of on-page

interaction so they work for linear interaction

Coding interaction• Use semantic elements in

HTML correctly• Don’t rely on visual layout for

meaning• Change the appearance with

CSS

An easy quick check for interaction: can you navigate the entire page, app, or site only using a keyboard?

41

Buttons and linksLinks are for navigation

To a new pageTo a new viewTo a different URLTo a place on a page

Buttons are for actionsSubmit form data to a

serverReset a formOpen a window Trigger a popup menuPlay media content

Both links and buttons can be styled with CSS, but for assistive technology to understand them, they must be coded correctly

42

Elements of a formFieldLabelPromptValidationErrorsSubmit button

43

Every form field needs a labelVisible labels on the screenLabels in code for screen readers

Date of birth

<form><label for="dob">Date of birth</label><input type="text" id="dob" />.....</form>

44

Every field needs a label (not inside the field)

<form><label for="monthField">Month</label><input type="text" id="monthField" />

<label for="dayField">Day</label><input type="text" id="dayField" />

<label for="yearField">Year</label><input type="text" id="yearField" /></form>

Date of birth

Month Day Year

Date of birth

Month Day Year

45

Put warnings and prompts in the right order

Before the action or field, not after it!

What is your date of birth?

Month Day Year

For example: 12 28 1970

What is your date of birth?

Month Day Year

For example: 12 28 1970

See Caroline Jarrett's articles on forms and her discussion of the placement of prompts at Forms That Work

46

Put error messages where they can be foundIf the entry is checked as it is entered, the message can go after the field.

Otherwise, it should go before the field.

If the page refreshes, messages go at the top of the page.

47

Form patternsUSDSstandards.usa.gov/components/form-controls/

Coopcoop-design-manual.herokuapp.com/styles/forms

GDSgovuk-elements.herokuapp.com/form-elements/

Break

ContentPlain language and alternatives for media

51

WCAG 2.0 Guidelines for content accessibilityText contentLevel A and AA2.4.4 & 2.4.9 Link Purpose:2.4.6 & 2.4.10 Headings &Labels:

3.1.3 Unusual Words

ImagesLevel A1.1 Text Alternatives: 1.4.1 Use of Color1.3.3 Sensory Characteristics1.1.1 & 1.4.9 Non-text Content

52 Plain language

43% of adults in the US read at basic or below basic levels

53

Use simple, everyday words

Description Of ServiceThe Site is an online community which enables photographers and graphic artists to post photographs and images, share comments, opinions and ideas, promote their work, participate in contests and promotions, and access and/or purchase services from time to time made available on the Site (“Services”). Services include, but are not limited to, any service and/or content 500px makes available to or performs for you, as well as the offering of any materials displayed, transmitted or performed on the Site or through the Services. Content (“Content”) includes, but is not limited to text, user comments, messages, information, data, graphics, news articles, photographs, images, illustrations, and software.

54

Use summaries to communicate key points

55

Help readers orient themselves (on the site, on the page, in the right order

1. Page title2. Shortest possible

answer3. Good headings4. Bullets for key points5. Good captions

56

Put warnings and prompts in the right order

Requirements, prompts, warnings, notes and anything else that someone needs to complete an action correctly must come before the action, field or instruction, not after it!

57

Use design to make information easy to scan

58

Images and media: Appeal to all sensesPeople can understand and use information contained in media, such as images, audio, video, animation, and presentations. • Duplicating cues (color + shape)• Content replacement (audio + captions)

59

ColorThe simplest rule:

Do not communicate meaning only with color.

Color, shape, text all work together to communicate meaning.

60

Color

Make sure there is enough contrast between text (or icons) and the background.There are tools for that!• contrast-finder.tanagurconu.com• colorsafe.co/• webaim.org/resources/contrastchecker

lighthouse.org

61

Animations and video

Transcripts for all audio

Synchronized captions for video

Audio (or visual) descriptions for action

And, make sure the media player is accessible

62

ImagesThe most important question:

What does this image communicate?

4 Syllables - http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/

63

ImagesWhat’s the right ALT text for this image?FoxRed foxA red fox, standing on a pile of rocks, looking back at the cameraRed fox at Sachuest Point National Wildlife Refuge

It depends on context!

64

Get the basics right

Repeat the text in the image.Alt text: “Webcast. Applying 21st Century Toxicology to Green Chemical and Material Design. September 20-21, 2011”

Identify the link target Alt text: “UXPA group on Facebook”"@UXPA_Int on Twitter""UXPA's LinkedIN profile"

Don’t create noiseAlt text: “”

Include both image and text in one link

65

Don't hide meaningful imagesIs a profile photo part of the content?

<img alt="Photo of Caroline">or<img alt="Caroline Jarrett">

66

On the HTML5 standards horizon:<figure> and <figcaption>

Keeps the image, alt text, and caption together

<figure><img src="castle-painting.jpg" alt="The castle now has two towers and two walls."> <figcaption>Oil-based paint on canvas. Eloisa Faulkner, 1756.</figcaption></figure>

Example from: http://rawgit.com/w3c/alt-techniques/master/index.html#m6

67

Make captions and alt text work togetherThe caption:“Figure 1: The ABC of research methods”

The alt text: “ABC diagram.”or "ABC diagram sketched on a chalkboard.”or“A diagram sketched on a chalkboard as a triangle. Top: Attitude. Right: Behavior. Left: Comprehension.

68

Don't hide information in the alt text

Caption: Red fox, credit: John & Karen Hollingsworth

Alt text: Red Fox as Sachuest Point NWR. Credit J and K Hollingsworth

69

When the information is in a chart...Add a data table

The alt text:"Bar chart of data in table below"

http://www.careerinfonet.org/finaidadvisor/earnings.aspx?nodeid=21

Laws

72

Americans with Disabilities ActThe ADA is one of America's most comprehensive pieces of civil rights legislation that prohibits discrimination and guarantees that people with disabilities have the same opportunities as everyone else to participate in the mainstream of American life -- to enjoy employment opportunities, to purchase goods and services, and to participate in State and local government programs and services.

First passed in 1990https://www.ada.gov/ada_intro.htm

73

UN Convention on the Rights of Persons with Disabilities

Adopted in 2006 https://www.un.org/development/desa/disabilities/convention-on-the-rights-of-persons-with-disabilities.html

74

Section 508Section 508 covers all electronic and information technology used by the Federal government that agencies develop, procure, maintain, or use. Agencies must ensure that it is accessible to employees and public.

First passed in 2001Updated in 2017https://www.section508.gov/

75

WAI Web Content Accessibility Guidelines 2.0The WCAG documents explain how to make web content more accessible to people with disabilities. Web "content" generally refers to the information in a web page or web application

1.0 published in 19992.0 published in 2008Work on 2.1 begun in 2017https://www.w3.org/WAI/intro/wcag

76

Accessible UX WCAG 2.0On the A Web for Everyone book site, you can find resources including a list of the accessible UX principles and a table that cross-references the principles to guidelines and checkpoints in WCAG 2.0

http://rosenfeldmedia.com/books/a-web-for-everyone/#resources

Making it happenAccessibility is a process

78

Work with clear purposePeople enjoy products that are designed for theaudience and guided by a defined purpose and goals.

• Design for clarity and simplicity.• Think “accessibility first.”• Choose an accessibility strategy.

79

Start from a solid structurePeople feel confident using the design because it is stable, robust, and secure.

• Start from accessible templates• Code to standards.• Use standard web technologies

80

Accessible frameworks

https://standards.usa.gov/18f https://www.gov.uk/service-manual/design/using-the-govuk-template-frontend-toolkit-and-elements

https://paypal.github.io/bootstrap-accessibility-plugin/

https://make.wordpress.org/accessibility/

81

Accessibility testing in layersPrinciple Testing mode What it testsPerceivable Inspection Basic accessibility errors

Robust Code review Use of code standardsSemantic structure

Operable Check using ATExpert review

Interaction using keyboard, screen reader, other AT

Operable/Understandable

Usability testing Use by real people

82

Accessibility is the work of everyoneTo make something as simple as a heading...• A UX researcher identifies user needs.• An information architect suggests keywords.• A content strategist plans the tone.• A content author writes the text.• A web producer tags it as a heading.• A visual designer decides on its appearance.• A web specialist creates the style.• And the tech team makes sure the servers are running.

83

Be a leader Support an integrated practice:• Set policies and develop training.• Choose content and development tools that• support accessibility.• Create a style guide and media library.• Include people with disabilities.• Make accessibility part of site maintenance.

84

Create an integrated practiceMake accessibility the way you do business.Assess what’s needed for an integrated practice:• Evaluate the current site.• Identify ways to allocate resources.• Identify opportunities to integrate accessibility into• current processes.• Assess current knowledge and readiness.

85

It takes....

... engaging all types of expertise

Photos: ITIF AVTI/CATEA

86

Be a ^ superheroCreate a new perspective

UX

87

It takes….

…changing your habitsPhoto: mtstcil.org

88

It takes….

…a new perspectiveAimee Mullins TED talk

Be a superhero for accessible UXMake change happen

Questions?

91

Whitney Quesenbery whitneyq@civicdesigncivicdesign.org @whitneyq

A Web for Everyonerosenfeldmedia.com/books/a-web-for-everyone@awebforeveryone

Center for Civic Designcivicdesign.org@civicdesgin