Criteri di accessibilità implementati in WebSite X5

L’obiettivo di WebSite X5 è aiutare chiunque, anche a chi non ha competenze tecniche, a creare un sito web completo, professionale, ottimizzato per i motori di ricerca e per la navigazione da mobile ed anche accessibile. Per chi non è uno sviluppatore, intervenire sul codice delle pagine per soddisfare i requisiti di accessibilità può essere complesso o addirittura impossibile. Per questo, WebSite X5 si occupa in autonomia di molti aspetti tecnici relativi all'accessibilità, permettendo di realizzare siti senza dover scrivere una sola riga di codice.

In questa guida vedremo nel dettaglio quali criteri di accessibilità sono supportati da WebSite X5 e come vengono implementati. 

WebSite X5 e le WCAG: quali criteri vengono implementati e come

Come sappiamo, l’accessibilità web è regolata dalle Web Content Accessibility Guidelines (WCAG), un insieme di linee guida sviluppate dal World Wide Web Consortium (W3C) per garantire che i contenuti digitali siano fruibili da tutti, comprese le persone con disabilità. 

Ricordiamo brevemente che le Linee Guida della WCAG sono organizzate secondo 4 principi fondamentali (Percepibile, Usabile, Comprensibile e Robusto) e prevedono dei criteri di successo organizzati secondo tre livelli di conformità (A, AA e AAA). 

Nello specifico, WebSite X5 prende come riferimento la versione 2.0 delle WCAG, di cui le successive versioni 2.1 e 2.2 rappresentano degli ampliamenti, e implementa 15 dei 25 criteri di livello A, più altri 3 criteri previsti da altre versioni/livelli. In pratica, i criteri integrati sono quelli che possono essere risolti:

• in modalità automatica → ovvero in automatico da WebSite X5, senza l'intervento da parte dell'autore del sito. In questi casi WebSite X5 soddisfa i criteri scrivendo in maniera corretta e conforme il codice degli elementi inseriti nelle pagine web realizzate.
• in modalità assistita → WebSite X5 fornisce gli strumenti per il soddisfacimento del criterio ma è comunque richiesto l'intervento dell'autore del sito. Per esempio, WebSite X5 prevede l'opzione per l'inserimento del testo alternativo per le immagini ma è l'autore del sito a dover digitare un testo alternativo adeguato.

WebSite X5 non può invece risolvere i criteri di successo che dipendono unicamente dalle scelte dell'autore del sito: in molti casi, comunque si tratta di criteri di livello AAA, dunque molto avanzati e non sempre richiesti dalla legge.  

Nello specifico, i criteri di successo risolti in modalità automatica o assistita da WebSite X5 sono i seguenti:

• 1.1.1 Contenuto non testuale
• 1.3.1 Informazioni e correlazioni
• 1.3.2 Sequenza significativa
• 1.3.4 Orientamento schermo
• 2.1.1 Tastiera
• 2.1.2 Nessun impedimento all'uso della tastiera
• 2.1.4 Tasti di scelta rapida
• 2.4.1 Salto dei blocchi
• 2.4.2 Titolazione della pagina
• 2.4.3 Ordine del focus
• 2.4.4 Scopo del collegamento (nel contesto)
• 3.1.1 Lingua della pagina
• 3.2.1 Al focus
• 3.3.1 Identificazione di errori
• 3.3.2 Etichette o istruzioni
• 4.1.1 Analisi sintattica (parsing)
• 4.1.2 Name, Role, Value

1.1.1 Contenuto non testuale

La Linea Guida 1.1 richiede che venga fornita un'alternativa testuale per qualsiasi contenuto non di testo cosicché possa essere trasformato in altre forme fruibili secondo le necessità degli utenti: Braille, sintesi vocale, simboli, ecc.

