Cum să îmbunătățiți accesibilitatea pe site-ul dvs. WordPress

V-ați imaginat vreodată vizitând un site web și constatând că pur și simplu nu puteți citi textul, nu puteți folosi meniurile sau nu puteți înțelege nimic? Este greu de crezut, dar aceasta este realitatea pentru multe persoane cu dizabilități în fiecare zi.

Când oamenii construiesc site-uri web, accesibilitatea este ceva ce este adesea trecut cu vederea. Dar nu ar trebui, deoarece poate crea o barieră între conținutul dvs. și mulți dintre vizitatorii dvs. Din experiența noastră, atunci când un site web nu este accesibil, acesta poate părea foarte neospitalier și chiar exclusivist.

Asigurarea accesibilității site-ului dvs. nu înseamnă doar respectarea regulilor, ci și asigurarea că toată lumea are o experiență excelentă pe site-ul dvs. Este vorba despre incluziune și oferirea unei experiențe excepționale pentru toți vizitatorii dvs., indiferent de nevoile sau abilitățile lor.

Deci, dacă sunteți gata să faceți site-ul dvs. web primitor pentru toată lumea, vă vom arăta cum să îmbunătățiți accesibilitatea site-ului dvs. WordPress pas cu pas.

De ce este importantă accesibilitatea pentru site-ul meu WordPress?

În designul web, accesibilitatea se referă la tehnicile utilizate pentru a face un site web mai ușor de utilizat pentru persoanele cu dizabilități. Unii vizitatori folosesc tehnologii asistive pentru a naviga pe web, cum ar fi cititoarele de ecran pentru persoanele cu deficiențe de vedere și navigarea prin tastatură pentru persoanele care nu pot folosi un mouse.

Există câteva bune practici comune, recomandate de experți, pentru a face site-urile web mai accesibile. Acestea ajută la crearea unor site-uri mai incluzive și mai ușor de utilizat pentru toată lumea, indiferent de abilități.

Prin prioritizarea accesibilității, mai mulți oameni vor putea naviga pe site-ul dvs. WordPress și vă vor explora conținutul. Dacă aveți un magazin online, atunci veți crește, de asemenea, șansele de a converti utilizatorii în clienți.

Accesibilitatea este, de asemenea, importantă pentru optimizarea pentru motoarele de căutare (SEO). Google apreciază site-urile web cu o bună ușurință în utilizare. Pe lângă faptul că faceți site-ul dvs. mai receptiv pentru dispozitive mobile, puteți prioritiza, de asemenea, incluziunea în designul web pentru a îmbunătăți clasamentele.

În plus, dacă sunteți proprietarul unui site web de afaceri și partea frontală a site-ului dvs. este inaccesibilă, atunci ați putea suporta consecințe legale.

Legea americanilor cu dizabilități (ADA) stipulează că consumatorii pot depune o plângere dacă un site nu respectă ghidurile de accesibilitate. Mai mult, reputația dvs. ar putea fi ruinată, ceea ce ar putea duce la pierderi financiare.

Cum face WordPress site-ul meu mai accesibil?

WordPress are mai multe funcționalități încorporate pentru a ajuta utilizatorii să facă site-urile lor WordPress accesibile. De exemplu, în mod implicit, puteți adăuga text alternativ (alt text) și atribute de titlu imaginilor, astfel încât cititoarele de ecran să le poată citi cu voce tare pentru utilizatorii cu deficiențe de vedere.

WordPress a făcut, de asemenea, obligatoriu ca tot codul nou și actualizat din WordPress să respecte standardele de codare pentru accesibilitate. Acest lucru este pentru a se asigura că dezvoltatorii WordPress respectă cele mai bune practici pentru accesibilitate atunci când creează teme și pluginuri.

În afară de asta, WordPress include funcționalități care facilitează crearea propriilor site-uri web de către utilizatorii cu dizabilități, cum ar fi modul de accesibilitate pentru adăugarea de widget-uri.

Pentru mai multe informații, vă recomandăm să urmăriți eticheta Accesibilitate de pe pagina Make WordPress Core pentru mai multe informații.

Având în vedere toate acestea, WordPress nu este complet accesibil din start. Ca proprietar de site web, este important să luați măsuri suplimentare pentru a vă ajuta site-ul să îndeplinească standardele de accesibilitate.

Am împărțit acest ghid în câteva sfaturi ușoare pentru a îmbunătăți accesibilitatea site-ului dvs. WordPress. Puteți utiliza aceste linkuri rapide pentru a naviga la o secțiune specifică:

