Mercato Autentico Italiano

Accessibilità al Mercato Autentico Italiano

Noi di Mercato Autentico Italiano ci impegniamo a garantire che il nostro sito web sia accessibile a tutti, indipendentemente dalle loro capacità. Ci sforziamo di seguire le linee guida per l'accessibilità dei contenuti web (WCAG) 2.1 livello AA per raggiungere questo obiettivo. Di seguito sono descritte le misure che abbiamo adottato per migliorare l'accessibilità del nostro sito.

Navigazione da tastiera

Il nostro sito web è progettato per essere completamente navigabile tramite tastiera. Gli utenti possono utilizzare i tasti Tab, Maiusc+Tab, Invio e le frecce direzionali per spostarsi tra gli elementi interattivi, come link, pulsanti e campi del modulo. Un focus visibile è fornito per indicare quale elemento è attualmente selezionato.

Ad esempio, nella pagina dei prodotti, è possibile navigare tra i diversi prodotti utilizzando i tasti Tab e quindi premere Invio per visualizzare i dettagli di un prodotto specifico. Nei moduli di contatto e di registrazione, i campi possono essere compilati utilizzando la tastiera senza la necessità del mouse.

Compatibilità con Screen Reader

Il sito web è stato ottimizzato per la compatibilità con gli screen reader, come JAWS, NVDA e VoiceOver. Abbiamo implementato le seguenti pratiche:

• Struttura semantica HTML: Utilizziamo elementi HTML5 semantici (ad es. <header> , <nav> , <main> , <article> , <footer> ) per definire la struttura del contenuto. Questo aiuta gli screen reader a comprendere la gerarchia e l'organizzazione della pagina.
• Testi alternativi per le immagini: Tutte le immagini significative hanno testi alternativi descrittivi che forniscono un contesto agli utenti che non possono vedere le immagini. Le immagini decorative hanno testi alternativi vuoti ( alt="" ). Ad esempio, l'immagine di una bottiglia di olio extra vergine di oliva avrà un testo alternativo come "Bottiglia di olio extra vergine di oliva biologico prodotto in Toscana".
• Etichette per i campi del modulo: Tutti i campi del modulo hanno etichette esplicite associate utilizzando l'elemento <label> . Questo aiuta gli utenti dello screen reader a comprendere lo scopo di ciascun campo.
• ARIA attributes: Abbiamo utilizzato gli attributi ARIA (Accessible Rich Internet Applications) per migliorare l'accessibilità degli elementi dinamici e dei widget complessi. Ad esempio, abbiamo utilizzato aria-label per fornire ulteriori informazioni sui collegamenti e sui pulsanti, e aria-expanded per indicare lo stato espanso o compresso di un menu a tendina.
• Titoli di pagina significativi: Ogni pagina ha un titolo univoco e descrittivo che riflette il contenuto della pagina. Questo aiuta gli utenti dello screen reader a orientarsi nel sito web.

Abbiamo testato il nostro sito web con diversi screen reader per garantire che il contenuto sia presentato in modo logico e coerente.

Contrasto dei colori

Abbiamo prestato particolare attenzione al contrasto dei colori per garantire che il testo sia facilmente leggibile per gli utenti con problemi di vista. Abbiamo utilizzato strumenti di verifica del contrasto per garantire che il rapporto di contrasto tra il testo e lo sfondo soddisfi le linee guida WCAG 2.1 livello AA. Il contrasto tra i colori è almeno di 4.5:1 per il testo normale e 3:1 per il testo grande.

Ad esempio, utilizziamo combinazioni di colori come il verde scuro (#28a745) per i titoli su uno sfondo bianco (#ffffff) o il grigio scuro (#343a40) per il testo su uno sfondo grigio chiaro (#f8f9fa). Questi colori sono stati testati e approvati per garantire la leggibilità.

Attributi ARIA

Abbiamo integrato gli attributi ARIA (Accessible Rich Internet Applications) per migliorare l'accessibilità dei componenti interattivi e dinamici del nostro sito. Questi attributi forniscono informazioni aggiuntive agli screen reader e ad altre tecnologie assistive, consentendo agli utenti di comprendere e interagire con il contenuto in modo più efficace.

• aria-label : Utilizzato per fornire etichette descrittive per gli elementi che non hanno un'etichetta testuale visibile. Ad esempio, un'icona "aggiungi al carrello" può avere un attributo aria-label="Aggiungi al carrello" .
• aria-describedby : Utilizzato per collegare un elemento a un testo descrittivo aggiuntivo. Ad esempio, un campo di input può essere collegato a un messaggio di errore utilizzando aria-describedby .
• aria-hidden : Utilizzato per nascondere elementi decorativi o non essenziali dagli screen reader.
• aria-live : Utilizzato per indicare agli screen reader che una parte del contenuto cambierà dinamicamente. Ad esempio, un messaggio di errore che appare dopo la validazione di un modulo può essere annunciato automaticamente utilizzando aria-live="assertive" .

Grazie all'utilizzo di questi attributi ARIA, gli utenti di screen reader possono navigare e interagire con il sito web in modo più intuitivo e accessibile.

Feedback

Siamo sempre alla ricerca di modi per migliorare l'accessibilità del nostro sito web. Se riscontri problemi di accessibilità o hai suggerimenti su come possiamo migliorare, ti preghiamo di contattarci . Il tuo feedback è prezioso e ci aiuterà a rendere il nostro sito web più accessibile a tutti.

Puoi contattare il nostro responsabile dell'accessibilità, Dott.ssa Elena Martini, all'indirizzo email elena.martini@mercatoautenticoitaliano.it o al numero di telefono 055-1234567. La nostra sede si trova in Via della Libertà, 10, 50129 Firenze (FI).

Impegno continuo

L'accessibilità è un processo continuo. Ci impegniamo a rivedere e aggiornare regolarmente il nostro sito web per garantire che continui a soddisfare le linee guida WCAG e le migliori pratiche di accessibilità. Stiamo anche formando il nostro team di sviluppo web sulle ultime tecniche di accessibilità per garantire che tutti i nuovi contenuti e funzionalità siano accessibili fin dall'inizio.

Siamo orgogliosi di offrire un'esperienza di shopping online inclusiva e accessibile a tutti. Grazie per aver scelto Mercato Autentico Italiano!