Per soddisfare il conseguente criterio di successo 1.1.1, WebSite X5 da la possibilità di inserire i testi alternativi per tutti gli elementi non testuali (immagini, animazioni, video, audio) che vengono importati, ad eccezione di quelli puramente decorativi per i quali è corretto che non vengano impostati (vedi: Come scrivere il testo alternativo per i contenuti non testuali delle pagine). Le alternative testuali degli elementi grafici generati dal software, invece, vengono inseriti in automatico: è il caso, per esempio, dei pulsanti di navigazione delle gallerie, oppure delle icone e dei pulsanti delle card di articoli del blog e prodotti dell’e-commerce.

Come richiesto, tutte le alternative testuali vengono inserite nel codice delle pagine attraverso gli attributi HTML alt, title, aria-label e/o aria-labelledby. Gli elementi HTML <label> e gli attributi HTML aria-label, aria-labelledby e aria-describedby vengono impiegati anche per tutti i campi di input (campi di ricerca nel sito e nel catalogo prodotti, pagina di login e di registrazione, oggetti modulo di contatto), per fornire indicazioni su come compilare tali campi.

#tip - Il criterio di successo 1.1.1 considera anche il Captcha. Al momento il Captcha di WebSite X5 non è ancora stato reso accessibile; si consiglia quindi l'utilizzo di Google reCaptcha. Vedi: Come si sceglie il CAPTCHA da impiegare nel sito? 

1.3.1 Informazioni e correlazioni

La Linea Guida 1.3 richiede che i contenuti possano essere rappresentati in modalità differenti (ad esempio, con layout più semplici) senza che per questo vengano perse le informazioni o la struttura.

In particolare, il criterio di successo 1.3.1 richiede che le relazioni, la struttura e le correlazioni che sono presenti in una pagina web e che possono essere facilmente colte visivamente, siano anche determinate "programmaticamente", ovvero via codice, cosicché possano essere mantenute nel caso la pagina venga rappresentata in maniera diversa.

Per soddisfare questo criterio, dunque, è necessario generare codice semantico per le pagine web.

WebSite X5 risolve automaticamente questo criterio di successo utilizzando i tag corretti e relazionando le informazioni attraverso la prossimità o tramite gli attributi preposti a questa funzione. L'utilizzo gli elementi HTML semantici (<a>, <button>, <input>, <dialog>, <nav>, <article>, …) e/o l’attributo HTML role per identificare le diverse sezioni della pagina permette agli screen reader e agli altri strumenti di navigazione di conoscere e presentare all’utente lo scopo di ciascun elemento e di navigare più velocemente tra di essi.

1.3.2 Sequenza significativa

Sempre in riferimento alla Linea Guida 1.3, questo specifico criterio di successo richiede che se l'ordine con cui il contenuto è presentato influisce sul suo significato, questo venga determinato anche programmaticamente (ovvero, via codice).

Questo criterio viene risolto in modalità assistita nel senso che WebSite offre all'autore del sito la possibilità di determinare l'ordine degli elementi della pagina e, dunque, di definire la gerarchia dei contenuti. Il software, poi, "traduce" in automatico tale gerarchia in codice semantico. 

1.3.4 Orientamento schermo

Ancora in riferimento alla Linea Guida 1.3, questo criterio di successo richiede che i contenuti possano essere utilizzati con qualsiasi orientamento. 

WebSite X5 soddisfa in maniera automatica questo criterio dal momento che non prevede l'inserimento di blocchi sulla presentazione verticale o orizzontale dei contenuti.

2.1.1 Tastiera

La Linea Guida 2.1 richiede che tutte le funzioni siano disponibili anche da tastiera e il criterio di successo 2.1.1 specifica che l'utilizzo tramite tastiera deve avvenire senza tempistiche specifiche per le singole battute.

#tip - Per maggiori informazioni sulla navigazione da tastiera, vedi Come garantire una navigazione da tastiera accessibile

