accessWidget: come funziona dalla A alla Z

Il software di AccessiWay svolge molte funzioni e comprenderle tutte può diventare complesso. Pensiamo sia importante cogliere l'occasione per spiegare in modo approfondito come funziona il software e spiegare come testare correttamente il tool. Ecco quindi l'articolo su come funziona accessWidget, il migliore software per rendere il tuo sito completamente accessibile.

Come migliorare l'accessibilità del tuo sito, con accessWidget

Non tutte le soluzioni di accessibilità rendono i siti completamente navigabili, ma come si fa a capire quali soluzioni sono efficaci e quali no? Di tanto in tanto, riceviamo richieste di supporto o segnalazioni di bug su siti web che utilizzano una soluzione di accessibilità diversa da accessWidget.

Poiché lavoriamo a stretto contatto con gli utenti e cerchiamo costantemente i modi migliori per incorporare le funzionalità, è facile per alcuni concorrenti copiare ciò che facciamo. Il messaggio di attivazione dello screen reader Alt + 1 di accessWidget e l'implementazione dei collegamenti saltati sono stati copiati da altre soluzioni di accessibilità che non sono accessibili. Sebbene il messaggio del lettore di schermo Alt + 1 fosse sufficiente per garantire se il sito Web utilizza accessWidget o meno, sfortunatamente non è più così.

Tuttavia, esiste ancora un modo semplice per sapere se un sito web utilizza accessWidget o un'altra soluzione. Se stai utilizzando uno screen reader, premi semplicemente Alt + 9 sulla tastiera, che aprirà l'interfaccia di accessWidget, e nel caso in cui sentissi "Regolazione dell'accessibilità", questo confermerebbe che il sito è accessibile. Se non succede nulla, vuol dire che accessWidget non è attivo in quel sito. In alternativa, se non stai utilizzando uno screen reader, puoi guardare nella parte inferiore dell'interfaccia di accessWidget dove vedrai il seguente testo: "AccessiWay - The Web Accessibility Solution".

Come attivare e disattivare accessWidget a scopo di test o altro

Esistono diversi trigger che fanno sì che accessWidget attivi automaticamente la "modalità accessibile" anche se un utente non l'ha attivata intenzionalmente. Ad esempio, se un utente con screen reader naviga nel sito Web utilizzando il tasto Tab, accessWidget attiva automaticamente la modalità accessibile in modo che l'utente possa navigare con la tastiera senza problemi.

Un altro fattore scatenante è l'utilizzo degli “skip links" di accessWidget, con o senza uno screen reader. Gli skip links vengono visualizzati nella parte superiore della pagina a destra quando un utente inizia a navigare utilizzando il tasto Tab o i tasti freccia con uno screen reader. Lo scopo degli skip links è quello di consentire agli utenti di saltare rapidamente e facilmente i blocchi e di accedere a sezioni importanti della pagina come il menu, il contenuto e il piè di pagina, senza dover navigare elemento per elemento. Quando un utente clicca su uno degli skip links, la modalità accessibile si attiva automaticamente.

L'ultimo trigger (diverso dai profili Screen-Reader / Keyboard-Navigation all'interno dell'interfaccia accessWidget)  consiste nel cliccare sulla combinazione dei tasti Alt + 1. Quando un utente con screen reader accede a un sito Web con accessWidget, sentirà il messaggio "Per utilizzare questo sito Web in modalità screen reader, fare clic su Alt + 1 (o Opzione + 1 per MacOS)".

Disattivazione della modalità accessWidget / accessibile

Per disattivare le funzioni di accessWidget (ad es. Uscire dalla modalità di lettura dello schermo), fai semplicemente clic su Alt + 8. La pagina si aggiornerà e la modalità screen reader non si attiverà. In alternativa, si può cliccare sul pulsante "Ripristina impostazioni" all'interno dell'interfaccia di accessWidget.

Rimozione completa di accessWidget

Disattivare la modalità di lettura dello schermo non significa che non si riattiverà utilizzando i trigger sopra menzionati. Pertanto, se lo scopo è testare la pagina come se accessWidget non fosse presente, Alt + 0 disabiliterà e rimuoverà completamente il software dalla pagina. Premendo di nuovo Alt + 0 il software si riabiliterà sulla pagina

Come funziona accessWidget?

Di seguito troverai spiegazioni semplici, brevi e dirette per i processi molto complessi che accessWidget mette in funzione. Abbiamo cercato di essere il meno tecnici possibile con le spiegazioni. Se desideri ulteriori spiegazioni, non esitare a contattarci e chiedere!

