Suzy Naschansky från HTMHell adventskalender:
All About Dragons
I like dragons. Blah blah blah blah blah.
Se det aria-labelledby attribut? Den kopplar två ID:n från markeringen, en för rubriken (#article1-heading) och en för länken (#article1-read-more). Vad som händer där är att en skärmläsare kommer att ersätta den befintliga semantiska etiketten mellan länktaggarna och använda innehållet från båda elementen och tillkännage dem tillsammans som en enda textsträng:
Read more All About DragonsJag är alltid fåraktig när jag inser att det finns något jag tycker att jag borde veta men inte gör. Det här är definitivt ett av de fallen och jag är så himla tacksam att Suzy delade det.
Jag var faktiskt i en situation nyligen där jag kunde ha borde ha gjort det här. Jag försöker alltid undvika ett gäng "Läs mer"-länkar på samma sida men att komma på olika smaker av samma sak är svårt när du arbetar med något som en slinga med 15 inlägg (även om det finns resurser för att hjälpa). Och om vi behöver hålla etiketter korta av estetiska skäl - designkrav och vad inte - är det ännu mer utmanande. De aria-labelledby attribut ger mig precis vad jag vill ha: konsekventa visuella etiketter och mer kontextuella meddelanden för hjälpmedel.
Och detta är bara en sak när texten du vill använda för den tillgängliga etiketten redan finns på sidan. Annars skulle du vilja följa med aria-label och med förbehållet att det enbart är för interaktiva element som inte kan märka saker lättillgängligt med semantisk HTML.
Om du arbetar i ett CMS som WordPress (vilket jag är) kan du behöva göra lite extraarbete. Som när jag släpper ett knappblock på sidan, dessa är alternativen jag måste arbeta med:
Några trevliga alternativ där, men inget att göra med tillgänglig märkning. Om du undrar vad som finns begravd i den avancerade panelen:
Istället måste du redigera knappen i HTML-läge:
Men innan du gör det måste du lägga till ett ID till rubriken du vill använda. Rubrikblocket har samma avancerade panelinställning för att lägga till ett ankare, vilket kommer att injicera ett ID på elementet:
Sedan kan du redigera knappblocket i HTML-läge och lägga till accessible-labels ID samt ett ID för själva knappen. Det här är ett exempel på den redigerade uppmärkningen:
Bra! Men WordPress är bara inte cool med det:
Du kan försöka lösa problemet:
Le suck. Knappblocket måste konverteras till ett anpassat HTML-block. Lite besegrar hela den visuella redigeringsgrejen som WordPress är så bra på. Jag gjorde en supersnabb sökning efter ett plugin som kan lägga till ARIA-märkningsalternativ till vissa block, men kom till kort. Verkar vara en mogen möjlighet att göra en eller skicka in PR för de block som kan använda dessa alternativ.
