diamo aria alle nostre applicazioni - fpa...2017/12/14 · • article • section • nav •...
TRANSCRIPT
![Page 1: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/1.jpg)
Accessibility Days – Ancona 18 maggio
2019
Diamo ARIAalle nostre applicazioni
![Page 2: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/2.jpg)
PARTECIPAZIONI ▪ Dal 1996 (in Italia dal 2000) è il
riferimento di chi lavora nel Web, sia nel
settore pubblico che privato.
▪ Associazione professionisti Web
(Legge 4/2013), promotrice norme UNI in
materia di professionalità ICT.
▪ Obiettivo di IWA è creare rete tra i soci,
partecipare all'evoluzione della rete e
divulgare conoscenza tramite i soci
con eventi e iniziative.
https://www.iwa.it
International Web Association Italia – IWA Italy
![Page 3: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/3.jpg)
Accessibility Days – Ancona 18 maggio 2019 3
Fabrizio Caccavello - chi sono
Web Accessibility Expert - User Experience Designer
UNINFO - ente di normazione italiano
• Commissione e-Accessibility
• Coordinatore del GdL2 "Adozioni e Traduzioni”
International Web Association
• Membro del Consiglio Direttivo di IWA Italy
• Coordinatore webaccessibile.org
• Membro del GDL per la traduzione delle WCAG 2.1
https://www.fabriziocaccavello.it
![Page 4: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/4.jpg)
Accessibility Days – Ancona 18 maggio 2019 4
Fabrizio Caccavello - cosa faccio
Web Accessibility Expert - User Experience Designer
Collaboro con organizzazioni nazionali e internazionali, pubbliche e private, per le tematiche legate all'accessibilità:
• Faccio consulenze, attività di formazione e seminari divulgativi.
• Eseguo verifiche di accessibilità su progetti già realizzati.
• Definisco percorsi di sviluppo web che includano i requisiti di accessibilità.
• Collaboro nella definizione di requisiti e strategie per lo sviluppo di applicazioni di qualità.
• Creo interfacce utente accessibili.
https://www.fabriziocaccavello.it
![Page 5: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/5.jpg)
Accessibility Days – Ancona 18 maggio 2019 5
Cosa vedremo
![Page 6: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/6.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
Nota iniziale
6
I codici citati in questa presentazione non sono snippet da poter usare in uno script reale ma sono stringhe usate per illustrare i concetti descritti.
![Page 7: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/7.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello 7
1. Accessibility overview
![Page 8: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/8.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello 8
L'accessibilità web è una qualità dei siti internet e delle
applicazioni, è importante per tutte le persone ed è
indispensabile per le persone con disabilità.
In Italia (e altri stati) è anche un obbligo di legge per le
Pubbliche Amministrazioni ed enti assimilabili. Per le
aziende una caratteristica dominante nei modelli di
business.
Accessibilità: cos’è
![Page 9: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/9.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello 9
Accessibilità: processi
L’accessibilità coinvolge la maggior parte dei processi di creazione dei servizi web
![Page 10: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/10.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello 10
The power of the Web is in its universality.
Access by everyone regardless of disability is
an essential aspect.
Tim Berners-Lee https://www.w3.org/WAI/
Accessibility for all
![Page 11: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/11.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
Accessibilità: a chi si rivolge
11
![Page 12: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/12.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
Accessibilità: non è un bollino
12
![Page 13: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/13.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
Poter accedere a un contenuto web con lo
screen reader non equivale ad essere
conforme all’accessibilità.
• Ci sono strutture che possono essere
completamente invisibili agli screen reader.
• Ciò che è perfettamente accessibile allo
screen reader può essere completamente
inaccessibile per altri aspetti
Accessibilità: non è (solo) Screen Reader
13
![Page 14: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/14.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
2. Single Page Application
14
![Page 15: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/15.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
In informatica con Single-page application (in italiano:
applicazione su singola pagina) o in sigla SPA si intende
un'applicazione web o un sito web che può essere usato o
consultato su una singola pagina web con l'obiettivo di
fornire una esperienza utente più fluida e simile alle
applicazioni desktop dei sistemi operativi tradizionali.
(fonte Wikipedia)
Sigle Page Applications: definizione
15
![Page 16: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/16.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
In una Single Page
Application tutte le azioni e
le funzionalità vengono
gestite in una sola pagina.
Attraverso Javascript
viene modificata una sola
porzione della pagina
precaricata.
Sigle Page Applications: la base
16
![Page 17: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/17.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
Ci sono diversi framework che permetto lo sviluppo di Single
Page Application; hanno reso questa tecnica molto diffusa,
utilizzata nello sviluppo di applicazioni complesse:
• Angular (sviluppato da Google)
• React (sviluppato da Facebook)
• Vue.js
• (altri)
Sigle Page Applications: Frameworks
17
![Page 18: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/18.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
C’è molto di diverso: quello che nello sviluppo tradizionale con
pagine multiple poteva essere un supporto supplementare
all’accessibilità nelle Single Page Application diventa prioritario.
Per capire bene il processo dobbiamo richiamare due standard
di riferimento:
• HTML5
• WAI-ARIA
Sigle Page Applications: cosa c’è di diverso per quanto riguarda l’accessibilità
18
![Page 19: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/19.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
3. HTML 5Ultima versione: HTML 5.2 W3C Recommendation, 14 December 2017
19
![Page 20: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/20.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
Con HTL5 sono stati introdotti alcuni componenti semantici che permettono agli
sviluppatori di fornire preziose informazioni individuabili programmaticamente
(esempio: con il tag “nav” si definisce in modo tematico quale sia il menu di
navigazione del sito).
• article
• section
• nav
• aside
• header
• footer
HTML 5: componenti semantici (1 di 3)
20
![Page 21: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/21.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
HTML 5: componenti semantici (2 di 3)
21
![Page 22: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/22.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
• Con screen reader ci si può orientare più
facilmente.
• Altre applicazioni e/o processi
automatizzati possono individuare le aree
semantiche e utilizzarle per i propri scopi
(esempio lo spider di un motore di ricerca
può catalogare meglio un sito).
HTML 5: componenti semantici (3 di 3)
22
![Page 23: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/23.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
Posso usare HTML standard per fornire messaggi semanticamente corretti
all’utente
<title>Step 2 of 4: Inserisci i tuoi dati – vendoscarpe.it</title>
<label>Seleziona questa scelta per accettare
<input type=“checkbox”>
</label>
HTML 5: fornire un messaggio di stato
23
![Page 24: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/24.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
4. Cos’è WAI-ARIA
24
![Page 25: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/25.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
WAI-ARIA è una specifica tecnica,
pubblicata in versione stabile dal 2014, il cui
utilizzo è auspicabile nelle circostanze in cui
il normale codice HTML non è sufficiente a
garantire il supporto all’accessibilità.
WAI-ARIA 1.1W3C Recommendation 14 December 2017
25
![Page 26: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/26.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
Questa specifica tecnica ha come obiettivo:
• espandere le informazioni sull'accessibilità che possono essere
inserite nei contenuti e nelle applicazioni;
• migliorare il supporto per la navigazione da tastiera o con
dispositivi touch;
• migliorare l'accessibilità del contenuto dinamico generato dagli
script stand-alone;
• garantire l'interoperabilità con le tecnologie assistive.
WAI-ARIA 1.1 - Obiettivo
26
![Page 27: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/27.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
Un esempio di base può essere quello di definire un ruolo
specifico per un elemento di menù, che espande il concetto del
tag NAV definito in HTML5.
<li role="menuitem">Open file…</li>
WAI-ARIA 1.1 - Esempio: un ruolo
27
![Page 28: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/28.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
WAI-ARIA 1.1 - Esempio: un pulsante
28
![Page 29: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/29.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
In un accordion gli elementi HTML
che possono essere usati non
introducono alcun elemento
semantico, non sono cioè individuali
come tali.
WAI-ARIA 1.1 - Esempio: accordion (1 di 3)
29
![Page 30: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/30.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
<div id="accordionExample">
<div id="headingOne">
<button type="button">
Collapsible Group Item #1
</button>
</div>
<div id="collapseOne">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high...</p>
</div>
</div>
WAI-ARIA 1.1 - Esempio: accordion (2 di 3)
30
![Page 31: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/31.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
<div id="accordionExample">
<div id="headingOne">
<button type="button" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</div>
<div id="collapseOne" aria-labelledby="headingOne">
<p>Anim pariatur cliche reprehenderit, enim eiusmod high...</p>
</div>
</div>
WAI-ARIA 1.1 - Esempio: accordion (3 di 3)
31
![Page 32: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/32.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
5. WAI-ARIAe le Single Page Application
32
![Page 33: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/33.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
Una volta si diceva:
“meglio senza ARIA che con ARIA applicata in maniera errata”.
Questo è vero quando si parla di applicazione tradizionali con più
pagine. Se si introduce la modalità di sviluppo di tipo Single Page
Application diventa importante modificare il paradigma:
“Senza WAI-ARIA l’applicazione può essere inaccessibile e
addirittura non avere alcun senso”.
WAI-ARIA 1.1 - come usare
33
![Page 34: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/34.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
• Codice HTML5 standard
<button type=“button”>Azione</button>
• Ruolo assegnato a un elemento neutro DIV
<div role="button">Azione</div>
WAI-ARIA è una promessa (e va mantenuta)
34
![Page 35: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/35.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
Il ruolo alert diventa imprescindibile nei messaggi di
errore
<div role="alert">
Questo è un messaggio di avviso
</div>
WAI-ARIA: un ruolo diventa fondamentale
35
![Page 36: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/36.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
Se un evento è scatenato da una condizione esterna non prevedibile
dall’utente (es. in una pagina sempre aperta si comunica all’utente un dato in
tempo reale):
<section aria-live=“assertive">
…
</section>
WAI-ARIA: aria-live
36
![Page 37: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/37.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
6. Ruoli, stati e proprietà
37
![Page 38: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/38.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
ARIA introduce fondamentalmente 3 concetti:
• Ruolo
• Stato
• Proprietà
Ruoli, stati proprietà
38
![Page 39: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/39.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
Definisce la funzione di un elemento, abbiamo già visto diversi
ruoli, tra cui “alert”.
Diversi ruoli ARIA sovrascrivono elementi già esistenti in HTML5
(es: ruolo “navigation” e tag “nav” di HTML5)
Ruolo
39
![Page 40: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/40.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
Permettono di assegnare una proprietà a un elemento HTML5
esistente.
<button type="button" aria-label=“Acquista la pizza rossa”>
Proprietà
40
![Page 41: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/41.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
È una proprietà particolare che fornisce all’utente uno stato in cui si
trova l’applicazione:
aria-disabled="true"
Stato
41
![Page 42: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/42.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
7. Casi d’uso di WAI-ARIA
42
![Page 43: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/43.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li><a href=“#"> Pagina padre </a></li>
<li><a href=“#" aria-current=“page”>Pagina attiva</a></li>
</ol>
</nav>
Breadcrumb con ARIA
43
![Page 44: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/44.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
Può essere utile utilizzare ARIA per
scrivere in maniera più semanticamente
corretta il tag HTML5 ‘checkbox’
<input type="checkbox" … >
<div role="checkbox" … >
Checkbox con semantica avanzata
44
![Page 45: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/45.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
8. Note per i componenti di Bootstrap
45
![Page 46: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/46.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
Bootstrap supporta nativamente l’accessibilità ma può diventare
inaccessibile qualora sia utilizzato con un mero copia/incolla
acritico.
https://getbootstrap.com/docs/4.3/getting-started/accessibility/
Note per i componenti di Bootstrap
46
![Page 47: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/47.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
Riflessione sull’idea di eliminare un'etichetta:
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox" aria-label="Checkbox for following text input">
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
Note per i componenti di Bootstrap
47
![Page 48: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/48.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
La creazione di Single Page Application introduce il paradigma di
"identificare le situazioni"
nelle quali è rigorosamente necessario fornire informazioni
semantiche, che non posso essere standardizzate, né:
• dalla conoscenza della specifica tecnica; né
• dall'uso attento di framework tipo Bootstrap
Considerazioni finali
![Page 49: Diamo ARIA alle nostre applicazioni - FPA...2017/12/14 · • article • section • nav • aside • header • footer HTML 5: componenti semantici (1 di 3) 20 ForumPA –Roma](https://reader033.vdocuments.net/reader033/viewer/2022050419/5f8f01d0ba889b54366100c9/html5/thumbnails/49.jpg)
ForumPA – Roma 15 maggio 2019 – Fabrizio Caccavello
@cfabry