Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Accessibility
Code

ARIA in pratica: Accessibilità per l'eCommerce

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Web Accessibility With ARIA.
Hands-on With ARIA: Homepage Elements and Standard Navigation
Hands-on With ARIA: Accessibility Recipes for Web Apps

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

State cercando di rendere più accessibile il vostro sito? O forse volete rendere più facile percorrere il vostro sito in generale utilizzando i browser e altre interfacce? Utilizzando ARIA, si possono fare entrambe le cose. Diamo un'occhiata a che cosa è ARIA e ai vantaggi per un sito di eCommerce. Vedremo anche alcuni esempi passo dopo passo.

Che cosa è ARIA?

WAI-ARIA è l'acronimo di Web Accessibility Initiative-Accessible Rich Internet Applications. Questa iniziativa assume la forma di un insieme di linee guida e di attributi che sono mantenuti dal W3C. Utilizzando questi attributi, possiamo creare relazioni tra gli elementi del nostro sito che non possono essere espresso attraverso il solo HTML. La più importante per il nostro uso qui è che possiamo definire le relazioni dell'elemento al di fuori della relazione padre-figlio, e più chiaramente collegare gli elementi dell'interfaccia utente per i nostri utenti.

A questo punto, potrebbe essere una buona idea controllare la nostra guida originale su ARIA per rispolverare alcuni dei suoi fondamenti.

Aggiungere ARIA all'eCommerce

In precedenza, abbiamo parlato di come applicare ARIA a un sito web generale che assomigliava a una comune homepage per piccole imprese. Questa volta, daremo un'occhiata a come ARIA può migliorare l'esperienza utente per siti di eCommerce grandi.

Ci concentreremo su quattro aree chiave dell'eCommerce che rappresentano situazioni uniche: le pagine di prodotto, le pagine di categoria (o pagine di aggregazione del prodotto), la navigazione multi-livello e la navigazione per aspetti. Utilizzeremo questi due wireframe che ci guideranno attraverso il processo:

Product Page Wireframe
Un mockup di prodotto molto essenziale
Category Page Wireframe
Esempio di un mockup di pagina di listino del prodotto

Preparazione per ARIA

Nel caso di più siti web, aggiungere ARIA è un processo abbastanza semplice. Definite le parti del vostro sito, le suddividete in elementi e luoghi d'interesse e aggiungete il codice necessario.

Seguiremo un processo simile con il nostro sito di eCommerce, ma ora abbiamo un nuovo livello di complessità. Con la complessità che viene fornita dai siti di eCommerce, ARIA può trasformarsi in un  un intricato labirinto in molti casi. Mentre è importante migliorare l'accessibilità del vostro sito per quanto possibile, purtroppo viene spesso incorriamo in vincoli di affari. Per questo motivo, vorremo fare un po' più di pianificazione in anticipo, dando una priorità a ciascuna delle nostre aggiunte ARIA.

Facendo questa definizione delle priorità, possiamo garantire che gli aspetti più importanti del nostro sito sono migliorati in primo luogo, rendendo l'esperienza utente tanto buona quanto possibile nel tempo a disposizione.

Iniziamo dando un'occhiata ad alcune pagine di prodotto.

ARIA per le pagine di prodotto

Una pagina di base per qualsiasi sito di eCommerce, queste pagine mostrano in genere un prodotto, le sue variazioni disponibili e un modo per aggiungere l'elemento a un carrello. Ognuno di questi elementi interattivi dovrebbe essere considerato separatamente.

Per la nostra pagina di prodotto, cerchiamo di romperlo in pezzi come questo: le informazioni del nostro prodotto principale, gli elementi interattivi che possono influire sul prodotto, il nostro pulsante aggiungi al carrello e una sezione di contenuto espansa.

Se avessimo bisogno di dare la priorità all'implementazione su questa pagina, vorremmo raggrupparla in questo modo:

  1. Informazioni del prodotto principale, elementi interattivi, pulsante aggiungi al carrello
  2. Contenuto del prodotto ampliato

