Construire pentru accesibilitate: Cum să vă asigurați că toată lumea vă poate folosi magazinul

În calitate de dezvoltatori și proprietari de magazine online, adesea tratăm accesibilitatea ca pe un bonus. Dar chiar este o cerință! Fiecare parte a unui site web trebuie luată în considerare din perspectiva tuturor vizitatorilor site-ului, indiferent de vârstă, capacități sau deficiențe. La urma urmei, este important ca toată lumea să vă poată folosi cu ușurință magazinul și să vă achiziționeze produsele.

Când vine vorba de asta, conținutul accesibil este definit ca:

1. Perceptibil. Toate informațiile trebuie prezentate în moduri pe care utilizatorii le pot percepe, indiferent de agenții utilizator (browsere, cititoare de ecran sau alt software) pe care îi operează sau de ce dizabilități au.
2. Operabil. Vizitatorii trebuie să poată naviga prin site și să folosească toate funcționalitățile, chiar dacă nu folosesc un mouse tradițional.
3. De inteles. Conținutul, formularele, meniurile, linkurile și alte componente ale site-ului trebuie să fie ușor de înțeles de către utilizatori.
4. Robust. O varietate de instrumente, inclusiv cititoare de ecran, software de recunoaștere a vocii și cititoare braille ar trebui să poată citi conținutul dvs.

Dar cum devine accesibilitatea o parte esențială a procesului de dezvoltare? Ce factori ar trebui luați în considerare și cum adaptați un magazin existent? Ce instrumente pot fi folosite pentru a testa accesibilitatea web?

Toate aceste întrebări vor primi răspunsul mai jos, dar dacă sunteți interesat de o privire mai aprofundată asupra motivului pentru care accesibilitatea este atât de importantă, aruncați o privire la Importanța accesibilității pentru magazinul dvs. online.

Faceți din accesibilitate un accent

Un site web accesibil începe cu mentalitatea potrivită . Este important să-i implicăm pe toți – dezvoltatorul, proprietarul afacerii, managerul de conținut etc. – pe aceeași pagină.

Una dintre cele mai bune modalități de a înțelege accesibilitatea este să încercați să utilizați site-urile web preferate cu un cititor de ecran. NVDA este o opțiune excelentă pentru utilizatorii de Windows, iar VoiceOver este perfect pentru utilizatorii de Mac. Faceți toate acțiunile pe care le-ați face în mod normal – căutați pe site-ul web, citiți o postare pe blog, adăugați un produs în coșul dvs. de cumpărături – și înțelegeți cum este să faceți acest lucru dintr-o perspectivă diferită.

Următorul pas pentru a vă concentra pe accesibilitatea web este să începeți cu o temă WordPress bună, de înaltă calitate. Tema WooCommerce Storefront, de exemplu, respectă regulile de accesibilitate, se integrează perfect cu WooCommerce și este extrem de flexibilă în același timp. Vedeți aici toate funcțiile Storefront.

Sau, dacă utilizați directorul de teme WordPress, munca a fost deja făcută pentru dvs.; căutați folosind eticheta „Accesibilitate” și veți găsi câteva opțiuni grozave. Dacă vă dezvoltați propria temă, Manualul de teme WordPress are linii directoare clare și aprofundate privind accesibilitatea, care vă vor porni pe drumul cel bun.

Apoi, pe măsură ce parcurgeți procesul de creare a site-ului web, testați lucrurile în mod constant. Este mult mai ușor să ajustați elementele pe măsură ce mergeți decât să reconstruiți odată ce site-ul este terminat!

Instrumente pentru accesibilitatea comerțului electronic

Instrumentele potrivite sunt esențiale pentru construirea unui site de comerț electronic accesibil. Mai jos, veți găsi câteva opțiuni excelente pentru testare; multe dintre acestea sunt, de asemenea, menționate atunci când discutăm despre factorii de accesibilitate specifici mai târziu în această postare.

Testarea cititorului de ecran:

