Ajutor
Conectați-vă

Accesibilitatea temelor

Atunci când vă personalizați tema, faceți alegeri de design și conținut care contribuie la menținerea accesibilității magazinului dumneavoastră online. Un site web accesibil este conceput astfel încât să poată fi utilizat de toată lumea, inclusiv de persoanele cu dizabilități. Alegerea unor opțiuni pentru magazinul dumneavoastră online, ținând cont de accesibilitate, vă poate ajuta să oferiți o experiență incluzivă pentru toți clienții.

Recomandările de mai jos au fost create având în vedere Ghidul pentru accesibilitatea conținutului web (WCAG). Deoarece există mulți factori de luat în considerare la crearea unui site web accesibil, simpla respectare a recomandărilor de mai jos nu garantează că magazinul dumneavoastră online este complet accesibil. Puteți afla mai multe despre accesibilitatea web vizitând site-ul web WCAG sau consultând resursele enumerate mai jos.

Pe această pagină

Accesibilitatea textului

Este important ca textul din magazinul dumneavoastră online să fie lizibil pentru clienții cu deficiențe de vedere sau care au dificultăți în a citi blocuri dense de text.

Contrastul culorilor

Atunci când editați culorile pentru magazinul dumneavoastră online, asigurați-vă că tot textul este accesibil clienților daltoniști sau cu alte deficiențe de vedere. Acești clienți se bazează pe un contrast adecvat al culorilor pentru a diferenția vizual lucrurile. Puteți utiliza un instrument online pentru raportul de contrast pentru a verifica contrastul diferitelor părți ale magazinului dumneavoastră.

În exemplul de mai jos, textul are un raport de contrast de 2,4:1 față de fundal și este dificil de citit pentru unii clienți.

Un bloc de text gri deschis pe un fundal alb solid.

În exemplul următor, textul are un raport de contrast de 4,8:1 și este mai ușor de citit pentru mulți clienți.

Un bloc de text gri închis pe un fundal alb solid.

Testați contrastul întregului text, inclusiv textul principal, titlurile, linkurile și câmpurile de formular. Utilizați următoarele recomandări:

  • Culoarea textului principal și a textului butoanelor are un raport de contrast de cel puțin 4,5:1 față de fundal.
  • Culoarea titlurilor și a altor texte mari (dimensiunea fontului de 24 px și mai mare) are un raport de contrast de cel puțin 3:1 față de fundal.
  • Culoarea întregului text suprapus peste imagini, inclusiv prezentări de diapozitive, bannere și videoclipuri, are un raport de contrast suficient față de fundal. Pentru textul mare (dimensiunea fontului de 24 px și mai mare), contrastul este de cel puțin 3:1. Pentru textul mai mic, contrastul este de cel puțin 4,5:1.
  • Culoarea elementelor care nu sunt text, inclusiv chenarele de intrare și pictogramele, are un raport de contrast de cel puțin 3:1 față de fundal.

Titluri de text

Atunci când adăugați titluri la pagină cu editorul de text formatat, este important să le păstrați în ordine secvențială (1 - 6). Titlurile sunt utilizate de tehnologiile de asistență pentru a comunica modul în care este organizat conținutul paginii. Omiterea unor niveluri, cum ar fi un titlu de nivel 2 urmat de un titlu de nivel 4, poate fi derutantă pentru utilizatori. Utilizați următoarea recomandare:

  • Titlurile sunt utilizate în ordine secvențială și nu se omit niveluri.

Dimensiunea și alinierea textului

Când editați setările de tipografie ale temei, asigurați-vă că textul este suficient de mare pentru ca clienții să îl poată citi confortabil.

De asemenea, textul ar trebui să aibă o spațiere consecventă între cuvinte și litere pentru a fi ușor de citit. În exemplul de mai jos, alinierea textului este justificată, ceea ce creează o spațiere inconsecventă între cuvinte.

Un bloc de text aliniat justificat. Fiecare rând de text umple spațiul de la un capăt la altul, forțând o spațiere variată între cuvinte pentru a se potrivi.

În exemplul următor, alinierea textului este la stânga, ceea ce creează o spațiere consecventă între cuvinte.

Un bloc de text aliniat la stânga. Există o spațiere consecventă între fiecare cuvânt.

Când personalizați dimensiunea și alinierea textului, respectați următoarele recomandări:

  • Dimensiunea minimă a fontului pentru corpul textului este echivalentul a 16 px.
  • Alinierea textului nu este justificată. Textul justificat creează o spațiere inconsecventă între cuvinte.

Linkuri text

Linkurile text ar trebui să fie subliniate sau să aibă un alt stil distinct din punct de vedere vizual în comparație cu textul obișnuit. Deoarece unii clienți au dificultăți în a distinge culorile, nu vă puteți baza doar pe o schimbare de culoare pentru a diferenția un link de textul obișnuit.

Linkurile text ar trebui să se deschidă în aceeași filă. Linkurile care se deschid într-o filă sau fereastră nouă pot provoca confuzie, în special pe mobil, unde fereastra veche nu este vizibilă, și nu sunt incluzive pentru clienți, în special pentru clienții care utilizează mărirea ecranului sau sunt mai puțin tehnici.

Dacă editați fișa de stil a temei, asigurați-vă că nu eliminați stilurile linkurilor text. Respectați următoarele recomandări:

  • Linkurile text sunt fie subliniate, fie au un alt element de diferențiere vizuală, care nu este doar culoarea, astfel încât clienții să poată diferenția linkurile de textul obișnuit.
  • Linkurile text se deschid în aceeași filă la clic.

