Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

WCAG 2.1 UX Scotland 2019

147 Aufrufe

Veröffentlicht am

In June 2018 the World Wide Web Consortium (W3C) updated its Web Content Accessibility Guidelines (WCAG), the world’s de-facto technical standard for accessibility. What are these changes and how can you can investigate if you need to change your current digital solutions? This presentation will outline the changes from WCAG 2.1, how to audit your site for compliance, and share examples to illustrate what the technical guidelines actually mean for websites, apps and other digital interfaces.

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

WCAG 2.1 UX Scotland 2019

  1. 1. Web Content Accessibility Guidelines (WCAG) 2.1 Ed Chandler and Gayle Whittaker June 2019 1
  2. 2. @uservision @edwardchandler @WhittakerGayle 2 We believe that the best experiences are shaped by a deep understanding of human behaviour
  3. 3. @uservision @edwardchandler @WhittakerGayle Web Content Accessibility Guidelines (WCAG) The de facto standard Now on its 3rd version (WCAG 2.1 – June 2018) 78 Success Criteria4 Principles 3 Levels A AA AAA
  4. 4. @uservision @edwardchandler @WhittakerGayle WCAG 2.0 vs WCAG 2.1 4 Adding 17 new criteria on top WCAG 2.1 builds on WCAG 2.0 All WCAG 2.0 success criteria remain the same
  5. 5. @uservision @edwardchandler @WhittakerGayle Focusing on the Principles of Accessibility Information is made available to users Users understand the meaning of information and can act on it, knowing what the outcome will be Users can interact with and use the site as intended PPerceivable OOperable Code must be robust enough that it can be interpreted reliably by a wide variety of technologies (e.g. browsers and assistive technologies). UUnderstandable RRobust First three are very user focused
  6. 6. @uservision @edwardchandler @WhittakerGayle How has legislation effected Accessibility? EU web accessibility directive legislation This includes health, security, councils, government agencies and education. Aims to bring all public sector websites and apps up to an accessible standard
  7. 7. @uservision @edwardchandler @WhittakerGayle 17 New Success Criteria in WCAG 2.1 Mobile Cognitive Low Vision 8 4 5
  8. 8. @uservision @edwardchandler @WhittakerGayle New Success Criteria in WCAG 2.1 A 5 AA 7 AAA 5 By conformance level 17
  9. 9. @uservision @edwardchandler @WhittakerGayle The new level A and AA success criteria
  10. 10. @uservision @edwardchandler @WhittakerGayle 1.3.4 Orientation (Level AA) Content displays in the orientation (portrait or landscape) preferred by the user
  11. 11. @uservision @edwardchandler @WhittakerGayle 1.3.5 Identify Input Purpose (Level AA) Use the HTML autocomplete attribute for edit boxes Label
  12. 12. @uservision @edwardchandler @WhittakerGayle
  13. 13. @uservision @edwardchandler @WhittakerGayle This includes name, street, address, telephone, birthday and other input purposes
  14. 14. @uservision @edwardchandler @WhittakerGayle 1.4.10 Reflow (Level AA) Your website and user interface components must be responsive – no loss of content or functionality occurs
  15. 15. @uservision @edwardchandler @WhittakerGayle 100 to 400% with reflow
  16. 16. @uservision @edwardchandler @WhittakerGayle 100 to 400% without reflow
  17. 17. @uservision @edwardchandler @WhittakerGayle 1.4.11 Non-text Contrast (Level AA) Provide good colour contrast for all user interface components
  18. 18. @uservision @edwardchandler @WhittakerGayle 1.4:11 x
  19. 19. @uservision @edwardchandler @WhittakerGayle Graphical objects (to understand content/function) must have a contrast ratio of at least 3:1 against adjacent colours Think about charts, graphs, icons, and other graphics that—without contrast—would be tough to identify.
  20. 20. @uservision @edwardchandler @WhittakerGayle 1.4.12 Text Spacing (Level AA) Enable users to increase text without losing content or functionality
  21. 21. @uservision @edwardchandler @WhittakerGayle Normal spacing Increased spacing https://codepen.io/stevef/pen/YLMqbo
  22. 22. @uservision @edwardchandler @WhittakerGayle 1.4.13 Content on Hover or Focus (Level AA) Content that appears on hover or focus is dismissible, hoverable and persistent
  23. 23. @uservision @edwardchandler @WhittakerGayle
  24. 24. @uservision @edwardchandler @WhittakerGayle 1.4.13 Content on Hover or Focus (Level AA)
  25. 25. @uservision @edwardchandler @WhittakerGayle 2.1.4 Character Key Shortcuts (Level A) Allow users to turn off or reconfigure shortcuts that are made up of only character keys
  26. 26. @uservision @edwardchandler @WhittakerGayle Keyboard shortcuts for Gmail – single-letter commands to create, archive, delete or reply to messages
  27. 27. @uservision @edwardchandler @WhittakerGayle 2.5.1 Pointer Gestures (Level A) Ensure that content can be operated using simple inputs on a wide range of pointing devices
  28. 28. @uservision @edwardchandler @WhittakerGayle Motion with fingers to operate a webpage on your mobile device – action like this might be impossible for some users with motor impairments Ensure you can complete task using single-finger operation
  29. 29. @uservision @edwardchandler @WhittakerGayle 2.5.2 Pointer Cancellation (Level A) Make it easier for users to prevent accidental pointer input Down events cannot be used to complete a function – moving cursor or focus away it would cancel trigger/submission Use onclick instead to perform the action
  30. 30. @uservision @edwardchandler @WhittakerGayle 2.5.3 Label in Name (Level A) Ensure that the words which visually label a component are also the words associated with the component programmatically Call to Action
  31. 31. @uservision @edwardchandler @WhittakerGayle <button> Add to Trolley <span class="sr-only"> Charcoal Portable Round BBQ</span> </button> Ensure that the words which visually label a component are also the words associated with the component programmatically – accessible name begins with the text of visible label
  32. 32. @uservision @edwardchandler @WhittakerGayle 2.5.4 Motion Actuation (Level A) Ensure that functions triggered by moving a device or by gesturing towards the device can also be operated by more conventional user interface components
  33. 33. @uservision @edwardchandler @WhittakerGayle 4.1.3 Status Messages (Level AA) Make users aware of important changes in content (that are not given focus), and to do so in a way that doesn't unnecessarily interrupt them
  34. 34. @uservision @edwardchandler @WhittakerGayle
  35. 35. @uservision @edwardchandler @WhittakerGayle https://www.youtube.com/watch?v=v72nu602WXU
  36. 36. @uservision @edwardchandler @WhittakerGayle https://www.w3.org/WAI/WCAG21/quickref/
  37. 37. @uservision @edwardchandler @WhittakerGayle 46 1. WCAG is necessary but not sufficient for creating an inclusive user experience 2. Design to accommodate all user needs 3. Embrace the creative challenge 4. Design with inclusivity in mind, from the outset @uservision www.uservision.co.uk
  38. 38. @uservision @edwardchandler @WhittakerGayle Activity: Roles and Responsibilities Task Set Whose responsible for the new success criteria? whose responsibility is inclusive design?
  39. 39. @uservision @edwardchandler @WhittakerGayle Head of UX / Digital
  40. 40. @uservision @edwardchandler @WhittakerGayle Product / Project Manager
  41. 41. @uservision @edwardchandler @WhittakerGayle UX Designer
  42. 42. @uservision @edwardchandler @WhittakerGayle Developer
  43. 43. @uservision @edwardchandler @WhittakerGayle QA Tester
  44. 44. @uservision @edwardchandler @WhittakerGayle Creates interactive components that are unique and easy to identify
  45. 45. @uservision @edwardchandler @WhittakerGayle Identifies what feedback is required for interactions
  46. 46. @uservision @edwardchandler @WhittakerGayle Creates (and uses) an accessible colour pallete
  47. 47. @uservision @edwardchandler @WhittakerGayle Creates accessible Images and media
  48. 48. @uservision @edwardchandler @WhittakerGayle Creates a consistent navigation
  49. 49. @uservision @edwardchandler @WhittakerGayle Creates consistent designs for components
  50. 50. @uservision @edwardchandler @WhittakerGayle Provides controls for moving content / media
  51. 51. @uservision @edwardchandler @WhittakerGayle Creates and delivers an accessibility strategy
  52. 52. @uservision @edwardchandler @WhittakerGayle Raises awareness of accessibility
  53. 53. @uservision @edwardchandler @WhittakerGayle Develops the business case for inclusion
  54. 54. @uservision @edwardchandler @WhittakerGayle Advocates accessibility from ground up
  55. 55. @uservision @edwardchandler @WhittakerGayle Procures trusted suppliers
  56. 56. @uservision @edwardchandler @WhittakerGayle Determines budget and resources
  57. 57. @uservision @edwardchandler @WhittakerGayle Ensures accessibility is delivered at all stages
  58. 58. @uservision @edwardchandler @WhittakerGayle Teams are brought together to discuss [accessibility] issues as they arise
  59. 59. @uservision @edwardchandler @WhittakerGayle Ensures that code matches the logical focus order of the information presented.
  60. 60. @uservision @edwardchandler @WhittakerGayle Associates forms and links with appropriate labels
  61. 61. @uservision @edwardchandler @WhittakerGayle Identifies page language
  62. 62. @uservision @edwardchandler @WhittakerGayle Uses appropriate mark-up to convey meaning and structure
  63. 63. @uservision @edwardchandler @WhittakerGayle All links and controls can be accessed using the Tab key on the keyboard
  64. 64. @uservision @edwardchandler @WhittakerGayle Reviews and tests websites for accessibility
  65. 65. @uservision @edwardchandler @WhittakerGayle Benchmarks websites against WCAG
  66. 66. @uservision @edwardchandler @WhittakerGayle Writes test cases incorporating accessibility
  67. 67. @uservision @edwardchandler @WhittakerGayle Understands and uses assistive technologies
  68. 68. @uservision @edwardchandler @WhittakerGayle 1.3.4 Orientation
  69. 69. @uservision @edwardchandler @WhittakerGayle 1.3.5 Identify Input Purpose
  70. 70. @uservision @edwardchandler @WhittakerGayle 1.4.10 Reflow
  71. 71. @uservision @edwardchandler @WhittakerGayle 1.4.11 Non-text Contrast
  72. 72. @uservision @edwardchandler @WhittakerGayle 1.4.12 Text Spacing
  73. 73. @uservision @edwardchandler @WhittakerGayle 1.4.13 Content on Hover or Focus
  74. 74. @uservision @edwardchandler @WhittakerGayle 2.1.4 Character Key Shortcuts
  75. 75. @uservision @edwardchandler @WhittakerGayle 2.5.1 Pointer Gestures
  76. 76. @uservision @edwardchandler @WhittakerGayle 2.5.2 Pointer Cancellation
  77. 77. @uservision @edwardchandler @WhittakerGayle 2.5.3 Label in Name
  78. 78. @uservision @edwardchandler @WhittakerGayle 2.5.4 Motion Actuation
  79. 79. @uservision @edwardchandler @WhittakerGayle 4.1.3 Status Message