Content for everyone: Making information accessible. Excellent, clear content is also accessible content that everyone can use. See how many of your content guidelines support plain language and WCAG 2.0 checkpoints. Updated February 2014 Presented at STC 2013 and ConveyUX 2014

1. Content for Everyone
Making information accessible
Whitney Quesenbery
Whitney Quesenbery
WQusability.com | Civic Design Design
Center for Center for Civic
Twitter: @whitneyq | #AUX
Book Resources:
http://rosenfeldmedia.com/books/a-web-for-everyone/resources/

2. 2
Why accessibility?
Disability: the outcome of the interaction
between a person with an impairment and the
environment and attitudinal barriers she/he
may face
-
International Classification of Functioning
(ICF)World Health Organization

3. 3
Disabilities increase with age
As we age, our chance of being affected by a disability increases
Vision and hearing loss
have especially steep
increases after age 65
Age
Range
% of People
with Disability
45-54
11.5%
55-64
21.9%
65+
59.0%
Image: Graph showing rising incidence of disabilities by
age, as a percent of US population
A Nation Online, Economic and Statistics Administration/National Telecommunications and
Information Administration, U.S. Department of Commerce, February 2002

4. 4
Accessibility and usability go hand in hand
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

5. 5
Content accessibility is important because people...
Read with different degrees of literacy.
Do not always read carefully.
May have a cognitive, language, or learning
disability.
Or a visual disability that can affect reading.
May not know (or read) the language well

6. 6
People read with different levels of literacy
Below basic – only the most
simple and concrete reading skills
Basic – able to manage everyday
tasks
Intermediate – moderately
challenging activities like
consulting reference material
Proficient – interpreting text,
comparing viewpoints
U.S. National Assessment of Adult Literacy http://nces.ed.gov/naal/kf_demographics.asp

7. 7
Plain language supports the right to understand
Sandra Fisher-Martins ―The Right to Understand‖at TEDx O’Porto -www.youtube.com/watch?v=tP2y0vU7EG8

8. 8
Cognitive disabilities affect how people use information
Cognitive disabilities may
affect a person’s ability to
process information:




Remember and recall
Read information
Process information
Make choices
Examples




Dyslexia
Attention disorders
Brain injury and stroke
Downs and developmental
disabilities
Many barriers to
cognitive
accessibility are the
same as usability
problems for general
audience…but more
severe.
- Clayton Lewis

9. 9
Myths that hold us back
My audience is special
My information is technical
People can’t tell the difference
You can't write standards for content

10. 10
Myth: “My audience is special”
But compare these guidelines for different audiences
Teens



Write simply,
using words that
are common to
your readers’
vocabulary
Be concise and
get to the point
Make the content
apply to personal
and cultural
experiences
Older adults


Use words that
most older adults
know
Write in plain
language with short,
simple and
straightforward
sentences
Low literacy



Put the most important
information first
Write text with a simple
sentence structure
Keep pages,
paragraphs, sentences
short
Teenagers on the Web www.nngroup.com/reports/teens/
Designing Web Sites for Older Adults, http://www.redish.net/articles-slides/articles-slides-older-adults
Work with low literacy web users www.stc.org/intercom/pdfs/2004/200406_19-23.pdf

11. 11
Myth: “My information is technical”
Information can be
technically accurate,
interesting and well written
appropriate to the audience
and also
clear and understandable

13. 13
Yep, there’s content in the accessibility standards
Shouldn’t all content be perceivable, operable,
understandable and robust?
These two guidelines in WCAG 2.0 are all about content.
• Guideline 2.4: Navigable: Provide ways to help users
navigation, find content and determine where they are.
• Guideline 3.1 Readable: Make text content readable and
understandable.

14. 14
Accessible UX Principle: Plain Language
People can read, undersand, and use the information
• Write for your audience.
• Follow plain language guidelines for writing content.
• Write sentences and paragraphs for easy scanning.
• Support users through their tasks.
• Structure the whole page for scanning and comprehension.
• Write helpful links.
• Use language your audience is familiar with, or provide definitions.
• Provide plain language summaries of complex content.
• Don’t rely on readability formulas.
• Usability test your content.

15. 15
Creating content for everyone
1. Write for your audience
2. Organize information logically
3. Design for reading
4. Provide alternatives
5. Write for action

16. 16
1. Write for the audience
Speak to them
in their words
about their tasks

17. 17
Use simple, everyday words everyone can understand
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.
Your access to and use of the Site may be interrupted from
time to time as a result of equipment malfunction, updating,
maintenance or repair of the Site or any other reason
within or outside the control of 500px. 500px reserves the
right to suspend or discontinue the availability of the Site
and/or any Service and/or remove any Content at any time
at its sole discretion and without prior notice. 500px may
also impose limits on certain features and Services or
restrict your access to parts of or all of the Site and the
Services without notice or liability. The Site should not be
used or relied upon for storage of your photographs and
images and you are directed to retain your own copies of
all Content posted on the Site.

