Come creare un design accessibile di una pagina web

Schermo del laptop

Negozi online, applicazioni bancarie, prenotazioni alberghiere o lavori freelance, ce ne sono sempre di più le attività gestite tramite Internet e che hanno sostituito in alcuni casi i media convenzionali.

Questo la rapida crescita delle operazioni digitali ci ha reso tutto più facile in molti aspetti vita. Ci fa risparmiare tempo poiché le transazioni sono più veloci e non è necessario recarsi in nessuna struttura fisica e, naturalmente, sono stati creati nuovi media che prima non esistevano e che ora la maggior parte delle persone usa, come i social network, i film in streaming e le serie su piattaforme come Netflix, o sistemi di pagamento online come Paypal.

Con questa crescita del mondo digitale è essenziale investire nello sviluppo di interfacce accessibili e ben progettate Per gli utenti. Tuttavia, non possiamo dimenticarlo ci sono utenti che soffrono di disabilità fisici o psicologici che limitano notevolmente la loro esperienza e la loro capacità di utilizzare computer e cellulari.

Sebbene ci siano alcune disabilità, come le persone che usano sedie a rotelle, che non interferiscono con l'uso di Internet, altre, come problemi di vista o cecità, problemi di coordinazione motoria, sordità o autismo, possono ostacolare seriamente la tua capacità di navigare sul Web. Per questi casi, alcuni sono già stati creati dispositivos come lettori di schermo, che assistono e supportano gli utenti nelle aree in cui hanno disabilità.

Ma questa è solo la prima parte della soluzione del problema. Pensando a questi utenti, dobbiamo progettare interfacce di pagine web che facilitano la tua esperienza e adatta alle tue esigenze. Ci sono alcuni principi durante la progettazione che possiamo applicare.

Contenuto e fonti

A partire dal più semplice, devi stabilire le priorità nella progettazione dei contenuti. L'intestazione e la barra dei menu devono essere facilmente individuabili visivamente e devono essere la prima cosa che l'utente vede. Gli elementi della home page, le immagini e le relative informazioni saranno i secondi da individuare.

In molte pagine compaiono annunci o banner pubblicitari. Se di per sé questo è fastidioso per tutti gli utenti, per chi ha problemi di vista è un problema in quanto crea molta confusione, e interferisce con la lettura del diagramma web. Ecco perché è essenziale creare un file progettazione editoriale generale della pagina che è organizzato logicamente e comprensibili e gli elementi sono dimensionati in modo appropriato, in modo che anche se ci sono altre distrazioni, gli utenti possono concentrarsi sul contenuto importante.

I caratteri che usi preferibilmente devono essere grande e leggibile. Il tipo Sans serif e grassetto Rendono la lettura molto più facile per le persone che potrebbero soffrire di dislessia. Altri caratteri consigliati sono: Arial, Times New Roman, Helvetica, Tahoma, Calibri e Verdana.

E, naturalmente, dovresti sempre fare attenzione che ci sia una chiara differenziazione tra il testo e lo sfondo. Non usare colori simili, scegli piuttosto colori contrastanti.

Carattere tipografico in grassetto sans serif

L'uso dei caratteri Sans Serif Bold consente una migliore visualizzazione del testo.

Testo alternativo

El Testo alternativo o tag alt, sono le descrizioni che vengono posizionate sulle immagini sulle pagine web. Sebbene questo testo non sia disponibile per la lettura da parte degli utenti, a descrizione ben scritta è uno strumento che ci aiuta a ottenere un migliore posizionamento SEO.

Ma l'utilità dell'Alt Tag non si riduce solo a questo. Per quelli utenti che utilizzano lettori di schermo per i disabili visivi, le descrizioni delle immagini sono l'unico riferimento che hanno per sapere qual è l'aspetto di ciò che è esposto nella pagina. Quindi, se posizioniamo, ad esempio, una fotografia di alcune piante grasse, un buon testo alternativo sarebbe: Tre piante succulente in vasi rosa. Un testo molto breve come: Piante in vaso, Non è una descrizione che fornisce dettagli rilevanti e quindi non funziona.

Succulente in vaso rosa

Tre piante succulente in vasi rosa. Esempio di testo alternativo.

adattabilità

Quando progettiamo dobbiamo anche tener conto di tutto le presentazioni in cui verrà mostrata la nostra interfaccia, sia in versione web o mobile. L'esperienza sarà sempre diversa a seconda del mezzo in cui la stiamo visualizzando.

Quando usiamo il cellulare, possiamo essere esposti a diversi ambienti che rendono difficile la lettura Di contenuto dello schermo. Se siamo all'aperto, ad esempio, la luminosità del sole farà sembrare lo schermo molto scuro e il rumore non ci permetterà di sentire bene l'audio. Ecco perché è importante riflettere attentamente su questi dettagli, in modo che la versione mobile abbia lettere grandi e colori scuri, e i video dovrebbero avere i sottotitoli nel caso in cui sia difficile ascoltarli.

Schermo mobile

Adattare il design dell'interfaccia in modo che sia leggibile su telefoni cellulari e computer.

Coerenza nel design

Progettazione editoriale cosa facciamo con il nostro sito web deve essere lo stesso indipendentemente dalla sezione dove sei. Le stesse icone della barra dei menu dovrebbero apparire nella sezione Home come nella sezione Contatti. Non dobbiamo cambiare lo stile né la posizione dei pulsanti chiave del web.

Inoltre, non è conveniente per noi posizionare video che vengono riprodotti automaticamente quando si apre la pagina. Per gli utenti che utilizzano lettori di schermo, è difficile sapere come metterli in pausa.

Sito web di Starbucks

La barra dei menu sulla pagina di Starbucks è la stessa in tutte le sezioni.

Navigazione da tastiera

Infine, alcuni utenti con problemi di coordinazione motoria hanno difficoltà ad afferrare il mouse di un computer o utilizzare il touchpad di un laptop e si affidano esclusivamente alla tastiera. Essere sicuri di che il tuo sito web è progettato in un certo modo questo può essere completamente funzionante solo con i pulsanti della tastiera.


Lascia un tuo commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati con *

*

*

  1. Responsabile dei dati: Miguel Ángel Gatón
  2. Scopo dei dati: controllo SPAM, gestione commenti.
  3. Legittimazione: il tuo consenso
  4. Comunicazione dei dati: I dati non saranno oggetto di comunicazione a terzi se non per obbligo di legge.
  5. Archiviazione dati: database ospitato da Occentus Networks (UE)
  6. Diritti: in qualsiasi momento puoi limitare, recuperare ed eliminare le tue informazioni.