Avere un sito di eCommerce con una patetica accessibilità ai suoi clienti mirati è come avere un'auto di bell'aspetto che non ha un motore performante. A nessuno piacerebbe visitare un sito web che impiega troppo tempo per caricarsi correttamente e spesso frustra un utente. Se si desidera migliorare le sorti della propria entità aziendale, è necessario lavorare per migliorare l'accessibilità del proprio sito Web a tassi di conversione e vendite di prodotti brillanti. Con il supporto di un efficace design del sito e-commerce, senza soluzione di continuità navigazione del sito, processo di pagamento più veloce, tempi e prestazioni eccezionali per il caricamento del sito Web, è possibile ottenere facilmente un notevole successo in termini di traffico del sito, tassi di conversione, coinvolgimento del cliente e vendite di prodotti. Ecco un resoconto dettagliato di quali sono tutti gli ingredienti necessari per un'accessibilità accattivante del sito web.
1. Migliorare la portata e la qualità del materiale testuale-
Qualsiasi sito web senza un contenuto o testo impressionante e coinvolgente è semplicemente inutile. Inoltre, i recenti algoritmi di Google come Panda, Hummingbird e altri hanno ripetutamente dimostrato la superiorità dei contenuti per generare il traffico del sito e i tassi di conversione richiesti. Ricordarsi di prestare adeguata attenzione al contenuto, nonché alla grafica o alle immagini per aumentare il numero di lettori del contenuto scritto. Dai un'occhiata ai vari modi in cui puoi realizzare questo compito cruciale senza problemi.
- Utilizza immagini ottimizzate di alta qualità per aumentare il valore e l'appeal dei tuoi contenuti scritti. Inoltre, utilizza un tag alt immagine efficace insieme a didascalia e descrizione per migliorare la compatibilità SEO dei tuoi contenuti.
- Offri video brevi di alta qualità con i tuoi contenuti (Video del prodotto) per rendere il contenuto più attraente e utile.
- Utilizza un contenuto audio alternativo efficace che non influenzi le prestazioni generali e il tempo di caricamento del tuo sito web.
- Utilizzare i servizi di una trascrizione di testo normale o di un feed RSS per rendere il contenuto del sito disponibile per un numero elevato di visitatori.
- Includi una didascalia per ottimizzare l'esperienza video dei tuoi clienti mirati.
2. Impiega modi per leggere i contenuti per i tuoi clienti mirati-
Ci sono molte persone che potrebbero non essere in grado di leggere correttamente il contenuto del tuo sito a causa di problemi alla vista, dimensioni ridotte del carattere o tipo di carattere illeggibile del testo scritto. Per garantire una perfetta accessibilità al sito a questi tipi di clienti, è obbligatorio disporre di una versione audio della pagina e del contenuto del sito. Questo file audio registrato può comodamente trasmettere il messaggio scritto del tuo sito Web e delle sue pagine interne ai tuoi clienti mirati. Oltre a questo, ci sono vari software di screen reader come Microsoft Narrator, JAWS di Freedom Scientific, VoiceOver per sistemi Mac, Orca (open source) per sistemi basati su Unix, NVDA (open source), Dolphin Supernova di Dolphin e vari altri.
3. Prendi le misure necessarie per migliorare la navigazione del tuo sito (in particolare i moduli) –
A che serve un sito Web se non consente ai visitatori di navigare in esso senza problemi? Sarebbe un puro spreco di tempo, denaro e sforzi se navigare nel tuo sito web è un compito impegnativo. Ci possono essere numerosi fattori sul tuo sito che possono fungere da grande ostacolo nella navigazione continua del tuo sito web. È necessario prestare particolare attenzione a questi particolari elementi del sito come i moduli di registrazione, la pagina di checkout, le immagini, i video, i collegamenti e altre aree di questo tipo per garantire la navigazione senza sforzo del tuo sito web.
Tra questi, si dice che le forme abbiano un effetto drastico sulle prestazioni del sito web e sulla navigazione. È necessario eliminare campi non necessari, etichette illogiche e altri fattori di questo tipo in modo che i visitatori possano compilare i moduli del sito senza alcun inconveniente. Inoltre, è necessario evitare restrizioni legate al tempo e utilizzare intestazioni corrette per i contenuti sul proprio sito Web per facilitare una navigazione più veloce. Per aumentare l'accessibilità dei moduli del sito, è necessario eseguire le seguenti operazioni.
- Utilizzare un'etichetta ben posizionata e descrittiva con ciascun campo nel modulo.
- Per stabilire una relazione effettiva tra il testo dell'etichetta e il campo del modulo, è possibile utilizzare un tag <label> o una proprietà <ARIA>.
- Assicurarsi che l'ordine di tabulazione del modulo sia sincronizzato correttamente con l'ordine dei campi modulo.
- Per campi simili o correlati in un modulo, è possibile raggrupparli utilizzando i set di campi. Prendiamo ad esempio campi come "Nome Via / Località", "Villaggio / Città" e "Stato / Provincia" possono essere combinati insieme in un singolo campo di "Indirizzo di corrispondenza".
- Informa gli utenti sui campi obbligatori nel tuo modulo attraverso l'aiuto del simbolo degli asterischi (*). Oltre a ciò, è possibile rendere obbligatori i campi desiderati utilizzando la proprietà ARIA. Usa ARIA required = "true" per i campi obbligatori del modulo e ARIA required = "false" se il campo è facoltativo in natura.
- Fornire informazioni sui clienti per quanto riguarda l'invio di successo del loro modulo o eventuali errori relativi alla presentazione. Mostra gli errori nel luogo e nella posizione pertinenti sul modulo per aumentare le possibilità di una risoluzione più rapida degli errori che possa essere d'aiuto nella presentazione rapida dei moduli.
- Evitare l'uso dei codici CAPTCHA per la convalida dei moduli a causa della loro inaccessibilità e dei problemi di prestazioni. Ci sono altre alternative come Dolce Captcha, PlayThru, NuCaptcha, caselle di controllo JavaScript lato client e altre che possono essere utilizzate per convalidare i dati del modulo. Per saperne di più su come rendere i tuoi moduli gratuiti come spam, puoi farlo controlla questo link.
4. Seleziona il colore che è in risonanza con il contenuto del tuo sito, immagini, sfondi e altri di questi elementi-
Per garantire l'effettiva leggibilità del tuo sito web, è importante scegliere il colore appropriato per gli elementi di sfondo e in primo piano. Ricorda, per utilizzare un colore contrastante per il testo e lo sfondo per una migliore accessibilità del tuo sito web. Fai attenzione all'utilizzo di colori simili sia per il testo che per lo sfondo del tuo sito web, come l'uso del colore del testo nero insieme a viola, marrone o qualsiasi altro colore scuro influirà in larga misura sull'usabilità del tuo sito web. Il normale rapporto di contrasto durante l'utilizzo del colore per lo sfondo e gli elementi in primo piano dovrebbe essere intorno a 7: 1 ma anche un rapporto di contrasto di 4.5: 1 renderà giustizia anche alla visibilità dei tuoi contenuti e garantirà l'accessibilità efficace del tuo sito Web interessato. Puoi controllare la combinazione di colori con l'aiuto ditest a / b e strumenti heatmap. ?By?these tools you will be able to know more effective areas and less effective areas and make the required changes on the website.
5. Garantire la corretta dimensione del carattere del contenuto-
Sarebbe praticamente immaturo e ingenuo aspettarsi che i tuoi lettori abbiano una vista eccezionale di 6 / 6 in modo che possano leggere senza sforzo il contenuto di piccole dimensioni del tuo sito web. Non fare in modo che i tuoi clienti si dibattano troppo durante la lettura dei contenuti del tuo sito web. Per facilitare una perfetta accessibilità al contenuto del tuo sito web, devi usare le dimensioni relative dei caratteri che sono espresse in termini di percentuali o em, invece di usare le dimensioni dei caratteri assoluti che sono espresse in termini di punti o pixel. Grazie a questa pratica sopra descritta, è praticamente molto più semplice per gli utenti apportare le modifiche desiderate alle dimensioni dei caratteri in base alle loro esigenze e alla vista. Quindi, è necessario che l'ora si concentri anche sulle dimensioni del carattere e non solo sul miglioramento dell'attrattiva visiva del tuo sito web.
6. Ruolo della tecnologia Assistive nell'accessibilità del sito web-
La tecnologia assistiva, nota anche come tecnologia adattativa (AT), è in realtà una benedizione per le persone con vari tipi di disabilità collegate a disturbi visivi, verbali, cognitivi, motori o altri disturbi fisici e mentali che consentono di accedere alle varie aree di un sito Web senza difficoltà. movimento del mouse, posizionamento o clic. La tecnologia è sinonimo di un gruppo di dispositivi assistivi, adattivi e riabilitativi che sono destinati a persone con disabilità diverse, insieme al processo che è coinvolto nel localizzare, selezionare e utilizzare questi dispositivi. Questa tecnologia ha fornito un grande senso di libertà a tutte le persone disabili attraverso l'aiuto di vari miglioramenti che hanno cambiato il modo in cui queste persone interagivano con vari dispositivi digitali.
Vari dispositivi come lettori di schermo, sistema Braille, software per l'ingrandimento dello schermo, software di riconoscimento vocale, accesso tramite switch e altri hanno svolto un enorme lavoro nel fornire un'accessibilità del sito Web senza problemi a persone con vari tipi di disabilità. Per ulteriori informazioni sui diversi tipi di tecnologie assistive che fungono da luce guida per le persone disabili, tutto ciò che devi fare è seguire semplicemente questa semplice collegamento.
7. Migliora le prestazioni e la natura dei tuoi link-
Per indirizzare un numero maggiore di persone nella posizione desiderata dei tuoi collegamenti, assicurati che i tuoi link abbiano un'etichetta e un colore corretti per indicare loro i clienti interessati. Utilizza un testo più contestuale rispetto a quelle frasi semplici come "fai clic qui", "leggi altro", "saperne di più" e altre affermazioni di questo tipo che possono spingere i tuoi clienti mirati a fare clic su un particolare collegamento. Inoltre, scegli il colore giusto per il tuo collegamento per attirare l'attenzione dei clienti e collegare l'accessibilità.
8. Usa HTML per migliorare l'accessibilità dei tuoi dati tabulari-
Rendere un punto di utilizzare solo HTML per tabelle di dati anziché utilizzare le immagini. Questo approccio sarà estremamente utile per i visitatori che utilizzano le tecnologie assistive per accedere al contenuto della tabella. Inoltre, cerca di includere intestazioni di colonna appropriate per migliorare l'accessibilità del contenuto della tabella. Si consiglia inoltre di non utilizzare il formato tabellare per l'impaginazione o la struttura della pagina in quanto causa problemi nell'accesso effettivo del contenuto.
Per rendere le tue tabelle di dati più accessibili ai tuoi utenti, è necessario contrassegnare in modo efficace le celle di intestazione della tabella. Oltre a questo, è necessario utilizzare il valore dell'attributo scope per l'intestazione di colonna o l'intestazione di riga associata della tabella. Se vuoi migliorare l'accessibilità del tuo campo "data" nella tua tabella, devi cambiare <td> Data </ td> per <the scope = "col"> Data </ th> nella tua parte di codifica. per informare gli utenti sulla tua tabella di dati, devi includere una descrizione pertinente o una didascalia della tabella attraverso l'uso del tag <caption>.
<Table>
<caption> Orario della lezione </ caption>
<Tr> ….
9. Verifica l'accessibilità della tua pagina attraverso l'uso di WAVE-
Lo strumento di valutazione dell'accessibilità Web (WAVE) è uno strumento straordinario che può aiutare gli sviluppatori Web a migliorare l'accessibilità del loro sito web. Questo strumento di valutazione del sito Web fornisce informazioni e feedback cruciali sull'accessibilità della tua pagina immettendo l'URL della tua pagina Web nella home page dello strumento Wave. Se hai dubbi, domande e dubbi su questo strumento di valutazione del sito web, controlla questo link utile, https://wave.webaim.org/help. Inoltre, gli utenti che non hanno familiarità con questo pionieristico strumento di accessibilità e valutazione dei siti Web possono avvalersi dell'aiuto di questo link per ottenere le conoscenze necessarie sulla verifica dell'accessibilità del proprio sito web. Altri strumenti oltre a WAVE che possono essere la luce guida per migliorare l'accessibilità del tuo sito sono CynthiaSays, Tenon e molto altro.
10. Impegnati a rendere il tuo contenuto scaricabile accessibile ai tuoi clienti mirati-
Sarebbe nell'interesse del tuo sito Web se puoi adottare le misure necessarie per rendere i tuoi contenuti scaricabili sul tuo sito come la documentazione sui termini e condizioni, il manuale d'uso del prodotto, le specifiche delle categorie di prodotto o qualsiasi altro documento accessibile agli utenti interessati. Non farli vagare qua e là alla ricerca dei software richiesti per accedere a un particolare documento, ma assicurati di rendere il tuo contenuto scaricabile accessibile attraverso il comune software disponibile. Utilizzare sempre un file separato da virgole o delimitato da tabulazioni, file PDF e altri formati simili che non necessitano di software proprietario con licenza dal fornitore in questione. Per rendere i tuoi contenuti accessibili attraverso il formato PDF, devi seguire le varie linee guida menzionate in questo collegamento cruciale, https://webstandards.sonoma-county.org/content.aspx?sid=1014&id=1123.
11. Utilizzare i servizi di punti di riferimento ARIA-
Grazie all'introduzione della nuova Access Rich Internet Applications (ARIA), una specifica del World Wide Web Consortium (W3C) che è un ente governativo mondiale, le applicazioni web possono ora essere facilmente interagite e condivise attraverso la tastiera. Puoi facilmente rendere il tuo sito più amichevole per la navigazione della tastiera attraverso l'utilizzo dei ruoli di riferimento ARIA. Tutto ciò che devi fare è semplicemente aggiungere un attributo HTML per qualsiasi ruolo di riferimento, ad esempio role = "navigation", role = "main" o role = "search" per indirizzare l'utente alla particolare sezione della pagina attraverso un singolo tasto. Cerchiamo di controllare questo codice HTML che può aggiungere l'attributo del ruolo di riferimento appropriato nella sezione "principale" e "ricerca" di un sito web.
<div id = "maincontent" role = "main">
<form action = "search.php" role = "search">
12. Impara a utilizzare i servizi di Learning Management Systems (LMS) e Sistemi di gestione dei contenuti per migliorare l'accessibilità del tuo sito web-
Per migliorare l'accessibilità del tuo sito eCommerce, devi avvalerti dei servizi di un'efficace piattaforma di e-commerce che comprende numerose funzionalità. Oltre a questo, è possibile usufruire dei servizi di vari sistemi di gestione dei contenuti come WordPress, Joomla, Drupal e altri per fornire un facile accesso a numerosi temi, modelli, Plugin eCommerce e altre opzioni simili. I plugin sono visti per fornire un livello avanzato di accessibilità, prestazioni e usabilità a un sito Web per migliorare le prestazioni generali di un sito web.
Tuttavia, assicurati di avvalerti dell'esperienza di un eccezionale design di plug-in e di servizi di sviluppo come Knowband con anni di esperienza in questo settore. Alcuni dei superbi plugin forniti da questo sono i seguenti:
Magento– Alcuni dei fantastici Estensioni Magento che sono forniti da Knowband sono Magento Abandoned Cart, Magento Auto Subscribe, Magento One Page Supercheckout, Magento Google Analytics Enhanced Ecommerce e altro ancora.
OpenCart– Ecco alcuni dei OpenCart Extensions?that can help in enhancing the productivity of your OpenCart store to a great extent. They are OpenCart Ajax Cart+, OpenCart One Page Supercheckout Pro, OpenCart Social Loginizer, OpenCart Price Alert and such others.
PrestaShop– Se hai un negozio PrestaShop, questi sono alcuni dei Addons PrestaShop?that can be the game changer for your online store and can improve the accessibility and performance of your website. Take a look at these plugins which are PrestaShop Abandoned Cart, PrestaShop Return Manager, PrestaShop One Page Supercheckout and many others.
13. Migliora la portata del tuo sito web su vari dispositivi basati su dispositivi mobili-
A causa del costante aumento del numero di clienti mobili, è responsabilità esclusiva di ogni entità commerciale online rendere il proprio sito Web accessibile a vari dispositivi mobili disponibili. Utilizza vari strumenti come Mobile Usability, Mobile Friendly Test, PageSpeed Insights, test di velocità del sito Web di Pingdom e altri strumenti SEO mobili per migliorare le prestazioni del tuo sito web mobile. Se vuoi sapere di più su come migliorare i tuoi risultati SEO mobili, visita questo link informativo. Inoltre, l'uso dei servizi di rete di consegna contenuti (CDN) insieme al formato di immagine Webp per il browser Google Chrome può avere un effetto significativo sull'accessibilità del tuo sito web su vari dispositivi basati su dispositivi mobili.
14. Utilizza il testo alternativo corretto per immagini-
Anche se, si dice che "Un'immagine può dire più di mille parole", ma queste immagini hanno bisogno del supporto di Alt text per aiutare l'utente a comprendere l'intento o il messaggio corretto dietro queste immagini. Inoltre, questo testo alternativo diventa molto più utile mentre si usa un immagini informative come infografiche: si deve notare che il messaggio che deve essere trasmesso con una particolare immagine deve essere usato nel testo alternativo di quell'immagine, allo stesso modo, se l'immagine in questione è costituita da un testo, quel particolare testo dovrebbe anche essere incluso nel testo alternativo Assicurati che le immagini utilizzate come collegamenti siano fornite con un alt text appropriato in modo che lo screen reader possa leggere il messaggio associato della tua immagine piuttosto che leggere il nome del file della tua immagine. come un attributo alt può essere utilizzato in un'immagine per migliorarne l'appeal e la comprensione tra i clienti target.
<img src = "webaimlogo.jpg" alt = "WebAIM – Accessibilità Web in mente">
Tuttavia, puoi lasciare il testo alternativo vuoto per le tue immagini se l'immagine è puramente utilizzata
15. Iniziare i passaggi per rendere più accessibile il tuo sito web tramite tastiera
Ci sono numerosi utenti che amano navigare in un determinato sito web attraverso l'uso di tasti di scelta rapida da tastiera o tasti di accesso. Queste chiavi di accesso sono elementi HTML che non vengono effettivamente utilizzati durante il processo di sviluppo del sito Web per garantire un accesso diretto a determinate sezioni del sito Web tramite tastiera. Per utilizzare i servizi delle chiavi di accesso, è necessario seguire questi passaggi.
– Premere il tasto Funzione (Alt in caso di Windows e Ctrl se il sistema è un Mac) insieme alla lettera o al tasto numerico specifico associato a una particolare sezione del sito Web.
Inoltre, i programmatori possono aggiungere facilmente la funzionalità delle chiavi di accesso sul proprio sito Web aggiungendo un semplice codice HTML nel tag di ancoraggio di navigazione del sito interessato. Il codice di esempio è come mostrato di seguito.
<a href="index.html" accesskey="1"> Home </a>
Tuttavia, ciò che limita l'utilizzo delle chiavi di accesso a livello globale è che non esiste un set universale di chiavi assegnate che possono essere utilizzate per implementare la funzionalità delle chiavi di accesso su un sito web. Oltre a questo, non esiste un meccanismo in base al quale gli utenti possano essere informati sui tasti della tastiera che vengono utilizzati come chiavi di accesso per spostarsi all'interno di un sito. Ma ci sono alcuni paesi come il Regno Unito, dove l'autorità interessata ha raccomandato un set di chiavi di accesso che possono essere assegnate per una navigazione del sito web senza interruzioni attraverso la tastiera. Ecco un elenco di quelle chiavi di accesso.
S – Salta la navigazione
1 – Home Page
2 – Novità / aggiornamenti
3 – Mappa del sito
4 – Ricerca
5 – Domande frequenti (FAQ)
6 – Aiuto
7 – Procedura per i reclami
8 – Termini e condizioni
9 – Modulo di feedback
10 – Informazioni sulla chiave di accesso
16. Includi correttamente i titoli per l'organizzazione della struttura dei contenuti-
Per un accesso diretto ai contenuti del tuo sito, utilizza la struttura delle intestazioni. Utilizza tag di intestazione HTML come <h1>, <h2>, <h3> e altri nella posizione appropriata nei contenuti per l'organizzazione efficace dei tuoi contenuti e per una migliore leggibilità. Segui l'ordine corretto delle intestazioni e mantieni la presentazione lontana dalla struttura della rubrica attraverso l'uso di CSS. Alcune delle linee guida che devono essere seguite durante la creazione di una nuova classe CSS per i tuoi contenuti sono le seguenti.
- Usa sempre il tag <h1> per il titolo principale della pagina. Mantieni il tag di intestazione <h1> riservato per il titolo del sito web e altre pagine individuali.
- Includi intestazioni per la corretta indicazione e organizzazione della struttura dei contenuti.
- Segui un ordine corretto mentre usi i titoli e non salta mai direttamente da <h1> a <h3> intestazione perché dà ai lettori la sensazione che alcuni contenuti particolari manchino nel mezzo.
17. Utilizza gli indici delle schede per la navigazione continua intorno al tuo sito web-
Per determinare l'ordine corretto di navigazione attorno ai campi modulo tramite l'uso del tasto tab, è importante utilizzare gli indici delle schede. Questa funzione svolge un ruolo fondamentale durante la navigazione tra i moduli su un sito. Tuttavia, se il design della pagina è dotato di un ordine logico appropriato e di una gerarchia forte a causa della presenza di intestazioni e sottotitoli, non c'è molto di cui preoccuparsi per questo indice tab.
Poiché le forme consistono in numerosi piccoli elementi come caselle di controllo e pulsanti di opzione che richiedono il posizionamento preciso del mouse e il clic da parte degli utenti, eseguire la stessa operazione sarebbe difficile per una persona con disabilità motoria. In situazioni come questa, la vita di queste persone può essere di grande sollievo se viene eseguita una corretta indicizzazione delle schede sul modulo che può consentire all'utente di interagire con ogni elemento del modulo attraverso semplici tratti della tastiera.
Questo mi piaceva? Ti piaceranno anche questi
- App di e-commerce che sono un must in questo scenario di demonetizzazione
- Ricostruzione dell'E-Commerce: è sempre una buona idea?
- Ragioni per cui la tua attività di e-commerce ha bisogno di un'app mobile
- Alcuni aspetti chiave da considerare considerando la transizione verso una piattaforma di e-commerce
- Quali informazioni rivelano le tariffe add-on-cart sul tuo E-Commerce Store?
