UX ARIA Presentation

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