1. Familiarizează-te cu Ghidurile pentru accesibilitatea conținutului web (WCAG)
2. Folosește o temă WordPress pregătită pentru accesibilitate
3. Instalați un plugin de accesibilitate WordPress
4. Verificați contrastul culorilor site-ului dvs.
5. Adaugă text alternativ și atribute title imaginilor
6. Adăugați etichete la toate câmpurile formularului
7. Utilizați etichete de antet corespunzătoare în conținutul dvs.
8. Utilizați text de ancorare descriptiv
9. Adăugați subtitrări sau transcrieri la conținutul video și audio
10. Efectuați teste de utilizabilitate și accesibilitate
11. Ghiduri experte despre accesibilitatea WordPress

1. Familiarizează-te cu Ghidurile pentru accesibilitatea conținutului web (WCAG)

În primul rând, recomandăm citirea Ghidurilor de accesibilitate pentru conținutul web (WCAG). Acestea sunt standardele stabilite de Inițiativa de accesibilitate web W3C (WAI) pentru ca utilizatorii să-și facă site-urile web mai accesibile.

Puteți consulta WCAG 2.1 și WCAG 2.2 pentru început. Dacă ambele documente par prea lungi de citit, nu ezitați să salvați această referință rapidă în schimb.

2. Utilizați o temă WordPress pregătită pentru accesibilitate

Teme pregătite pentru accesibilitate au îndeplinit standardele minime de accesibilitate pe care le-a stabilit echipa de revizuire a temelor WordPress.

Utilizarea unei teme WordPress accesibile nu înseamnă că site-ul dvs. va respecta automat toate cerințele de accesibilitate, deoarece va trebui totuși să faceți unele ajustări pe cont propriu. Cu toate acestea, vă poate oferi un start rapid pentru a face site-ul dvs. mai accesibil.

Cel puțin, o temă pregătită pentru accesibilitate va avea:

• Meniuri care pot fi navigabile doar cu tastatura.
• Contrast bun de culori care face conținutul lizibil pentru utilizatorii cu deficiențe de vedere.
• HTML semantic corect, care ajută tehnologiile asistive să înțeleagă conținutul și structura unei pagini web.

Dacă doriți să mergeți mai departe, este posibil să doriți să verificați dacă tema include atribute ARIA. Aceste atribute sunt ca informații suplimentare care completează HTML-ul temei dvs. pentru a face un site web și mai ușor de navigat pentru tehnologiile asistive.

Cel mai simplu mod de a căuta o temă pregătită pentru accesibilitate este să accesați Aspect » Teme din tabloul de bord WordPress. Apoi, faceți clic pe „Adăugare temă nouă”.

De aici, selectați „Filtru de caracteristici” și alegeți „Pregătit pentru accesibilitate”.

Nu ezitați să adăugați mai multe filtre pentru a găsi tema care se potrivește nevoilor dvs. exacte.

Acum, derulați în jos și faceți clic pe „Aplicare filtre”.

Veți vedea apoi pe ecran câteva teme pregătite pentru accesibilitate.

Pentru mai multe recomandări de teme, consultați alegerile experților pentru cele mai bune teme WordPress.

3. Instalați un plugin de accesibilitate WordPress

Un plugin de accesibilitate WordPress adaugă funcționalități utile pentru vizitatorii cu dizabilități pentru a naviga pe site-ul dvs.

Un plugin de accesibilitate WordPress pe care îl recomandăm este WP Accessibility. Unele dintre lucrurile pe care le poate face acest plugin includ:

• Adăugarea unei bare de unelte pentru accesibilitate
• Detectarea dacă tema dvs. este pregătită pentru accesibilitate
• Urmărirea modului în care sunt utilizate funcțiile de accesibilitate de pe site-ul dvs. web, astfel încât să le puteți evalua

Mai întâi, trebuie să instalați și să activați plugin-ul pe WordPress.

La activare, trebuie să accesați Setări » WP Accessibility pentru a configura pluginul.

Să aruncăm o privire asupra fiecărei secțiuni a paginii de setări.

Adăugați linkuri de omisiune

În prima secțiune a setărilor pluginului, puteți utiliza legături de tip skip pe site-ul dvs. web, iar această setare este activată implicit. O legătură de tip skip permite utilizatorilor să sară direct la secțiunea de conținut a unei postări sau pagini.

Aceasta este o funcționalitate extrem de utilă pentru persoanele care utilizează cititoare de ecran. Fără un link de tip skip, acestea vor trebui să asculte tot ce este afișat pe site-ul dvs., inclusiv meniurile de navigare, înainte de a ajunge la conținut.

