Cum să incorporezi accesibilitatea web în site-ul tău WordPress

Publicat: 2020-02-15

WordPress este cea mai populară platformă de creare de site-uri web. Potrivit W3techs, 35,7% din toate site-urile web folosesc WordPress, ceea ce îl aduce la o uimitoare 62,5% din cota de piață a Sistemului de management al conținutului (CMS) la nivel global.

Cu toate acestea, atunci când creați un site web WP, accesibilitatea web este probabil ultimul lucru pe care îl aveți în vedere.

Însă, standardele de codificare de accesibilitate WordPress afirmă că „ Toate codurile noi sau actualizate lansate în WordPress trebuie să fie în conformitate cu Ghidurile de accesibilitate a conținutului web 2.0 la nivelul AA. ”

Cu alte cuvinte, accesibilitatea este un factor critic dacă aveți un site web WP.

Din fericire, a face site-ul dvs. WP accesibil nu este imposibil. Dar, înainte de a discuta despre cum se face, să înțelegem ce reprezintă accesibilitatea web.

A. Cei patru piloni ai accesibilității web

Consorțiul World Wide Web (W3C), care dezvoltă standarde internaționale pentru web, a venit deja cu următoarele patru principii de accesibilitate web:

Perceptibil: trebuie să prezentați toate informațiile și elementele de pe site-ul dvs. într-un mod în care toată lumea să le poată percepe.
Operabil: Toate elementele dvs. navigabile și interactive trebuie să fie operabile de diferiți utilizatori.
De înțeles: toată lumea ar trebui să poată înțelege informațiile și interfața cu utilizatorul de pe site-ul dvs.
Robuste: diferitele tipuri de tehnologii de asistență și utilizatorii ar trebui să poată citi conținutul de pe site-ul dvs.

B. Cele mai bune practici de accesibilitate web WordPress

Ținând cont de principiile de mai sus, puteți face următorii pași pentru a face site-ul dvs. WordPress accesibil persoanelor cu dizabilități:

Îmbunătățiți accesibilitatea textului

Toată lumea, inclusiv persoanele cu deficiențe de vedere, ar trebui să poată citi textul de pe site-ul dvs. Deși puteți utiliza fonturi de dimensiuni mari ca implicit, furnizarea de text redimensionabil va crește și mai mult lizibilitatea. Utilizatorii cu deficiențe de vedere pot crește dimensiunea fontului în funcție de confortul lor folosind această funcție.

De asemenea, asigurați-vă că adăugați alternative de text, cum ar fi etichete Alt, oriunde este necesar. WP Accessibility este unul dintre pluginurile de accesibilitate WordPress care vă poate ajuta să adăugați text redimensionabil, contrast de culoare, să adăugați titluri de postare pentru a citi mai multe link-uri și să oferiți text alternativ adecvat.

Față și spate structurate

Fiecare dintre paginile dvs. web trebuie să aibă un front și un spate bine structurate. Nu numai că crește lizibilitatea generală a conținutului dvs., dar facilitează și instrumentele de asistență să transmită mesajul utilizatorilor cu dizabilități. Puteți utiliza elemente HTML, cum ar fi etichete de titlu semantice și meta-descrieri, pentru a îmbunătăți back-end-ul.

Asigurați-vă că utilizați liste cu marcatori, paragrafe scurte și conținut bine organizat și la obiect ar trebui să contribuie la îmbunătățirea front-end-ului. De asemenea, ar trebui să utilizați titluri și titluri adecvate pentru a defini diferite subsecțiuni de conținut. Evitați să folosiți animații și GIF-uri strălucitoare, deoarece nu sunt prietenoase cu accesibilitatea.

De asemenea, adăugați Skip Links pentru a facilita navigarea prin conținut pentru utilizatorii de cititoare de ecran. Această caracteristică simplă de accesibilitate permite utilizatorilor să sară de la o secțiune a conținutului la cealaltă fără a fi nevoiți să treacă prin materiale inutile.

Navigare cu tastatură pentru o interacțiune mai bună