Per gli screen readers e gli utenti con tastiera, prima di immergersi in regolazioni specifiche come collegamenti, menu, icone, moduli e altri, è importante capire come funzionano in generale. Quando accessWidget viene installato su un sito web, inizia un processo in background per analizzare il sito ad ogni sessione del visitatore. L'analisi include l'elaborazione dei fogli di stile e dell'HTML del sito web, oltre a un’analisi del come e dove le persone fanno clic, dove posizionano il mouse, cosa cambia nella pagina dopo aver interagito con un elemento specifico e molto altro.

Lo scopo dell'analisi sta innanzitutto nell’apprendere il funzionamento del processo di “comprensione contestuale”. Questo è fondamentale per sapere dove applicare gli attributi ARIA necessari e le modifiche al codice, in base ai risultati, in modo che la sessione di navigazione sia accessibile utilizzando la tastiera e / o uno screen reader.

‍Collegamenti: accessWidget analizza ogni collegamento vuoto o insufficiente e aggiunge un testo di solo lettura dello schermo che ne descrive la destinazione. Ad esempio, le icone come il logo di Facebook, o un'icona del carrello degli acquisti, oppure un'icona di lente d'ingrandimento per indicare un collegamento alla pagina di ricerca. Inoltre, i collegamenti che si aprono in una nuova scheda ricevono un testo per lo screen reader, oltre a un indicatore visivo.

‍Pulsanti: accessWidget identifica gli elementi che funzionano come pulsanti ma non sono codificati come tali come collegamenti e intervalli (che sono solo elementi di testo). Per rimediare, accessWidget li contrassegna come pulsanti utilizzando role = button e garantisce che possano ottenere lo stato attivo e la cliccabilità della tastiera, che non hanno per impostazione predefinita. Nel caso in cui questi elementi non abbiano testo ma siano rappresentati utilizzando un'icona, accessWidget identificherà l'icona e fornirà uno scopo testuale del pulsante proprio come fa con le icone di collegamento come spiegato in precedenza.

Punti di riferimento: accessWidget identifica e "contrassegna" importanti punti di riferimento della pagina come navigazione, ricerca, piè di pagina, caroselli e contenuto principale. Questo viene fatto utilizzando l'attributo role (role = main, role = contentinfo, role = navigation, ecc.) con il giusto contesto e un'aria-label con un nome accessibile come "Main Menu", "Support Menu", ecc.

‍Grafica: accessWidget esegue la scansione di ogni immagine priva di un testo alternativo ( non sovrascrive gli Alts forniti dal sito Web) e li elabora utilizzando un motore AI che crea un alt dagli oggetti, dallo scenario e dal testo dell'immagine. Ad esempio, un'immagine di persone che giocano a pallone sulla spiaggia con il testo "50% di sconto sull'abbigliamento da spiaggia" riceverà un testo alternativo  come "50% di sconto sull'abbigliamento da spiaggia. Un gruppo di persone che giocano a calcio sulla spiaggia ”.

‍Menu: come parte del processo di analisi, accessWidget apprende quali elementi sono i menu e quale sia loro scopo. Quindi, il software "taggerà" tali informazioni per gli screen reader utilizzando il ruolo e gli attributi aria-label. I menu a discesa o i sottomenu ricevono la funzionalità completa della tastiera e vengono annunciati utilizzando l'attributo aria-haspopup. Gli stati dei sottomenu vengono comunicati utilizzando l'attributo aria-Expanded che equivale a "true" o "false" a seconda che il sottomenu sia espanso o compresso.

Moduli: accessWidget identifica lo scopo e le convalide di tutti gli elementi del modulo e li etichetta di conseguenza per gli screen reader utilizzando gli attributi aria-label e aria-invalid. Inoltre, lo stato di convalida di ogni campo viene annunciato agli screen reader utilizzando l'attributo aria-invalid. Se l'invio del modulo non è riuscito a causa di un errore di convalida, accessWidget porta l'utente direttamente al primo campo che dovrebbe essere corretto mentre notifica  gli errori. Se il modulo viene inviato con successo, anche questo viene comunicato ai lettori di schermo.

‍Intestazioni: accessWidget impara quale degli elementi testuali funziona come un'intestazione, inclusi e in particolare gli elementi che appaiono visivamente sulla pagina come un'intestazione ma non sono codificati come span, div o strong. Quindi, li contrassegna come intestazioni utilizzando gli attributi role = header e aria-label. Per garantire una corretta esperienza di lettura dello schermo, accessWidget ordina i titoli con una gerarchia appropriata in base alla loro importanza (livello di intestazione da 1 a 6).

‍Tabelle: ci sono 2 tipi di tabelle che accessWidget corregge. (1) una tabella di layout (2) una tabella senza intestazioni di riga o di colonna codificate.

