hcid2014: accessibility primer. joe chidzik, abilitynet
DESCRIPTION
The aim of this presentation is to introduce the concept of accessibility, and will cover what is meant by being accessible, why it’s important, who is affected, and how you can incorporate accessibility into your design, development and planning. There will be particular focus on the practical aspects of testing for accessibility.TRANSCRIPT
![Page 1: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/1.jpg)
Accessibility PrimerJoe Chidzik, AbilityNet
![Page 2: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/2.jpg)
Whistle stop tour covering
What we mean by accessibility
Why accessibility is important
How disabled people use computers
Incorporating accessibility into your work
Designers
Developers
Planning
Testing for accessibility
![Page 3: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/3.jpg)
What do we mean by accessibility?
![Page 4: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/4.jpg)
“Web accessibility means that people
with disabilities can perceive,
understand, navigate, interact with, and
contribute to, the web.“
![Page 5: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/5.jpg)
![Page 6: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/6.jpg)
Why accessibility is important
![Page 7: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/7.jpg)
Ethical – it's the right thing to do
1 in 8 people have a disability in the UK – around 8 million people
Disability prevalence increases with age:
6% children
16% adults of working age
45% of adults over state pension age
![Page 8: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/8.jpg)
Legal - case study: Target
May 2005: NFB notified Target of accessibility issues on their site
Lack of alt text
Missing headings
Customer unable to purchase without using a mouse
![Page 9: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/9.jpg)
Legal - case study: Target outcome
$10,000,000Cost to Target USA from an inaccessible website
![Page 10: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/10.jpg)
Financial
$4 trillion \ $4,000,000,000Global disposable income of disabled people
![Page 11: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/11.jpg)
More reasons?
![Page 12: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/12.jpg)
An accessible website…
Demonstrates corporate social responsibility
Is usable by more people, on more devices
Garners loyalty, particularly from disabled people
Is more easily found via search engines
Is easier to use for all users
![Page 13: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/13.jpg)
Good SEO = Good accessibility
Search engines cannot understand the content of an image, but they do benefit from alt text
Search engines cannot understand audio content, but they do benefit from transcripts
Search engines need content to be marked up semantically to infer relationships and relevance
All of this not only benefits both disabled users and makes your site easier to find, it also makes the site easier to use for everyone.
![Page 14: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/14.jpg)
How disabilities can affect computer use
![Page 15: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/15.jpg)
Disability is an analogue spectrum, but useful to consider categories
Vision – no useful vision, colour blindness, tunnel
vision
Hearing – both deaf and hard of hearing
Mobility – affect keyboard/mouse use, also
touchscreen interaction
Cognitive – Dyslexia, learning difficulties,
attention disorders
![Page 16: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/16.jpg)
Vision
Colour blindness – difficulty
distinguishing red\green. 1 in 14 adult
males affected
Low vision – problems reading small text,
making out fine detail or low contrast
No useful vision – cannot rely on vision
for access to content
![Page 17: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/17.jpg)
Vision: colour blindness
![Page 18: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/18.jpg)
Colour blindness
![Page 19: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/19.jpg)
Tube map
![Page 20: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/20.jpg)
Tube map: simulated colour blindness
![Page 21: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/21.jpg)
Low vision
Typically can use built in browser zoom and O\S colour features to make content more readable
Rely on sites being able to be scaled properly
![Page 22: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/22.jpg)
Low vision – text zoom
![Page 23: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/23.jpg)
No useful vision
Rely on pages being well structured
Non-text content needs text-alternatives provided
Visual cues, such as a colour, need text counterpart
Keyboard access to all functionality
![Page 24: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/24.jpg)
Screenshot of JAWS headings
![Page 25: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/25.jpg)
Hearing
BSL users may have English (or their locale) as a secondary language
Multimedia e.g. videos, typical cause of difficulties – require captions
Do not use audio as the only means of conveying information e.g. error beep
Ensure sufficient ‘contrast’ between foreground and background audio (dialog over background noises)
![Page 26: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/26.jpg)
Mobility
Potential difficulty using the mouse and clicking on small targets e.g. checkboxes
Likely to use keyboard to navigate
Can have difficulties interacting with sensitive fly out menus
May use voice recognition – say what they see
![Page 27: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/27.jpg)
Cognitive
Includes dyslexia, memory impairments and attention deficit disorders
Often difficulties with literacy\reading, especially with jargon heavy content
"wall of text" content can be difficult to read for any users, particularly those with a cognitive difficulty
Benefits from simple language, icons as navigational aids, consistent & clear structure
Simple, clear instructions – form examples
![Page 28: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/28.jpg)
Incorporating accessibility into your workflowDesigning, Developing and Planning Projects
![Page 29: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/29.jpg)
PlanningHow to incorporate accessibility into projects from the outset
![Page 30: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/30.jpg)
Planning - stages
Initial accessibility work can begin in design stage
As designs progressed to functional pages, conduct disabled\user testing
Expert AT testing can be done throughout project
Final review once project is delivered
![Page 31: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/31.jpg)
Planning
Allocate one key member of staff to be goto person for accessibility of a project – simplifies communication with 3rd parties \ inhouse staff
Consider training designers\developers in basic accessibility testing\requirements
If commissioning 3rd party products, invest in BS8878; this standards document details how to ensure suppliers have accessibility in mind
![Page 32: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/32.jpg)
For developers
![Page 33: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/33.jpg)
Good coding practise
Using semantic, valid markup
Be aware of, and use, the Web Content Accessibility Guidelines (WCAG)
For rich and dynamic content, look into ARIA (Accessible Rich Internet Applications)
http://w3.org/wai For all your guideline needs
Build using a progressive enhancement methodology
![Page 34: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/34.jpg)
Standards
Governed by the W3C
Content covered by WCAG: Web Content Accessibility Standards
Standards exist for user agents and authoring tools too (UAAG and ATAG)
Mobile content covered by MWBP: Mobile Web Best Practises
w3.org/wai
![Page 35: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/35.jpg)
Progressive enhancement
![Page 36: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/36.jpg)
For designers
![Page 37: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/37.jpg)
Accessibility needn't mean compromise
![Page 38: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/38.jpg)
Design
Colour palette – ensuring sufficient contrast for text
Consistency of appearance throughout site. A visual theme helps users with cognitive difficulties
Clear layout and structure – use white space to delineate sections
![Page 39: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/39.jpg)
Contrast: checking
Specific guidance exists for websites; can also be used for applications
Contrast ratio between text and background:
4.5:1 for standard text
3:1 for large text
Tools exist to check contrast:
Contrast analyser application
Web based tools; input colour hex values
![Page 40: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/40.jpg)
Consistent theme
![Page 41: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/41.jpg)
Clearly defined structure: layout
![Page 42: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/42.jpg)
Practical examplesSimple checks you can make
![Page 43: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/43.jpg)
NVDA
If confident, try out the free and open source NVDA screenreader
Are controls announced as the correct type, and labelled correctly?
What about images?
![Page 44: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/44.jpg)
VoiceOver
Free – built into iOS devices
Use Explore By Touch - trace your finger around the screen to hear content and components read out
![Page 45: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/45.jpg)
Summary – what and why
Accessibility
The practise of making content so that disabled users can perceive, operate, understand, and above all, contribute
Reasons
Ethical – right thing to do
Legal – monetary\reputation cost
Commercial\Financial – increased target audience, loyalty
![Page 46: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/46.jpg)
Summary - incorporating
Planners
Accessibility from the outset
Named individual
Designers
Do not rely on users being able to perceive colour
Visible structure – white space, headings
Developers
Be aware of guidelines
Progressive enhancement
Keyboard accessibility!
Screenreader testing (mobile and desktop)
![Page 47: HCID2014: Accessibility primer. Joe Chidzik, Abilitynet](https://reader035.vdocuments.net/reader035/viewer/2022062511/54c7b77e4a795995658b4658/html5/thumbnails/47.jpg)
Summary - testing
Keyboard
Visible focus highlighter
Skip links
All content keyboard accessible (menus, flash players)
Visual
Colour – good contrast and not only method
Animations
Zooming in, ensure page is still usable
Automated tools – quick checks
WebAIM WAVE
Cynthia Says
Disabled user testing
Source from employees for initial testing
Encourage feedback via an accessibility page