Upload
city-interaction-lab
View
111
Download
2
Tags:
Embed Size (px)
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.
Citation preview
Accessibility PrimerJoe Chidzik, AbilityNet
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
What do we mean by accessibility?
“Web accessibility means that people
with disabilities can perceive,
understand, navigate, interact with, and
contribute to, the web.“
Why accessibility is important
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
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
Legal - case study: Target outcome
$10,000,000Cost to Target USA from an inaccessible website
Financial
$4 trillion \ $4,000,000,000Global disposable income of disabled people
More reasons?
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
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.
How disabilities can affect computer use
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
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
Vision: colour blindness
Colour blindness
Tube map
Tube map: simulated colour blindness
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
Low vision – text zoom
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
Screenshot of JAWS headings
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)
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
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
Incorporating accessibility into your workflowDesigning, Developing and Planning Projects
PlanningHow to incorporate accessibility into projects from the outset
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
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
For developers
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
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
Progressive enhancement
For designers
Accessibility needn't mean compromise
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
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
Consistent theme
Clearly defined structure: layout
Practical examplesSimple checks you can make
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?
VoiceOver
Free – built into iOS devices
Use Explore By Touch - trace your finger around the screen to hear content and components read out
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
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)
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