‍Popup e modalità: quando compaiono popup, accessWidget gli identifica in tempo reale e comunica immediatamente l'aspetto di tale popup agli screen reader utilizzando gli attributi aria-modal = true e role = dialog. Inoltre, accessWidget sposta immediatamente il focus nel popup e blocca la navigazione sia per la navigazione con schede che per gli utenti con screen reader all'interno del popup in modo che gli utenti non sfuggano involontariamente e perdano l'orientamento. Infine, quando un popup è attivo, accessWidget consente agli utenti di chiuderlo / rimuoverlo sia con il tasto Esc che con un pulsante di chiusura.

Per utenti con problemi di vista, epilessia, disturbi cognitivi

Come funziona: i siti web su cui viene installato accessWidget includono l'interfaccia di accessibilità progettata per coprire i requisiti di accessibilità relativi all'interfaccia utente, al design e alla leggibilità dei siti web. Utilizzando l'interfaccia, gli utenti ipovedenti, gli utenti con disabilità cognitive, gli utenti epilettici e molti altri possono modificare il design di un sito web per soddisfare in modo specifico le loro esigenze individuali.

A tale scopo, gli utenti possono scegliere un profilo di disabilità predefinito, come il "Profilo con problemi di vista", e l'interfaccia utente e il design del sito web si adatteranno  immediatamente alla categoria di  disabilità selezionata per un'esperienza di navigazione più facile e sicura. In alternativa, gli utenti possono scegliere di abilitare diverse regolazioni, come l’aumento delle dimensioni dei caratteri, le modifiche dei contrasti di colore, e molto altro.

Alcuni esempi di come gli utenti con disabilità utilizzano l'interfaccia di accessWidget

I disturbi della vista spesso richiedono una soglia minima di rapporto di contrasto tra testo e sfondo per poterlo vedere correttamente. Utilizzando l'interfaccia, gli utenti con una disabilità di questo tipo possono scegliere di navigare nel sito Web nel profilo con problemi di vista o di abilitare una modalità scura o una modalità luce che di solito soddisfano entrambi i criteri WCAG.

Gli utenti con disabilità cognitive spesso hanno difficoltà a concentrarsi sulle parti essenziali di un sito Web a causa di distrazioni come immagini, video, popup, animazioni e cursori. Il profilo di disabilità cognitiva riduce al minimo le distrazioni e fornisce ulteriori regolazioni per aiutare gli utenti a concentrarsi. Queste modifiche includono l'evidenziazione dei titoli e degli elementi interattivi, l'interruzione delle animazioni e molto altro.

Gli utenti con epilessia sono spesso a rischio di attacchi epilettici a causa di GIF, animazioni e colori lampeggianti. Un utente epilettico può abilitare il profilo Seizure Safe che interromperà immediatamente tutte le animazioni lampeggianti e ridurrà le tonalità rischiose per eliminare il rischio di convulsioni.

Le persone che soffrono di miopia  possono distanziare l'altezza tra le righe, i margini tra le lettere, aumentare le dimensioni dei caratteri e persino ridimensionare l'intero layout e il contenuto del sito, fino a quando non si adatta alle loro esigenze specifiche.

Naturalmente, ci sono dozzine di casi d'uso ed esempi di come le persone possono utilizzare la nostra interfaccia di accessibilità. Questi esempi forniscono solo un assaggio di come funziona.

Di seguito troverai un elenco di tutte le regolazioni disponibili dell'interfaccia raggruppate per categoria.

Profili di accessibilità di AccessiWay

Profilo protetto dalle crisi: questo profilo consente agli utenti con epilessia di utilizzare il sito Web in modo sicuro eliminando il rischio di crisi epilettiche derivanti da animazioni lampeggianti e da combinazioni di colori rischiose.

‍Profilo con problemi di vista: questo profilo regola il sito Web in modo che sia accessibile alla maggior parte dei problemi di vista come cataratta, glaucoma e vista degradante.

‍Profilo disabilità cognitiva: questo profilo fornisce varie funzionalità di assistenza per aiutare gli utenti con disabilità cognitive come autismo, dislessia, CVA e altri a concentrarsi più facilmente sugli elementi essenziali del sito web.

‍Profilo ADHD Friendly: questo profilo riduce significativamente le distrazioni e il rumore fornendo una maschera per aiutare le persone con ADHD e disturbi dello sviluppo neurologico a navigare, leggere e concentrarsi sugli elementi essenziali del sito web più facilmente.

Profilo utenti non vedenti (screen readers): questo profilo regola il sito Web in modo che sia compatibile con lettori di schermo come JAWS, NVDA, VoiceOver e TalkBack. Uno screen reader è un software installato sul computer e sullo smartphone dell'utente non vedente e i siti web dovrebbero garantirne la compatibilità.

