Testarea atributelor de accesibilitate cu DIVI 5

Atributele de accesibilitate sunt acum complet compatibile cu Divi 5, oferindu-vă o modalitate fără cod de a adăuga roluri de Aria, etichete și alte ajutoare de cititori de ecran chiar în interiorul constructorului. Dacă lucrați cu Divi 5, este cel mai simplu mod de a construi accesibilitatea pe site -ul dvs. fără a vă schimba fluxul de lucru sau designul.

Având în vedere că Legea europeană de accesibilitate care a intrat în vigoare pe 28 iunie și Google favorizează din ce în ce mai mult cele mai bune practici de accesibilitate, acum este momentul pentru a merge mai departe. Iată cum funcționează atributele de accesibilitate și cum vă ajută site -ul să îndeplinească standardele moderne de accesibilitate!

Atribute de accesibilitate pentru Divi 5

Atributele de accesibilitate este un plugin Divi care vă permite să adăugați roluri de Aria, etichete și alți asistenți de accesibilitate la paginile dvs. web direct de la Divi Builder fără a scrie niciun cod. Atributele Aria (aplicații de internet bogate accesibile) vă ajută să adăugați sens elementelor care nu oferă suficient context pe cont propriu, mai ales atunci când construiți machete personalizate în Divi 5.

De exemplu, dacă utilizați un modul de text pentru a stiliza vizual un titlu sau un modul de buton pentru a crea un apel la acțiune, cititorii de ecran nu vor înțelege automat rolurile lor. Rolurile și etichetele ARIA vă permit să definiți care este fiecare element și cum ar trebui să -l interpreteze tehnologiile de asistență, fără a schimba designul vizual. Acest lucru vă ajută să vă asigurați că site -ul Divi 5 este accesibil și flexibil.

După ce instalați pluginul, acesta adaugă automat câmpuri de intrare personalizate la secțiunile, rândurile, modulele și alte elemente Divi. (Pentru a accesa câmpurile ARIA, faceți clic pe orice element și accesați fila avansată .)

Acum, puteți defini roluri, adăugați etichete ARIA și îmbunătățiți suportul cititorului de ecran pentru fiecare element direct de la Divi Builder. Atributele de accesibilitate se încadrează fără probleme în fluxul de lucru DIVI și costă doar 19 dolari pe an. Vă oferă un mod simplu, accesibil de a construi site -uri web accesibile.

Obțineți atribute de accesibilitate

De ce accesibilitatea nu mai este opțională

Accesibilitatea obișnuia să fie ceva pe care l -ai putea opri, dar nu mai mult. Acum are impact asupra siguranței legale, a performanței de căutare și a încrederii utilizatorilor.

Dacă site -ul dvs. nu este accesibil, nu sunteți doar în urmă - sunteți în pericol. Iată de ce:

• Acțiunile legale cresc: Începând cu 28 iunie 2025, Legea europeană de accesibilitate va fi aplicată. Dacă site -ul dvs. web nu este accesibil și oamenii din UE îl folosesc, puteți confrunta cu amenzi sau alte penalități. Legea se aplică majorității întreprinderilor cu peste 10 angajați și câștigând peste 2 milioane de euro pe an, dar cei mai mici sunt, de asemenea, încurajați să o urmeze pentru că ...
• Accesibilitatea ar putea afecta clasamentul dvs.: în timp ce accesibilitatea nu este un factor de clasare, multe caracteristici accesibile vă pot afecta indirect SEO. Lucruri precum Alt Text, structuri de rubrică adecvate și etichete descriptive fac ca site -ul dvs. să fie mai ușor atât pentru utilizatori, cât și pentru motoarele de căutare. Așadar, dacă site -ul dvs. este greu de navigat, puteți rămâne liniștit în rezultatele căutării.
• Site -urile inaccesibile îi îndepărtează pe utilizatori: Dacă site -ul dvs. nu este accesibil, persoanele cu dizabilități pot să nu -l folosească. Când pleacă repede, poate semnala o experiență slabă a utilizatorului pentru motoarele de căutare și vă va face rău clasamentului. Modificările precum structura clară, fonturile lizibile și navigarea ușoară a tastaturii fac ca site -ul dvs. să fie utilizabil pentru toată lumea.