Il principale fattore in gioco qui è qualcosa di cui abbiamo parlati in un precedente articolo: ARIA aiuta a definire lo scopo di un elemento. Nel caso il contenuto espanso, la maggior parte degli elementi HTML che vengono utilizzati hanno elementi con contenuto semantico e scopo che corrispondono. Ciò significa che mentre è utile mettere ulteriori informazioni di ARIA, se possibile, è probabilmente meno importante di completare le altre tre zone.

Informazioni sul prodotto principale

Iniziamo con l'aggiunta di ARIA alle informazioni sul nostro prodotto principale. Questo è piuttosto semplice grazie alla semplicità degli elementi utilizzati qui. Il codice è simile al seguente:

Per i principianti, aggiungeremo un ruolo al div principale e una relazione tra l'immagine e l'intestazione del titolo del prodotto.

Elementi del prodotto interattivo

Questo è dove pagine del prodotto possono essere un po' difficoltose. I prodotti su un sito di eCommerce possono avere parecchi diversi tipi di varianti presenti. Oltre a solo i tipi disponibili, il numero di essi che può essere utilizzato contemporaneamente aggiunge un ulteriore livello di complessità. Nel nostro esempio, abbiamo tre elementi che entrano in gioco: dimensione, colore e quantità.

Diamo un'occhiata a come è possibile contrassegnarli. Ecco il codice per gli elementi di selezione e della casella di controllo arricchiti con ARIA:

Pulsante Aggiungi al carrello

Il pulsante carrello è simile a un pulsante standard, ma cercheremo di etichettarlo in modo più chiaro degli altri pulsanti:

Contenuto del prodotto ampliato

Infine, l'area del contenuto ampliata viene trattata come un'area di contenuto tipica. A seconda delle vostre pagine del prodotto, tuttavia, potrebbe essere una buona idea separare i principali punti di riferimento contenuti dai punti di riferimento dei contenuti supplementari. Le schede aggiungono un livello supplementare al codice anche qui. Ecco come abbiamo fatto nel nostro esempio:

Aggiungere ARIA alle pagine di categoria

Mentre le pagine del prodotto possono essere considerate una forma alternativa del contenuto della pagina in molti aspetti, le pagine di categoria di un sito, chiamate anche pagine del listino prodotto (PLP), sono una bestia completamente diversa. Operano come una grande struttura di navigazione, consentendo agli utenti di ordinare tra centinaia o addirittura migliaia di prodotti.

Questo le rende sempre più complesse, diventandolo ancora di più come vengono aggiunti ulteriori livelli di contenuto e filtri (parleremo della navigazione per aspetti e filtri nella sezione successiva). Diamo un'occhiata alle due zone principali del nostro PLP fuori dei filtri: i blocchi di prodotto e l'impaginazione.

Ecco il nostro codice iniziale:

Gestire l'impaginazione

L'impaginazione è il nome dato ai piccoli collegamenti nella parte inferiore dei nostri elenchi di prodotto. In genere, sono rappresentati da numeri o frecce, ma possono assumere varie forme. Dal lato dell'HTML, i link d'impaginazione appaiono proprio come collegamenti regolari. Diremo che la nostra sta controllando gli elenchi dei prodotti senza reindirizzamento a un'altra pagina.

Per rendere noto che sta controllando un'area di contenuto in questo modo, dobbiamo dichiararlo come un controller, definire ciò che sta controllando e quindi segnare che il contenuto dell'area come live. Ecco quello che appare nel nostro caso:

Quando creiamo la nostra zona live qui, utilizziamo l'impostazione "polite" che ARIA mette a disposizione. Se le modifiche sono pertinenti e devono essere affrontate rapidamente dall'utente, o è necessario definire le priorità fra diverse aree live, è possibile utilizzare pure il valore "assertive".

