ACCESSIBILITY 30 th April 2014
Dec 21, 2014
ACCESSIBILITY 30 t h Apr i l 2014
ME
3
WHAT DOES ACCESSIBILITY MEAN?
ACCESS
Low bandwidth
Low resources & limited time
Multiple devices
Fluid
Independent of users’
tools
Anytime - Anywhere
DISABILITY
Mental & physical impairments
Screen-readers
Magnifiers
Specific functionality
Tailored usability
Readability
Independence
CULTURALLY
MEANINGS
Interfaces that fit the language
Readability
Internationalisation
Validations
Different attitudes &
focuses
Understanding customs
FOR USERS
They can access all of your resources and information Access at anytime and anywhere They can use your system independently Great usability for everyone Reliable product = reliable brand/company Independence and empowerment
FOR THE CLIENT
A bigger audience means more revenue Stronger brand among customers More brand exposure More customers Reputation of a reliable brand
FOR YOU
More people can access your information Have a bigger impact on a wider audience More exposure (locally and globally) Greater understanding = better product
8
WHY DOES ACCESSIBILITY MATTER?
WHAT THE STATISTICS SHOW
http://www.who.int/mediacentre/factsheets/fs352/en/ http://odi.dwp.gov.uk/disability-statistics-and-research/disability-facts-and-figures.php#gd http://wfdeaf.org/faq https://help.rnib.org.uk/help/newly-diagnosed-registration/registering-sight-loss/statistics
15% people suffer with a disability (~ 1 billion people)
285 million people are visually impaired ~70 million people audio impaired
GLOBALLY:
11 million+ have a long-term illness or a disability ~2 million people are visually impaired ~9 million people are audio impaired
UK:
BARRIERS SUCK
barriers defeat the point of technology!
LOW BANDWITDH : Our own offices can access content
DEAF : Everyone can see as much as they need to hear
BLIND : screen-readers allow digital navigation removing hindrances
ADHD : Don't get overwhelmed by auto-playing audio content
PHOTOSENSITIVE EPILEPSY : Content does not cause an epileptic fit
REMOVE BARRIERS IN TECHNOLOGY
HOW TO MAKE PRODUCTS ACCESSIBLE
APPROACH
USE AN EARLIER APPROACH
TEST COLOURS: > Meanings for target audience > Contrast levels > Use tools for different colour blindness
STORIES & FUNCTIONALITY > Inverse functional requirements
OPINIONS > Known for high cost – low benefit > Demonstrate value earlier stage
IMPLEMENTATION
TECHNICAL PRACTICES
ALT TAGS
LABELS
General: requires adequate description of what someone is missing Informational: describes image like a graph, measurements, factors
(SUMMARY ATTR for tables) Decorative: requires an empty tag to show that it’s meant to be ignored
Informative: What it is? What is needed? End consequence? IDs: Unique for a robust system Structure: Keep headings structurally logical to define the page
CSS Fake Uppercase: Prevents screen-reader errors of acronyms Sensory characteristics: Add more than 1 styling to
interactive components Links: Move lines denoting links to underneath g’s and y’s
WHAT ARE THESE?
ARIATAGS
LABELS
General: requires adequate description of what someone is missing Informational: describes image like a graph, measurements, factors
(SUMMARY ATTR for tables) Decorative: requires an empty tag to show that it’s meant to be ignored
Informative: What it is? What is needed? End consequence? IDs: Unique for a robust system Structure: Keep headings structurally logical to define the page
CSS Fake Uppercase: Prevents screen-reader errors of acronyms Sensory characteristics: Add more than 1 styling to
interactive components Links: Move lines denoting links to underneath g’s and y’s
USERS
USERS
YOUR SERVICE - What does it mean to them? INDEPENDENCE? - Are they able to use your service independently? LOGICAL TASKS – Could something be simplified? Are they struggling? PREDICTABLE – Is it clear what is expected? CONSISTENCY - Does it work like they’re used to? E.g. JAWS shortcuts FLEXIBLE? – Can default settings be overridden to suit their needs?
TESTING
USER TESTING
DRASTIC CHANGES - Is what you’re doing worth it? LABEL ALTERNATIVES - Are they descriptive enough of what they do? CONTENT (& HIDDEN) - Is it repeated? Can it be skipped over? INPUT COMPONENTS? - Do users know what is required; action, input? TOOLS - Does it work with JAWS shortcuts? VoiceOver? MAGic? Others?
How do they feel using your product?
MANUAL TESTING
HTML STRUCTURE – Does it read logically? MEDIA CONTENT – Does it automatically play?
– When muted, can you still grasp information from audio content?
SCREEN-READERS – Do components have a descriptive label?
– Are images adequately described in the right context?
NAVIGATION – Can you use mouse only?
– Keyboard only? LABEL CHANGES – Will labels fit components with language changes? CONTRAST – Is everything visible, and shows what it does?
-High contrast? RENDERING – Does it work on most popular platforms?
TESTING TOOLS
CODE SNIFFERS - Find bugs in HTML & CSS 1. http://squizlabs.github.io/HTML_CodeSniffer/ 2. http://www.pa11y.org COLOUR CONTRAST – High contrast & different colour blindness 1. http://www.color-blindness.com/coblis-color-blindness-simulator/ SOFTWARE – 1. Fangs, Firefox plugin for screen-reader scripts 2. VoiceOver, default screen reader Mac OS X 3. Lynx, visually impaired friendly browser
ACCESSIBLE THINGYS
1. Accessible Rich Internet Applications
2. Used by assistive technologies
3. Provides useful descriptions
a. Completion shown in progress bars b. Form input explanations c. State of components
i. Hover ii. Expanded iii. Collapsed
4. WAI-ARIA best practices 1. Steps on the best way to be accessible
1. Has three compliancy levels a. A, AA, AAA (AAA = most accessible),
2. Set of web standards by w3c
3. Most websites use these as guidelines a. Good for keeping sites consistent with
accessibility
4. Most laws use these as rules to achieve accessibility
ARIA ATTRIBUTES WCAG 2.0 STANDARDS
MEANINGS
THANK YOU C: @EChesters
RESOURCES
McDonald’s’ different cultural focuses – http://blog.usabilla.com/designing-for-a-cross-cultural-user-experience-part1/
Different meanings in cultures – http://importexport.about.com/od/MarketingAndSellingGlobally/a/Designing-For-Foreign-Cultures.htm Going blind for a week –
http://blog.silktide.com/2013/01/things-learned-pretending-to-be-blind-for-a-week/ 24 Accessible CSS Practices –
http://24ways.org/2007/css-for-accessibility/