Dacă tema dvs. folosește deja linkuri de tip skip, veți vedea o notificare care confirmă acest lucru.

Bara de instrumente de accesibilitate

Pluginul WP Accessibility vine cu o bară de instrumente de accesibilitate.

Când îl activați, pluginul va adăuga o bară de instrumente pe site-ul dvs. web unde utilizatorii pot redimensiona fonturile sau vizualiza site-ul dvs. în modul de culori cu contrast ridicat.

Acest lucru permite utilizatorilor dvs. să selecteze opțiunile de care au nevoie pentru a face pagina mai ușor de citit.

Pentru a activa bara de instrumente, pur și simplu bifați căsuțele „Dimensiunea fontului” și „Contrast”.

Există, de asemenea, setări unde puteți controla dimensiunea fontului și poziționarea barei de instrumente.

Dacă faceți modificări la aceste setări, asigurați-vă că faceți clic pe butonul „Actualizează setările barei de instrumente” pentru a salva setările.

Așa arată bara de instrumente pe site-ul nostru de testare.

Remedierea problemelor de accesibilitate

WP Accessibility oferă, de asemenea, mai multe remedieri de accesibilitate care ar putea rezolva probleme potențiale pe site-ul dvs. Puteți parcurge fiecare opțiune și puteți vedea dacă aveți nevoie de ea.

Unele setări recomandate vor fi bifate implicit. Aceste opțiuni împiedică deschiderea linkurilor în ferestre noi, afișează o eroare atunci când trimiteți o căutare goală și elimină atributul HTML tabindex acolo unde nu este necesar pentru a simplifica navigarea cu tastatura.

Dacă utilizați o temă prietenoasă cu accesibilitatea, care a activat deja unele dintre aceste funcții, veți vedea un mesaj care confirmă acest lucru în partea de sus a secțiunii.

Nu uitați să faceți clic pe butonul „Actualizează setările diverse” pentru a salva modificările.

Funcționalități de accesibilitate

Pluginul oferă, de asemenea, câteva opțiuni pentru a face conținutul tău mai accesibil.

Primul grup de setări face imaginile mai ușor de gestionat pentru cei care folosesc cititoare de ecran.

Există, de asemenea, opțiuni pentru a afișa rezumate în partea de sus a postărilor și paginilor tale. Acest lucru permite celor care folosesc cititoare de ecran să audă un rezumat al conținutului înainte de a decide să asculte întregul articol.

Dacă modificați oricare dintre aceste opțiuni, vă rugăm să rețineți să faceți clic pe butonul „Actualizați caracteristicile de accesibilitate”.

Experiența de testare și administrare

În continuare, veți găsi câteva setări care vă permit să îmbunătățiți accesibilitatea zonei de administrare WordPress și să vă ajute la testare.

Această secțiune este mai tehnică, așa că asigurați-vă că consultați documentația plugin-ului înainte de a bifa căsuțele.

Asigurați-vă că faceți clic pe butonul „Actualizați instrumentele de accesibilitate” pentru a salva modificările.

Elimină Atributele Titlu

Această secțiune vă permite să eliminați atributul title din norii de etichete.

Atributul title este considerat inutil de către unii experți în accesibilitate. Majoritatea cititoarelor de ecran ignoră, de obicei, atributul title și citesc în schimb textul ancora.

Această setare este activată implicit, dar dacă o modificați, asigurați-vă că faceți clic pe butonul „Actualizați setările atributelor titlului”.

4. Verificați contrastul culorilor site-ului dvs.

Contrastul culorilor înseamnă diferența dintre culoarea textului și culoarea de fundal. Este o parte foarte importantă a accesibilității site-ului web, deoarece poate afecta cât de lizibil este conținutul site-ului dvs. pentru persoanele cu deficiențe de vedere și daltonism.

Pentru a respecta standardele de accesibilitate web, textul obișnuit ar trebui să aibă un contrast ridicat de cel puțin 4,5 la 1. Aceasta înseamnă că textul trebuie să fie de 4,5 ori mai luminos decât fundalul.

Pentru text mai mare, cerința este puțin mai mică, de 3 la 1. Aceasta înseamnă că un contrast ușor mai scăzut este acceptabil. Aceeași regulă se aplică graficelor și elementelor interfeței utilizator, cum ar fi marginile câmpurilor de introducere a datelor.

Pluginul WP Accessibility are un verificator de contrast al culorilor încorporat pe care îl puteți utiliza.

