Content for Everyone

Content for EveryoneMaking information accessible

Whitney QuesenberyCenter for Civic Design

Whitney QuesenberyWQusability.com | Center for Civic Design

Twitter: @whitneyq | #AUX

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

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

Disabilities increase with age

As we age, our chance of being affected by a disability increases

Vision and hearing loss have especially steepincreases after age 65

Image: Graph showing rising incidence of disabilities by age, as a percent of US population

Age Range

% of People with Disability

45-54 11.5%

55-64 21.9%

65+ 59.0%

A Nation Online, Economic and Statistics Administration/National Telecommunications and Information Administration, U.S. Department of Commerce, February 2002

4

Accessibility and usability go hand in hand

UsabilityThe 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

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

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

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

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

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

Myths that hold us back

My audience is specialMy information is technicalPeople can’t tell the differenceYou can't write standards for content

10

Myth: “My audience is special”

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

But compare these guidelines for different audiences

11

Myth: “My information is technical”

Information can be

technically accurate,

interesting and well written

appropriate to the audience

and also

clear and understandable

12

Myth: “People can’t tell the difference”

No preference

Plain language version

Traditional version

0 10 20 30 40 50 60 70 80 90

9

82

9

Preference for style of instructions(% of participants)

Report of Findings: Use of Language in Ballot Instructions, NIST IR 7556

13

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.

Yep, there’s content in the accessibility standards

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

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

1. Write for the audience

Speak to them

in their words

about their tasks

17

Use simple, everyday words everyone can understand

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.

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

Use summaries to communicate key points

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 fromhttp://www.justice.gov.uk/about/cbr/second-consultation

20Leap and land on the same wordGive links good “scent of information”

HT: Caroline Jarrett

21

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.

Speak directly to the reader

nationalmssociety.org

22

2. Organize information logically

In the right orderIn the right format

23Help 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

24

Establish context and requirements

25

Draw a triangle on top of an upside down “T”

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

Put warnings and prompts in the right order

Before the action, field or instruction, not after it!

See Caroline Jarrett's articles on forms and her discussion of the placement of prompts.

What is your date of birth?

For example: 12 28 1970

MM DD YYYY

What is your date of birth?

For example: 12 28 1970

MM DD YYYY

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

3. Design for reading

HeadingsInfo designUsing color

30

Design for reading patterns

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 reproboRefero 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 sodalesTristique nonummy foras pellentesque curabitur verto. Nostra quis luctus massa convallis tum wisi tum.

Malescuada sollincintunPlatea nostra usitas viverra ut cui. Tempor porttitor ligula maecenas lobortis nibh consequat ullamcorper.

32

Use design to make information easy to scan

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 stripinghttp://alistapart.com/article/zebrastripingdoesithelphttp://alistapart.com/article/zebrastripingmoredataforthecase

34

Don’t use color alone to communicate meaning

Provide multiple cues.

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

Image: Stop signImage: Three ways of showing positive and negatives

35

4. Alternatives for images

Alt textDescriptionsCaptions

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 WebAIMhttp://webaim.org/techniques/alttext/

37

Alt text is contextual

Should this be described as:

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.

Credit: J. and K. Hollingsworth/USFWS

38

Alt text starts from the meaning of the image

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

39

Good ALT text

1. Repeat any text in the image

The ALT text for this image should read“Webcast. Appyling 21st Century Toxicology to Green Chemical and Material Design. September 20-21, 2011”

2. Use “null text” for decorative images Put a space in the ALT text to show that there is no content in the images. In HTML this is displayed at ALT=“ “

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

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

5. Write for action

Active verbsPositive messages

43

Write with active verbs

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

Can users interpret and act on this information?

http://www.yourdiseaserisk.wustl.edu/hccpquiz.pl

Repeat risk

Visual information

Clear statement

Invite action

Build on success

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.

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

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

49

Plain language = a11y

= usability

= user experience

for information

50

Storytelling for User Experiencewith Kevin Brooks

Global UXwith Daniel Szuc

A Web for Everyonewith Sarah Horton

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

51

Whitney [email protected]@whitneyq

Center for Civic [email protected]@ChadButterfly