Content for Everyone


Published on

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

Published in: Design, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • According to analysis by the Brennan Center from:National Center for Health Statistics and US Census 200219 million people over 18 have trouble seeing31 million people over 18 have trouble hearing28 million people over 18 experience physical difficulty3 million have trouble grasping or handling small objects18 million people over 18 speak English less than “very well”That’s 17-20% of non-institutionalized adults
  • First, understand your audience and contextFamiliar tasks, unfamiliar tasksDevicesTheir ability, aptitude, attitude
  • Don't rely on reading level tests (just count words and syllables)Think about what makes the information simple.Is it a good starting point for everyone?
  • Discussion: how many different cues does a stop sign include?
  • Content for Everyone

    1. 1. Content for Everyone Making information accessible Whitney Quesenbery Whitney Quesenbery | Civic Design Design Center for Center for Civic Twitter: @whitneyq | #AUX Book Resources:
    2. 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. 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. 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. 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. 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
    7. 7. 7 Plain language supports the right to understand Sandra Fisher-Martins ―The Right to Understand‖at TEDx O’Porto
    8. 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. 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. 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 Designing Web Sites for Older Adults, Work with low literacy web users
    11. 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
    12. 12. 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.
    13. 13. 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.
    14. 14. 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
    15. 15. 16 1. Write for the audience Speak to them in their words about their tasks
    16. 16. 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.
    17. 17. 18 Use summaries to communicate key points
    18. 18. 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
    19. 19. Leap and land on the same word Give links good “scent of information” HT: Caroline Jarrett 20
    20. 20. 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.
    21. 21. 22 2. Organize information logically In the right order In the right format
    22. 22. 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
    23. 23. 24 Establish context and requirements
    24. 24. 25 Draw a triangle on top of an upside down ―T‖
    25. 25. 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?
    26. 26. 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
    27. 27. 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
    28. 28. 29 3. Design for reading Headings Info design Using color
    29. 29. 30 Design for reading patterns
    30. 30. 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.
    31. 31. 32 Use design to make information easy to scan
    32. 32. 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
    33. 33. 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
    34. 34. 35 4. Alternatives for images Alt text Descriptions Captions
    35. 35. 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
    36. 36. 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.
    37. 37. 38 Alt text starts from the meaning of the image 4 Syllables -
    38. 38. 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)‖
    39. 39. 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
    40. 40. 42 5. Write for action Active verbs Positive messages
    41. 41. 43 Write with active verbs
    42. 42. 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...
    43. 43. 45 Can users interpret and act on this information? Clear statement Repeat risk Invite action Visual information Build on success
    44. 44. 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
    45. 45. 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.
    46. 46. 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
    47. 47. 49 Plain language = a11y = usability = user experience for information
    48. 48. 50 Storytelling for User Experience with Kevin Brooks Global UX with Daniel Szuc A Web for Everyone with Sarah Horton
    49. 49. 51 Whitney Quesenbery @whitneyq Center for Civic Design whitneyq@centerforcivicdesign @ChadButterfly