window.pipedriveLeadboosterConfig = { base: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2, } ;(function () { var w = finestra if (w.LeadBooster) { console.warn('LeadBooster esiste già') } else { w.LeadBooster = { q: [], on: function (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: function (n) { this.q.push({ t: 't', n: n }) }, } } })() 4 problemi comuni di accessibilità del Web da conoscere - The Codest
The Codest
  • Chi siamo
  • Servizi
    • Sviluppo di software
      • Sviluppo Frontend
      • Sviluppo backend
    • Staff Augmentation
      • Sviluppatori Frontend
      • Sviluppatori backend
      • Ingegneri dei dati
      • Ingegneri del cloud
      • Ingegneri QA
      • Altro
    • Consulenza
      • Audit e consulenza
  • Industrie
    • Fintech e banche
    • E-commerce
    • Adtech
    • Tecnologia della salute
    • Produzione
    • Logistica
    • Automotive
    • IOT
  • Valore per
    • CEO
    • CTO
    • Responsabile della consegna
  • Il nostro team
  • Case Studies
  • Sapere come
    • Blog
    • Incontri
    • Webinar
    • Risorse
Carriera Contattate
  • Chi siamo
  • Servizi
    • Sviluppo di software
      • Sviluppo Frontend
      • Sviluppo backend
    • Staff Augmentation
      • Sviluppatori Frontend
      • Sviluppatori backend
      • Ingegneri dei dati
      • Ingegneri del cloud
      • Ingegneri QA
      • Altro
    • Consulenza
      • Audit e consulenza
  • Valore per
    • CEO
    • CTO
    • Responsabile della consegna
  • Il nostro team
  • Case Studies
  • Sapere come
    • Blog
    • Incontri
    • Webinar
    • Risorse
Carriera Contattate
Freccia indietro TORNA INDIETRO
2022-11-15
Sviluppo di software

4 problemi comuni di accessibilità del Web da conoscere

The Codest

Reda Salmi

Sviluppatore React

Il Web è utilizzato ogni giorno da milioni di persone diverse; uno dei nostri principali obiettivi come sviluppatori è quello di rendere il Web accessibile a tutti. Questo articolo presenterà alcuni problemi comuni di accessibilità del web e i modi per risolverli.

Problema del rapporto di contrasto

Il problema di accessibilità più comune che ho riscontrato nel corso degli anni è quello della problema di accessibilità del contrasto e del coloreUn cattivo rapporto di contrasto renderà difficile vedere il contenuto della pagina e questo sarà molto dannoso per gli utenti, compresi quelli con disabilità visive.

Il contrasto è una misura della differenza di "luminanza" o luminosità 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.

barra di navigazione</em> con titoli in verde

Supponiamo che al cliente piaccia molto quel colore verdastro e lo trovi fantastico, ma c'è un problema di contrasto. Abbiamo un #FFFF sfondo con un #83A94C 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 necessario. Per individuare questo problema abbiamo diverse soluzioni:

  1. Utilizzate un verificatore di contrasto online come il Controllo del contrasto Webaimche calcolerà il rapporto di contrasto e fornirà un valore di Passo o Bocciatura grado.
  2. Utilizzate una delle numerose estensioni di controllo del contrasto del browser, ad esempio: WCAG Controllo del contrasto cromatico.
  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à CSS color e fate clic sul rettangolo del colore per aprire il selezionatore di colori; in basso, vi verrà presentato un valore del rapporto di contrasto, espandetelo per maggiori dettagli. La procedura è esattamente la stessa per Firefox, con una piccola differenza nel rapporto mostrato in basso a sinistra del selezionatore di colori.
nero<em>sfondo</em> con<em> codice blu</em>

Per avere maggiori dettagli sul contrasto, guardate qui Articolo sull'accessibilità di contrasto e colore.

Problema del testo del link

I link sono una parte importante del web al giorno d'oggi, quindi renderli accessibili è 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ù, clicca qui, controlla i dettagli non è molto utile. prodotto dettagli, ad esempio, utilizzare il nome del prodotto come "The Mandalorian Helmet" è meglio e più informativo. Parole come clicca qui o di più su può essere omesso perché un link è cliccabile per impostazione predefinita e qualcosa come "maggiori informazioni sulle notizie di oggi" può 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 e abbastanza lungo da fornire una buona descrizione del suo scopo.

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à il ruolo di testo del link e sarà annunciato dagli screen reader. Ci sono diversi scenari quando si trattano le immagini come link: se l'immagine è 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:


<a href="/it/notifications/">
  <img src="/img/notification.png" alt="Notifiche">
</a>

Per saperne di più sull'accessibilità dei link, consultate i link qui presenti:Testo e aspetto dei link, Immagini funzionali.

L'input del modulo manca di un'etichetta

input<em>labels</em>with<em>blue</em>button

Abbiamo visto tutti questi input di form senza etichetta e con un segnaposto per descrivere lo scopo dell'input. Una prima nota è che non appena l'utente compila tutti gli input e i segnaposto non sono più visibili, non avremo alcun contesto visivo sullo scopo degli input, ma concentriamoci sull'accessibilità.

Associare un etichetta a un input ci offre due vantaggi principali: uno screen reader leggerà l'etichetta quando l'utente è 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 è aggiungere le etichette come segue:

    Nome

    
  

    Cognome

    
  

    Indirizzo e-mail

    
  

    Invia
  

```

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ì 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 è quella di applicare un'etichetta visualizzazione: nessuna; o visibilità: nascosto; alle nostre etichette, questo le nasconderà, ma sono ancora lì, giusto? Queste proprietà nascondono gli elementi non solo sullo schermo, ma anche per gli utenti di screen reader, quindi non risolvono il problema.

Possiamo utilizzare il modello a clip per risolvere questo problema. In questo modo, nasconderemo il contenuto visivamente, ma lo forniremo ai lettori di schermo. Creeremo il seguente CSS sr-solo e applicarla a tutte le nostre etichette:

 .sr-only:not(:focus):not(:active) {
   clip: rect(0 0 0 0);
   percorso clip: inset(50%);
   altezza: 1px;
   overflow: nascosto;
   posizione: assoluta;
   spazio bianco: nowrap;
   larghezza: 1px;
 }

Questo nasconderà le nostre etichette, le renderà disponibili per gli screen reader e si adatterà al nostro design. Il :not(:focus):not(:active) La pseudo-classe impedisce che elementi focalizzabili come a, pulsante, ingresso di essere nascosti quando si riceve l'attenzione.

Nessun indicatore di messa a fuoco

Una volta lo facevo nel mio foglio di stile CSS globale:

* {
contorno: nessuno; /* orribile errore */
}

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é all'epoca non lo capivo; dopo alcune ricerche ho scoperto che è a causa della proprietà CSS outline e la rimozione ha risolto il problema.

All'epoca non avevo idea di quale fosse il modo corretto di farlo. Dopo aver indagato sui perché e sui percome di questa nuova impostazione predefinita, ho scoperto che l'outline è 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 è considerato una cattiva pratica. È possibile personalizzare gli indicatori di attenzione come si ritiene opportuno, ma rimuoverli completamente dal sito web è un grosso problema di accessibilità. Personalizzare lo stile di messa a fuoco di un elemento è abbastanza facile, ad esempio:

 a:focus {
   contorno: 4px solido #ee7834;
   outline-offset: 4px;
 }

Strumenti per l'accessibilità

Controllare tutti gli aspetti di cui abbiamo parlato può essere molto impegnativo, soprattutto sapendo che c'è ancora molto da fare in materia di accessibilità, quindi per aiutarci a gestire l'accessibilità abbiamo due ottime estensioni del browser.

Strumento di valutazione WAVE è una suite di strumenti di valutazione che ci aiuta a rendere più accessibili i nostri contenuti web. È disponibile sia in Google Chrome che in Firefox.

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.

finestra bianca con sezioni grigie

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ò vedere, il risultato è molto chiaro e dettagliato. La scheda Dettagli restituirà 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.

Strumenti di sviluppo Axe è un toolkit per l'accessibilità potente e accurato. È 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.

DevTools<em>finestra</em> con<em> sezioni nere</em> grigie

Come si può 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.

Un ulteriore modo per verificare l'accessibilità è quello di utilizzare uno screen reader e testare il vostro sito web con esso; sono disponibili molti screen reader, solo per citarne alcuni:

  • NVDA
  • Voce fuori campo è disponibile sui dispositivi MacOs.
  • Orca è un lettore di schermo gratuito e open source per Linux.

Sintesi

In questo articolo abbiamo visto alcuni problemi comuni di accessibilità del Web, i modi per risolverli e alcuni ottimi strumenti per testare l'accessibilità del Web. C'è ancora molto da dire sull'accessibilità di elementi come le finestre di dialogo, gli accrocchi e i caroselli, ma come avete visto in questo articolo c'è molta documentazione e strumenti che vi aiutano a gestire l'accessibilità.

Alcuni punti chiave da ricordare:

  • Controllare sempre il rapporto di contrasto.
  • Fornite sempre contenuti informativi ai link.
  • A un elemento del modulo deve essere associata un'etichetta.
  • È necessario fornire uno stile di focalizzazione evidente.
carriera al codest

Articoli correlati

E-commerce

Dilemmi della sicurezza informatica: Fughe di dati

La corsa al Natale è in pieno svolgimento. Alla ricerca di regali per i propri cari, le persone sono sempre più disposte a "prendere d'assalto" i negozi on-line

The Codest
Jakub Jakubowicz CTO e cofondatore
Sviluppo di software

Strumenti Javascript in azione

Scoprite alcuni strumenti di recupero JavaScript per migliorare la vostra programmazione. Scoprite di più su ESLint, Prettier e Husky!

The Codest
Reda Salmi Sviluppatore React
Sviluppo di software

9 errori da evitare durante la programmazione in Java

Quali sono gli errori da evitare durante la programmazione in Java? Nel pezzo che segue rispondiamo a questa domanda.

The Codest
Rafal Sawicki Sviluppatore Java

Iscrivetevi alla nostra knowledge base e rimanete aggiornati sulle competenze del settore IT.

    Chi siamo

    The Codest - Società internazionale di sviluppo software con centri tecnologici in Polonia.

    Regno Unito - Sede centrale

    • Ufficio 303B, 182-184 High Street North E6 2JA
      Londra, Inghilterra

    Polonia - Poli tecnologici locali

    • Parco uffici Fabryczna, Aleja
      Pokoju 18, 31-564 Cracovia
    • Ambasciata del cervello, Konstruktorska
      11, 02-673 Varsavia, Polonia

      The Codest

    • Casa
    • Chi siamo
    • Servizi
    • Case Studies
    • Sapere come
    • Carriera
    • Dizionario

      Servizi

    • Consulenza
    • Sviluppo di software
    • Sviluppo backend
    • Sviluppo Frontend
    • Staff Augmentation
    • Sviluppatori backend
    • Ingegneri del cloud
    • Ingegneri dei dati
    • Altro
    • Ingegneri QA

      Risorse

    • Fatti e miti sulla collaborazione con un partner esterno per lo sviluppo di software
    • Dagli Stati Uniti all'Europa: Perché le startup americane decidono di trasferirsi in Europa
    • Confronto tra gli hub di sviluppo Tech Offshore: Tech Offshore Europa (Polonia), ASEAN (Filippine), Eurasia (Turchia)
    • Quali sono le principali sfide di CTO e CIO?
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • Condizioni di utilizzo del sito web

    Copyright © 2025 di The Codest. Tutti i diritti riservati.

    it_ITItalian
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fiFinnish fr_FRFrench pl_PLPolish arArabic jaJapanese ko_KRKorean es_ESSpanish nl_NLDutch etEstonian elGreek it_ITItalian