WebSite X5 risolve in automatico questo criterio utilizzando elementi semantici (<a>, <button>, <input>, <dialog>) per consentire la navigazione da tastiera. In più WebSite X5 inserisce l’attributo HTML tabindex e implementa la gestione dei tasti da tastiera per i componenti dell’interfaccia per cui non esiste un elemento HTML apposito (per esempio: selettore dei prezzi minimo e massimo nella ricerca nel catalogo prodotti, visualizzazione a schede negli oggetti testo e tabella).

#tip - Al momento, per l'Oggetto Immagine le modalità di zoom e di spostamento manuale non possono ancora essere gestite da tastiera. 

2.1.2 Nessun impedimento all'uso della tastiera

Sempre in riferimento alla Linea Guida 2.1, questo criterio di successo specifica che deve essere sempre possibile spostare il focus fuori da un elemento selezionato, in modo che chi naviga da tastiera non rimanga "intrappolato" all'interno di sottosezioni di una pagina.

WebSite X5 risolve in automatico questo criterio utilizzando l’attributo HTML tabindex e implementando la gestione della tastiera per consentire la navigazione di tutti gli elementi della pagina (il fuoco può entrare e uscire da ogni elemento usando il tasto Tab).

2.1.4 Tasti di scelta rapida

Ancora in riferimento alla Linea Guida 2.1, questo criterio di successo richiede che, nel caso vengano definiti dei tasti di scelta rapida, sia possibile disattivarli oppure rimapparli o che siano attivi solo sul focus di un determinato componente.

WebSite X5  non definisce alcun tasto di scelta rapida pertanto questo criterio viene automaticamente soddisfatto.  

2.4.1 Salto dei blocchi

La Linea Guida 2.4 richiede che vengano fornite delle funzionalità di supporto all'utente per navigare, trovare contenuti e determinare la propria posizione.

In particolare, il criterio 2.4.1 specifica che deve essere fornita una modalità per consentire agli utenti di saltare i blocchi di contenuto che si ripetono su più pagine Web.

WebSite X5 risolve in maniera automatica questo criterio di successo predisponendo dei link (non visibili a schermo) che consentono di saltare le porzioni ripetute della pagina in modo di arrivare più facilmente e rapidamente ai contenuti principali. Nello specifico, i link inseriti sono:

• link a inizio pagina per saltare direttamente ai contenuti;
• link all’inizio dei menu per saltare al primo contenuto dopo il menu;
• link all’inizio del pannello di ricerca nel catalogo prodotti per saltare all’elenco dei prodotti;
• link all’inizio di ogni blocco laterale del blog per saltare al blocco successivo;
• link al fondo della pagina per tornare ai contenuti.

2.4.2 Titolazione della pagina

Ancora nell'ambito della Linea Guida 2.4, il criterio di successo 2.4.2 richiede che le pagine Web abbiano dei titoli che ne descrivono l'argomento e la finalità.

WebSite X5 risolve questo criterio in modalità assistita: chiede all'autore di specificare il titolo di ciascuna pagina e, impiegando il tag <title>,  inserisce il testo immesso nell’<head> della pagina HTML generata.

#tip - Il tag <title> viene composto automaticamente da WebSite X5 utilizzando il nome della pagina (impostato al passo 3 in fase di Creazione della Mappa) e il 'Titolo della Pagina' (impostato attraverso la finestra 'Proprietà Pagina'). Se vuoi personalizzare il tag <title>, devi andare al 'Passo 3 - Mappa', selezionare la pagina su cui vuoi agire e cliccare sul pulsante 'Proprietà'. Nel tab 'SEO', attiva l'opzione 'Tag Title' e digita il titolo nell'apposito campo.  

2.4.3 Ordine del focus

Sempre riguardo alla Linea Guida 2.4, il criterio di successo 2.4.3 dice che se una pagina Web può essere navigata in modo sequenziale e le sequenze di navigazione influiscono sul significato e sul funzionamento, gli oggetti che possono ricevere il focus lo ricevono in un ordine che ne conserva il senso e l'operatività. 

