Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
@katyarnie @JBuller @HODigital
Inclusive design means better
design for all
@katyarnie @JBuller @HODigital
@katyarnie @JBuller @HODigital
Katy Arnold
Deputy Director, Design and Research
@katyarnie @JBuller @HODigital
James Buller
Head of Accessibility and Inclusion
@katyarnie @JBuller @HODigital
What we’ll do today
Assumptions:
You’re here because you care and know why this is importan...
@katyarnie @JBuller @HODigital
Please ask questions.
This is a safe place.
@katyarnie @JBuller @HODigital
Disability
@katyarnie @JBuller @HODigital
Types of disability
Visible/Hidden
• Sensory
• sight, hearing, touch...
• Physical
• limbs,...
@katyarnie @JBuller @HODigital
70m 17.6%
European adults have a disability
35.6% of people over 65
8% of employed people
S...
@katyarnie @JBuller @HODigital
Reframing disability
Disability
is
mismatched
human
interaction
Disability
is not
personal
...
@katyarnie @JBuller @HODigital
Usability and Accessibility
Usability
makes it
easier
Accessibility
makes it
possible
@katyarnie @JBuller @HODigital
Access Needs
@katyarnie @JBuller @HODigital
All kinds of people
We are all temporarily
not disabled
@katyarnie @JBuller @HODigital
Permanent Temporary Situational 1
@katyarnie @JBuller @HODigital
Permanent Temporary Situational
@katyarnie @JBuller @HODigital
Experiencing access needs
@katyarnie @JBuller @HODigital
Lip reading
@katyarnie @JBuller @HODigital
@katyarnie @JBuller @HODigital
@katyarnie @JBuller @HODigital
Dyslexia
@katyarnie @JBuller @HODigital
Dyslexia simulation font
•Letters have 40% of their lines removed
to make it very hard to w...
@katyarnie @JBuller @HODigital
Colour vision deficiency
@katyarnie @JBuller @HODigital
Using colour alone - status
Which system has the best features?
System 1 System 2 System 3
...
@katyarnie @JBuller @HODigital
Colour deficiency simulations
Typical Red blind Green blind
Blue blind
Blue cone
monochroma...
@katyarnie @JBuller @HODigital
But not all at once!
words, position, symbols, size, font,
Ways to differentiate as well as...
@katyarnie @JBuller @HODigital
Limited vis
@katyarnie @JBuller @HODigital
Visual impairment and
Physical impairment
@katyarnie @JBuller @HODigital
Challenge
While wearing simulation glasses and
pads, use your phone/laptop to try:
•Send a ...
@katyarnie @JBuller @HODigital
High Contrast
@katyarnie @JBuller @HODigital
Large text cut off or obscured
@katyarnie @JBuller @HODigital
Screenreader
@katyarnie @JBuller @HODigital
Screenreader demo
@katyarnie @JBuller @HODigital
wave.webaim.org
1. Go to wave.webaim.org
2. Download browser extension – (Chrome or Firefox...
@katyarnie @JBuller @HODigital
W3C WAI WCAG
@katyarnie @JBuller @HODigital
W3C WAI WCAG
•World Wide Web Consortium
•Web Accessibility Initiative
•Web Content Accessib...
@katyarnie @JBuller @HODigital
WCAG Principles
@katyarnie @JBuller @HODigital
WCAG Structure
@katyarnie @JBuller @HODigital
Web Content Accessibility Guidelines 2.1
Levels
Principles
A
Critical
AA
Essential
AAA
Esse...
@katyarnie @JBuller @HODigital
WCAG Checklists
http://webaim.org/standards/w
cag/checklist
https://www.w3.org/WAI/test-
ev...
@katyarnie @JBuller @HODigital
Heuristic review
@katyarnie @JBuller @HODigital
Find the accessibility issues with this website
@katyarnie @JBuller @HODigital
Heuristic review criteria
1. Easily readable and understandable text
2. Useful alternatives...
@katyarnie @JBuller @HODigital
Heuristic review criteria
1. Easily readable and understandable text
2. Useful alternatives...
@katyarnie @JBuller @HODigital
Easily readable and understandable text
•Left aligned
•Non-justified – ragged right side
•S...
@katyarnie @JBuller @HODigital
Avoid acronyms
and jargon
@katyarnie @JBuller @HODigital
Heuristic review criteria
1. Easily readable and understandable text
2. Useful alternatives...
@katyarnie @JBuller @HODigital
Decorative images
@katyarnie @JBuller @HODigital
Alternative text
• If you were to describe it
over the phone
• Consider the impression
such...
@katyarnie @JBuller @HODigital
Graphs need tabular data too
0
1
2
3
4
5
6
Category 1 Category 2 Category 3 Category 4
Char...
@katyarnie @JBuller @HODigital
Text for labels for icon
@katyarnie @JBuller @HODigital
Button labels
Send <button aria-label=”Go">Send</button>
@katyarnie @JBuller @HODigital
Transcripts, captions, audio description
@katyarnie @JBuller @HODigital
Heuristic review criteria
1. Easily readable and understandable text
2. Useful alternatives...
@katyarnie @JBuller @HODigital
Consistent and correctly tagged elements
• Each page has:
• Title in browser tab
• Home lin...
@katyarnie @JBuller @HODigital
Page title (browser tab text)
@katyarnie @JBuller @HODigital
Headings and table of contents
• H1:
• H2: “I thought it
was brilliant”
• H3:
• H4: By car
...
@katyarnie @JBuller @HODigital
Links without context
@katyarnie @JBuller @HODigital
Heuristic review criteria
1. Easily readable and understandable text
2. Useful alternatives...
@katyarnie @JBuller @HODigital
Complete and efficient keyboard only usage
When using system without a pointing
device:
•Ea...
@katyarnie @JBuller @HODigital
Skip Links
@katyarnie @JBuller @HODigital
Heuristic review criteria
1. Easily readable and understandable text
2. Useful alternatives...
@katyarnie @JBuller @HODigital
Easily readable and understandable text
Useful alternatives to non-text elements
Consistent...
@katyarnie @JBuller @HODigital
Automated testing
@katyarnie @JBuller @HODigital
wave.webaim.org
1. Go to wave.webaim.org
2. Download browser extension – (Chrome or Firefox...
@katyarnie @JBuller @HODigital
WAVE demo - tab 1
@katyarnie @JBuller @HODigital
WAVE demo - tab 2
@katyarnie @JBuller @HODigital
WAVE demo – tab 4
@katyarnie @JBuller @HODigital
WAVE demo – tab 4
@katyarnie @JBuller @HODigital
Do your own heuristic review
@katyarnie @JBuller @HODigital
Do your own heuristic review
Test: https://record-a-goose-sighting.herokuapp.com/
With wave...
@katyarnie @JBuller @HODigital
Heuristic review criteria
1. Easily readable and understandable text
2. Useful alternatives...
@katyarnie @JBuller @HODigital
Summary
Empathy to understand experience of
access needs
Accessibility as part of design
Yo...
@katyarnie @JBuller @HODigital
Further resources
@katyarnie @JBuller @HODigital
(Semi) automated accessibility checkers
http://snook.ca/technical/colour_contrast/colour.ht...
@katyarnie @JBuller @HODigital
A Web For Everyone
A book by Sarah Horton
and Whitney Queensbery,
about designing accessibl...
@katyarnie @JBuller @HODigital
github.com/UKHomeOffice/posters
@katyarnie @JBuller @HODigital
Design accessible services posters
github.com/UKHomeOffice/posters
@katyarnie @JBuller @HODigital
Thank you
@katyarnie @JBuller @HODigital
Work sheets
@katyarnie @JBuller @HODigital
Permanent Temporary Situational 1
Permanent Temporary Situational
Touch One arm Arm injury ...
@katyarnie @JBuller @HODigital
1. Start
2. Do you like geese
3. What type of goose did you see
4. When did you see the goo...
@katyarnie @JBuller @HODigital
Finding fouls instructions and tips
Test: https://record-a-goose-sighting.herokuapp.com/
Wi...
@katyarnie @JBuller @HODigital
Text
• Left aligned
• Non-justified – ragged right side
• Short line lengths
• Appropriate ...
Próxima SlideShare
Cargando en…5
×
Próxima SlideShare
What to Upload to SlideShare
Siguiente
Descargar para leer sin conexión y ver en pantalla completa.

2

Compartir

Descargar para leer sin conexión

Euro IA 2019 - Inclusive Design means better design for all

Descargar para leer sin conexión

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

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
  • thomsenmark

    Oct. 1, 2019
  • audreefletcher

    Sep. 26, 2019

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

Vistas

Total de vistas

276

En Slideshare

0

De embebidos

0

Número de embebidos

5

Acciones

Descargas

8

Compartidos

0

Comentarios

0

Me gusta

2

×