View
1.116
Download
4
Embed Size (px)
DESCRIPTION
Use this one simple trick to increase UX for users of assistive technology.
Citation preview
Joseph Karr O’Connor @AccessibleJoe
Tautology Recapitulates Ontogeny
Accessible Rich Internet Applications (ARIA) and HTML5
Joseph Karr O’Connor
Accessibility Consultant Since 1999
Invited Expet W3C HTML5 Accessibility Taskforce
WordPress Accessibility Group
Cities: Making Free Accessible WordPress Themes
accessiblejoe.com/cities/
Accessibility
“Accessibility is the degree to which a product, device, sevice, or environment is available to as many people as possible.” Cynthia Waddell
Accessibility Alt text added
Header hiearchy
Media captioned
No autoplay!
Descriptive links
Resizable text
Keyboard access
Define language
Color optimized
Test
Accessibility Alt text on logo
ARIA landmarks
Focus indicators
ID required fields
Page name <h1>
Table headers
Table captions
No “click here”
Remove tabindex
Test
ARIA
ARIA is a technical specification published by the W3C that specifies how to increase the accessibility of web pages for users of Assistive Technology (AT).
ARIAARIA is markup:
role:<main role="main">
state:<input aria-invalid="true">
propety:<input id="firstName" type="text" aria-required="true" />
ARIA
ARIA document landmark roles: help define the structure of the document.
ARIAARIA landmark roles:
bannernavigationsearchmainaticlecomplementaycontentinfo
ARIA
ARIA
ARIA
ARIA states and propeties help the user understand how to inteact.
ARIAARIA States and Propeties:
aria-valuemin - stores lowest value
aria-valuemax - stores highest value
aria-valuenow - current value number
aria-valuetext - current value text
<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" />
ARIAARIA States and Propeties:
aria-labelledby - stores the id attribute of a text label containing an appropriate prompt
<input type="booze" aria labelledby="drink"/>
(before role="application")
ARIA
ARIA Live Regions: allow document elements to be announced if there are changes, maintaining user focus.
ARIAARIA Live Regions: aria-live
<ul aria-live="on">when changes happen:
polite - waits
assetive - interrupts
ARIA
The aria-atomic Propety: used to indicate if AT should present all or pat of the changed region to the user.
ARIA
The aria-busy Propety: prevents AT announcing changes before updates are complete.
ARIA
The aria-relevant Propety: indicates which regional changes are relevant.
HTML5
Extends, improves and ationalizes the markup available for documents.
HTML5
Introduces markup and application progamming intefaces (APIs) for complex web applications.
HTML5
HTML5 introduces elements: such as <section>, <aticle>, <header> and <nav>, designed to enrich the semantic content of documents.
ARIA = HTML5ARIA
aticle
header
navigation
complementay
HTML5
<aticle>
<header>
<nav>
<aside>
ARIA vs HTML5
Most screen readers suppot ARIA and some features of HTML5, sometimes resulting in too much information.
ARIA vs HTML5
Magic: ARIA trumps HTML5: optimize markup to reduce verbosity and give AT users best UX.
Links
http://bit.ly/AccessibleJoeARIA
http://twitter.com/AccessibleJoe