În setările pluginului, derulați pur și simplu în jos la secțiunea Color Contrast Tester și alegeți o culoare de prim-plan (culoarea pe care o veți folosi pentru textul dvs.) și culoarea de fundal a acesteia.

Apoi, faceți clic pe „Verifică contrastul culorilor”.

Pluginul vă va spune apoi dacă culorile trec sau nu trec testul de contrast.

Iată cum arată rezultatul:

Alternativ, puteți utiliza gratuit WebAIM Contrast Checker. Ca și în cazul instrumentului anterior, va trebui doar să selectați o culoare de prim-plan și o culoare de fundal.

Acest instrument nu numai că testează contrastul culorilor, dar vă arată și cum ar putea arăta culorile ca text normal și mare, precum și obiecte grafice și componente ale interfeței utilizatorului.

Pentru mai multe detalii, s-ar putea să doriți să consultați ghidul nostru despre cum să alegi schema de culori perfectă pentru site-ul tău WordPress.

5. Adăugați text alternativ imaginilor

Pe lângă faptul că este util pentru motoarele de căutare, textul alternativ este util pentru cititoarele de ecran pentru a descrie imaginile persoanelor cu deficiențe de vedere.

Anterior, am menționat că WordPress are o funcție încorporată pentru adăugarea textului alternativ. Procesul este destul de ușor și puteți citi totul despre configurarea acestuia în următorii ghiduri:

• Ghidul începătorului pentru SEO-ul imaginilor – optimizați imaginile pentru motoarele de căutare
• Text alternativ imagine vs. titlu imagine în WordPress – Care este diferența?

6. Adăugați etichete la toate câmpurile formularului

Dacă aveți formulare pe site-ul dvs. web, atunci veți dori să vă asigurați că utilizați etichetele corespunzătoare pentru fiecare element al formularului. Aceasta include câmpurile formularului, butoanele, meniurile și așa mai departe.

WCAG recomandă adăugarea de etichete la toate elementele formularului pentru a facilita identificarea și transmiterea informațiilor despre fiecare element de către instrumentele de asistență către utilizatori.

În plus, adăugarea de etichete clare și descriptive este o practică bună de web design. Ajutând utilizatorii să înțeleagă la ce servește fiecare câmp din formular, erorile utilizatorilor sunt mai puțin probabile să apară, iar mai mulți oameni vor putea să își trimită formularele.

Dacă nu sunteți sigur cum să creați formulare excelente, vă recomandăm să consultați WPForms. Este cel mai bun constructor de formulare WordPress care face extrem de ușor să personalizați formularele conform nevoilor dvs. exacte, inclusiv îmbunătățirea acestora pentru accesibilitate.

Puteți citi mai multe despre WPForms în recenzia noastră despre WPForms. De asemenea, consultați aceste ghiduri despre cum să creați formulare în WordPress:

• Cum să creezi un formular de contact în WordPress (Pas cu Pas)
• Cum să creezi un formular de rezervare în WordPress
• Cum să creați un formular personalizat de înregistrare a utilizatorilor în WordPress

7. Folosește etichete de antet adecvate în conținutul tău

Tag-urile de antet sunt tag-uri HTML care pot marca titlurile sau subtitlurile unei pagini web. Astfel, conținutul dvs. este mult mai organizat și mai ușor de urmărit.

Aceste etichete ajută, de asemenea, instrumente precum cititoarele de ecran să genereze o schiță navigabilă pentru utilizatorii cu deficiențe de vedere. Acest lucru le va permite să sară între secțiuni și să înțeleagă structura generală a conținutului dvs.

Dacă nu sunteți sigur cum să profitați de tagurile de antet, atunci puteți citi ghidul nostru despre cum să utilizați corect tagurile de antet în WordPress.

8. Utilizați text de ancorare descriptiv

Textul de ancorare sau de legătură este, practic, cuvintele sau frazele pe care se poate face clic într-o legătură. De obicei, puteți recunoaște textul care este legat, deoarece va avea o culoare diferită.

Adesea, bloggerii vor folosi textul linkului „click aici” sau „citește mai mult” pentru a direcționa vizitatorii către o pagină.

Aceasta nu este o practică bună pentru accesibilitate, deoarece nu oferă nicio informație despre destinația linkului. Acest lucru face dificil pentru persoanele care utilizează tehnologii asistive să înțeleagă scopul linkului.

De aceea, este mai bine să folosiți text de ancorare descriptiv. Aceasta înseamnă să folosiți cuvinte care descriu despre ce este vorba în conținut atunci când faceți clic pe link.

