A11Y*
Accessibility and UX/Design
*Accessibility is often abbreviated to A11y. Where the number 11 refers to the number of...
WHO?
1 in 5 people of working age have a disability
1in 6 struggle with literacy
1in 6 are unable to read, write or add up
WHO?
14.2 million
people in the UK are over 60 years old
11 million
people in the UK have a long-term illness, impairment or di...
CASE STUDIES
CASE STUDIES
Voice Recognition
Mayo Marriot uses Dragon
Naturally Speaking voice
recognition software (04:06)
http://www.b...
CASE STUDIES
Screen Reader
Robin Christopherson uses the
Jaws screenreader (04:32)
http://www.bbc.co.uk/accessibility/best...
CASE STUDIES
Voiceover on iPhone
Victor Tsaran shows you how
to navigate a web page using
VoiceOver on an iPhone
https://w...
DESIGN FOR
DIFFERENT
INPUT METHODS
• Mouse
• Keyboard
• Track ball/pad
• Touch/Gesture
• Switch
• Voice
• Sip and Puff
COMMON
PITFALLS
COMMON
PITFALLS
• Reliance on colour
• Active areas too small
• Undescriptive links
• Hidden labels
• Interactive elements...
DON’T RELY ON
COLOUR ALONE
Not very helpful Better!
COLOUR
TESTING IN
PHOTOSHOP
CHECK COLOUR
CONTRAST FOR AA
ACTIVE AREAS
Not very helpful Better!
LINKS
Not very helpful Better!
ALTERNATIVE
METHODS OF
NAVIGATION
Headings Links
SCREEN READER
FRIENDLY LINKS
Not very helpful Better!
16 -17 years
“Link one six one seven years end link”
www.londontoyli...
CLEAR LABELS
AND INPUTS
Not very helpful Better!
1.
2.
3.
1.
2.
3.
ERROR
PREVENTION
Not very helpful Better!
ON CHANGE &
AUTO UPDATE EVENTS
Not very helpful Better!
DRAG AND DROP
Not very helpful Better!
A simple “Add” button
makes this more accessible
REDUCE
COGNITIVE &
VISUAL LOAD
TYPOGRAPHY
Not very helpful Better!
MOVEMENT
Not very helpful Better!
REDUCE
COGNITIVE &
VISUAL LOAD
Keep it simple
• Efficient, clear, concise
• Avoid overloading the user with too much conte...
REDUCE
COGNITIVE &
VISUAL LOAD
1. Avoid duplication
2. Provide a clear hierarchy
3. Predictable
4. Keep users informed
5. ...
RESPONSIVE
CHALLENGES
RESPONSIVE
Challenges
• Touch interaction can be difficult
• Notifications appearing off
screen
• Long pages
• Permanence ...
SOMETIMES IT’S
JUST NOT POSSIBLE
Pragmatic (/pragˈmatɪk/)
“dealing with things sensibly
and realistically in a way that
is...
http://www.w3.org/WAI/WCAG20/quickref/
http://wave.webaim.org – a11y test
http://www.paciellogroup.com/resources/contrastA...
Upcoming SlideShare
Loading in …5
×

Mando UX and Design Accessibility Training

338 views
244 views

Published on

