a quick & dirty introduction to aria (2014)

26
Quick & dirty introduction to ARIA FEL, August 2014 LJWatson.co.uk @LeonieWatson 1

Upload: leonie-watson

Post on 15-Jan-2015

989 views

Category:

Technology


1 download

DESCRIPTION

An introduction to Accessible Rich Internet Applications (ARIA), using code examples to demonstrate ARIA roles, states and properties.

TRANSCRIPT

  • 1. Quick & dirty introduction toARIAFEL, August 2014LJWatson.co.uk @LeonieWatson 1

2. ACCESSIBLE RICH INTERNETAPPLICATIONS (ARIA)LJWatson.co.uk @LeonieWatson 2 3. W3C specification ARIA 1.0 (2014)http://www.w3.org/TR/wai-aria/ ARIA 1.1 (Working Draft)http://www.w3.org/TR/wai-aria-1.1/LJWatson.co.uk @LeonieWatson 3 4. Set of attributes Added to markup languages Communicate accessibility informationLJWatson.co.uk @LeonieWatson 4 5. WEB ACCESSIBILITY STACKLJWatson.co.uk @LeonieWatson 5 6. Web accessibility stack v1 Assistive technology Browser DOMLJWatson.co.uk @LeonieWatson 6 7. Web accessibility stack v2 Assistive technology Accessibility API Browser DOMLJWatson.co.uk @LeonieWatson 7 8. Web accessibility stack v3 Assistive technology ARIA Accessibility API Browser DOMLJWatson.co.uk @LeonieWatson 8 9. USING ARIALJWatson.co.uk @LeonieWatson 9 10. ARIA roles More than 30 ARIA roles Including alert, dialog, checkbox,menubar,progressbar, slider, tab and treeLJWatson.co.uk @LeonieWatson 10 11. Native HTML elements Most HTML elements have rolesWebsiteLJWatson.co.uk @LeonieWatson 11 12. Neutral HTML elements Some HTML elements are semantically neutral

LJWatson.co.uk @LeonieWatson 12 13. HTML4 structure

LJWatson.co.uk @LeonieWatson 13 14. HTML4 + ARIA landmark roles

LJWatson.co.uk @LeonieWatson 14 15. HTML5 structureLJWatson.co.uk @LeonieWatson 15 16. ARIA states 9 ARIA states. Including aria-busy, aria-checked, aria-disabled,aria-hidden, aria-invalid and aria-selectedLJWatson.co.uk @LeonieWatson 16 17. HTML5 details/summaryFavourite Pink FloydLJWatson.co.uk @LeonieWatson 17 18. HTML5 + ARIA rolesFavourite Pink FloydLJWatson.co.uk @LeonieWatson 18 19. HTML5 + ARIA states