Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessibility Basics

462 views

Published on

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.

Published in: Design
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Accessibility Basics

  1. 1. 1 Accessibility basics: A library for everyone Whitney Quesenbery Center for Civic Design @awebforeveryone | @whitneyq | @civicdesign Designing for Digital 2017
  2. 2. 2 Hello! Me Civic design User research, accessibility, plain language Storytelling Former theatre designer You?
  3. 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. 4. Principles And a few definitions
  5. 5. 5 Which of these are for people with disabilities?
  6. 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. 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. 8. Accessibility The usability of a product, service, environment or facility by people with the widest range of capabilities. ISO 9241-20
  9. 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. 10. Many barriers to cognitive accessibility are the same as usability problems for general audience…but more severe. - Clayton Lewis
  11. 11. The POUR Principles Perceivable Operable Understandable Robust
  12. 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. 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. 14. People First We can’t design for people we don’t know
  15. 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. 16 Accessible UX Personas Meeting all kinds of people Carol Jacob Lea Emily Steven Maria Trevor Vishnu
  17. 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. 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. 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. 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. 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. 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. 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. 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. 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. 26. Building blocks Structure and semantic meaning
  27. 27. 27 Solid structure
  28. 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. 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. 30 Unfriendly structure: Find the content!
  31. 31. 31 Unfriendly structure: Reading order
  32. 32. 32 Friendly structure: Good wayfinding cues
  33. 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. 34 Design for responsive as a step to accessibility
  35. 35. How might you simplify this page?
  36. 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. 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. 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. 39 Support preferences for text size Support text zoom with good wrapping. Don't let text be cut off.
  40. 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. 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. 42 Elements of a form Field Label Prompt Validation Errors Submit button
  43. 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. 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. 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. 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. 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. 48. Break
  49. 49. Content Plain language and alternatives for media
  50. 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. 51. 52Plain language 43% of adults in the US read at basic or below basic levels
  52. 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. 53. 54 Use summaries to communicate key points
  54. 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. 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. 56. 57 Use design to make information easy to scan
  57. 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. 58. 59 Color The simplest rule: Do not communicate meaning only with color. Color, shape, text all work together to communicate meaning.
  59. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 69. Laws
  70. 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. 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. 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. 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. 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. 75. Making it happen Accessibility is a process
  76. 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. 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. 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. 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. 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. 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. 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. 83. 85 It takes.... ... engaging all types of expertise Photos: ITIF AVTI/CATEA
  84. 84. 86 Be a ^ superhero Create a new perspective UX
  85. 85. 87 It takes…. …changing your habits Photo: mtstcil.org
  86. 86. 88 It takes…. …a new perspective Aimee Mullins TED talk
  87. 87. Be a superhero for accessible UX Make change happen
  88. 88. Questions?
  89. 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

×