SLIDE 1
U S E R E X P E R I E N C E
ACCESSIBILITY
Is it another checkbox to be ticked? By Ann Mwangi
CROSS FUNCTIONAL REQUIREMENTS
2
ACCESSIBILITY Is it another checkbox to be ticked? By Ann Mwangi - - PowerPoint PPT Presentation
ACCESSIBILITY Is it another checkbox to be ticked? By Ann Mwangi - - PowerPoint PPT Presentation
U S E R E X P E R I E N C E ACCESSIBILITY Is it another checkbox to be ticked? By Ann Mwangi CROSS FUNCTIONAL REQUIREMENTS 2 WHY ACCESSIBILITY Over 4 million people in Australia have some form of disability. That's 1 in 5 people. (ABS)
SLIDE 2
SLIDE 3
WHY ACCESSIBILITY “Over 4 million people in Australia have some form of disability. That's 1 in 5 people.” (ABS) ”A disability is any condition that restricts a person's mental, sensory or mobility functions. It may be caused by accident, trauma, genetics or disease. A disability may be temporary or permanent, total or partial, lifelong or acquired, visible or invisible.”(Australian Network on Disability)
3
SLIDE 4
WHY SHOULD I CARE? “Everyone using your website/application deserves a similar experience”
4
SLIDE 5
MAKING WEBSITE ACCESSIBLE
5
SLIDE 6
WORKING WITH THE KEYBOARD
6
SLIDE 7
USING CORRECT ELEMENTS Instead of <span> and <div> use <button> and <a>
7
SLIDE 8
USING ARIA TAGS Accessible Rich Internet Applications
8
SLIDE 9
SEMANTIC MARK-UP
Elements with a meaning
9
SLIDE 10
EXAMPLES Semantic tags <i> <li> <p> Non-Semantic tags <span> <div>
10
SLIDE 11
USING FORM ELEMENT To enable enter key
11
SLIDE 12
USING FORM ELEMENT To enable enter key
12
SLIDE 13
CONTRAST
13
SLIDE 14
CONTRAST RATIO Between the background colour/image and the overlaying text WCAG 2.0 levels: A, AA, AAA
14
SLIDE 15
SCREEN READERS
15
SLIDE 16
LINKS That don’t make sense
16
SLIDE 17
IMAGES Missing or improper descriptions
17
SLIDE 18
TESTING FOR ACCESSIBILITY
18
SLIDE 19
TEST ON SCREEN READERS NVDA-windows users Voice over-mac users and IOS Talk back-Android devices
19
SLIDE 20
HTML VALIDATOR Tools: Html code sniffer Browser plug-in: chrome and firefox have plug-ins
20
SLIDE 21
KEYBOARD TESTING
21
SLIDE 22
mwangia@thoughtworks.com @AnnWMwangi