handimatica2014_wai-aria

WAI-ARIAMaria Claudia Buzzi, Marina Buzzi

Ufficio Italiano W3C, IIT-CNR

[email protected], [email protected]

HANDImatica 2014 – Workshop Accessibilità digitale: WAI ARIA e HTML5 – 28 novembre 2014

Agenda

WAI-ARIA

Obiettivi

Ruoli, Proprietà e Stati

Live regions

Drag-and-drop

Focus e Navigazione da tastiera


WAI-ARIA

W3C Recommendation da marzo 2014

Aumentare l'accessibilità di ciò che è presente nelle diverse parti di una pagina Web (anche

contenuti dinamici/RIA e componenti per l'interfaccia utente) perché gli utenti con

disabilità possano utilizzarle in modo efficace

3HANDImatica 2014 – Workshop Accessibilità digitale: WAI ARIA e HTML5 – 28 novembre 2014

WAI-ARIA

Specificamente per:

•Utenti che non possono utilizzare mouse e

strumenti di puntamento

•Utenti non vedenti che utilizzano screen reader

•Utenti con disabilità cognitiva



porta le caratteristiche di accessibilità delle applicazioni desktop al web

In ambiente desktop, le AT ricevono informazioni dalle interfacce di programmazione delle applicazioni (API) di accessibilità specifiche per ogni sistema operativo.

WAI-ARIA rende lo stesso tipo di informazioni direttamente disponibili per le applicazioni web

WAI-ARIA


interoperabilità tra browser e tecnologie assistive, es. quando si utilizzano funzioni interattive come menù espandibili e funzionalità drag-and-drop sui siti web

WAI-ARIA

WAI-ARIA 1.0 User Agent Implementation Guide: mappa WAI-ARIA alle caratteristiche di accessibilità di supporto

su diverse piattaforme.

Gli autori di contenuti che utilizzano WAI-ARIA potranno più facilmente riproporre lo stesso contenuto web su

diverse piattaforme, senza perdita di supporto dell’accessibilità (cross-platform)

Semantica da comunicare alla tecnologia

assistiva (AT)

Ruolo/stato di un widget

Azioni su un elemento/proprietà

Contenuti e aggiornamenti dinamici (live region)

Struttura di un document (aree logiche/region)

Saltare porzioni di contenuti

Quando l’elemento riceve il focus (tabindex)

Potenziare l’accesso via tastiera (es. drag-and-drop)


Tipo dell’oggetto

Semantica per presentare/supportare l’interazione in maniera consistente

Document landmarks: application, banner,

complementary, contentinfo, form, main, navigation, search

WAI-ARIA roles: alert, button, checkbox, combobox, grid,

listitem, document, progressbar, radio, log, etc.


Role

Stateproprietà dinamica, esprime caratteristiche di un oggetto che

possono cambiare in risposta all’azione dell’utente o a processi automatici

Esempi: aria-checked, aria-pressed, aria-selected, aria-expanded

Propertyattributi essenziali della natura di un oggetto, o che ne

rappresentano un valore associatoun cambio di una proprietà può impattare significativamente sul

significato o sulla presentazione di un oggetto Esempi: aria-multiline, aria-live, aria-flowto, aria-atomic, aria-

multiselectable


Attributi: State and Property

Entrambi sono informazioni specifiche su un oggetto per definire la natura del ruolo

Generalmente il valore di una proprietà (es. aria-labelledby) non cambia frequentemente come uno stato (es. aria-checked, x l’interazione dell’utente)


Attributi: State and Property

WAI-ARIA Roles

Abstract Roles

Widget Roles

Document Structure Roles

Landmark Roles


Usati solo per ontologie

Da non utilizzarsi per contenuti

WAI-ARIA Abstract Roles


Widget Roles: semplici


combobox

grid

listbox

menu

menubar

radiogroup

tablist

tree

treegrid

Widget Roles: composti

Contenitori che gestiscono altri widget in essi contenuti


Document Structure Roles


Aree o punti di riferimento per la navigazione nella pagina

application

banner

complementary

contentinfo

form

main

navigation

search

Landmark Roles


AttributiStati e proprietà categorizzati in:

Widget Attributes

Live Region Attributes

Drag-and-Drop Attributes

Relationship Attributes

prefisso aria-


Widget Attributes


Live Region

Regioni che possono essere aggiornate mentre l’utente non è

posizionato su di esse (non hanno il focus)

Es. Log di chat, punteggi dinamici (risultati votazioni, gare sportive,

parametri ambientali, quotazioni di borsa, cambiavalute, etc)

WAI-ARIA consente di identificare le live region e specificare come

veicolare le informazioni all’utente:

aria-live, aria-relevant, aria-atomic, aria-busy


Relationship Attributes aria-activedescendant

aria-controls

aria-describedby

aria-flowto

aria-labelledby

aria-owns

aria-posinset

aria-setsize


Focus

Tutti gli elementi interattivi devono poter ricevere il focus

Attributo tabindex: ordine di navigazione via tab

quando un widget riceve il focus:

frecce, spazio, enter, consentono di navigare le opzioni del widget, cambiare il suo stato, o innescare una funzione applicativa associata al widget


Navigazione via tastiera

tab/shift+tab: muove il focus avanti/indietro

tabindex=0: ordine nel documento

tabindex>0: in ordine crescente

tabindex<0: non sono inseriti nella sequenza via TAB ma possono ricevere il focus da tastiera via script o con la proprietà aria-activedescendant


Esempi

Toolbar http://test.cita.illinois.edu/aria/toolbar/toolbar1.php

Gioco del tris http://test.cita.illinois.edu/aria/draganddrop/draganddrop3.php

Live Region http://test.cita.illinois.edu/aria/live/live1.php

Landmark http://test.cita.illinois.edu/aria/nav/nav1.html


Esempi

WAI – ARIA 1.0 Authoring Practices

Guida per capire ed implementare RIA accessibili

Approcci per utilizzare ruoli ed attributi WAI-ARIA per rendere gli oggetti, la navigazione ed i comportamenti accessibili


Riferimenti

Accessible Rich Internet Applications (WAI-ARIA) 1.0

http://www.w3.org/TR/wai-aria/

Illinois Center for Information Technology and Web Accessibility http://test.cita.illinois.edu/aria/

WAI-ARIA (Rich Applications)

FAQ

WAI-ARIA 1.0

Primer

Authoring Practices


Grazie

Domande?
