Successfully reported this slideshow.
Your SlideShare is downloading. ×

Accessible UX: Going beyond WCAG (#ID24)

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 65 Ad

Accessible UX: Going beyond WCAG (#ID24)

Download to read offline

How do the Web Content Accessibility Guidelines relate to UX design? What about if we look beyond the guidelines to where the standards are not enough?

Talk from #ID24 for Global Accessibility Awareness Day, 19 May 2016.

http://www.inclusivedesign24.org/#talk19
https://www.youtube.com/watch?v=Dtyy04T7frY&list=PL95LOQw9SLWxmcZtzBiFuT9HAJKFJnl2n&index=19

How do the Web Content Accessibility Guidelines relate to UX design? What about if we look beyond the guidelines to where the standards are not enough?

Talk from #ID24 for Global Accessibility Awareness Day, 19 May 2016.

http://www.inclusivedesign24.org/#talk19
https://www.youtube.com/watch?v=Dtyy04T7frY&list=PL95LOQw9SLWxmcZtzBiFuT9HAJKFJnl2n&index=19

Advertisement
Advertisement

More Related Content

Recently uploaded (20)

Advertisement

Accessible UX: Going beyond WCAG (#ID24)

  1. 1. Accessible UX Going beyond WCAG Jon Gibbins, @dotjay #ID24 #a11y #UX 19 May 2016
  2. 2. Accessible UX
  3. 3. Accessible UX: Going beyond WCAG Problems 1. Accessibility cannot be done by one person in your team ▸ Don’t just be the accessibility guy/gal ▸ Raise awareness ▸ Teach ▸ Learn
  4. 4. Accessible UX: Going beyond WCAG Problems 2. QA and testing phase often too late for accessibility ▸Think about accessibility as early as possible ▸Bake it into your process
  5. 5. Accessible UX: Going beyond WCAG Problems 3. Accessibility not built into development processes ▸ BS 8878 ▸ Not a set of development guidelines ▸ Project management roadmap for ensuring that web products are built in an accessible way
  6. 6. Accessible UX: Going beyond WCAG I don’t have all the answers ▸Accessibility is contextual ▸Accessibility comes with experience ▸Accessibility is not just about code
  7. 7. Accessible UX: Going beyond WCAG
  8. 8. Accessible UX: Going beyond WCAG Incorporate accessibility in UX design process ▸Research ▸Define ▸Wireframe ▸Test with people ▸Iterate
  9. 9. Accessible UX: Going beyond WCAG Research ▸Think about accessibility early ▸Accessibility more likely to ▸get baked into prototypes ▸persist through development ▸make it into production at an acceptable level
  10. 10. Accessible UX: Going beyond WCAG Research ▸Putting people first goes a long way towards accessibility ▸Include people with disabilities for diverse personas ▸Different disabilities, different needs ▸Older people (often first time users) ▸Plan to test with similar people
  11. 11. Accessible UX: Going beyond WCAG Define ▸Information architecture ▸Plan understandable structure ▸Plan heading structure
  12. 12. Accessible UX: Going beyond WCAG Define ▸Labelling ▸Use concise, clear, consistent and descriptive labels ▸Form controls ▸Navigation ▸Link text
  13. 13. Accessible UX: Going beyond WCAG Design ▸Design with accessibility in mind ▸Multimodal interactions – choice ▸Familiarity ▸Design patterns ▸Iconography ▸Layout ▸Content order
  14. 14. Accessible UX: Going beyond WCAG Design ▸Contrast ▸4.5:1 at least (higher for mobile – see later) ▸Colour combinations ▸Avoid red/green ▸Avoid red/black ▸Don’t use colour alone ▸Test using colour blindness tools
  15. 15. Accessible UX: Going beyond WCAG http://webaim.org/resources/designers/
  16. 16. Accessible UX: Going beyond WCAG Wireframe ▸Wireframe with accessibility in mind ▸Fix accessibility before it hits the screens, e.g. order ▸Documenting accessibility as you go will help future iterations ▸Annotate wireframes with accessibility detail ▸Show structure, headings, labels, order
  17. 17. Accessible UX: Going beyond WCAG
  18. 18. Accessible UX: Going beyond WCAG “Menu” Article headings
  19. 19. Accessible UX: Going beyond WCAG Test ▸Incorporate people with disabilities ▸Wireframe and design reviews ▸Prototype testing ▸User testing ▸User sessions, be prepared for interactions to take longer ▸Is the test lab accessible? Can you test at home or remotely?
  20. 20. UX meets WCAG
  21. 21. Accessible UX: Going beyond WCAG
  22. 22. Accessible UX: Going beyond WCAG Information & Relationships ▸Sometimes adding semantics is not enough ▸Did you know? ▸Does <em> or <strong> get pronounced differently in screen readers?
  23. 23. Accessible UX: Going beyond WCAG Information & Relationships ▸Sometimes adding semantics is not enough ▸Did you know? ▸Does <em> or <strong> get pronounced differently in screen readers? Not by default! ▸Do not rely on them for very important information. ▸Consider whether the content deserves to be a heading, or could be supplemented with iconography (alternative text), etc.
  24. 24. Accessible UX: Going beyond WCAG Information & Relationships ▸Use of structure helps ▸Context ▸Overview ▸Navigation ▸Also breaks up content to make is more digestible ▸Markup ▸Headings ▸Landmarks ▸Lists
  25. 25. Accessible UX: Going beyond WCAG Language ▸Define for page ▸Define where there are changes ▸If you don’t…
  26. 26. Accessible UX: Going beyond WCAG Language <p> Sur le Pont d'Avignon L'on y danse, l'on y danse Sur le Pont d'Avignon L'on y danse tous en rond </p>
  27. 27. Accessible UX: Going beyond WCAG Language <p lang="fr"> Sur le Pont d'Avignon L'on y danse, l'on y danse Sur le Pont d'Avignon L'on y danse tous en rond </p>
  28. 28. Accessible UX: Going beyond WCAG Instruction & Orientation ▸Informative label text ▸Informative heading text ▸Informative error messages
  29. 29. Accessible UX: Going beyond WCAG Images of Text ▸We know about alternative text ▸Images of text is not flexible ▸Cannot be selected ▸Cannot be used with “Speak Selection” features ▸Sighted screen reader user?!
  30. 30. Accessible UX: Going beyond WCAG Content (WCAG 2.0 Level AAA) ▸Reading level ▸Use of plain language whenever possible ▸Avoid unnecessary jargon and slang ▸Line length ▸Do not use justified text ▸Glossary
  31. 31. Beyond WCAG
  32. 32. Accessible UX: Going beyond WCAG Design ▸Sans-serif fonts for body text ▸Supplementing with imagery and iconography ▸WCAG doesn't really cover this ▸Helps people with learning disabilities, dyslexia, reading a second language
  33. 33. Accessible UX: Going beyond WCAG Design for mobile ▸Touch target sizes and spacing ▸When designing for touch, make sure the tap size of the navigation item is at least 7mm (equivalent) ▸Finger tips are ~7mm ▸Reachability ▸Zoom design ▸Labels above control ▸Higher colour contrast due to mobile context, e.g. glare ▸BBC guidelines suggest 7:1 ratio (the WCAG AAA requirement)
  34. 34. Accessible UX: Going beyond WCAG Content ▸Good accessibility begins with content
  35. 35. Accessible UX: Going beyond WCAG
  36. 36. Accessible UX: Going beyond WCAG Writing style ▸Make your point clear first then explain ▸One point per paragraph ▸Use short line lengths wherever possible ▸Helps people who are deaf, have dyslexia, dementia or other cognitive and learning disabilities ▸See W3C COGA Techniques (Working Draft)
  37. 37. Accessible UX: Going beyond WCAG CAPS ▸Harder to read (dyslexia) ▸Shouting, caps can cause different reading by screen readers
  38. 38. Accessible UX: Going beyond WCAG Screen reader nuances ▸Using semantic markup helps ▸But screen readers can still get things wrong
  39. 39. Accessible UX: Going beyond WCAG Screen reader pronunciation ▸We have language selection in WCAG, but what about pronunciation?
  40. 40. Accessible UX: Going beyond WCAG Hyphenation ▸Example: E-newsletter ▸iOS ▸ enewsletter “ehneyewsleta” = ˌe njuːsletər (sounds Russian) ▸ e-newsletter “ee newsletter” = ˈiːnuːzˌletər (correct) ▸Android ▸ enewsletter “eh newsletter” = ˌenuːzˌletər (wrong “e” sound) ▸ e-newsletter “ee newsletter” = ˈiːnuːzˌletər (correct) ▸Windows mobile ▸ enewsletter “ee newsletter” = ˈiːnuːzˌletər (correct) ▸ e-newsletter “ee newsletter” = ˈiːnuːzˌletər (correct)
  41. 41. Accessible UX: Going beyond WCAG Compound words ▸Compound words are commonplace ▸Homepage ▸Sitemap ▸"Signup" announced as "sig–nup" in VoiceOver iOS ▸Spaces and hyphens are your friends.
  42. 42. Accessible UX: Going beyond WCAG Read / Reading ▸“Reeding” vs “Redding” ▸<h2>Get reading</h2> = “Get Redding” ▸<a href="#">Read more</a> = “Red more”
  43. 43. Accessible UX: Going beyond WCAG Emphasis ▸“Skip to content” vs “Skip to main content” ▸“con tent” vs “con tent”
  44. 44. Accessible UX: Going beyond WCAG Date format ▸ambiguity, clarity (e.g. US versus UK) ▸01 03 2015 could be “1st of March” or “3rd of January” ▸An interesting thing to note in VoiceOver ▸it sometimes reads numbers strangely ▸for example: 2013 = “twenty thirteen inches” ▸“Date expected in dd/mm/yyyy format” ▸“millimetres” in some speech engines
  45. 45. Accessible UX: Going beyond WCAG Long numbers ▸Phone numbers ▸Company numbers ▸<span> trick ▸<span>0824</span>5475 ▸CSS 3 speak-as: digits ▸Very poor support but should improve
  46. 46. Accessible UX: Going beyond WCAG Moving forward ▸More testing currently being done in this area. ▸Other pronunciation examples: ▸http://lab.dotjay.co.uk/tests/screen-readers/pronunciation/
  47. 47. Accessible UX: Going beyond WCAG Responsibility? ▸Users? ▸Software vendors? ▸Developers? ▸Content creators? ▸Web standards?
  48. 48. Accessible UX: Going beyond WCAG Responsibility? ▸Users? ▸Software vendors? ▸Developers? ▸Content creators? ▸Web standards? All of us!
  49. 49. Accessible UX: Going beyond WCAG Final points ▸Test, test, test! ▸No. (one-word sentence) is read by VoiceOver on iPad correctly, but on iPhone it reads it as “number”. ▸These changes to our content are clearer for all!
  50. 50. What can I do?
  51. 51. Accessible UX: Going beyond WCAG Jon has personal connections to accessibility.
  52. 52. Accessible UX: Going beyond WCAG Jon has personal connections to accessibility. Photo credit: Jon Gibbins with thanks to Drake Music Project
  53. 53. Accessible UX: Going beyond WCAG Empathy ▸Most of us have a connection to accessibility
  54. 54. Accessible UX: Going beyond WCAG Empathy ▸Mobile ▸small screens ▸text sizes ▸touch targets and keys ▸environment (hands-free, noise, rain)
  55. 55. Accessible UX: Going beyond WCAG Empathy ▸Ageing ▸We are all ageing ▸Multiple disabilities of different types
  56. 56. Accessible UX: Going beyond WCAG Empathy ▸Accessibility is about understanding people and the barriers that they face ▸Getting your own experience of accessibility helps you to put yourself in the shoes of others and keep accessibility in mind when building and testing your sites and applications
  57. 57. Accessible UX: Going beyond WCAG Commit ▸Establish an ongoing commitment to accessibility ▸Create an accessibility statement ▸Get an accessibility champion on your team
  58. 58. Resources
  59. 59. Accessible UX: Going beyond WCAG Resources: accessibility books ▸A Web for Everyone: Designing Accessible User Experiences by Sarah Horton and Whitney Quesenbery ▸Design Meets Disability by Graham Pullin
  60. 60. Accessible UX: Going beyond WCAG Resources: guidelines ▸Guidelines for mobile and platform-specific ▸WCAG 2.0 ▸http://www.w3.org/WAI/WCAG20/ ▸BBC Mobile Accessibility Guidelines ▸http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile ▸BBC GEL – How to design for accessibility ▸http://www.bbc.co.uk/gel/guidelines/how-to-design-for-accessibility
  61. 61. Accessible UX: Going beyond WCAG Resources: W3C WAI ▸David Sloan has a good run down of helpful UX resources ▸http://www.paciellogroup.com/blog/2013/06/accessible-user-experience-and-w3c-wai/ ▸Designing for Inclusion ▸http://www.w3.org/WAI/users/Overview.html ▸Effective involvement of people with disabilities in the design process ▸Planning and Implementing Web Accessibility ▸http://www.w3.org/WAI/managing.html ▸Involving Users in Web Projects for Better, Easier Accessibility ▸http://www.w3.org/WAI/users/involving
  62. 62. Accessible UX: Going beyond WCAG Resources: W3C WAI (continued) ▸Involving users in evaluation ▸http://www.w3.org/WAI/eval/users.html ▸Mobile Accessibility ▸http://www.w3.org/WAI/mobile/ ▸Shared Web Experiences: Barriers Common to Mobile Device Users and People with Disabilities ▸http://www.w3.org/WAI/mobile/experiences
  63. 63. Questions?
  64. 64. #sharetheoran https://youtu.be/x9MvEZskR6o
  65. 65. Thanks! Jon Gibbins, @dotjay @DigA11y

Editor's Notes

  • CONTROVERSIAL!

    Contextual - Context is King, especially on mobile
    Experience - leverage user experience to make a truly accessible experience
  • Just because you add something “accessible”, doesn’t mean that it makes sense.

    Design stage is important for establishing context and making sense of the answers before they become problems.
  • Sectioning content helps control order
    Heading structure is important for users of assistive technology
  • Defining accessibility labels
    Also, some structuring/grouping of UI for accessibility here
  • “But I can't justify doing user testing with people with disabilities”
    not losing testing time
    testing with people with disabilities will find usability issues, too
  • Quickly through this slide.

    WCAG can be too technical and impenetrable for designers.
  • To be clear, I mean that important information may warrant better semantics than <em> or <strong>.
  • Speak Selection? Dyslexia
  • WCAG was not built with touch screen devices in mind
    To be fair, W3C MATF are working on this
  • I want you to keep that in mind.
  • When does KISS never apply?!
  • Use short line lengths: seven to ten words per line (WCAG 80 characters long)
    Considerations for deaf people
    WCAG covers subtitles and captioning, and even sign language
    BUT must realise that for members of the Deaf community, English (or any "native" language) is a second language.

    Techniques for the The Cognitive and Learning Disabilities Accessibility Task Force (COGA)
  • Something that often gets missed is the text itself – the words we use. Clear text is essential to providing good user experiences for all users, but especially for users of assistive technology such as screen readers.

    Screen reader software takes text found on screen – on a website, for example – and tries to create synthetic speech from it to help people understand what's on the screen. Think of Stephen Hawking's speech synthesizer (http://www.hawking.org.uk/the-computer.html).
    Problems arise when the software can't quite figure out what is meant by the text it finds.
    Certain text does not result in clearly understandable announcements from screen readers. While not a requirement under WCAG 2.0, these things should be considered for the best user experience for people who use assistive technologies.
    Not just an issue for screenreader users, but also people with dyslexia.
  • Many compound words have become so commonplace that they have become acceptable in day-to-day use:
    bookmark
    grandfather
    newspaper
    weekend
    website
  • Why is a11y like parenthood? you can get an idea of what it's like from friends, but you don't know it until you get there yourself.

×