Text alternativ pentru imagini

Când adăugați imagini în magazinul dvs. online, este important să le faceți accesibile clienților orbi sau cu deficiențe de vedere. Puteți face acest lucru adăugând un text alternativ care descrie cu precizie fiecare imagine. Clienții care utilizează cititoare de ecran se bazează pe textul alt pentru a le fi comunicat conținutul imaginilor din magazinul dvs. online.

Puteți adăuga text alt imaginilor de produs din panoul de administrare Shopify. Puteți adăuga text alt celorlalte imagini din tema dvs. din editorul de teme.

Când adăugați text alt unei imagini, o bună practică este să vă prefaceți că descrieți imaginea cuiva care are ochii închiși. Ajutați-l să-și creeze o imagine în minte. Modul în care descrieți o imagine depinde, de asemenea, de contextul paginii dvs. web. De exemplu, ați putea descrie o imagine în mod diferit dacă afacerea dvs. este o agenție de turism decât dacă este un magazin de echipamente pentru activități în aer liber. Luați în considerare următoarea imagine:

Doi prieteni care poartă rucsacuri, cu brațele unul în jurul celuilalt, privind spre ocean

Pentru o agenție de turism, ați putea face referire la țara și regiunea în care călătoresc cei doi prieteni și la numele oceanului sau al mării la care se uită. Pe de altă parte, pentru un magazin de echipamente pentru activități în aer liber, v-ați putea concentra pe brandurile și caracteristicile rucsacurilor celor doi prieteni.

Dacă afacerea dvs. este o agenție de turism, atunci un exemplu de text alt necorespunzător ar putea fi: „Două persoane în fața oceanului”. Pentru aceeași agenție, un exemplu de text alt corespunzător ar putea fi: „Doi prieteni care călătoresc în Lagos, Portugalia, privind spre golful nisipos Praia do Camilo într-o zi însorită”.

Accesibilitatea prezentărilor de diapozitive și a conținutului video

Când adăugați videoclipuri în magazinul dvs. online, asigurați-vă că luați în considerare nevoile clienților cu deficiențe de vedere, ale clienților surzi sau cu deficiențe de auz sau ale clienților care ar putea fi susceptibili la tulburări vestibulare.

Unii dintre acești clienți se bazează pe capacitatea de conversie a textului în vorbire a cititoarelor de ecran, care citesc cu voce tare conținutul unei pagini web. Sunetul suplimentar de la videoclipuri și muzică, în special atunci când este neașteptat, poate face această experiență dificilă. Pentru clienții surzi sau cu deficiențe de auz, este o idee bună să adăugați subtitrări pentru persoanele cu deficiențe de auz la videoclipurile dvs., astfel încât acești clienți să poată accesa conținutul.

Clienții cu tulburări vestibulare pot experimenta amețeli la conținutul în mișcare. Din acest motiv, este important ca prezentările de diapozitive și videoclipurile să nu fie redate automat și ca clientul să poată controla prezentarea de diapozitive cu butoane de control.

Prezentări de diapozitive

Când adăugați o prezentare de diapozitive în magazinul dvs. online, respectați următoarele recomandări:

  • Prezentările de diapozitive nu sunt redate automat.
  • Dacă prezentările de diapozitive sunt redate automat, atunci acestea includ comenzi pentru prezentarea de diapozitive pe care clienții le pot utiliza pentru a o întrerupe, a o avansa sau a o opri.

Videoclipuri

Când adăugați un videoclip în magazinul dvs. online, respectați următoarele recomandări:

  • Videoclipurile nu sunt redate automat.
  • Dacă videoclipurile sunt redate automat, atunci sunetul lor este dezactivat.
  • Pentru videoclipurile care includ sunet, videoclipul este complet vizibil și nu este obstrucționat de alte elemente ale paginii. Acest lucru permite subtitrărilor pentru persoanele cu deficiențe de auz să rămână vizibile.
  • Pentru videoclipurile care includ dialog, sunt disponibile transcrieri text. Acestea sunt incluse fie pe pagină, fie într-un link către o pagină separată.

Aceste recomandări se aplică și videoclipurilor care se află într-o prezentare de diapozitive.

Asistență pentru tastatură

Clienții cu deficiențe de vedere sau motorii pot utiliza o tastatură pentru a naviga și a finaliza sarcini online. Acești clienți se bazează pe un indicator vizual pentru a comunica unde se află focalizarea tastaturii pe o pagină web. În exemplul de mai jos, câmpul E-mail are un indicator vizual de focalizare:

Un ecran de conectare a clientului într-un magazin online care afișează câmpuri de formular pentru e-mail și parolă. Câmpul E-mail este conturat cu albastru.

Dacă editați fișa de stil a temei, asigurați-vă că nu eliminați stilul de focalizare a tastaturii din niciun element al paginii. Respectați următoarea recomandare:

  • Toate elementele interactive ale paginii au un indicator vizual clar atunci când au focalizarea tastaturii. Aceste elemente includ linkuri, butoane și câmpuri de formular.

Resurse

Pentru a afla mai multe despre accesibilitatea web pentru subiectele discutate în acest articol, consultați următoarele resurse.

Resurse pentru contrastul culorilor

Resurse text

Resurse pentru textul alternativ

Resurse pentru prezentări de diapozitive și video

Resurse de asistență pentru tastatură

În această secțiune