• Pentru Mac (gratuit): VoiceOver
• Pentru Windows (gratuit, sursă deschisă): NVDA
• Pentru Windows (plătit): JAWS

Testare generală de accesibilitate:

• Instrument de accesibilitate Axe (extensie de browser)
• CodeSniffer (verificare standard de codare HTML)
• Funkify (simulator de dizabilități vizuale)
• Valori accesibile (scanări și rapoarte lunare de accesibilitate)
• Tota11y (evidențiază erorile de accesibilitate)
• Tenon (testare automată care poate fi integrată cu ușurință cu WordPress)
• Wave (raportare de accesibilitate chiar în browser)

Verificări de culoare:

• Sim Daltonism (simulează daltonismul)
• Verificator de contrast (testați culorile primului plan/fondului)
• Contrast-A (dezvoltați o paletă de culori accesibilă)

Pluginuri WordPress:

• Câmpuri de formular WCAG 2.0 pentru Gravity Forms (accesibilitate îmbunătățită pentru Gravity Forms)
• Accesibilitate WP (adaugă funcții de accesibilitate)
• Valori implicite de accesibilitate formularului de contact 7 (accesibilitate îmbunătățită pentru formularul de contact 7)
• Zeno Font Resizer (permite vizitatorilor să modifice dimensiunea fontului după cum este necesar)

Cum să vă faceți site-ul de comerț electronic accesibil

Imagini accesibile

Pentru a ajuta utilizatorii cu deficiențe de vedere să experimenteze imaginile de pe site-ul dvs., trebuie să vă asigurați că adăugați text alternativ pentru fiecare. Cititoarele de ecran folosesc text alternativ pentru a vă „citi” imaginea (sfat: și Google!). Dacă sunteți dezvoltator, asigurați-vă că fiecare element <img> conține un atribut alt. Dacă sunteți proprietarul unui site, puteți utiliza funcționalitatea implicită WordPress pentru a adăuga cu ușurință text alternativ la imaginile dvs.

Un loc minunat pentru a începe este să luați în considerare scopul imaginii dvs.:

1. Transmite informații simple, de exemplu o simplă imagine sau o pictogramă?

În acest caz, descrieți imaginea dvs. într-un mod care să-i ajute pe utilizatori să o imagineze. Un text alternativ bun ar fi „Femeie care împinge un cărucior pe trotuar”.

2. Transmite informații complicate, de exemplu un infografic sau o diagramă?

Pentru imagini complexe, ar putea fi prea dificil să descrii conținutul într-un mod concis; poate fi necesar să adăugați o descriere lungă. Există mai multe moduri de a aborda acest lucru, inclusiv referirea la o zonă a paginii în care imaginea complicată este descrisă mai detaliat. Aflați mai multe modalități de a aborda acest lucru aici.

3. Este exclusiv decorativ, de exemplu un mic element de floare folosit ca parte a designului site-ului?

Spuneți cititorilor de ecran să sară peste elementele decorative dându-le un atribut alt gol:

 <img src="image.png" alt="">

În mod ideal, ar trebui să includeți imagini decorative în CSS , mai degrabă decât în ​​HTML.

Dacă sunteți tentat să introduceți cuvinte cheie în textul alternativ în scopuri SEO, amintiți-vă că Google acordă prioritate experienței utilizatorului. Este mai important ca atributele dvs. alt să facă o treabă bună descriindu-vă imaginea decât enumerarea unui cuvânt cheie.

Linkuri accesibile

Lucrul important de luat în considerare atunci când adăugați link-uri este să spuneți întotdeauna vizitatorilor site-ului dvs. ce se va întâmpla când aceștia dau clic. Chiar dacă citesc linkul complet în afara contextului (ceea ce este adesea cazul cu anumite tipuri de cititoare de ecran), ar trebui să știe unde vor merge mai departe.

Exemple de text de link prost:

• Pentru mai multe informații despre lumânările noastre, faceți clic aici .
• Descărcați tabelul nostru de mărimi pentru a vă găsi potrivirea perfectă.

