A library for everyone - Designing for Digital, Austin 2017 All of the tools and principles of an excellent user experience also support accessibility, just as web design that is responsive to diversity of devices is also responsive to a diversity of human needs.

1. 1
Accessibility basics:
A library for everyone
Whitney Quesenbery
Center for Civic Design
@awebforeveryone | @whitneyq | @civicdesign
Designing for Digital 2017

2. 2
Hello!
Me
Civic design
User research, accessibility, plain language
Storytelling
Former theatre designer
You?

3. 3
Make digital library services for everyone
Starting 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

4. Principles
And a few definitions

5. 5
Which of
these are for
people with
disabilities?

6. 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

7. 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

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

9. Plain language means users can
find what they need
understand what they find
use the information
to meet their goals
This definition was written by Ginny Redish and adopted by international plain language
organizations

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

11. The POUR Principles
Perceivable
Operable
Understandable
Robust

12. 12
What if we think about
accessibility as user experience?
Not rules, but thoughtful design
Not disability, but experience
Not tech, but people

13. 13
Principles of Accessible UX
1. 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

14. People First
We can’t design for people we don’t know

15. 15
People First
Designing for differences
People 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. 16
Accessible UX Personas
Meeting all kinds of people
Carol
Jacob
Lea
Emily Steven
Maria
Trevor
Vishnu

17. 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
distracted
Aptitude: Uses the computer well for
games, but doesn’t learn new sites easily
Attitude: Prefers familiar sites in an
established routine
Assistive 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. 18
Emily
I want to do everything
for myself
Ability: 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 terms
Attitude: 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. 19
Jacob
The right technology
lets me do anything.
Ability: Blind since birth with
some light perception
Aptitude: Skilled technology user
Attitude: Digital native, early
adopter, persists until he gets it
Assistive 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. 20
Lea
No one gets that this
really is a disability.
Ability: Fatigue from fibromyalgia,
trackball, and special keyboard
Aptitude: Average user
Attitude: 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. 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 chat
Aptitude: Good with graphic tools, and
prefers visuals to text; poor spelling
makes searching more difficult
Attitude: Can be annoyed about
accessibility, like lack of captions
Assistive 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. 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 clearly
Aptitude: 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. 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 clearly
Aptitude: Adventurous, but not very
proficient; husband and daughter set up
bookmarks for her
Attitude: Thinks it’s wonderful to be able
to have her favorite websites with her at all
times
Assistive 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. 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 computer
Aptitude: Used computers when she
worked as a bookkeeper, but now her
grandkids keep her old home computer
updated
Attitude: Willing, but not adventurous
Assistive 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

25. Get to know the personas
In 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?

26. Building blocks
Structure and semantic meaning

27. 27
Solid structure

28. 28
Solid structure starts with design
Design 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. 29
Solid structure: Built to standards
Which 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. 30
Unfriendly
structure:
Find the
content!

31. 31
Unfriendly structure:
Reading order

32. 32
Friendly structure: Good wayfinding cues

33. 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. 34
Design for responsive as a step to accessibility

35. How might you simplify this page?

36. Identify the content structures and
what order they go in
Menus
Text
Headings
Containers
Lists
Images
Forms
Links
http://www.open.ac.uk/library/

37. 37
Use tables (only) for tabular data
Don’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 striping
http://alistapart.com/article/zebrastripingdoesithelp
http://alistapart.com/article/zebrastripingmoredataforthecase

38. 38
Use headings correctly
The basics
One <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. 39
Support preferences for text size
Support text zoom with good wrapping. Don't let
text be cut off.

40. 40
Easy interaction requires correct code
Designing 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. 41
Buttons and links
Links are for navigation
To a new page
To a new view
To a different URL
To a place on a page
Buttons are for actions
Submit form data to a server
Reset a form
Open a window
Trigger a popup menu
Play media content
Both links and buttons can be styled with CSS, but for assistive
technology to understand them, they must be coded correctly

42. 42
Elements of a form
Field
Label
Prompt
Validation
Errors
Submit button

