Suzy Naschansky de la Calendarul de Advent HTMHell:
All About Dragons
I like dragons. Blah blah blah blah blah.
Vezi asta aria-labelledby atribut? Conectează două ID-uri din marcaj, unul pentru titlu (#article1-heading) și unul pentru link (#article1-read-more). Ceea ce se întâmplă este că un cititor de ecran va înlocui eticheta semantică existentă între etichetele de link și va folosi conținutul ambelor elemente și le va anunța împreună ca un singur șir de text:
Read more All About DragonsSunt întotdeauna sfioasă când îmi dau seama că e ceva ce cred că ar trebui să știu, dar nu știu. Acesta este cu siguranță unul dintre acele cazuri și sunt recunoscător că Suzy l-a împărtășit.
De fapt, de curând, am fost într-o situație în care am ar fi putut ar fi trebuit să facă asta. Încerc întotdeauna să evit o grămadă de link-uri „Citește mai mult” pe aceeași pagină, dar a veni cu diferite arome ale aceluiași lucru este dificil atunci când lucrezi cu ceva de genul unei bucle de 15 postări (chiar dacă există resurse pentru a ajuta). Și dacă trebuie să păstrăm etichetele scurte din motive estetice — cerințe de design și altele — este și mai dificil. The aria-labelledby atributul îmi oferă exact ceea ce îmi doresc: etichete vizuale consecvente și mai multe anunțuri contextuale pentru tehnologie de asistență.
Și acesta este un lucru doar atunci când textul pe care doriți să îl utilizați pentru eticheta accesibilă există deja pe pagină. Altfel, ai vrea să mergi cu aria-label și cu avertismentul că este exclusiv pentru elementele interactive care nu pot eticheta lucrurile în mod accesibil cu HTML semantic.
Dacă lucrați într-un CMS precum WordPress (care sunt eu), s-ar putea să fie nevoie să faceți puțină muncă suplimentară. La fel ca atunci când plasez un bloc Button pe pagină, acestea sunt opțiunile cu care trebuie să lucrez:
Câteva opțiuni frumoase acolo, dar nimic de-a face cu etichetarea accesibilă. Dacă vă întrebați ce este îngropat în acel panou avansat:
În schimb, va trebui să editați butonul în modul HTML:
Dar înainte de a face asta, trebuie să adăugați un ID la titlul pe care doriți să îl utilizați. Blocul Titlu are aceeași setare avansată a panoului pentru adăugarea unei ancori, care va injecta un ID pe element:
Apoi puteți să editați blocul Button în modul HTML și să adăugați accessible-labels ID, precum și un ID pentru butonul în sine. Acesta este un exemplu de marcaj editat:
Grozav! Dar WordPress pur și simplu nu este cool cu asta:
Puteți încerca să rezolvați problema:
Le suspin. Blocul Button trebuie convertit într-un bloc HTML personalizat. Într-adevăr, învinge întreaga chestie de editare vizuală la care WordPress este atât de bun. Am făcut o căutare foarte rapidă pentru un plugin care ar putea adăuga opțiuni de etichetare ARIA la anumite blocuri, dar a rămas scurt. Pare o oportunitate de a face unul sau trimiteți PR-uri pentru blocurile care ar putea folosi aceste opțiuni.