Marcatura degli elementi ripetitivi

Una sfida unica che mette insieme le landing page del prodotto è la complessità di navigazione intensiva all'interno degli stessi elenchi dei prodotti. Dal punto di vista visivo, può essere abbastanza facile raggruppare le informazioni utilizzando i segnali visivi per determinare quali informazioni si applicano a quale prodotto.

In questo modo ARIA ha pochi più livelli delle applicazioni precedenti che abbiamo coperto. Marcare un pulsante "acquista ora" a un pulsante standard può creare confusione quando ci sono 20 di questi pulsanti in una pagina. Per risolvere questo problema, abbiamo bisogno di creare connessioni chiare fra ogni prodotto e gli elementi correlati.

Ecco come lo faremo:

Mentre questo aiuta un po' a chiarire le relazioni per l'utente, non è ancora la migliore implementazione. Un modo migliore sarebbe quella di generare dinamicamente un'aria-label concatenando l'elemento titolo del prodotto con un'ulteriore frase come "Aggiungi al carrello".

Utilizzare ARIA con la navigazione per aspetti

La navigazione per aspetti si riferisce ai filtri e alle opzioni che vengono comunemente indicati su siti di eCommerce, che vi permettono di restringere i risultati della ricerca. Questi sono disponibili in molti generi — dalle dimensioni al colore e oltre. Per il nostro esempio, andremo a fare due ipotesi:

  1. La nostra navigazione per aspetti aggiorna i prodotti live nella pagina. Questo non è sempre il caso, poiché a volte i siti di eCommerce potrebbero generare una nuova pagina quando viene applicato un filtro, ma lavoreremo come se il contenuto del sito si aggiorni live.

  2. La nostra navigazione per aspetti consente la selezione di più filtri. Non tutti i siti eCommerce fa questo, e ci sono sicuramente casi dove non dovrebbe essere consentito. Tuttavia, questo crea un ulteriore livello di complessità fuori dall'ambito di questo articolo.

Impostate i vostri controlli

Il codice HTML dietro i nostri filtri è simile a quello dell'impaginazione, che appaiono nel codice come collegamenti base. Per i nostri usi, però, lo scopo dei filtri è di alterare le informazioni che attualmente si trovano nella pagina. Per questo motivo, vogliamo segnare l'intero contenitore intorno i filtri, rendendo chiaro che è un controller per un'altra area della pagina:

Definire le aree live

Come l'impaginazione, questi aggiornamenti stanno accadendo in diretta sulla pagina. Per questo motivo, vorremo contrassegnare il contenuto principale sulla nostra pagina come se fosse "live". Notate che lo abbiamo fatto in precedenza nella sezione impaginazione, ma ripeteremo il passaggio qui per coerenza.

Il codice dovrebbe assomigliare a questo:

Testare le vostre implementazioni

Le implementazioni sono ora a posto, quindi sottoponiamole ad alcuni test. I miei strumenti preferiti per farlo includono gli strumenti di sviluppo di accessibilità di Google o il Plugin Dynamic Assistant di IBM, ma a seconda della grandezza del progetto, potrebbe essere necessario creare il proprio script di test.

Se avete bisogno di uno strumento che opera al di fuori di Chrome, o semplicemente non preferite i due menzionati sopra, il W3C ha una lista di altri strumenti disponibili sull'accessibilità.

Rendere l'eCommerce più accessibile

Con queste nuove aggiunte al vostro set di strumenti ARIA, dovreste ora essere in grado di programmare in modo appropriato qualsiasi sito di eCommerce. Per garantire la migliore esperienza utente con un sito di eCommerce, ricordatevi di tenere la vostra navigazione quanto più semplice possibile ed esprimete lo scopo chiaramente.

Avete ulteriori domande su questo argomento? Mi sono perso qualcosa di importante? Ditemelo nei commenti qui sotto!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.