The document discusses the importance of accessibility in product design and development. It defines accessibility as ensuring that products can be used by all people, regardless of ability or circumstance, and notes that approximately 15% of people globally have some form of disability. The document provides best practices and guidelines for making products accessible through proper use of technologies like ARIA attributes, alt text, and WCAG standards to ensure usability for users of assistive technologies.

1. ACCESSIBILITY
30t h April 2014

2. ME

3. 3
WHAT DOES
ACCESSIBILITY MEAN?

4. 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

5. 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

6. FOR THE CLIENT
A bigger audience means more revenue
Stronger brand among customers
More brand exposure
More customers
Reputation of a reliable brand

7. 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. 8
WHY DOES
ACCESSIBILITY MATTER?

9. 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:

10. 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

11. REMOVE BARRIERS IN TECHNOLOGY

12. HOW TO MAKE
PRODUCTS ACCESSIBLE

13. APPROACH

14. 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

15. IMPLEMENTATION

16. 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

17. 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

18. USERS

19. 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?

20. TESTING

21. 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?

22. 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?

23. 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

30. ACCESSIBLE THINGYS

31. 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

32. THANK YOU C:
@EChesters

33. 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/