18. 18
Use summaries to communicate key points

19. 19
Do you need one version or multiple versions?
This is the question in the original
document:
Q1: What do you think would be the
advantages or disadvantages of a UK Bill of
Rights? Do you think that there are
alternatives to either our existing
arrangements or to a UK Bill of Rights that
would achieve the same benefits? If you
think that there are disadvantages to a UK
Bill of Rights, do you think that the benefits
outweigh them? Whether or not you favour
a UK Bill of Rights, do you think that the
Human Rights Act ought to be retained or
repealed?
This is the EasyRead version:
Question1: Do you tink we need a Bill of
Rights in the UK
Both of these documents are lineked from
http://www.justice.gov.uk/about/cbr/second-consultation

20. Leap and land on the same word
Give links good “scent of information”
HT: Caroline Jarrett
20

21. 21
Speak directly to the reader
The text in the image says:
Living with MS.
Whether you just received a diagnosis of MS or have
been living with it for a long time—this section is filled
with information and tips on how to maintain your
quality of life in the years ahead. Read about
strategies to enhance your health and
wellness, maximize your productivity and
independence, and deal with emotional, social, and
vocational challenges.
nationalmssociety.org

22. 22
2. Organize information
logically
In the right order
In the right format

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

24. 24
Establish context and requirements

25. 25
Draw a triangle
on top of an
upside down ―T‖

26. 26
Put instructions in the right order
Draw a triangle on top of an upside down ―T‖
Did you draw a pine tree or a wine glass?

27. 27
Put warnings and prompts in the right order
Before the action, field or
instruction, not after it!
What is your date of birth?
MM
DD
YYYY
What is your date of birth?
For example: 12 28 1970
MM
For example: 12 28 1970
See Caroline Jarrett's articles on forms and her discussion of the placement of prompts.
DD
YYYY

28. 28
Make hidden instructions and labels clear, too
<form>
<label for="monthField">MM</label>
<input type="text" id="dayField" />
<label for="dayField">DD</label>
<input type="text" id="monthField" />
<label for="yearField">YYYY</label>
<input type="text" id="yearField" />
</form>
What is your date of birth?
For example: 12 28 1970
MM
DD
YYYY

29. 29
3. Design for reading
Headings
Info design
Using color

30. 30
Design for reading patterns

31. 31
Use headings that are really headings
Consequat Pulvinar Turpis
Mi incassum tum neque dolore ultrices opto lenis validus. Roto
importunus tempus duis quisque voco. Nisi pagus pneum utinam
nascetur penatibus fatua. Mollis minim antehabeo imperdiet ludus aliquet
demoveo pharetra antehabeo.
Maecenas lectus reprobo
Refero mauris lenis commoveo nonummy letatio. Dis similis
condimentum praemitto causa refoveo arcu. Velit magna vulpes abdo
abbas quia pala himenaeos. At magnis volutpat faucibus erat humo
refero.
Bis cui sodales
Tristique nonummy foras pellentesque curabitur verto. Nostra quis
luctus massa convallis tum wisi tum.
Malescuada sollincintun
Platea nostra usitas viverra ut cui. Tempor porttitor ligula maecenas
lobortis nibh consequat ullamcorper.

32. 32
Use design to make information easy to scan

33. 33
10. Use tables (only) for tabular data





Tables are meant for rows
and columns of
information or data
Use row and column
headings
Check that the table will
be intelligible if linearized.
Use ―zebra stripes‖
Don’t use tables for layout
Two articles on zebra striping
http://alistapart.com/article/zebrastripingdoesithelp
http://alistapart.com/article/zebrastripingmoredataforthecase

34. 34
Don’t use color alone to communicate meaning
Provide multiple cues.
Color, shape, text all work together to communicate
meaning.
Image: Stop sign
Image: Three ways of showing
positive and negatives

35. 35
4. Alternatives for
images
Alt text
Descriptions
Captions

36. 36
ALT means ALTERNATIVE
ALT means ALTernative – it’s how people who cannot see an image
understand the content and meaning of the image




Keep it short. People using screen readers have to listen to
what you write. Aim for 5-15 words.
Focus on keywords. Don’t worry about complete sentences
Make the text meaningful. Describe the aspects of the image
that are part of its message.
Don’t use filenames, file size or other technical details as a
substitute for good ALT text
The only absolute rule is that every image must include an alt
attribute.
There is a good tutorial on ALT text, with many examples, on WebAIM
http://webaim.org/techniques/alttext/

