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.

Euro IA 2019 - Inclusive Design means better design for all

220 Aufrufe

Veröffentlicht am

Workshop at Euro IA 2019 conference in Riga, Latvia - building empathy for users with access needs and learning how to do an accessibility heuristic review

  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/varkw6o } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/varkw6o } ......................................................................................................................... Download Full doc Ebook here { https://tinyurl.com/varkw6o } ......................................................................................................................... Download PDF EBOOK here { https://tinyurl.com/varkw6o } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/varkw6o } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/varkw6o } ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Euro IA 2019 - Inclusive Design means better design for all

  1. 1. @katyarnie @JBuller @HODigital Inclusive design means better design for all
  2. 2. @katyarnie @JBuller @HODigital
  3. 3. @katyarnie @JBuller @HODigital Katy Arnold Deputy Director, Design and Research
  4. 4. @katyarnie @JBuller @HODigital James Buller Head of Accessibility and Inclusion
  5. 5. @katyarnie @JBuller @HODigital What we’ll do today Assumptions: You’re here because you care and know why this is important This is mostly in English You have a laptop Learning objectives: Build empathy – what it’s like to have an access need Learn skills – accessibility review as part of design
  6. 6. @katyarnie @JBuller @HODigital Please ask questions. This is a safe place.
  7. 7. @katyarnie @JBuller @HODigital Disability
  8. 8. @katyarnie @JBuller @HODigital Types of disability Visible/Hidden • Sensory • sight, hearing, touch... • Physical • limbs, dexterity, coordination, disfigurement, bodily functions, pain... • Communication • speech, aphasia... • Cognitive • learning, memory, psychological, mental, fatigue, autism, dyslexia... • Disease • HIV, cancer, multiple sclerosis
  9. 9. @katyarnie @JBuller @HODigital 70m 17.6% European adults have a disability 35.6% of people over 65 8% of employed people Source: Eurostat
  10. 10. @katyarnie @JBuller @HODigital Reframing disability Disability is mismatched human interaction Disability is not personal health condition
  11. 11. @katyarnie @JBuller @HODigital Usability and Accessibility Usability makes it easier Accessibility makes it possible
  12. 12. @katyarnie @JBuller @HODigital Access Needs
  13. 13. @katyarnie @JBuller @HODigital All kinds of people We are all temporarily not disabled
  14. 14. @katyarnie @JBuller @HODigital Permanent Temporary Situational 1
  15. 15. @katyarnie @JBuller @HODigital Permanent Temporary Situational
  16. 16. @katyarnie @JBuller @HODigital Experiencing access needs
  17. 17. @katyarnie @JBuller @HODigital Lip reading
  18. 18. @katyarnie @JBuller @HODigital
  19. 19. @katyarnie @JBuller @HODigital
  20. 20. @katyarnie @JBuller @HODigital Dyslexia
  21. 21. @katyarnie @JBuller @HODigital Dyslexia simulation font •Letters have 40% of their lines removed to make it very hard to work out what they are and so read words.
  22. 22. @katyarnie @JBuller @HODigital Colour vision deficiency
  23. 23. @katyarnie @JBuller @HODigital Using colour alone - status Which system has the best features? System 1 System 2 System 3 Accessibility Usability Security Features Cost
  24. 24. @katyarnie @JBuller @HODigital Colour deficiency simulations Typical Red blind Green blind Blue blind Blue cone monochromacy Monochromacy
  25. 25. @katyarnie @JBuller @HODigital But not all at once! words, position, symbols, size, font, Ways to differentiate as well as colour System 1 System 2 System 3 Accessibility X Bad Good + Medium Usability Medium Medium X Bad Security Good + Good + Good + Features Good + Medium X Bad Cost Good+ Good + Good +
  26. 26. @katyarnie @JBuller @HODigital Limited vis
  27. 27. @katyarnie @JBuller @HODigital Visual impairment and Physical impairment
  28. 28. @katyarnie @JBuller @HODigital Challenge While wearing simulation glasses and pads, use your phone/laptop to try: •Send a message using your organisation’s contact web page. •Put a book about Latvia in your Amazon basket
  29. 29. @katyarnie @JBuller @HODigital High Contrast
  30. 30. @katyarnie @JBuller @HODigital Large text cut off or obscured
  31. 31. @katyarnie @JBuller @HODigital Screenreader
  32. 32. @katyarnie @JBuller @HODigital Screenreader demo
  33. 33. @katyarnie @JBuller @HODigital wave.webaim.org 1. Go to wave.webaim.org 2. Download browser extension – (Chrome or Firefox) 3. Or use online version
  34. 34. @katyarnie @JBuller @HODigital W3C WAI WCAG
  35. 35. @katyarnie @JBuller @HODigital W3C WAI WCAG •World Wide Web Consortium •Web Accessibility Initiative •Web Content Accessibility Guidelines w3.org/TR/WCAG21/ •Authoring Technology Accessibility Guidelines - ATAG
  36. 36. @katyarnie @JBuller @HODigital WCAG Principles
  37. 37. @katyarnie @JBuller @HODigital WCAG Structure
  38. 38. @katyarnie @JBuller @HODigital Web Content Accessibility Guidelines 2.1 Levels Principles A Critical AA Essential AAA Essential for some 1. Percivable Guidelines Success criteria Sufficient and Advisory techniques 2. Operable 3. Understandable 4. Robust • Cross platform, testable criteria • Lots more good guidance exists but is not included • A system can meet the guidelines yet not be accessible
  39. 39. @katyarnie @JBuller @HODigital WCAG Checklists http://webaim.org/standards/w cag/checklist https://www.w3.org/WAI/test- evaluate/preliminary/
  40. 40. @katyarnie @JBuller @HODigital Heuristic review
  41. 41. @katyarnie @JBuller @HODigital Find the accessibility issues with this website
  42. 42. @katyarnie @JBuller @HODigital Heuristic review criteria 1. Easily readable and understandable text 2. Useful alternatives to non-text elements 3. Consistent and correctly tagged elements 4. Complete and efficient keyboard only usage 5. Sufficient colour contrast & non-colour cues
  43. 43. @katyarnie @JBuller @HODigital Heuristic review criteria 1. Easily readable and understandable text 2. Useful alternatives to non-text elements 3. Consistent and correctly tagged elements 4. Complete and efficient keyboard only usage 5. Sufficient colour contrast & non-colour cues
  44. 44. @katyarnie @JBuller @HODigital Easily readable and understandable text •Left aligned •Non-justified – ragged right side •Short line lengths •Jargon/acronyms avoided/explained •Concise wording
  45. 45. @katyarnie @JBuller @HODigital Avoid acronyms and jargon
  46. 46. @katyarnie @JBuller @HODigital Heuristic review criteria 1. Easily readable and understandable text 2. Useful alternatives to non-text elements 3. Consistent and correctly tagged elements 4. Complete and efficient keyboard only usage 5. Sufficient colour contrast & non-colour cues
  47. 47. @katyarnie @JBuller @HODigital Decorative images
  48. 48. @katyarnie @JBuller @HODigital Alternative text • If you were to describe it over the phone • Consider the impression such as diversity • Is the image necessary? • w3.org/WAI/tutorials/image s/decision-tree/
  49. 49. @katyarnie @JBuller @HODigital Graphs need tabular data too 0 1 2 3 4 5 6 Category 1 Category 2 Category 3 Category 4 Chart Title Series 1 Series 2 Series 3
  50. 50. @katyarnie @JBuller @HODigital Text for labels for icon
  51. 51. @katyarnie @JBuller @HODigital Button labels Send <button aria-label=”Go">Send</button>
  52. 52. @katyarnie @JBuller @HODigital Transcripts, captions, audio description
  53. 53. @katyarnie @JBuller @HODigital Heuristic review criteria 1. Easily readable and understandable text 2. Useful alternatives to non-text elements 3. Consistent and correctly tagged elements 4. Complete and efficient keyboard only usage 5. Sufficient colour contrast & non-colour cues
  54. 54. @katyarnie @JBuller @HODigital Consistent and correctly tagged elements • Each page has: • Title in browser tab • Home link • A single H1 heading • Lists, forms, tables, headings etc. are correctly tagged • Headings levels are sequential and not skipped • Links and headings are distinctive, informative out of context and meaning is front loaded
  55. 55. @katyarnie @JBuller @HODigital Page title (browser tab text)
  56. 56. @katyarnie @JBuller @HODigital Headings and table of contents • H1: • H2: “I thought it was brilliant” • H3: • H4: By car • H4: By train • H1: EuroIA 2019 • H2: Agenda • H2: Venue • H3: How to get there • H4: By car • H4: By train
  57. 57. @katyarnie @JBuller @HODigital Links without context
  58. 58. @katyarnie @JBuller @HODigital Heuristic review criteria 1. Easily readable and understandable text 2. Useful alternatives to non-text elements 3. Consistent and correctly tagged elements 4. Complete and efficient keyboard only usage 5. Sufficient colour contrast & non-colour cues
  59. 59. @katyarnie @JBuller @HODigital Complete and efficient keyboard only usage When using system without a pointing device: •Each page has a ‘Skip to main content’ link •All user journeys can be completed •Current focus is clearly shown throughout •Order is sensible and matches visual layout
  60. 60. @katyarnie @JBuller @HODigital Skip Links
  61. 61. @katyarnie @JBuller @HODigital Heuristic review criteria 1. Easily readable and understandable text 2. Useful alternatives to non-text elements 3. Consistent and correctly tagged elements 4. Complete and efficient keyboard only usage 5. Sufficient colour contrast & non-colour cues
  62. 62. @katyarnie @JBuller @HODigital Easily readable and understandable text Useful alternatives to non-text elements Consistent and correctly tagged elements Complete and efficient keyboard only usage Sufficient colour contrast & non-colour cues
  63. 63. @katyarnie @JBuller @HODigital Automated testing
  64. 64. @katyarnie @JBuller @HODigital wave.webaim.org 1. Go to wave.webaim.org 2. Download browser extension – (Chrome or Firefox) 3. Or use online version
  65. 65. @katyarnie @JBuller @HODigital WAVE demo - tab 1
  66. 66. @katyarnie @JBuller @HODigital WAVE demo - tab 2
  67. 67. @katyarnie @JBuller @HODigital WAVE demo – tab 4
  68. 68. @katyarnie @JBuller @HODigital WAVE demo – tab 4
  69. 69. @katyarnie @JBuller @HODigital Do your own heuristic review
  70. 70. @katyarnie @JBuller @HODigital Do your own heuristic review Test: https://record-a-goose-sighting.herokuapp.com/ With wave.webaim.org – on every page check: 1. Check tab access and focus on every elements 2. Test for effects of colour changes 3. use the WAVE browser extension or web page to check: 1. errors and warnings 2. heading structure 3. colour contrast 4. otherWCAG 2.1 issues Change colours Windows 10 Alt+Left Shift+PrtScr Mac: Ctrl+Alt+Cmd+8 Tabbing in Safari Preferences > Advanced > Press tab to highlight each item on a page". Answers: https://github.com/ministryofjustice/record-a- goose-sighting/blob/master/answers.md
  71. 71. @katyarnie @JBuller @HODigital Heuristic review criteria 1. Easily readable and understandable text 2. Useful alternatives to non-text elements 3. Consistent and correctly tagged elements 4. Complete and efficient keyboard only usage 5. Sufficient colour contrast & non-colour cues
  72. 72. @katyarnie @JBuller @HODigital Summary Empathy to understand experience of access needs Accessibility as part of design You are now better designers :)
  73. 73. @katyarnie @JBuller @HODigital Further resources
  74. 74. @katyarnie @JBuller @HODigital (Semi) automated accessibility checkers http://snook.ca/technical/colour_contrast/colour.html http://www.colorzilla.com http://www.paciellogroup.com/resources/contrastanalyser/ http://www.bbc.co.uk/guidelines/futuremedia/accessibility/colour_ contrast.shtml
  75. 75. @katyarnie @JBuller @HODigital A Web For Everyone A book by Sarah Horton and Whitney Queensbery, about designing accessible user experiences
  76. 76. @katyarnie @JBuller @HODigital github.com/UKHomeOffice/posters
  77. 77. @katyarnie @JBuller @HODigital Design accessible services posters github.com/UKHomeOffice/posters
  78. 78. @katyarnie @JBuller @HODigital Thank you
  79. 79. @katyarnie @JBuller @HODigital Work sheets
  80. 80. @katyarnie @JBuller @HODigital Permanent Temporary Situational 1 Permanent Temporary Situational Touch One arm Arm injury New parent See Blind cateract Distacted driver Physical /Touch Hear Speak
  81. 81. @katyarnie @JBuller @HODigital 1. Start 2. Do you like geese 3. What type of goose did you see 4. When did you see the goose 5. Check your answers 6. End Finding fouls answer sheet
  82. 82. @katyarnie @JBuller @HODigital Finding fouls instructions and tips Test: https://record-a-goose-sighting.herokuapp.com/ With wave.webaim.org web page or browser extension On every page: 1. Check tab access and focus on every elements 2. Test for effects of colour changes 3. UseWAVE to find 1. errors and warnings 2. heading structure 3. colour contrast 4. Look for other WCAG 2.1 issues Change colours Windows 10: Alt+Left Shift+PrtScr Mac: Ctrl+Alt+Cmd+8 Tabbing in Safari browser Preferences > Advanced > Press tab to highlight each item on a page - tick this option Answers: https://github.com/ministryofjustice/record- a-goose-sighting/blob/master/answers.md Focus using the keyboard Use Tab and Shift+Tab keys to move the focus forwards and backwards.
  83. 83. @katyarnie @JBuller @HODigital Text • Left aligned • Non-justified – ragged right side • Short line lengths • Appropriate self-explanatory headings • Jargon/acronyms avoided/explained • Concise wording • Links are distinctive, informative out of context and meaning is front loaded Non-text • Information in graphics, videos or sound has text alternative HTML • Each page has: • Title in browser tab • Home link • A single H1 heading • Lists, forms, tables, headings etc. are correctly tagged • Headings levels are sequential and not skipped Non-mouse usage • Each page has a ‘Skip to main content’ link • Current focus is clearly shown throughout • Order is sensible and matches visual layout • All user journeys can be completed Colours • Colours meet contrast guidelines • Colour is not solely relied on to signify: • Links and navigation • Status • Data ranges Heuristic review checks

×