Presentazione di Maria Claudia Buzzi, Marina Buzzi

Transcript

WAI-ARIA
Maria 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
2
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
3
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
4
WAI-ARIA
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
5
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 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)
6
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)
7
Role
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.
8
Attributi: State and Property
State
 proprietà 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
Property
 attributi essenziali della natura di un oggetto, o che ne
rappresentano un valore associato
 un cambio di una proprietà può impattare significativamente sul
significato o sulla presentazione di un oggetto
 Esempi: aria-multiline, aria-live, aria-flowto, aria-atomic, ariamultiselectable
9
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)
10
WAI-ARIA Roles
 Abstract Roles
 Widget Roles
 Document Structure Roles
 Landmark Roles
11
WAI-ARIA Abstract Roles
Usati solo per ontologie
Da non utilizzarsi per contenuti
12
Widget Roles: semplici
• alert
• menuitemcheckbox
• textbox
• alertdialog
• menuitemradio
• timer
• button
• option
• tooltip
• progressbar
• treeitem
• checkbox
• dialog
• gridcell
• link
• radio
• scrollbar
• slider
• spinbutton
• log
• status
• marquee
• tab
• menuitem
• tabpanel
13
Widget Roles: composti
 combobox
 grid
 listbox
 menu
 menubar
Contenitori che gestiscono altri
widget in essi contenuti
 radiogroup
 tablist
 tree
 treegrid
14
Document Structure Roles
•
article
•
note
•
columnheader
•
presentation
•
definition
•
region
•
row
•
rowgroup
•
rowheader
•
•
directory
document
•
group
•
separator
•
heading
•
toolbar
•
img
•
list
•
listitem
•
math
definiscono il contenuto di una
pagina
15
Landmark Roles
Aree o punti di riferimento per la navigazione nella pagina
 application
 banner
 complementary
 contentinfo
 form
 main
 navigation
 search
16
Attributi
Stati e proprietà categorizzati in:
 Widget Attributes
 Live Region Attributes
 Drag-and-Drop Attributes
 Relationship Attributes
prefisso aria-
17
Widget Attributes
•
aria-autocomplete
•
aria-pressed (state)
•
aria-checked (state)
•
aria-readonly
•
aria-disabled (state)
•
aria-required
•
aria-expanded (state)
•
aria-selected (state)
•
aria-haspopup
•
aria-sort
•
aria-hidden (state)
•
aria-valuemax
•
aria-invalid (state)
•
aria-valuemin
•
aria-label
•
aria-valuenow
•
aria-level
•
aria-valuetext
•
aria-multiline
•
aria-multiselectable
•
aria-orientation
18
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
19
Live Region Attributes
 aria-live: policy di comunicazione
 off | polite | assertive
 aria-atomic: granularità dell’informazione
 true | false
 aria-relevant: cosa annunciare
 additions | removals | text | all | additions text
 aria-busy (state): consistenza aggiornamento
 true | false
20
Drag-and-Drop Attributes
– problemi di utilizzo del mouse
– screen reader permette di simulare un click,
trascinamento e rilascio
 aria-grabbed (stato): elemento "afferrato"
true|false|undefined
 aria-dropeffect: funzioni eseguite quando
l’oggetto è rilasciato sul target
 copy|move|link|execute|popup|none
21
Relationship Attributes
 aria-activedescendant
 aria-controls
 aria-describedby
 aria-flowto
 aria-labelledby
 aria-owns
 aria-posinset
 aria-setsize
22
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
23
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à ariaactivedescendant
24
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
25
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
26
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
27
Grazie
Domande?
28

Presentazione di Maria Claudia Buzzi, Marina Buzzi

Transcript

Documenti analoghi

Presentazione Antonio Giovanni Schiavone

sabato 25 maggio - Ordinary out dance project

pubcoder annuncia la nuova esportazione in html5 per gli utenti

LINGUAGGI DI PROGRAMMAZIONE - HTML5 E CSS3 - Forma-re-te

Web Designer e Comunicazione Multimediale

Convocazione riunione congiunta Accessibilità 26/09 - ICOM

modulo iscrizione e scarico di responsabilità

Corso Accessibilità in editoria Milano, 30 marzo 2017

Abstract seminari - Istituto Gestalt Forlì

modulo di adesione - medi