37. 37
Alt text is contextual
Should this be described as:



Credit: J. and K. Hollingsworth/USFWS

Fox
Red fox
Red fox at Sachuest
Point National Wildlife
Refuge
A red fox, standing alone
on a pile of rocks, looks
back at the camera.

38. 38
Alt text starts from the meaning of the image
4 Syllables - http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/

40. 40
Good ALT text
3. Complement meaningful ALT text with
captions for longer explanations
The ALT text says:
―NIEHS/NTP Director Linda Birnbaum, Ph.D.
accepts award from NIH Director Francis
Collins, M.D., Ph.D.‖
The caption says:
―Birnbaum, right, joined Collins at front stage
as she accepted a Director’s Award on behalf
of employees honored for their contributions
to the Deepwater Horizon Gulf Oil Spill
Response. (Photo courtesy of NIH)‖

41. 41
Good ALT text
4. For charts and graphs,
summarize the data or trends
This chart has




A title that is meaningful: ―More
Education Means More Money‖
A summary paragraph
The graph – in this case, the ALT
text can simply say that the image
is a visual representation of the
data below
A table with the data presented in
the chart
Example from Career One Stop http://www.careerinfonet.org/finaidadvisor/earnings.aspx?nodeid=21

42. 42
5. Write for action
Active verbs
Positive messages

43. 43
Write with active verbs

44. 44
Be positive
We asked participans in a usabilty test to find out:
How much are the annual tuition fees at this
university?
Based on what they read, they gave the wrong
answer, thinking this university is more expensive,
not less.
A typical three-year degree at £3,000 a year adds up
to to £9,000 – a hefty sum that doesn’t include living
costs....
...on average to £3,046 compared with £9,000...
Universities will be able to charge up to £3,000 for
annual tuition fees and the government is predicting
that average levels of student debt will be around
£15,000 for those entering higher education next
year...

45. 45
Can users interpret and act on this information?
Clear statement
Repeat risk
Invite action
Visual information
Build on success
http://www.yourdiseaserisk.wustl.edu/hccpquiz.pl

46. How to vote
(1) Mark only with a writing instrument provided by the board of
elections.
(2) To vote for a candidate whose name is printed on this ballot fill in
the (insert oval or square, as applicable) above or next to the name of
the candidate.
(3) To vote for a person whose name is not printed on this ballot write
or stamp his or her name in the space labeled ―write-in‖ that appears
(insert at the bottom of the column, the end of the row or at the bottom
of the candidate names, as applicable) for such office (and, if required
by the voting system in use at such election, the instructions shall also
include ―and fill in the (insert oval or square, as applicable)
corresponding with the write-in space in which you have written in a
name‖).
(4) To vote yes or no on a proposal, if any, that appears on the
(indicate where on the ballot the proposal may appear) fill in the
(insert oval or square, as applicable) that corresponds to your vote.
(5) Any other mark or writing, or any erasure made on this ballot
outside the voting squares or blank spaces provided for voting will
void this entire ballot.
(6) Do not overvote. If you select a greater number of candidates than
there are vacancies to be filled, your ballot will be void for that public
office, party position or proposal.
(7) If you tear, or deface, or wrongly mark this ballot, return it and
obtain another. Do not attempt to correct mistakes on the ballot by
making erasures or cross outs. Erasures or cross outs may invalidate
all or part of your ballot. Prior to submitting your ballot, if you make a
mistake in completing the ballot or wish to change your ballot choices,
you may obtain and complete a new ballot. You have a right to a
replacement ballot upon return of the original ballot.
(8) After completing your ballot, insert it into the ballot scanner and
wait for the notice that your ballot has been successfully scanned. If
no such notice appears, seek the assistance of an election inspector.
46

47. 47
How to vote (another try)
Mark the oval to the left of the name of your choice.
To vote for a candidate whose name is not printed on the ballot, print the name
clearly in the box labeled 'write-in', staying within the box.
Do not make any marks outside the spaces provided for voting. If you do, your ballot
may not count.
The number of choices is listed for each contest. Do not mark the ballot for more
candidates than allowed. If you do, your vote in that contest will not count.
If you make a mistake, or want to change your vote, ask a poll worker for a new
ballot.

48. 48
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 is used by the Center for Plain Language

49. 49
Plain language = a11y
= usability
= user experience
for information

50. 50
Storytelling for User Experience
with Kevin Brooks
Global UX
with Daniel Szuc
A Web for Everyone
with Sarah Horton
http://rosenfeldmedia.com/books/a-web-for-everyone/

51. 51
Whitney Quesenbery
whitneyq@wqusability.com
www.wqusability.com
@whitneyq
Center for Civic Design
whitneyq@centerforcivicdesign
centerforcivicdesign.org
@ChadButterfly