De exemplu, să spunem că doriți să adăugați un link către un articol despre cele mai bune servicii de găzduire WordPress în această propoziție: „Urmați acest ghid pentru a afla despre cele mai bune servicii de găzduire WordPress de pe piață.”

În loc să adăugați linkul la „Urmați acest ghid” sau oriunde altundeva în acea propoziție, ar trebui să îl inserați în „cele mai bune servicii de găzduire WordPress.” Astfel, utilizatorul obține o imagine de ansamblu asupra a ceea ce va găsi în conținutul legat.

Pentru mai multe informații despre linkuri și textul ancora, consultați ghidul nostru pentru începători despre cum să adăugați un link în WordPress: ghidul pentru începători despre legături în WordPress.

9. Adaugă legende sau transcrieri la conținutul video și audio

Una dintre principalele dificultăți pentru utilizatorii cu deficiențe de auz este incapacitatea de a înțelege conținutul vorbit în videoclipuri și audio. De aceea, mulți creatori de conținut video și podcasteri adaugă subtitrări sau transcrieri.

La WPBeginner, descurajăm cu tărie să încărcați videoclipuri pe propriul site web, deoarece acestea pot încetini site-ul. În schimb, este mai bine să folosiți servicii precum YouTube sau Vimeo, ambele având instrumente încorporate pentru adăugarea de subtitrări.

În ceea ce privește conținutul audio, s-ar putea să doriți să luați în considerare utilizarea unui serviciu de transcriere pentru a converti vorbirea în text cu ușurință. Astfel, nu va trebui să creați manual o versiune scrisă a conținutului audio.

Consultați lista noastră cu cele mai bune servicii de transcriere pentru mai multe informații.

10. Efectuați teste de utilizabilitate și accesibilitate

Dacă ați implementat toate sfaturile din acest ghid, atunci ultimul pas este să efectuați testarea de utilizabilitate și accesibilitate pe site-ul dvs. WordPress.

Acest testare te poate ajuta să identifici orice probleme rămase și să faci site-ul tău ușor de utilizat și accesibil pentru toată lumea.

WebAIM are un Instrument de evaluare a accesibilității web (WAVE) pe care îl puteți utiliza gratuit.

Pur și simplu introduceți numele de domeniu al site-ului dvs. web, iar instrumentul va identifica orice probleme legate de accesibilitate pentru dvs.

Puteți utiliza, de asemenea, un scaner de accesibilitate. Vă recomandăm să consultați Accessibility Checker by Equalize Digital. Acesta vine, de asemenea, cu o versiune gratuită de plugin pentru a scana un număr nelimitat de postări și pagini de pe site-ul dvs.

După instalarea pluginului, puteți accesa pur și simplu editorul de blocuri al paginii sau postării dvs. Dacă derulați în jos la secțiunea meta box, veți găsi un verificator de accesibilitate care identifică problemele dvs. de accesibilitate.

O altă opțiune este să efectuați un audit UX, ceea ce înseamnă, practic, verificarea site-ului dvs. web pentru a vedea dacă are o experiență bună pentru utilizator. Accesați ghidul nostru privind auditul UX pentru mai multe informații.

Nu în ultimul rând, vă încurajăm să solicitați feedback de la utilizatori. Deși testarea vă poate oferi rezultate, obținerea feedback-ului de la vizitatorii reali care utilizează funcțiile de accesibilitate ale site-ului dvs. poate oferi informații mult mai precise.

UserFeedback este cel mai bun plugin pentru această sarcină. Vă permite să creați sondaje pentru a colecta opiniile și gândurile utilizatorilor dvs. Există, de asemenea, șabloane pentru feedback privind designul site-ului web, astfel încât să nu fie nevoie să creați sondajul de la zero.

Pentru mai multe informații, consultați ghidul nostru despre cum să obțineți feedback despre designul site-ului web în WordPress.

Ghiduri experte despre accesibilitatea WordPress

Acum că știți cum să îmbunătățiți accesibilitatea pe site-ul dvs., s-ar putea să doriți să vedeți și alte ghiduri legate de problemele de accesibilitate WordPress:

• Cum să adăugați widget-uri WordPress în modul de accesibilitate
• Cum să alegi o schemă de culori perfectă pentru site-ul tău WordPress
• Cum să adăugați un redimensionator de fonturi în WordPress pentru accesibilitate
• Cum să adăugați cu ușurință atributul titlu la imagini în WordPress
• Cum să evidențiezi textul în WordPress (Ghid pentru începători)
• Text alternativ imagine vs. titlu imagine în WordPress – Care este diferența?

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.