Este ușor să presupunem că accesibilitatea contează doar pentru întreprinderile mari, dar ignorarea acesteia vă poate răni, chiar dacă sunteți un brand mai mic.

Configurarea atributelor de accesibilitate în Divi 5

Această secțiune vă parcurge prin instalarea și accesarea instrumentelor în atributele de accesibilitate pe site -urile dvs. Divi 5.

Instalarea pluginului

După ce achiziționați atribute de accesibilitate, veți primi fișierul ZIP al pluginului. Încărcați -l în pluginurile WordPress> Adăugați plugin> Încărcați pluginul.

Acum, adăugați fișierul zip și faceți clic pe Instalare acum.

În cele din urmă, activează -l.

Odată activat, veți observa câmpurile ARIA suplimentare adăugate la fila avansată a fiecărui element.

Acum puteți adăuga cu ușurință aceste atribute de accesibilitate la fiecare element din pagina dvs., direct de la Divi Builder. Vom acoperi asta în doar un minut. Înainte de aceasta, să trecem în revistă rapid toate opțiunile pe care le aveți la dispoziție în tabloul de bord al Atributelor de accesibilitate.

Atribute de accesibilitate Walkthrough

Odată ce pluginul este activ pe site -ul DIVI, fila Accesibilitate va fi adăugată în bara laterală WordPress. Faceți clic pe el pentru a accesa tabloul de bord, care are patru file: admin, module, elemente și produse.

Să trecem în revistă opțiunile fiecărei file:

Fila Admin

Această filă vă oferă controale la nivel de cont, cum ar fi gestionarea abonamentului dvs. (care permite asistența) , verificarea stării pluginului, alegerea dacă ștergeți datele de pe dezinstalare și resetarea tuturor setărilor la implicit.

Fila Module

Vă permite să decideți ce atribute ARIA trebuie să le activați în modulele Divi. Doar opțiunile selectate apar în fila Advanced ca câmpuri. S -ar putea să doriți să le mențineți pe toate pornite.

Nu orice modul are nevoie de atribute de accesibilitate. De exemplu, puteți săriți în siguranță elemente decorative precum divizoare, pictograme animate sau galerii de imagini fără subtitrări sau link -uri, deoarece nu adaugă conținut semnificativ pentru cititorii de ecran.

Pentru a exclude un modul, introduceți modulul modulului (cum ar fi ET_PB_IMAGE) în secțiunea de compatibilitate . Acest lucru spune pluginului să -l sară atunci când adăugați câmpuri Aria și să se concentreze doar pe modulele care au nevoie de asistență de accesibilitate.

Fila Elemente

Unele părți ale site -ului dvs. web nu sunt construite cu module DIVI. S -ar putea să vină din tema dvs., alte pluginuri sau HTML simplu. Fila Elemente vă permite să adăugați atribute ARIA acelor părți ale site -ului dvs. folosind selectori CSS. S -ar putea să doriți să includeți elemente globale precum meniuri, pictograme, butoane și câmpuri de formă care nu sunt create în Divi Builder.

• Aria Main: Spune cititorilor de ecran unde începe conținutul principal, astfel încât să poată sări meniuri sau bare laterale.
• Aria Hidden: ascunde elemente decorative, astfel încât tehnologia asistentă nu le citește cu voce tare.
• Link Aria: marchează elemente de clic care nu sunt link -uri reale ca link -uri. Acest lucru îi ajută pe cititorii de ecran să le identifice corect.
• Butonul Aria: adaugă roluri de buton pentru a comuta pictograme sau link -uri text în stil care acționează ca niște butoane.
• Aria Obligatoriu: marchează câmpurile de formular personalizat, după cum este necesar, chiar dacă HTML nu spune acest lucru.
• Tab Index: face ca elementele importante să fie accesibile folosind tasta Tab, care este utilă pentru navigarea doar cu tastatură.

Fiecare setare vă permite să adăugați sau să eliminați aceste roluri folosind selectori CSS. Dacă nu sunteți sigur de unde să începeți, Aria Main și Aria Button sunt primele alegeri bune, de multe ori sunt ratate și ușor de configurat.