Exemple de text de link bun:

• Pentru mai multe informații despre lumânările noastre, consultați Întrebări frecvente despre lumânări .
• Pentru a vă găsi potrivirea perfectă, descărcați tabelul nostru de mărimi în format PDF .

Totuși, pot exista momente în care este valoros sau necesar să utilizați textul linkului, cum ar fi „Citiți mai multe”. Un exemplu în acest sens ar putea fi o grilă de postări recente de blog pe pagina dvs. de pornire, unde fiecare fragment scurt se termină cu un link „Citiți mai multe”. Ce faci in cazul asta?

O soluție excelentă ar fi să folosiți atributul aria-label , care vă permite să adăugați o etichetă descriptivă link-ului dvs. Iată cum ar putea arăta un link cu atributul aria-label :

 <p>A bad solar installation can make your upfront investment evaporate. Here are 15 questions to ask any potential solar installer before you trust their reputation. <a href=“https://example.com/bad-installation" aria-label="Read about 15 questions to ask your solar installer">[Read more...]</a></p>

Dar dacă doriți să legați o imagine? În cazul imaginilor, atributul alt dvs. va fi textul linkului. Deci, dacă aveți o machetă a cărții electronice descărcate gratuit, doriți ca atributul dvs. alt să fie ceva de genul „Carte electronică despre alegerea rujului potrivit pentru nuanța pielii”. Acest lucru le spune vizitatorilor site-ului dvs. atât ce este imaginea, cât și ce se va deschide când dau clic pe ea.

Fonturi accesibile

Primul lucru pe care doriți să îl luați în considerare este dimensiunea fontului. Este important ca textul dvs. să poată fi citit cu ușurință de către persoanele care sunt parțial nevăzătoare sau care pur și simplu au probleme în a vedea dimensiunile mai mici ale fonturilor. Deși nu există o dimensiune minimă oficială a fontului, un bun punct de plecare este 16 px pentru corpul textului.

De obicei, depinde de browserul unui utilizator să redimensioneze fonturile, ceea ce o face fie prin mărirea textului în sine, fie prin mărirea paginii și aplicarea stilurilor receptive. Ar trebui să vă construiți site-ul într-un mod care să permită unui utilizator să mărească până la 200% fără a pierde capacitatea de a utiliza sau de a vedea conținutul site-ului. De exemplu, doriți să evitați conținutul trunchiat sau textul suprapus atunci când fontul se redimensionează. Cel mai bun lucru de făcut este să-l testați singur. Găsiți instrucțiuni pentru fiecare browser aici.

Luați în considerare și alegerile de font pe care le faceți . Fonturile cursive sau complicate sunt adesea foarte greu de citit și ar trebui folosite doar ocazional (cum ar fi o semnătură sau un element decorativ). Respectați doar 2-3 fonturi pe site-ul dvs. pentru a face informațiile mai puțin confuze și mai ușor de înțeles.

Culori accesibile

Nu toată lumea vede culoarea la fel. De fapt, aproximativ 8% dintre bărbați și 0,5% dintre femei au o formă de daltonism . Deci, site-ul dvs. ar trebui să fie complet funcțional și utilizabil în tonuri de gri . Puteți folosi instrumente precum extensia Chrome Grayscale Alb-negru pentru testare.

Contrastul este o considerație importantă pentru accesibilitatea web. Priviți textul de deasupra imaginilor sau fundalurilor, precum și contrastul dintre elementele (cum ar fi butoanele și imaginile) care sunt apropiate unul de celălalt.

În mod ideal, doriți un contrast de luminozitate de 4,5:1 pentru textul corpului și 3:1 pentru textul mare. Contrast Checker este un instrument excelent pentru a testa primul plan față de fundal și chiar pentru a vizualiza alegerile dvs. de culoare în tonuri de gri.

O regulă importantă de reținut: nu vă bazați doar pe culoare. Formele și simbolurile pot ajuta la comunicarea aceluiași mesaj.