43. 43
Every form field needs a label
Visible labels on the screen
Labels in code for screen readers
Date of birth
<form>
<label for="dob">Date of birth</label>
<input type="text" id="dob" />
.....
</form>

44. 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. 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. 46
Put error messages where they can be found
If 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. 47
Form patterns
USDS
standards.usa.gov/components/form-controls/
Coop
coop-design-manual.herokuapp.com/styles/forms
GDS
govuk-elements.herokuapp.com/form-elements/

48. Break

49. Content
Plain language and alternatives for media

50. 51
WCAG 2.0 Guidelines for content accessibility
Text content
Level A and AA
2.4.4 & 2.4.9 Link Purpose:
2.4.6 & 2.4.10 Headings &Labels:
3.1.3 Unusual Words
Images
Level A
1.1 Text Alternatives:
1.4.1 Use of Color
1.3.3 Sensory Characteristics
1.1.1 & 1.4.9 Non-text Content

51. 52Plain language
43% of adults in the US read
at basic or below basic levels

52. 53
Use simple, everyday words
Description Of Service
The 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.

53. 54
Use summaries to communicate key points

54. 55
Help readers orient themselves
(on the site, on the page, in the right order
1. Page title
2. Shortest possible
answer
3. Good headings
4. Bullets for key points
5. Good captions

55. 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!

56. 57
Use design to make information easy to scan

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

58. 59
Color
The simplest rule:
Do not communicate meaning
only with color.
Color, shape, text all work
together to communicate
meaning.

59. 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

60. 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

61. 62
Images
The most important
question:
What does this image
communicate?
4 Syllables - http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/

62. 63
Images
What’s the right ALT
text for this image?
Fox
Red fox
A red fox, standing on a pile of
rocks, looking back at the camera
Red fox at Sachuest Point National
Wildlife Refuge
It depends on context!

63. 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 noise
Alt text: “”
Include both image and
text in one link

64. 65
Don't hide meaningful images
Is a profile
photo part of
the content?
<img alt="Photo of Caroline">
or
<img alt="Caroline Jarrett">

65. 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

66. 67
Make captions and alt text work together
The 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.

67. 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

68. 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

69. Laws

70. 72
Americans with Disabilities Act
The 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 1990
https://www.ada.gov/ada_intro.htm

71. 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

72. 74
Section 508
Section 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 2001
Updated in 2017
https://www.section508.gov/

73. 75
WAI Web Content Accessibility Guidelines 2.0
The 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 1999
2.0 published in 2008
Work on 2.1 begun in 2017
https://www.w3.org/WAI/intro/wcag

74. 76
Accessible UX   WCAG 2.0
On 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

75. Making it happen
Accessibility is a process

76. 78
Work with clear purpose
People enjoy products that are designed for the
audience and guided by a defined purpose and
goals.
• Design for clarity and simplicity.
• Think “accessibility first.”
• Choose an accessibility strategy.

77. 79
Start from a solid structure
People feel confident using the design because it
is stable, robust, and secure.
• Start from accessible templates
• Code to standards.
• Use standard web technologies

78. 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/acces
sibility/

79. 81
Accessibility testing in layers
Principle Testing mode What it tests
Perceivable Inspection Basic accessibility errors
Robust Code review Use of code standards
Semantic structure
Operable Check using AT
Expert review
Interaction using keyboard,
screen reader, other AT
Operable/
Understandable
Usability testing Use by real people

80. 82
Accessibility is the work of everyone
To 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.

81. 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.

82. 84
Create an integrated practice
Make 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.

83. 85
It takes....
... engaging all types of expertise
Photos: ITIF AVTI/CATEA

84. 86
Be a ^ superhero
Create a new perspective
UX

85. 87
It takes….
…changing your habits
Photo: mtstcil.org

86. 88
It takes….
…a new perspective
Aimee Mullins TED talk

87. Be a superhero for accessible UX
Make change happen

88. Questions?

89. 91
Whitney Quesenbery
whitneyq@civicdesign
civicdesign.org
@whitneyq
A Web for Everyone
rosenfeldmedia.com/books/a-web-for-everyone
@awebforeveryone
Center for Civic Design
civicdesign.org
@civicdesgin