Fila Produse prezintă alte produse de la același creator.

Utilizarea atributelor de accesibilitate în Divi 5

După configurare, adevărata muncă se întâmplă în interiorul constructorului. Fiecare câmp Aria are un scop. Să ne uităm la ce face, când să -l folosim și la modul în care ajută la accesibilitate în machete reale.

1. Alocați roluri elementelor cu rolul de arie

Câmpul Rolul Aria vă permite să atribuiți un scop unui element care poate să nu fie evident în cod. De exemplu, dacă ați utilizat un modul Blurb pentru a crea un apel la acțiune, cititorii de ecran nu îl vor recunoaște automat ca un buton. Trebuie să alocați butonul de rol pentru a face funcția sa clară pentru utilizatorii care navighează cu comenzi vocale sau comenzi rapide de la tastatură.

Ca în acest caz de mai jos, acest blurb include un buton.

Pentru a adăuga rolul Aria, comutați opțiunea și alocați aceste valori:

• Tipul rolului de arie ca roluri de widget (aceasta este categoria în care trăiesc elemente interactive precum butoanele și glisoarele.)
• Valoarea rolului de arie ca buton
• Selector de rol ARIA AS .ET_PB_BUTTON (Aceasta este clasa Divi utilizează pentru modulele de butoane.)

2. Adăugați etichete clare pentru cititorii de ecran cu eticheta Aria

În timp ce rolul Aria spune tehnologiilor de asistență care este un element, eticheta ARIA explică ce face . Acest lucru este util mai ales atunci când un element nu are text vizibil, cum ar fi o pictogramă, un buton în stil personalizat sau orice lucru conceput pentru a arăta interactiv, dar nu spune atât de tare. Să -l descompunem folosind același exemplu.

Am adăugat deja rolul, dar textul butonului spune „donați acum”. Este bine pentru utilizatorii vizuali, dar oamenii care folosesc cititorii de ecran ar putea avea nevoie de mai mult context, chiar mai mult, deoarece butonul apare de mai multe ori.

Pentru a atribui o etichetă acestui buton, pur și simplu comutați pe eticheta ARIA și adăugați o etichetă scurtă.

Acum, butonul va spune în continuare „donați acum” pe ecran, dar cititorii de ecran vor citi eticheta completă pentru a ajuta utilizatorii să înțeleagă exact ce face butonul și unde conduce.

3. Oferiți context suplimentar cu descrierea ARIA

Descrierea ARIA oferă cititorilor de ecran mai multe detalii despre un element decât poate explica o etichetă. În timp ce o etichetă spune ce este ceva, o descriere explică de ce contează.

De exemplu, să spunem că aveți mai multe butoane „donați acum” pe o pagină, fiecare plasată într -o cauză diferită, cum ar fi curățarea costieră, educația marină sau restaurarea habitatului. Un utilizator de cititor de ecran ar putea ateriza direct pe buton și poate lipsi conținutul din apropiere. Aici vă ajută descrierea Aria.

Să luăm prima carte: curățarea costieră. Pentru a adăuga mai mult context, puteți adăuga o descriere precum „Această donație acceptă curățarea oceanului și protecția faunei sălbatice” ca text de descriere ARIA.

Faceți același lucru pentru celelalte butoane, astfel încât, deși toate spun „donați acum” vizual, cititorii de ecran vor anunța descrieri diferite pentru fiecare. Acest lucru oferă utilizatorilor contextul complet fără a schimba ceea ce văd pe ecran.

4. Ascundeți elementele decorative de la cititorii de ecran

Aria Hidden este utilă atunci când doriți să arătați ceva vizual, cum ar fi o pictogramă sau o imagine de fundal, dar nu doriți ca cititorii de ecran să o anunțe. Acest lucru menține experiența mai concentrată pentru utilizatorii care se bazează pe tehnologia de asistență.

De exemplu, luați imaginea de previzualizare a unei campanii, ca o fotografie cu pescărușii. Suportă designul, dar nu adaugă informații noi dincolo de ceea ce este deja la rubrică sau descriere. Aici, puteți folosi Aria ascuns pentru a o ascunde de cititorii de ecran.

