Snabbtips Använd egenskapen lång för bättre tillgänglighet

De lang Attribut är en av de globala HTML-attribut som utvecklare kan tillämpa på något HTML-element, och det kan verkligen hjälpa till med tillgänglighet. Det låter dig ange språket för ett element och alla dess barnelement med ett språk "subtag": en 2 eller 3 teckenkod definierad av en internationell standardkropp.

A11y från början

Det här snabba tipset är en del av Web Accessibility: den fullständiga lärarhandboken, där vi har samlat in en rad tutorials, artiklar, kurser och e-böcker för att hjälpa dig att förstå webbåtkomst från början.

Grundläggande användning

lang finns oftast på html element där förklaringen kan sprida sig till allt innehåll på sidan. Till exempel en deklaration av  berättar för webbläsaren att allt innehåll på sidan är engelska. 

lang subtags kan också ha en skript eller region designator, som låter dig ange antingen språkets skrivsystem eller geografiska region. Till exempel en deklaration av  specificerar United Kingdom English (färg vs. färg, center vs. center etc.).

Du kan åsidosätta en befintlig lang deklaration med en mer specifik lang deklaration för att programmässigt identifiera innehåll som använder ett språk som skiljer sig från resten av sidan. En sektion som skrivs på spanska på en engelsk sida skulle se något ut så här:

 ...      

Så varför skulle vi vilja göra det här? Ett par anledningar: 

1. Översättning och driftskompatibilitet

Att identifiera innehållets språk gör att översättningstjänster som Google Chrome kan fungera mer exakt. Eftersom du pratar med en maskin som använder kod kan du direkt berätta för de främmande språkidentifierande algoritmerna att den ska utlösa en översättningsprompt. 

Google Chrome uppmanar användaren att översätta en sida.

Förekomsten av en giltig lang Attributsdeklaration hjälper även andra automatiserade tjänster som intagar och rekontextualiserar webbinnehåll. Dessutom kan det fungera som en styling krok för saker som CSS ' citat fast egendom.

2. Skärmläsare

Vissa program som läser skärminnehållet högt kan också tolka lang attribut, vilket påverkar hur det uttalar sidans innehåll. Denna programvara är inte bara begränsad till hjälpteknik heller. Röstassistenter som Alexa, specialiserade webbläsarläsningslägen, navigationsappar som Google Maps, offentliga adresssystem etc. kan alla ha denna funktion.

Åtminstone korrekt användning av lang attribut kan lägga till det extra du ne sais quoi till erfarenheten, säger programvaran att läsa innehållet högt hur en person skulle.

I bästa fall hjälper det att förstå ditt innehåll. Röstbaserade gränssnitt saknar mycket av de erbjudanden som vi tar för givet med ett visuellt användargränssnitt, så det är viktigt att de representerar innehållet så exakt som möjligt.

Här är ett exempel på hur den populära skärmläsaren JAWS behandlar innehåll som har en lang Attributet tillämpas korrekt på det. Det kommer två exempel att läsas högt: en utan och en med lang attribut korrekt tillämpad på den franska delen av frasen "På franska kan frasen" Kan jag använda ditt badrum? "är"Puis-je utiliser votre salle de bain?'”

Slutsats

Semantiskt beskriver ditt innehåll en av de små sakerna du kan göra som utvecklare för att höja upplevelsen av de människor och tjänster som använder dina webbplatser och webbapps.