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/