5. Link către informații suplimentare cu detalii despre ARIA

Detaliile ARIA vă permit să conectați un element la altul, ceea ce oferă informații suplimentare. De exemplu, s -ar putea să conectați un buton la un paragraf din apropiere care explică despre ce este butonul. Este util când doriți ca tehnologii de asistență să citească mai mult context care nu face parte direct din elementul clic.

Să luăm secțiunea Educație marină. Să presupunem că doriți ca textul paragraf să descrie butonul „Donare acum”. Puteți conecta butonul la paragraf folosind detalii despre ARIA.

Mai întâi, adăugați un ID unic la paragraf. Faceți clic pe modulul de text care conține descrierea și accesați ID -ul și clasele avansate> CSS . Introduceți ID -ul dvs. unic în câmpul ID CSS. Să intrăm în Marine-Edu.

Acum acest modul de text are un ID la care cititorii de ecran îl pot face referire.

În continuare, adăugăm atributul de detalii despre aria butonului. Faceți clic pe modulul butonului și accesați detaliile sale avansate> ARIA. Introduceți Marine-Edu în câmpul ID.

Acest lucru spune tehnologiilor de asistență că butonul este conectat la mai multe informații din paragraf cu ID-ul „Marine-Edu”. De asemenea, este util atunci când utilizați același text cu buton în locuri diferite, dar fiecare înseamnă ceva diferit.

S -ar putea să fi observat că ARIA Etichetă, Descrierea ARIA și ARIA Detalii adaugă un context suplimentar în moduri diferite, așa că cel mai bine este să nu le folosiți împreună în același element, deoarece poate confunda cititorii de ecran. Dacă explicați deja ceva pe pagină, luați în considerare utilizarea detaliilor ARIA pentru a vă conecta la acel text în loc să scrieți o nouă etichetă sau o descriere.

Ați văzut doar cum atributele de accesibilitate facilitează adăugarea de roluri, etichete și alte funcții cheie de accesibilitate, direct de la Divi Builder. Face site -ul dvs. web accesibil fără codificare.

Obțineți atribute de accesibilitate

Instrumente suplimentare de accesibilitate ale modelelor Divi pentru DIVI 5

Atributele de accesibilitate au grijă de partea tehnică a accesibilității. De asemenea, este livrat cu suplimente (în pachetul de accesibilitate) care vă oferă funcții suplimentare, cum ar fi navigarea tastaturii și controalele vizuale pentru a oferi o soluție mai completă și mai incluzivă.

1. Bara laterală de accesibilitate

Bara laterală de accesibilitate adaugă o bară de instrumente plutitoare care permite utilizatorilor să își personalizeze experiența de navigare. Vizitatorii cu deficiențe de mobilitate pot ajusta dimensiunile fontului, pot trece la modul cu contrast ridicat, pot activa GraysCale și pot naviga folosind o tastatură. De asemenea, îl puteți personaliza pentru a se potrivi cu designul site -ului dvs.

2.

Tweaks de accesibilitate adaugă caracteristici practice care ajută utilizatorii să navigheze mai ușor pe site -ul dvs. Acestea includ link -uri de sărituri pentru o mai bună navigare, contururi de focalizare pentru a ajuta utilizatorii tastaturii să vadă unde se află și alte îmbunătățiri subtile care îmbunătățesc capacitatea de utilizare fără a schimba aspectul site -ului.

Consultați pachetul de accesibilitate

Faceți accesibile site -urile dvs. Divi 5 accesibile astăzi

Atributele de accesibilitate vă oferă un mod ușor și vizual de a face site -ul dvs. Divi mai incluziv. Fără codificare, fără soluții de rezolvare - doar instrumentele potrivite încorporate direct în constructor.

Este complet compatibil cu Divi 5, susținut activ, iar acum cu 50% reducere până la 28 iunie. Atâta timp cât oferta rulează, puteți obține pachetul complet de accesibilitate, inclusiv bara laterală și modificări, pentru doar 36 de dolari pe an. Dacă sunteți gata să vă îmbunătățiți site -ul pentru toată lumea, acesta este cel mai simplu mod de a începe.

Obțineți un pachet de accesibilitate 50% reducere