Per risolvere in maniera automatica questo criterio, WebSite X5 genera il codice delle pagine facendo in modo che:

• gli elementi HTML nel codice della pagina rispettino lo stesso ordine in cui vengono mostrati a schermo. In questo modo, se si naviga da tastiera i componenti ricevono il fuoco nell’ordine corretto.
• il codice degli elementi dinamici (per esempio: popup, dialog, messaggio pubblicitario, ecc.) sia inserito in prossimità del contenuto a cui è collegato, utilizzando l’elemento HTML <dialog> per consentire:
• il passaggio in automatico del fuoco al contenuto appena aggiunto;
• il confinamento del fuoco all’interno di tale contenuto, nel caso sia di tipo “modale”;
• il ripristino della precedente posizione del fuoco alla chiusura del contenuto.
• il focus venga impostato automaticamente nel campo testuale della pagina di ricerca nel catalogo prodotti e della pagina di ricerca nel sito, grazie all’attributo HTML autofocus.

2.4.4 Scopo del collegamento (nel contesto)

Sempre riguardo alla Linea Guida 2.4, il criterio di successo 2.4.4 dice che lo scopo di ogni collegamento può essere determinato dal solo testo del collegamento oppure dal testo del collegamento insieme a dei contenuti contestuali che possono essere determinati programmaticamente.

L'obiettivo di questo criterio è fare in modo che per gli utenti sia semplice comprendere lo scopo dei link per decidere se vogliono seguirli o meno. Se è possibile il testo del link dovrebbe essere sufficiente a chiarirne la funzione. È comunque accettabile che lo scopo del link si chiarisca anche grazie al contesto in cui è inserito, nel caso associato attraverso opportune tecniche ARIA. 

WebSite X5 risolve automaticamente quanto richiesto dal criterio 2.4.4 in tutti i casi in cui genera in autonomia un link. Per i link inseriti dall'utente, invece, offre la possibilità di prevedere un contenuto testuale alternativo.   

3.1.1 Lingua della pagina

La Linea Guida 3.1 richiede di rendere il testo leggibile e comprensibile. Nell'ambito di questa Linea Guida, il criterio di successo 3.1.1 chiede che l'impostazione della lingua predefinita di ogni pagina Web venga determinata programmaticamente.

WebSite X5 risolve questo criterio in maniera automatica utilizzando l’attributo HTML lang nel tag <html> per specificare la lingua dei contenuti della pagina.

#tip - Puoi impostare la 'Lingua dei contenuti' attraverso l'apposita opzione disponibile nella finestra 'Passo 1 - Impostazioni > Informazioni generali'.

3.2.1 Al focus

La Linea Guida 3.2 richiede di fare in modo che le pagine Web appaiano e funzionino in modo prevedibile.

In particolare il criterio di successo 3.2.1 specifica che, quando un componente di una pagina web riceve il focus, non deve verificarsi automaticamente un cambio di contesto, ovvero un cambiamento rilevante che potrebbe disorientare l'utente. 

WebSite X5 risolve questo criterio in automatico dal momento che, come richiesto, non esegue alcun cambio di contesto nel momento in cui un elemento riceve il focus. 

3.3.1 Identificazione di errori

La Linea Guida 3.3 chiede di aiutare gli utenti ad evitare gli errori e di agevolarli nella loro correzione. 

In particolare il criterio di successo 3.3.1 dice che se viene rilevato automaticamente un errore nell'immissione di un dato (per esempio, durante la compilazione di una form), deve essere fornito un messaggio di testo che descrive l'errore. Questo messaggio dovrebbe essere il più specifico possibile in modo da permettere agli utenti di determinare cosa non ha funzionato.

