Accentsconagua
Share
Stai cercando di rendere il tuo sito più accessibile? O forse vuoi rendere più facile attraversare il tuo sito in generale utilizzando browser e altre interfacce? Usando ARIA, puoi fare entrambe le cose. Diamo un'occhiata a ciò che ARIA è e come può beneficiare di un sito di e-commerce. Seguiremo anche alcuni esempi passo dopo passo.
WAI-ARIA è l'acronimo di Web Accessibility Initiative-Rich Internet Applications accessibile. Questa iniziativa assume la forma di una serie di linee guida e attributi che vengono mantenuti dal W3C. Usando questi attributi, possiamo creare relazioni tra gli elementi del nostro sito che non possono essere espressi attraverso il solo HTML. Il più importante per il nostro uso qui è che possiamo definire relazioni di elementi al di fuori della relazione genitore-figlio, e più chiaramente collegare elementi dell'interfaccia utente per i nostri utenti.
A questo punto, potrebbe essere una buona idea controllare il nostro primer originale su ARIA per rispolverare alcune delle sue basi.
In precedenza, abbiamo parlato di come applicare ARIA a un sito Web generale che assomigliava a una homepage di piccole imprese comune. Questa volta, daremo un'occhiata più da vicino a come ARIA può migliorare l'esperienza utente per i grandi siti di e-commerce.
Ci concentreremo su quattro aree chiave dell'eCommerce che pongono situazioni uniche: pagine di prodotto, pagine di categoria (o pagine di aggregazione di prodotti), navigazione a più livelli e navigazione a faccette. Useremo questi due wireframe per guidarci attraverso il processo:
Un mockup di prodotto molto semplice
Esempio di un mockup della pagina di elenco prodottiNel caso della maggior parte dei siti Web, l'aggiunta di ARIA è un processo abbastanza semplice. Definisci i pezzi del tuo sito, suddividili in punti di riferimento ed elementi e aggiungi il codice necessario.
Stiamo andando a seguire un processo simile con il nostro sito eCommerce, ma ora abbiamo un nuovo livello di complessità. Con la complessità dei siti di eCommerce, ARIA può diventare una tana del coniglio in molti casi. Anche se è importante migliorare l'accessibilità del tuo sito il più possibile, sfortunatamente spesso ci imbattiamo in vincoli commerciali. Per questo motivo, vorremmo fare un po 'più di pianificazione in anticipo, dando la priorità a ciascuna delle nostre aggiunte ARIA.
Con questa priorità, possiamo garantire che gli aspetti più importanti del nostro sito siano migliorati per primi, rendendo l'esperienza dell'utente quanto più utile possibile nel tempo disponibile.
Diamo un'occhiata dando un'occhiata ad alcune pagine di prodotto.
Una pagina di pinzatura per qualsiasi sito di eCommerce, in genere queste pagine mostrano un prodotto, le sue varianti disponibili e un modo per aggiungere l'articolo a un carrello. Ciascuno di questi elementi interattivi dovrebbe essere considerato separatamente.
Per la nostra pagina di prodotto, suddividiamola in parti come questa: le informazioni sul nostro prodotto principale, gli elementi interattivi che influiscono sul prodotto, il pulsante Aggiungi al carrello e una sezione di contenuti espansi.
Se dovessimo dare la priorità all'implementazione in questa pagina, vorremmo raggrupparla in questo modo:
Il fattore principale in gioco qui è qualcosa di cui abbiamo parlato in un precedente articolo: ARIA aiuta a definire l'intento di un elemento. Nel caso del contenuto espanso, la maggior parte degli elementi HTML che vengono utilizzati hanno elementi con significato e intenti semantici che corrispondono. Ciò significa che mentre è utile inserire ulteriori informazioni ARIA se possibile, è probabilmente meno importante del completamento delle altre tre aree.
Iniziamo aggiungendo ARIA alle informazioni sul nostro prodotto principale. Questo è abbastanza semplice a causa della semplicità degli elementi utilizzati qui. Il codice si presenta così:
Una bella borsa
Dimensione della borsa:
100x150mm
Per i principianti, aggiungeremo un ruolo al div principale e una relazione tra l'immagine e l'intestazione del titolo del prodotto.
Una bella borsa
...
È qui che le pagine dei prodotti possono essere un po 'complicate. I prodotti su un sito eCommerce possono presentare diversi tipi di varianti. Al di là dei soli tipi disponibili, il numero di essi che possono essere utilizzati simultaneamente 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 puoi segnare. Ecco il codice per la selezione avanzata e gli elementi della casella di controllo ARIA:
Il pulsante carrello è simile a un pulsante standard, ma faremo del nostro meglio per etichettarlo in modo più chiaro rispetto ad altri pulsanti:
Infine, l'area del contenuto espanso viene trattata come una tipica area di contenuto. A seconda delle pagine del prodotto, tuttavia, potrebbe essere una buona idea separare i punti di riferimento del contenuto principale dai punti di riferimento del contenuto supplementare. Anche le schede aggiungono un ulteriore livello al codice. Ecco come lo faremmo nel nostro esempio:
- Informazioni sul prodotto
Maggiori informazioni sul prodotto ...
Mentre le pagine dei prodotti possono essere considerate una forma alternativa di pagina di contenuto per molti aspetti, le pagine di categoria di un sito, dette anche PLA (Product Listing Pages), sono una bestia completamente diversa. Funzionano come una grande struttura di navigazione, consentendo agli utenti di ordinare centinaia o addirittura migliaia di prodotti.
Ciò li rende sempre più complessi, a maggior ragione con l'aggiunta di ulteriori livelli di contenuti e filtri (parleremo di navigazione e filtri sfaccettati nella prossima sezione). Diamo un'occhiata alle due aree principali del nostro PLP al di fuori dei filtri: i blocchi del prodotto e l'impaginazione.
Ecco il nostro frame del codice di partenza:
Pagina di elenco prodotti
Colore Ordina
Rosso Verde NeroDimensione Ordina
Grande piccolo...Una bella borsa
1 2 3 ... Ultimo
La paginazione è il nome dato ai piccoli collegamenti nella parte inferiore delle nostre schede di prodotto qui. Tipicamente, sono rappresentati da numeri o frecce, ma possono venire in varie altre forme. Sul lato HTML delle cose, i link di impaginazione appaiono come collegamenti regolari. Diremo che il nostro sta controllando le schede di prodotto senza reindirizzamento a un'altra pagina.
Per far sapere che sta controllando un'area di contenuto in questo modo, dobbiamo dichiararlo come controller, definire cosa sta controllando e quindi contrassegnare quell'area del contenuto come live. Ecco come appare nel nostro caso:
...
Quando creiamo la nostra area live qui, utilizziamo il "Educato" impostazione che ARIA rende disponibile. Se le tue modifiche sono pertinenti e devono essere affrontate rapidamente dall'utente, o devi dare la priorità a diverse aree live, puoi usare il valore "Assertivo" anche.
Una sfida unica che si presenta con le pagine di destinazione dei prodotti è la complessità della navigazione intensiva all'interno degli elenchi di prodotti stessi. Dal punto di vista visivo, può essere abbastanza facile raggruppare le informazioni, utilizzando i riferimenti visivi per determinare quali informazioni si applicano a quale prodotto.
Farlo con ARIA ha qualche strato in più rispetto alle precedenti applicazioni che abbiamo trattato. Contrassegnare un pulsante "acquista ora" un pulsante standard può creare confusione quando ci sono 20 di questi pulsanti su una pagina. Per risolvere questo, avremo bisogno di creare connessioni chiare tra ogni prodotto e i suoi elementi correlati.
Ecco come lo faremo:
...Una bella borsa
Anche se questo aiuta un po 'a chiarire le relazioni per l'utente, non è ancora la migliore implementazione. Un modo migliore sarebbe generare dinamicamente un'aria-label concatenando l'elemento titolo-prodotto con una frase aggiuntiva come "aggiungi al carrello".
La navigazione a faccette si riferisce ai filtri e alle opzioni che vengono comunemente visualizzati sui siti di e-commerce, consentendo di restringere i risultati della ricerca. Questi sono disponibili in molti gusti, dalle taglie al colore e oltre. Per il nostro esempio, faremo due ipotesi:
La nostra navigazione a faccette aggiorna i prodotti in diretta sulla pagina. Questo non è sempre il caso, dato che a volte i siti di eCommerce possono generare una nuova pagina quando viene applicato un filtro, ma lavoreremo come se il sito aggiorni il contenuto in tempo reale.
La nostra navigazione a faccette consente la selezione di più filtri. Non tutti i siti di eCommerce fanno questo, e ci sono sicuramente casi in cui non dovrebbe essere permesso. Tuttavia, questo crea un ulteriore livello di complessità al di fuori dello scopo di questo articolo.
L'HTML dietro i nostri filtri è simile a quello dell'impaginazione, che appare nel codice come link di base. Per i nostri usi, però, l'intento dei filtri è quello di alterare le informazioni che sono attualmente sulla pagina. Per questo motivo, vorremmo contrassegnare l'intero contenitore attorno ai filtri, chiarendo che si tratta di un controller per un'altra area della pagina:
Come l'impaginazione, questi aggiornamenti stanno accadendo dal vivo sulla pagina. Per questo motivo, vorremmo contrassegnare i contenuti principali della nostra pagina come "live". Nota che l'abbiamo fatto precedentemente nella sezione di impaginazione, ma qui ripeteremo il passo per coerenza.
Il codice dovrebbe assomigliare a questo:
...Una bella borsa
Le nostre implementazioni ora sono tutte a posto, quindi mettiamole attraverso alcuni test. I miei strumenti preferiti per farlo sono gli strumenti per gli sviluppatori di accessibilità di Google o il plug-in di Dynamic Assistant di IBM, ma a seconda della scala del tuo progetto, potresti dover creare il tuo script di test.
Se hai bisogno di uno strumento che funzioni al di fuori di Chrome, o semplicemente non preferisci i due sopra menzionati, W3C ha una lista di altri strumenti di accessibilità disponibili.
Con queste nuove aggiunte al set di strumenti ARIA, ora dovresti essere in grado di contrassegnare in modo appropriato quasi tutti i siti di eCommerce. Per garantire la migliore esperienza utente con un sito di eCommerce, ricordarsi di mantenere la navigazione il più semplice possibile ed esprimere chiaramente l'intento.
Hai ulteriori domande su questo argomento? Mi sono perso qualcosa di importante? Dimmi nei commenti qui sotto!