De asemenea, trebuie să vă asigurați că site-ul dvs. este navigabil de la tastatură. Ar trebui să includă link-uri și meniuri, în special meniuri drop-down. Toți utilizatorii ar trebui să poată accesa elemente precum linkuri, meniuri, butoane și formulare folosind Tab (înainte) și Shift+Tab (înapoi).

De asemenea, trebuie să utilizați un indicator de focalizare vizibil, care arată utilizatorilor cu dizabilități unde se află pe o pagină web. Temele WordPress pot reseta adesea stilul de focalizare implicit. Asigurați-vă că utilizați o temă WordPress care nu resetează această caracteristică. Tema de accesibilitate Divi vă poate ajuta să configurați o navigare prietenoasă cu tastatura, cu meniuri derulante accesibile și contururi vizuale pentru elemente focalizate.

Adăugați repere ARIA

ARIA înseamnă Accesible Rich Internet Applications. Cu un rol de reper ARIA, puteți defini diferite regiuni ale unei pagini web, permițând utilizatorilor de tehnologie de asistență să navigheze cu ușurință pe site-ul dvs.

Cele mai comune roluri de reper ARIA includ un banner, principal, complementar, informații de conținut, căutare și navigare.

Banner: definește titlul site-ului, cum ar fi sigla, numele companiei sau titlul site-ului.
Principal: Definește conținutul principal al paginii web.
Complementar: detectează conținut de suport, care este o parte esențială a conținutului principal.
Informații despre conținut: furnizează informații despre documentele părinte, cum ar fi notele de subsol, drepturile de autor și declarațiile de confidențialitate.
Căutare: denotă formularul de căutare de pe site-ul dvs.
Navigare: marchează elementele de navigare ale unei pagini web.

Cel mai bun avantaj al utilizării reperelor ARIA este că pot funcționa cu elemente HTML5 deja semantice. Ca rezultat, le puteți utiliza cu elemente HTML5 în temele WordPress existente.

Elemente interactive: Contrast de culoare

Pentru elemente interactive, cum ar fi CTA și formulare, utilizați întotdeauna culori cu contrast ridicat ca fundal pentru text. În timp ce WCAG 2.0 Level AA necesită un raport de contrast de cel puțin 4:5:1 pentru text normal și 3:1 pentru text mare, nivelul AAA necesită un raport de contrast de cel puțin 7:1 pentru text normal și 4:5: 1 pentru text mare.

De obicei, textul negru pe fundal alb oferă cel mai bun contrast de culoare. De asemenea, puteți utiliza text negru pe fundal galben și invers. Cu toate acestea, evitați combinațiile precum textul verde pe fundal roșu sau textul roșu pe fundal verde.

Cuvinte de despărțire

Accesibilitatea site-ului web se extinde și la alte elemente interactive, cum ar fi multimedia, de pe site-ul dvs. Asigurați-vă că niciunul dintre elementele multimedia, cum ar fi video, audio, glisoare sau carusele, nu are opțiune implicită de redare automată, deoarece este o barieră semnificativă pentru utilizatorii cu dizabilități. În schimb, tot conținutul multimedia ar trebui să înceapă redat numai după interacțiunea utilizatorului.

Pe lângă transcrierile video, descrierile audio și subtitrări, asigurați-vă că utilizați playere media accesibile. Puteți utiliza un plugin precum Able Player, care vă permite să adăugați videoclipuri și audio incluse într-un player media accesibil pe orice pagină a site-ului dvs. WordPress.

Pentru ca site-ul dvs. WordPress să fie accesibil, vă va necesita să schimbați fluxul de design și dezvoltare și poate fi realizat printr-un proces manual cu un consilier. O soluție automată de accesibilitate web necesită o mică investiție de timp și resurse va aduce numeroase beneficii, inclusiv o imagine pozitivă a mărcii, o acoperire mai largă pe piață, o mai bună clasare în căutare și, ca să nu mai vorbim, creșterea vânzărilor.

Dacă mai aveți îndoieli cu privire la modul de a face site-ul dvs. WordPress accesibil, nu ezitați să trimiteți întrebările în comentarii.