UX and Design Accessibility Training document for Mando Group

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
338
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Why A11Y?Good businessBetter SEOLegal RequirementIncreases the reach of your website
  • Visual Impairment: Myopia, Colour Blindness, Glaucoma, AgeHearing Impairment: Age, Deaf, TraumaMotor Impairment: RSI, Stroke, Parkinson’s Disease, Arthritis, Cerebral PalsyCognitive: Dyslexia, Autism, Perception, Memory
  • 2.7 million colour blind1.87 million sight loss224,000 Blind358,000 Registered blind14.2 million older people over 60 – trend UP1.4 million over 853 million diabetes96,500 Long-term disability who are blind11 million people limiting long term illness, impairment or disability
  • If you are using colour, then use a secondary method to distinguish the elements from each other.Avoid placing red and green together. Other poor matches are:Green and brownBlue and purpleGreen and blueLight green and yellowBlue and greyGreen and greyGreen and black
  • Hidden away in the View > Proof Setup menu and a few options to quickly test how your design will look for a few common forms of colour blindness.
  • Double AA requirement but all sites must be: distinguishable as standard so as a minimum you should aim to pass AA standards. There are numerous tools out there. A link to the tool used here can be found in the “Resources” section at the end of this document.
  • Its important to consider the size of interactive elements and leave space between items so they don’t get accidently selected. This consideration is not just for touch-based devices. It can also help users of assistive technology and users with poor motor controls.
  • Links can appear out of context so ensure the link text is descriptive. Linking to popular keywords helps your pages be indexed for relevant results and improves your SEO performance. Links should alsolook like links, and nothing else should. Users may get frustrated if they try to click on textual phrases or graphics that look like links but are not. They will also be frustrated if they have to move their mouse all over the page trying to discover links that do not look like links.Also don’t underline text that isn’t a link, as again this can cause confusion.
  • This is why “structure” is so important. Alternate methods of navigation in AT, can navigate by headings and linksThis why “link text” needs to make sense out of context. 100 “read more” links isn’t helpful at all. This makes restricting number of links on the page a really good thing to do.
  • Most users will understand individual text input areas, however some users may attempt to enter the entire number in the first box. If the label is placed inside the text input, and disappears once the user starts entering data can be problematic for some users, since they may not be able to recall the label and ultimately what data they need to enter.Informs users before the text input how you wish their data to be entered. If you require it in a particular format. E.g. dd/mm/yyyy
  • Early notification of errors and feedback proximity can be really useful
  • “On-change” menus can be problematic for screen readers and keyboard accessibility. This is because the change event is fired each time the user is moves through options. With this example, the page would continue to change language until they found the option they wanted. Care must be taken with any “on-change” event particularly on form elements. The user must be in control. No unexpected behaviour should take place.
  • This feature, collecting bookmarks for related itemsrequires a pointing device and dexterity. Instead, you can offer a keyboard-accessible alternative way to move items from one place to another.
  • Basic typography principles help users with visual or cognitive impairments improve the readability massively. AAA line length: Maximum of 80 characters per line, line spacing 1.5A good range for aim for is between 45-75 characters, with the optimum length being 66 including spaces. The minimum recommended font-size is 12pt, with a good reading size of around 16pt. Its also beneficial if the text is left-aligned.
  • Movement can be very distracting and can break concentration from information elsewhere on the page. Some may not be able to read quickly so will prefer elements to remain static. If movement is required then do not let it start automatically and provide options to control playback.
  • Example of cognitive overload!
  • Duplication: “click here” linksHierarchy: Organise page by headingsPredictable: Consistent mechanisms appear in same location, Informed users: Changes do not happen without user consent or notification. E.g. Errors, new browser windowsVerbosity: Efficient, clear, concise. Do not overloadChunk: Break content up into manageable pieces. No more than 4.
  • No surprisesInform user of changesNo duplication
  • Mando UX and Design Accessibility Training

    1. 1. A11Y* Accessibility and UX/Design *Accessibility is often abbreviated to A11y. Where the number 11 refers to the number of letters omitted.
    2. 2. WHO?
    3. 3. 1 in 5 people of working age have a disability 1in 6 struggle with literacy 1in 6 are unable to read, write or add up WHO?
    4. 4. 14.2 million people in the UK are over 60 years old 11 million people in the UK have a long-term illness, impairment or disability Over 10 million people in the UK have some form of hearing loss 2.7 million people in the UK are colour blind WHO?
    5. 5. CASE STUDIES
    6. 6. CASE STUDIES Voice Recognition Mayo Marriot uses Dragon Naturally Speaking voice recognition software (04:06) http://www.bbc.co.uk/accessibility/best_practice/case_studies/mayo.shtml Sip and Puff Darren Carr uses a head mouse and an on-screen keyboard (04:41) http://www.bbc.co.uk/accessibility/best_practice/case_studies/darren.shtml
    7. 7. CASE STUDIES Screen Reader Robin Christopherson uses the Jaws screenreader (04:32) http://www.bbc.co.uk/accessibility/best_practice/case_studies/robin.shtml Screen Magnification Geoff Adams-Spink uses ZoomText software (04:19) http://www.bbc.co.uk/accessibility/best_practice/case_studies/geoff.shtml
    8. 8. CASE STUDIES Voiceover on iPhone Victor Tsaran shows you how to navigate a web page using VoiceOver on an iPhone https://www.youtube.com/wat ch?v=t60voPIY5xY Note: Android equivalent is TalkBack, Windows Phone has “ease of access” options which include a screen reader.
    9. 9. DESIGN FOR DIFFERENT INPUT METHODS • Mouse • Keyboard • Track ball/pad • Touch/Gesture • Switch • Voice • Sip and Puff
    10. 10. COMMON PITFALLS
    11. 11. COMMON PITFALLS • Reliance on colour • Active areas too small • Undescriptive links • Hidden labels • Interactive elements aren’t keyboard friendly • Interactive elements cannot be visually distinguished from non-actionable ones
    12. 12. DON’T RELY ON COLOUR ALONE Not very helpful Better!
    13. 13. COLOUR TESTING IN PHOTOSHOP
    14. 14. CHECK COLOUR CONTRAST FOR AA
    15. 15. ACTIVE AREAS Not very helpful Better!
    16. 16. LINKS Not very helpful Better!
    17. 17. ALTERNATIVE METHODS OF NAVIGATION Headings Links
    18. 18. SCREEN READER FRIENDLY LINKS Not very helpful Better! 16 -17 years “Link one six one seven years end link” www.londontoylibrary.co.uk “Link Double-U, Double-U, Double-U, Dot, El- Oh-En-Dee-Oh-En…” 16 to 17 years “Link sixteen to seventeen years end link” London Toy Library “Link London Toy Library end link
    19. 19. CLEAR LABELS AND INPUTS Not very helpful Better! 1. 2. 3. 1. 2. 3.
    20. 20. ERROR PREVENTION Not very helpful Better!
    21. 21. ON CHANGE & AUTO UPDATE EVENTS Not very helpful Better!
    22. 22. DRAG AND DROP Not very helpful Better! A simple “Add” button makes this more accessible
    23. 23. REDUCE COGNITIVE & VISUAL LOAD
    24. 24. TYPOGRAPHY Not very helpful Better!
    25. 25. MOVEMENT Not very helpful Better!
    26. 26. REDUCE COGNITIVE & VISUAL LOAD Keep it simple • Efficient, clear, concise • Avoid overloading the user with too much content. • Utilise progressive disclosure to reveal more as needed • No more than 4 steps to a goal www.lingscars.com
    27. 27. REDUCE COGNITIVE & VISUAL LOAD 1. Avoid duplication 2. Provide a clear hierarchy 3. Predictable 4. Keep users informed 5. Avoid verbosity 6. Chunk/sequence steps (not too many steps!)
    28. 28. RESPONSIVE CHALLENGES
    29. 29. RESPONSIVE Challenges • Touch interaction can be difficult • Notifications appearing off screen • Long pages • Permanence of place – as resolutions change, elements may move to an unfamiliar place Benefits • Auto adjust to users device • Designing for mobile focuses on key features and accessibility. • Sites also remember preferences • Having less content can be easier to understand
    30. 30. SOMETIMES IT’S JUST NOT POSSIBLE Pragmatic (/pragˈmatɪk/) “dealing with things sensibly and realistically in a way that is based on practical rather than theoretical considerations”
    31. 31. http://www.w3.org/WAI/WCAG20/quickref/ http://wave.webaim.org – a11y test http://www.paciellogroup.com/resources/contrastAnalyser http://www.nvaccess.org/ - free NVDA screen reader http://www.abilitynet.org.uk/factsheets RESOURCES

    ×