Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Accessibility Workshop July 2020

101 vues

Publié le

Accessibility for Design & Content hosted by VP, Content Strategy, Marli Mesibov & Director, Experience Design, James Christie
Mad*Pow is offering a two hour accessibility workshop for people who design digital products and services. Through a mix of presentations and participatory activities attendees will learn and practice the skills needed to ensure digital sites and services meet the needs of a real-world diverse audience.
Design and content teams have nearly universally embraced user experience, which is wonderful news for their audiences! Unfortunately, too many still lack the knowledge or ability to create accessible, inclusive designs. That means the final experiences are great for some people, but not all.
Standards and guidelines exist, but they can be complicated and long winded. Join us to move past the legalese. You will participate in activities that give you tools to improve your UX work.
This workshop is valuable for any UX designer, content strategist, product manager, or anyone else with an impact on design decision making.
By the end of the workshop, participants will
Understand the various levels of accessibility
Gain a working knowledge of the legal and regulatory frameworks that define and enforce digital accessibility
Practice how to identify and categorize accessibility problems — so you can fix them
Plan and prepare accessible design and content, before it gets to your users.

Publié dans : Design
  • Soyez le premier à commenter

Accessibility Workshop July 2020

  1. 1. Accessibility for Design & Content With Marli and James
  2. 2. Marli Mesibov VP, Content Strategy James Christie Director, UX Design
  3. 3. ...the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed. Web accessibility is... From MS Inclusive Design Kit
  4. 4. 19%of the population is impacted by non-accessible content, design, and development. 70%of the websites Have one or more significant barriers to access.
  5. 5. “Remember, we’re all just temporarily abled.” - Facundo Corradini, Accessibility for Vestibular Disorders Source: https://alistapart.com/article/accessibility-for-vestibular/
  6. 6. Relevant U.S. legislation* Americans with Disabilities Act (1990) Section 508 (1998, revised 2018) The Affordable Care Act (2010) *according to non-lawyers
  7. 7. Today’s goal Give an overview of the types of accessibility issues people encounter Practice spotting issues with some simple checks Get practice in discussing impact and solutions
  8. 8. Agenda Guidelines and Standards Demo: mini-audit Activity: practice audit skills Discussion Please use the chat feature for questions as we go All resources, slides and recording will be available for download.
  9. 9. Accessibility guidelines
  10. 10. Web Content Accessibility Guidelines Managed by The World Wide Web Consortium (W3C) - the main international standards organization for the World Wide Web. Version 1: 1999 Version 2.1: 2018 Three tiers of conformance: A, AA, AAA
  11. 11. Layers of Accessibility Perceivable Operable Understandable Robust
  12. 12. https://www.w3.org/WAI/standards-guidelines/wcag/ Web Content Accessibility Guidelines
  13. 13. Do you have alt-text for images?
  14. 14. do videos and audio have an accessible alternative?
  15. 15. WCAG rules for multimedia... Level A (Pre-recorded) 1.2.1 – Audio-only and Video-only 1.2.2 – Captions 1.2.3 – Audio-description or Media Alternative 1.2.5 – Audio-description 1.2.7 – Extended Audio-description 1.2.8 – Media Alternative Level AA 1.2.4 – Captions (Live) 1.2.5 – Audio Description (Pre-recorded) Level AAA 1.2.6 – Sign Language (Pre-recorded) 1.2.7 – Extended Audio description 1.2.8 – Media Alternative (Pre-recorded) 1.2.9 – Audio Only (Live)
  16. 16. Does the content work regardless of formatting?
  17. 17. Is there sufficient contrast? Sphinx of black quartz, judge my vow. Waltz, bad nymph, for quick jigs vex. Pack my box with five dozen liquor jugs. Black (#000000) White (#FFFFFF) Dark Grey (#4C4C4C) Medium Grey (#D9D9D9) Medium Grey (#8F8F8F) Light Grey (#D9D9D9) The five boxing wizards jump quickly. Dark Grey (#4C4C4C) Light Yellow (#FFF2CC)
  18. 18. Is there sufficient contrast? Sphinx of black quartz, judge my vow. Waltz, bad nymph, for quick jigs vex. Pack my box with five dozen liquor jugs. Black (#000000) White (#FFFFFF) Contrast ratio 21:1 Dark Grey (#4C4C4C) Medium Grey (#D9D9D9) Contrast ratio 6:1 Medium Grey (#8F8F8F) Light Grey (#D9D9D9) Contrast ratio 2:1 The five boxing wizards jump quickly. Dark Grey (#4C4C4C) Light Yellow (#FFF2CC) Contrast ratio 7.7:1 AA Pass AAA Pass Too muchFail
  19. 19. Colour Contrast Analyser
  20. 20. Is text an appropriate size and font? 16px is a good starting point
  21. 21. +200% text rule 1.4.4 Resize text Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
  22. 22. Are you using more than just color to convey information? Source: https://theblog.adobe.com/4-golden-rules-ui-design/
  23. 23. Do your links make sense independent of context? Click here Click here Click here Click here Click here Click here Click here Read about accessibility Fill out a contact form See more case studies Learn more about cancer Download “Accessibility” white paper Find a doctor Discover our research labs
  24. 24. What’s the readability level? Readable.io
  25. 25. EXAMPLE: NHS Source: https://digital.nhs.uk/blog/transformation-blog/2019/pee-and-poo-and-the-language-of-health
  26. 26. Are error messages clear and helpful?
  27. 27. https://centerhxd.com/wp-content/uploa ds/2020/03/9Steps_Accessible_Content_ MadPow.pdf
  28. 28. Demo: Mini audit
  29. 29. A full audit looks like this…. Scope ● Full WCAG checklist ● Compliance Target ● Audit toolchain ● QA team ● Representative templates vs. full site Manual checks ● Heuristic evaluation ● Screen-reader evaluation ● Usability with assistive technology Technical ● Automated test tools ($$$) ● Code review Plus Thorough! Compliance needs are met Minus Takes time and money (multiplied by size) Lack resources / knowledge Lack of buy-in
  30. 30. Mini-audit / “sniff test” Scope ● Subset of WCAG ● Limited pages ● Anyone on team Manual checks ● Simple techniques (zooming, using keyboard only) Technical ● Free browser tools Easy tasks that take little time or training. Gives you an early inkling of the scope of accessibility issues. Makes accessibility principles tangible to the team. Fun as a team sport. Not a replacement for an audit.
  31. 31. Demo time ● Keyboard check ● Text expansion ● Smoosh test ● Accessibility audit with Google Chrome (free) ● Color check ● NoCoffee - empathy browsing ● Text content check with Hemmingway
  32. 32. Keyboard check Using Chrome or other tab-enabled browser, use a site entirely without a mouse. Simply use Tab and Space to navigate the links of the site. How often do you get stuck?
  33. 33. Why test with Keyboard? Eye blink switch Chin switchBraille output + control enablingdevices.com
  34. 34. Activity: Site Review
  35. 35. Your Turn! ● Your group of 3-4 people will review a website ○ Use the Accessibility Guidelines to seek out issues ○ Download plugins (optional) ● List the issues you find on sticky notes ● Brainstorm solutions ○ Aim for small changes whenever possible ○ Don’t be afraid to note where you have questions or don’t know a solution!
  36. 36. Regroup
  37. 37. Type into zoom chat: What will you bring back to your organization? ● Process? ● Tools? ● Methods for evangelizing accessibility?
  38. 38. What questions do you have? Now that you know… what do you know you don’t know?
  39. 39. Conclusion
  40. 40. Thank you! ● Video will be available ● Checklist Mural will stay active (contact us for a PDF) ● Keep the conversation going! ○ mmesibov@madpow.net / @marsinthestars ○ jchristie@madpow.net / @jc_ux
  41. 41. Thank You!
  42. 42. Example accessible design project
  43. 43. Case study: Harvard Pilgrim Health Care
  44. 44. Researching needs ● Stakeholder interviews with assistive technology users ● Accessibility personas from A web for everyone by Whitney Quesenbery
  45. 45. Advanced needfinding ● Participatory design workshop for inclusivity ● Great way to incorporate hitherto overlooked needs into the design process
  46. 46. Design exploration ● Test color combinations from day 1 ● Living style guides: document design decisions along with accessibility notation
  47. 47. Content audit ● Check for reading grade level ● Identify content to rewrite ● Find multimedia and plan for text alternatives
  48. 48. Code / build ● Mobile-first = focus on what matters and content order ● Include real content early on (no lorem ipsum), and focus on messages over marketing
  49. 49. Designing in code lets us solve the hard problems earlier
  50. 50. Screen-reader testing