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) ”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

WHY SHOULD I CARE? “Everyone using your website/application deserves a similar experience” 4

MAKING WEBSITE ACCESSIBLE 5

WORKING WITH THE KEYBOARD 6

USING CORRECT ELEMENTS Instead of <span> and <div> use <button> and <a> 7

USING ARIA TAGS Accessible Rich Internet Applications 8

SEMANTIC MARK-UP Elements with a meaning 9

EXAMPLES Semantic tags <i> <li> <p> Non-Semantic tags <span> <div> 10

USING FORM ELEMENT To enable enter key 11

USING FORM ELEMENT To enable enter key 12

CONTRAST 13

CONTRAST RATIO Between the background colour/image and the overlaying text WCAG 2.0 levels: A, AA, AAA 14

SCREEN READERS 15

LINKS That don’t make sense 16

IMAGES Missing or improper descriptions 17

TESTING FOR ACCESSIBILITY 18

TEST ON SCREEN READERS NVDA -windows users Voice over -mac users and IOS Talk back -Android devices 19

HTML VALIDATOR Tools : Html code sniffer Browser plug-in : chrome and firefox have plug-ins 20

KEYBOARD TESTING 21

THANK YOU mwangia@thoughtworks.com @AnnWMwangi