Quando navighiamo un sito web ci capita sicuramente di incontrare dei popup, cio\u00e8 delle finestre che appaiono in sovraimpressione<\/b> all\u2019interno di una pagina web, che ci comunicano qualche informazione<\/b>. Un esempio classico \u00e8 il banner di consenso sui cookie, che sia custom o implementato attraverso piattaforme quali Iubenda o Cookiebot.<\/p>\n
Un altro esempio molto utilizzato anche dalle Pubbliche Amministrazioni \u00e8 quello di avere una finestra di ricerca nel sito<\/b> che appare quando si clicca l\u2019icona con la lente di ingrandimento.<\/p>\n\nI modali e le tecnologie assistive<\/h2>\n
Anche chiamate \u201cmodali\u201d, queste finestre hanno sicuramente l\u2019utilit\u00e0 di attirare l\u2019attenzione dell\u2019utente. Tuttavia \u00e8 bene comprendere che possono diventare piuttosto fastidiose per l\u2019utente ipovedente<\/b> o che sta visitando il sito tramite tecnologie assistive come gli screen reader<\/b>.<\/p>\n
Molto spesso sono poste in cima nella gerarchia HTML<\/b>, rischiando quindi di venire lette come primo contenuto dai software di lettura schermo. In altri casi, non vengono lette del tutto<\/b> perch\u00e9 posizionate in fondo all\u2019HTML<\/b> oppure non vengono annunciate quando appaiono<\/b>. Infine, potrebbero apparire in un momento in cui l\u2019utente \u00e8 concentrato su altro e la sua lettura viene interrotta<\/b> da un contenuto che viene letto improvvisamente.<\/p>\n
Dobbiamo quindi capire meglio come rendere questi componenti il pi\u00f9 possibile accessibili.<\/p>\n
Le linee guida WAI-ARIA<\/b> offrono alcuni casi d\u2019uso utili per capire come impostare una modale:<\/p>\n Questi esempi sono gi\u00e0 piuttosto dettagliati, ma proviamo ad analizzare meglio i punti principali<\/b> dal lato tecnico, e vediamo quali sono gli aspetti pi\u00f9 interessanti<\/b> da tenere in considerazione per l\u2019accessibilit\u00e0.<\/p>\n Iniziamo dal date picker<\/b>, che \u00e8 un caso pi\u00f9 particolare ma utile da conoscere:<\/p>\n Una nota importante<\/b> sull\u2019uso dell\u2019attributo aria-live<\/a>: il suo valore pu\u00f2 essere impostato in \u201cpolite\u201d, \u201cassertive\u201d o \u201coff\u201d. Generalmente, si raccomanda di impostarlo su polite<\/b>, e quasi mai su assertive<\/b>. Quest\u2019ultimo valore infatti \u00e8 da utilizzare solo nei casi in cui \u00e8 molto importante interrompere l\u2019azione dell\u2019utente<\/b> per catturare la sua attenzione.<\/p>\n Supponiamo che l\u2019utente stia ascoltando il testo di un paragrafo<\/b> che viene letto dallo screen reader. Una sezione che usa \u201cassertive\u201d viene modificata dinamicamente<\/b> in Javascript (anche senza che l\u2019utente abbia fatto alcunch\u00e9) e questo cambiamento verr\u00e0 immediatamente annunciato<\/b> dal lettore di schermo, che quindi interrompe la lettura<\/b> del paragrafo per leggere il testo modificato. Un esempio pu\u00f2 essere un carosello di immagini<\/b> che ogni 10 secondi cambia slide e presenta un nuovo testo. Parleremo meglio dei caroselli successivamente, ma in un caso di quel genere l\u2019utente potrebbe trovare molto fastidiosa l\u2019interruzione non prevista.<\/p>\n Ora passiamo ai punti pi\u00f9 importanti riguardanti l\u2019esempio<\/a> di modale \u201c<\/b>dialog\u201d<\/b> pi\u00f9 classico, il codice al momento \u00e8 presente su Codepen:<\/p>\n Il codice Javascript usato \u00e8 piuttosto complesso<\/b> e probabilmente poco utilizzabile in un caso reale, se non altro per questioni di tempo di lavoro, che si traduce in maggiori risorse economiche. Il mio suggerimento \u00e8 di fare quello che possiamo<\/b>, in genere non \u00e8 necessario raggiungere la perfezione, che pu\u00f2 richiedere un onere sproporzionato<\/a>.<\/p>\n Infine prendiamo in considerazione l\u2019esempio<\/a> della modale \u201calert dialog\u201d pi\u00f9 semplice:<\/p>\n Ci tengo anche a fare un appunto sugli esempi visti finora e che \u00e8 in linea con quanto detto prima sull\u2019onere spoporzionato: per mia esperienza, rendere 100% accessibile ogni componente \u00e8 quasi impossibile<\/b>, ci sono troppi criteri da ricordare e da tenere a mente, e ogni guida riporta delle osservazioni diverse, cos\u00ec come ogni consulente potrebbe interpretare le linee guida in modo diverso.<\/p>\n Ad esempio, sia per esigenze grafiche e sia perch\u00e9 ci \u00e8 molto difficile rendercene conto in fase di sviluppo, pu\u00f2 capitare di dimenticarsi di impostare l\u2019attributo aria-live<\/b> dove necessario, per fare in modo che la tecnologia assistiva comunichi all\u2019utente il cambiamento di un contenuto. Oppure, l\u2019uso di aria-describedby<\/b> in molti casi non \u00e8 richiesto e pu\u00f2 anche essere omesso, risulta utile come \u201cqualcosa in pi\u00f9\u201d per rendere il componente il pi\u00f9 accessibile possibile.<\/p>\n Quello che posso consigliare, in linea generale, \u00e8 di fare quello che si pu\u00f2<\/b> per raggiungere un buon livello di accessibilit\u00e0. Usiamo i tool automatici<\/b>, che abbiamo visto in precedenza, per aiutarci nella scansione e nella correzione degli errori. Se possibile, chiediamo un parere ad altri colleghi<\/b> che si occupano di accessibilit\u00e0, o affidiamoci a partner esterni<\/b> per l\u2019analisi di accessibilit\u00e0.<\/p>\n In fase di analisi e verifica dei requisiti di accessibilit\u00e0, sicuramente non tutto potr\u00e0 venire a galla<\/b>, e cercare l\u2019ago nel pagliaio pu\u00f2 richiedere di investire centinaia di ore di lavoro<\/b> e quindi pu\u00f2 far lievitare il costo economico<\/b>, cosa che le Pubbliche Amministrazioni in particolare non possono permettersi. Dobbiamo quindi conformarci e adattarci al budget disponibile<\/b>, proviamo a lavorare nel modo migliore possibile ma senza ricercare la perfezione<\/b>.<\/p>\n Quando navighiamo un sito web ci capita sicuramente di incontrare dei popup, cio\u00e8 delle finestre che appaiono in sovraimpressione all\u2019interno di una pagina web, che ci comunicano qualche informazione. Un esempio classico \u00e8 il banner di consenso sui cookie, che sia custom o implementato attraverso piattaforme quali Iubenda o Cookiebot. Un altro esempio molto utilizzato […]<\/p>\n","protected":false},"author":2,"featured_media":263,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-188","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/188"}],"collection":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/comments?post=188"}],"version-history":[{"count":5,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/188\/revisions"}],"predecessor-version":[{"id":215,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/posts\/188\/revisions\/215"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media\/263"}],"wp:attachment":[{"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/media?parent=188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/categories?post=188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.accessibilita.digital\/wp-json\/wp\/v2\/tags?post=188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
Esempio pratico: date picker e calendario<\/h2>\n
\n
L’uso di aria-live<\/h2>\n
Esempio pratico: modale dialog classico<\/h2>\n
\n
Esempio pratico: modale alert dialog<\/h2>\n
\n
Conclusioni<\/h2>\n
Link utili<\/h2>\n
\n
Leggi anche<\/h2>\n
\n