WebSite X5 risolve in automatico questo criterio generando codice semanticamente corretto per le form e-mail. In particolare, viene utilizzato l’attributo HTML aria-invalid nei campi delle form che contengono degli errori di validazione (dati mancanti o non validi) e/o gli elementi HTML <dialog> con role=alertdialog per comunicare all’utente eventuali errori di compilazione.

3.3.2 Etichette o istruzioni

Sempre per la Linea Guida 3.3, il criterio di successo 3.3.2 dice che, quando il contenuto richiede delle azioni di input da parte di dell'utente, devono essere fornite delle etichette o delle istruzioni che chiariscano quali dati sono attesi.

WebSite X5 risolvere questo criterio in modalità automatica generando codice semanticamente corretto. In particolare:

• impiega gli elementi HTML <label> e/o gli attributi HTML aria-label, aria-labelledby e aria-describedby per fornire indicazioni su come compilare i campi di input (campi di ricerca nel sito e nel catalogo prodotti, pagina di login e di registrazione, oggetti modulo di contatto);
• impiega l’attributo HTML aria-required per tutti i campi di input obbligatori.

Inoltre, WebSite X5 inserisce in automatico le descrizioni per tutti i campi dei form generati in autonomia (per esempio, 

campi di ricerca nel sito e nel catalogo prodotti, pagina di login e di registrazione), mentre permette all'autore del sito di specificare le descrizioni per tutti i campi da lui definiti nell’Oggetto Modulo di contatto.

4.1.1 Analisi sintattica (parsing)

La Linea Guida 4.1 asserisce che occorre garantire la massima compatibilità con i programmi utente attuali e futuri, comprese le tecnologie assistive.

In particolare, il criterio di successo 4.1 richiede che, nei contenuti implementati utilizzando linguaggi di marcatura, gli elementi possiedano tag di apertura e chiusura completi, siano annidati in conformità alle proprie specifiche, non contengano attributi duplicati e tutti gli ID siano unici, salvo il caso in cui le specifiche permettano eccezioni.

WebSite X5 risolve in automatico questo criterio di successo dal momento che genera codice HTML sintatticamente valido, prestando attenzione nel rispettare ogni punto elencato.

4.1.2 Name, Role, Value

Sempre nell'ambito della Linea Guida 4.1, il criterio di successo 4.1.2 richiede che per tutti i componenti dell'interfaccia utente (inclusi ma non limitati a: elementi di un modulo, collegamenti e componenti generati da script):

• name (nome) e role (ruolo) vengano determinati programmaticamente; 
• stati, proprietà e valori che possono essere impostati dall'utente siano impostabili da programma; 
• le notifiche sui cambi di stato di questi elementi siano rese disponibili ai programmi utente, incluse le tecnologie assistive.

Lo scopo di questo criterio di successo è garantire che le tecnologie assistive (AT) possano interfacciarsi correttamente con i controlli dell'interfaccia utente. Quando vengono utilizzati controlli standard, questo processo è semplice. Quando, invece, vengono creati controlli personalizzati o gli elementi dell'interfaccia vengono programmati per avere un ruolo e/o una funzione diversi dal solito, è necessario adottare misure aggiuntive. 

Per soddisfare questo criterio, quindi, WebSite X5 genera in automatico codice semantico per i componenti dell'interfaccia utente. Per esempio:

• utilizza gli elementi HTML semantici come <a>, <button>, <input>, <dialog>, <nav>, <article> e/o l’attributo HTML role, in aggiunta agli attributi HTML aria-label, aria-labelledby e/o aria-describedby, per specificare il nome e il ruolo di ogni componente della pagina;
• inserisce gli attributi HTML aria-selected e aria-expanded per comunicare lo stato dei componenti dell’interfaccia (selezionati/deselezionati, espansi/compressi);
• inserisce gli attributi HTML aria-controls e aria-owns per comunicare le interazioni tra componenti;
• inserisce l’attributo HTML aria-live per notificare al visitatore i cambi dinamici di contenuto in porzioni di pagina.