‍Profilo di navigazione con tastiera (con problemi motori): questo profilo consente alle persone con problemi motori di utilizzare il sito Web utilizzando la tastiera Tab, Maiusc + Tab e i tasti Invio. Gli utenti possono anche utilizzare scorciatoie come "M" (menu), "H" (intestazioni), "F" (moduli), "B" (pulsanti) e "G" (grafica) per passare a elementi specifici.

Come funziona l'adeguamento del contenuto su accessWidget

Dimensionamento dei caratteri: gli utenti possono aumentare o diminuire la dimensione dei caratteri.

‍Leggibilità dei caratteri: gli utenti possono sostituire i caratteri poco leggibili, come i caratteri di scrittura a mano, con il carattere predefinito del sistema che è leggibile.

Lente di ingrandimento del testo: gli utenti possono visualizzare qualsiasi testo sulla pagina in una casella di testo separata e più grande.

‍Evidenziazione del titolo: gli utenti possono scegliere di enfatizzare tutti i titoli sulla pagina con un grande riquadro blu per un migliore orientamento.

‍Evidenziazione dei collegamenti: gli utenti possono scegliere di enfatizzare tutti i collegamenti sulla pagina con un grande bordo arancione per un migliore orientamento.

‍Ridimensionamento del contenuto: gli utenti possono ridimensionare l'intero layout della pagina e aumentare proporzionalmente le dimensioni di tutti gli elementi della pagina web.

‍Spaziatura altezza riga: gli utenti possono regolare lo spazio tra le righe in tutte le frasi del sito web se queste appaiono troppo vicine o una sopra l'altra.

‍Allineamento dei contenuti: gli utenti possono modificare l'allineamento dei testi del sito web a sinistra, a destra o al centro.

Come funziona la regolazione del colore e del display su accessWidget

Contrasto scuro: gli utenti possono scegliere di utilizzare il sito Web in una combinazione di colori scuri che fornisce uno sfondo molto elevato e un rapporto di contrasto in primo piano.

‍Contrasto chiaro: gli utenti possono scegliere di utilizzare il sito Web in una combinazione di colori chiari che fornisce un rapporto di contrasto molto elevato per lo sfondo e il primo piano.

‍Contrasto elevato: gli utenti possono aumentare il contrasto e la vividezza della pagina.

Alta saturazione: gli utenti possono aumentare la saturazione del colore della pagina.

‍Bassa saturazione: gli utenti possono ridurre la saturazione del colore della pagina.

‍Monocromatico: gli utenti possono eliminare tutti i colori della pagina e renderla monocromatica.

‍Colori del testo: gli utenti possono scegliere un colore che vedono facilmente e impostarlo su tutti i testi.

‍Colori del titolo: gli utenti possono scegliere un colore che vedono facilmente e impostarlo su tutti i titoli.

‍Colore di sfondo: gli utenti possono scegliere un colore facilmente visibile e impostarlo su tutti gli sfondi.

Come funziona la regolazione dell'orientamento su accessWidget

Guida alla lettura: gli utenti possono abilitare una guida che segue il mouse e aiuta a concentrarsi sul contenuto essenziale della pagina.

‍Guida alla lettura: gli utenti possono abilitare una maschera che desatura le parti del sito che non sono attualmente focalizzate, riducendo così le distrazioni e il rumore.

‍Visualizzazione dell'immagine: gli utenti possono scegliere di rimuovere "rumori di fondo" come immagini e immagini di sfondo per concentrarsi sul contenuto della pagina.

‍Dizionario online: gli utenti con disturbi cognitivi sono in grado di cercare frasi, slang, concetti, punti di riferimento e persone menzionate nella pagina web.

‍Controllo del suono: gli utenti con apparecchi acustici possono scegliere di disattivare automaticamente tutti i suoni automatici in riproduzione sul sito (video automatici, ecc.)

‍Navigazione rapida: gli utenti sono in grado di accedere a una qualsiasi delle pagine più importanti del sito da un unico punto senza dover passare attraverso tutti i vari menu del sito Web.

‍Evidenziazione del focus: gli utenti possono scegliere di raddoppiare l'anello di orientamento visivo che appare quando si concentrano su un elemento interattivo.

‍Evidenziazione al passaggio del mouse: gli utenti possono scegliere di raddoppiare l'anello di orientamento visivo che appare quando il mouse passa con il mouse su un elemento interattivo.

‍Cursore del mouse: gli utenti possono modificare il piccolo cursore predefinito del browser con uno grande nero o uno grande bianco, per un migliore orientamento.