De exemplu, dacă mesajul de eroare al formularului dvs. de contact este în roșu, este posibil să doriți să adăugați un semn de oprire sau un simbol de exclamare care să atragă atenția în cazul în care vizitatorii site-ului dvs. sunt daltonici roșu-verde. Modelele și texturile sunt, de asemenea, o modalitate excelentă de a demonstra contrastul.

Titluri accesibile

Amintiți-vă că titlurile nu sunt doar pentru dimensiune, ci sunt o componentă structurală importantă a conținutului dvs. Folosirea elementelor de titlu adecvate permite cititorilor de ecran să identifice rapid titlurile și secțiunile de-a lungul paginii și să navigheze eficient.

Cum arată o structură adecvată a titlurilor?

<h1> ar trebui folosit pentru a identifica subiectul principal al paginii și ar trebui să fie folosit doar o dată pe pagină. Acesta ar fi titlul unei postări pe blog sau numele produsului, de exemplu.

Elementele <h2> și <h3> ar trebui folosite pentru a introduce diferite secțiuni ale conținutului de mai jos.

Iată un exemplu de format de titlu pentru o postare de blog:

 <h1>Why choose a stainless steel water bottle</h1> <h2>Stainless steel water bottles are perfect for camping</h2> <h3>They can be used to boil water in the wilderness.</h3> <h3>They're durable and can survive falls</h3> <h2>Stainless steel water bottles keep drinks colder longer.</h2> <h2>Stainless steel water bottles are the safer choice.</h2> <h3>They don't leach chemicals like many plastic bottles do.</h3> <h3>They don't rust like other metals.</h3> <h3>They can be cleaned in the dishwasher.</h3>

După cum puteți vedea, conținutul este organizat astfel încât un vizitator al site-ului sau un cititor de ecran să poată înțelege cu ușurință despre ce este vorba în fiecare secțiune.

Formulare accesibile

Formularele pot fi dificile pentru cititorii de ecran, dar ele sunt adesea modalitatea prin care veți colecta informații de plată, detalii de personalizare a produsului și chiar clienți potențiali. De aceea este atât de important ca acestea să fie accesibile și ușor de utilizat.

Un loc bun pentru a începe este folosirea etichetelor – da, chiar dacă aveți substituenți! O etichetă ar trebui să le spună utilizatorilor ce trebuie să completeze (de exemplu, adresa de e-mail), în timp ce substituentul ar trebui să le spună cum să completeze câmpul (de exemplu, [email protected]). Aceasta este o parte critică a unui cititor de ecran care vă înțelege formularul.

Asigurați-vă că toate câmpurile obligatorii sunt etichetate clar și că instrucțiunile (în special despre cerințele de formatare pentru date, numere de telefon etc.) sunt conturate într-un mod ușor de înțeles.

De asemenea, este esențial ca formularele dvs. să fie accesibile de la tastatură - acestea pot fi navigate și completate numai folosind o tastatură. În calitate de dezvoltator, fiți atenți la utilizarea javascript atunci când este vorba de manipularea datelor din formular, de trimitere a formularelor și de modificarea elementelor de formular. JavaScript folosit greșit este unul dintre cele mai frecvente motive pentru care un formular nu este complet accesibil.

Videoclipuri accesibile

Videoclipurile sunt o modalitate excelentă de a vă explica produsele, de a le prezenta utilizările și de a împărtăși mărturii de la clienții dvs. Asigurați-vă că sunt și ele accesibile!

O modalitate de a face acest lucru este să adaugi subtitrări la videoclipurile tale , ceea ce îi va ajuta pe cei surzi sau cu deficiențe de auz să înțeleagă sunetul. Universitatea din Washington oferă sfaturi grozave pentru a adăuga singur subtitrări videoclipurilor tale. Dar, dacă un videograf profesionist vă creează videoclipul, cereți-i pur și simplu să adauge subtitrări.

