{"id":3142,"date":"2022-11-15T10:09:22","date_gmt":"2022-11-15T10:09:22","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/4-common-web-accessibility-issues-to-know\/"},"modified":"2026-03-09T13:10:53","modified_gmt":"2026-03-09T13:10:53","slug":"problema-del-rapporto-di-contrasto","status":"publish","type":"post","link":"https:\/\/thecodest.co\/it\/blog\/contrast-ratio-issue\/","title":{"rendered":"4 problemi comuni di accessibilit\u00e0 del Web da conoscere"},"content":{"rendered":"

Problema del rapporto di contrasto<\/h2>\n\n\n\n

Il problema di accessibilit\u00e0 pi\u00f9 comune che ho riscontrato nel corso degli anni \u00e8 quello della problema di accessibilit\u00e0 del contrasto e del colore<\/b>Un cattivo rapporto di contrasto render\u00e0 difficile vedere il contenuto della pagina e questo sar\u00e0 molto dannoso per gli utenti, compresi quelli con disabilit\u00e0 visive. <\/p>\n\n\n\n

Il contrasto \u00e8 una misura della differenza di \"luminanza\" o luminosit\u00e0 percepita tra due colori, ad esempio la differenza tra il colore di sfondo e il colore di primo piano del contenuto della pagina. Diamo un'occhiata a questa barra navale.<\/p>\n\n\n\n

\"barra<\/figure>\n\n\n\n

Supponiamo che al cliente piaccia molto quel colore verdastro e lo trovi fantastico, ma c'\u00e8 un problema di contrasto. Abbiamo un #FFFF<\/code> sfondo con un #83A94C<\/code> Il colore del testo risulta in un rapporto di contrasto di 2,71:1, molto al di sotto del valore minimo previsto. 4.5:1<\/strong> necessario. Per individuare questo problema abbiamo diverse soluzioni: <\/p>\n\n\n\n

    \n
  1. Utilizzate un verificatore di contrasto online come il Controllo del contrasto Webaim<\/a>che calcoler\u00e0 il rapporto di contrasto e fornir\u00e0 un valore di Passo<\/strong> o Bocciatura<\/strong> grado.<\/li>\n\n\n\n
  2. Utilizzate una delle numerose estensioni di controllo del contrasto del browser, ad esempio: WCAG Controllo del contrasto cromatico<\/a>.<\/li>\n\n\n\n
  3. Provate il verificatore di contrasto integrato nel browser. Per utilizzarlo su Google Chrome, aprite gli strumenti di sviluppo, ispezionate l'elemento in questione (ad esempio, il link Home della nostra navbar), andate alla propriet\u00e0 CSS color e fate clic sul rettangolo del colore per aprire il selezionatore di colori; in basso, vi verr\u00e0 presentato un valore del rapporto di contrasto, espandetelo per maggiori dettagli. La procedura \u00e8 esattamente la stessa per Firefox, con una piccola differenza nel rapporto mostrato in basso a sinistra del selezionatore di colori.<\/li>\n<\/ol>\n\n\n\n
    \"nero<em>sfondo<\/em><\/figure>\n\n\n\n

    Per avere maggiori dettagli sul contrasto, guardate qui Articolo sull'accessibilit\u00e0 di contrasto e colore<\/a>.<\/p>\n\n\n\n

    Problema del testo del link<\/h2>\n\n\n\n

    I link sono una parte importante del web<\/a> Oggi i link sono sempre pi\u00f9 frequenti, quindi renderli accessibili \u00e8 molto importante. Un link deve avere un senso e informare l'utente del suo contesto, quindi un link poco informativo con un testo come leggi di pi\u00f9, clicca qui, controlla i dettagli non \u00e8 molto utile, quindi invece di aggiungere \"controlla i dettagli\" per prodotto<\/a> dettagli, ad esempio, utilizzare il nome del prodotto come \"The Mandalorian Helmet\" \u00e8 meglio e pi\u00f9 informativo. Parole come clicca qui<\/code> o di pi\u00f9 su<\/code> pu\u00f2 essere omesso perch\u00e9 un link \u00e8 cliccabile per impostazione predefinita e qualcosa come \"maggiori informazioni sulle notizie di oggi\" pu\u00f2 essere abbreviato in \"notizie di oggi\". Non ci sono regole o limiti particolari per la lunghezza dei link, l'opzione il link deve essere leggibile<\/b> e abbastanza lungo da fornire una buona descrizione del suo scopo.<\/p>\n\n\n\n

    Le immagini come link sono un modello molto diffuso, quindi deve seguire le stesse regole di cui abbiamo parlato sopra. L'attributo alt dell'immagine svolger\u00e0 il ruolo di testo del link e sar\u00e0 annunciato dagli screen reader. Ci sono diversi scenari quando si trattano le immagini come link: se l'immagine \u00e8 l'unico contenuto del link, allora deve avere un attributo alt, se il link contiene del testo e un'immagine, allora possiamo omettere l'attributo alt; ecco alcuni esempi:<\/p>\n\n\n\n

    \r<a href="\/notifications">\r\n  <img src="\/img\/notification.png" alt="Notifiche">\r\n<\/a><\/code><\/pre>\n\n\n\n
    Per saperne di pi\u00f9 sull'accessibilit\u00e0 dei link, consultate i link qui presenti:Testo e aspetto dei link<\/a>, Immagini funzionali<\/a>.<\/p>\n\n\n\n
    L'input del modulo manca di un'etichetta<\/h2>\n\n\n\n
    \"input<em>labels<\/em>with<em>blue<\/em>button\"<\/figure>\n\n\n\n
    Abbiamo visto tutti questi input di form senza etichetta e con un segnaposto per descrivere lo scopo dell'input. Una prima nota \u00e8 che non appena l'utente compila tutti gli input e i segnaposto non sono pi\u00f9 in vista, non avremo alcun contesto visivo sullo scopo degli input, ma lasciamo che noi<\/a> concentrarsi sull'accessibilit\u00e0. <\/p>\n\n\n\n
    Associare un etichetta<\/code> a un input ci offre due vantaggi principali: uno screen reader legger\u00e0 l'etichetta quando l'utente \u00e8 focalizzato sull'input del form e quando un'etichetta viene cliccata o toccata il browser passa il focus all'input associato. Una soluzione semplice per questo tipo di situazione \u00e8 aggiungere le etichette come segue:<\/p>\n\n\n\n
        Nome\n\n    \n  \n\n    Cognome\n\n    \n  \n\n    Indirizzo e-mail\n\n    \n  \n\n    Invia\n  \n\n```<\/code><\/pre>\n\n\n\n
    Ecco, tutti gli input hanno le loro etichette associate che li rendono accessibili a tutti. Possiamo anche rimuovere i segnaposto per evitare di duplicare lo scopo dell'input, ma sappiamo tutti che gli scenari del mondo reale non sono cos\u00ec facili da gestire: avete appena ricevuto un progetto con questi input del modulo senza etichette e il cliente non vuole cambiare questa parte. La prima soluzione che ci viene in mente \u00e8 quella di applicare un'etichetta visualizzazione: nessuna;<\/code> o visibilit\u00e0: nascosto;<\/code> alle nostre etichette, questo le nasconder\u00e0, ma sono ancora l\u00ec, giusto? Queste propriet\u00e0 nascondono gli elementi non solo sullo schermo, ma anche per gli utenti di screen reader, quindi non risolvono il problema.<\/p>\n\n\n\n
    Possiamo utilizzare il modello a clip<\/strong> per risolvere questo problema. In questo modo, nasconderemo il contenuto visivamente, ma lo forniremo ai lettori di schermo. Creeremo il seguente CSS sr-solo<\/code> e applicarla a tutte le nostre etichette:<\/p>\n\n\n\n
     .sr-only:not(:focus):not(:active) {\n   clip: rect(0 0 0 0);\n   percorso clip: inset(50%);\n   altezza: 1px;\n   overflow: nascosto;\n   posizione: assoluta;\n   spazio bianco: nowrap;\n   larghezza: 1px;\n }\n<\/code><\/code><\/pre>\n\n\n\n
    Questo nasconder\u00e0 le nostre etichette, le render\u00e0 disponibili per gli screen reader e si adatter\u00e0 al nostro design. Il :not(:focus):not(:active)<\/code> La pseudo-classe impedisce che elementi focalizzabili come a<\/code>, pulsante<\/code>, ingresso<\/code> di essere nascosti quando si riceve l'attenzione.<\/p>\n\n\n\n
    Nessun indicatore di messa a fuoco<\/h2>\n\n\n\n
    Una volta lo facevo nel mio foglio di stile CSS globale:<\/p>\n\n\n\n
    * {\ncontorno: nessuno; \/* orribile errore *\/\n}<\/code><\/pre>\n\n\n\n
    Intorno al 2020 ho notato che i bordi neri comparivano sugli input dei moduli di Google Chrome quando erano focalizzati o sui pulsanti quando si entrava in una scheda - era davvero strano perch\u00e9 all'epoca non lo capivo; dopo alcune ricerche ho scoperto che \u00e8 a causa della propriet\u00e0 CSS outline e la rimozione ha risolto il problema.<\/p>\n\n\n\n
    All'epoca non avevo idea di quale fosse il modo corretto di farlo.  Dopo aver indagato sui perch\u00e9 e sui percome di questa nuova impostazione predefinita, ho scoperto che l'outline \u00e8 un indicatore di messa a fuoco dell'elemento e che se viene rimosso deve essere fornito uno stile di messa a fuoco evidente; in pratica, quello che stavo facendo \u00e8 considerato una cattiva pratica. \u00c8 possibile personalizzare gli indicatori di attenzione come si ritiene opportuno, ma rimuoverli completamente dal sito web \u00e8 un grosso problema di accessibilit\u00e0. Personalizzare lo stile di messa a fuoco di un elemento \u00e8 abbastanza facile, ad esempio:<\/p>\n\n\n\n
     a:focus {\n   contorno: 4px solido #ee7834;\n   outline-offset: 4px;\n }<\/code><\/code><\/pre>\n\n\n\n
    Strumenti per l'accessibilit\u00e0<\/h2>\n\n\n\n
    Controllare tutti gli aspetti di cui abbiamo parlato pu\u00f2 essere molto impegnativo, soprattutto sapendo che c'\u00e8 ancora molto da fare in materia di accessibilit\u00e0, quindi per aiutarci a gestire l'accessibilit\u00e0 abbiamo due ottime estensioni del browser.<\/p>\n\n\n\n
    Strumento di valutazione WAVE<\/a> \u00e8 una suite di strumenti di valutazione che ci aiuta a rendere pi\u00f9 accessibili i nostri contenuti web. \u00c8 disponibile sia in Google Chrome che in Firefox. <\/p>\n\n\n\n
    Proviamola su una piccola pagina web contenente una barra di navigazione e un input privo di etichetta e vediamo cosa restituisce; dopo aver installato l'estensione, dobbiamo solo fare clic sull'icona dell'estensione per utilizzarla.<\/p>\n\n\n\n
    \"finestra<\/figure>\n\n\n\n
    La scheda Riepilogo mostra 1 errore (elemento del modulo mancante di un'etichetta), 2 errori di contrasto e 1 avviso (struttura dell'intestazione mancante); come si pu\u00f2 vedere, il risultato \u00e8 molto chiaro e dettagliato. La scheda Dettagli restituir\u00e0 un elenco di tutti gli errori, gli avvisi e le caratteristiche. Possiamo anche interagire direttamente sulla pagina facendo clic sui rettangoli rossi per controllare la descrizione e il tipo di errore.<\/p>\n\n\n\n
    Strumenti di sviluppo Axe<\/a> \u00e8 un toolkit per l'accessibilit\u00e0 potente e accurato. \u00c8 disponibile sia in Google Chrome che in Firefox. Dopo aver installato l'estensione, dovremo aprire gli strumenti di sviluppo del browser, andare alla scheda DevTools di Axe e fare clic su Scansiona tutte le mie pagine.<\/p>\n\n\n\n
    \"DevTools<em>finestra<\/em><\/figure>\n\n\n\n
    Come si pu\u00f2 notare, Axe DevTools ha segnalato gli stessi problemi con lo strumento di valutazione WAVE: problemi di contrasto, elementi del modulo privi di etichetta e elementi di intestazione mancanti, e ci ha anche fornito alcune best practice da seguire.<\/p>\n\n\n\n
    Un ulteriore modo per verificare l'accessibilit\u00e0 \u00e8 quello di utilizzare uno screen reader e testare il vostro sito web con esso; sono disponibili molti screen reader, solo per citarne alcuni:<\/p>\n\n\n\n