Adăugarea de descrieri audio este un pas important pentru a-i ajuta pe cei nevăzători să înțeleagă ce se întâmplă în videoclipul tău. Creați o pistă audio separată care descrie conținut vizual important, în special secțiuni ale videoclipului dvs. care nu au deja o narațiune. De asemenea, puteți folosi transcrieri pentru a scrie tot conținutul audio și pentru a descrie videoclipul în sine.

Veți dori să luați în considerare și playerul video . Asigurați-vă că opțiunea pe care o alegeți acceptă subtitrările și oferă comutatoare pentru a activa și dezactiva descrierile audio. De asemenea, doriți să vă asigurați că toate butoanele de pe player pot fi utilizate cu un cititor de ecran sau cu tastatură.

Navigare cu tastatura

Am atins deja puțin la acest lucru, dar este important ca site-ul dvs. web să poată fi operat folosind doar o tastatură. Acest lucru este util în special pentru persoanele cu deficiențe motorii care pot avea dificultăți în utilizarea unui mouse tradițional.

Deoarece butonul Tab este folosit pentru a naviga în întreaga pagină, este important ca navigarea pe site-ul dvs. să fie configurată astfel încât să urmeze fluxul vizual al paginii (de la stânga la dreapta, de sus în jos). Testați-vă site-ul web pentru a vă asigura că puteți naviga cu butonul Tab în următoarea ordine:

1. Antet
2. Meniul principal de navigare
3. Navigarea în orice pagină și link-uri
4. Subsol

De asemenea, fă-ți timp pentru a parcurge orice widget-uri personalizate, aplicații, plugin-uri etc. pentru a te asigura că pot fi ieșite cu ușurință folosind tasta Escape și că respectă regulile de accesibilitate adecvate pentru widget-uri.

Cea mai mare cheie aici este testarea, testarea, testarea! Petreceți timp parcurgând toate paginile folosind numai tastatura pentru a vă asigura că sunt ușor de utilizat.

Descărcări accesibile

Dacă vindeți descărcări digitale pe site-ul dvs. de comerț electronic, este important să vă asigurați, de asemenea, că descărcările în sine sunt accesibile.

O modalitate excelentă de a face PDF-urile accesibile este să adăugați etichete PDF , care oferă o reprezentare ascunsă, structurată a conținutului, care este vizibilă pentru cititorii de ecran. Adobe Acrobat oferă un ghid excelent pentru a vă face PDF-urile accesibile.

Desigur, veți dori, de asemenea, să aveți în vedere și alte principii accesibile pe care le-am discutat mai sus, cum ar fi contrastul de culoare și dimensiunea fontului, pe parcursul designului dvs. de descărcare digitală.

Cursuri accesibile

Când creați cursuri online, asigurați-vă că aveți în vedere concepte precum subtitrările video și transcrierile audio . Luați în considerare prezentarea conținutului în mai multe stiluri, cum ar fi video, audio și text, astfel încât să existe ceva pentru toată lumea. Multe dintre principiile de proiectare de mai sus se vor aplica și cursurilor dumneavoastră.

Este important să oferiți mai multe metode de comunicare pentru studenții dvs. De exemplu, un utilizator non-verbal s-ar putea să nu poată suna și să pună întrebări, iar un student orb s-ar putea să nu poată trimite întrebări online cu ușurință. Același lucru este valabil și pentru trimiterea oricăror teme sau lucrări de curs. Fii flexibil cu studenții tăi și lucrează cu orice dizabilități existente pentru a-i ajuta să profite la maximum de cursurile tale.

**

Când vine vorba de a face magazinul dvs. online accesibil, lucrul important este să vă acordați timp pentru a înțelege cum vor folosi site-ul dvs. cei cu dizabilități . Când aveți o bună înțelegere, este mult mai ușor să luați în considerare accesibilitatea în toate etapele procesului de dezvoltare și, în cele din urmă, să oferiți o experiență excelentă pentru toți clienții dvs.

Dacă căutați mai multe informații, WordPress oferă un manual excelent de accesibilitate web, care include și mai multe instrumente de testare, cele mai bune practici de dezvoltare și sfaturi pentru proprietarii de magazine.