KEREN TERUG
Tegenwoordig is toegankelijkheid (A11y) cruciaal in alle stadia van het bouwen van aangepaste softwareproducten. Beginnend bij het UX/UI-ontwerp, gaat het naar geavanceerde niveaus van het bouwen van functies in code. Het biedt enorm veel voordelen voor ontwikkelaars die werken aan het vergroten van DX, maar nog belangrijker voor eindgebruikers. Een van die geavanceerde onderdelen in HTML zijn semantische tags en dat is wat ik hier wil behandelen.
Front-end ontwikkelaars moeten goed bekend zijn met HTML-tags omdat dit hun natuurlijke omgeving is. Ik durf te wedden dat jullie allemaal een aantal basistags kennen, zoals
Stel, je werkt aan een website of app voor een Duitse klant. Zoals je weet, kunnen Duitse woorden erg lang zijn. Dus je hebt het ontwerp met wat tekst die je moet reproduceren in code en deze inhoud moet op zeer specifieke momenten breken. Hier komt de
GeburtstagskuchenDat is het! Met zo'n eenvoudige tag kun je de tekstinhoud naar wens manipuleren.
Maar hoe zit het met de browserondersteuning? Nou, die is eerlijk gezegd vrij goed. De meeste browsers zullen deze tag begrijpen, maar Opera op Android en Safari op iOS kunnen problemen hebben.
Stel je voor dat je een app voor schijfopslag aan het bouwen bent. Je moet op de een of andere manier in de UI laten zien hoeveel opslagruimte er nog beschikbaar is, en je wilt dit echt zo toegankelijk mogelijk maken. Dit is gewoon een perfecte use-case voor de <meter> tag. Je krijgt alleen de waarde binnen een bepaald bereik. Een ander leuk aspect van deze tag zijn de attributen:
Je kent misschien ook een soortgelijke tag, namelijk vooruitgang. Wat is nu eigenlijk het verschil tussen deze twee? De voortgangstag moet worden gebruikt voor lopende taken. Met andere woorden, gebruik de voortgangstag wanneer je met een specifieke taak bezig bent. De metertag moet worden gebruikt om schijf- of geheugengebruik weer te geven. Een ander verschil is dat de metertag niet wordt ondersteund door IE en dat dit eigenlijk het enige nadeel is van deze tag.
Heb je je ooit afgevraagd hoe je een toegankelijke indicator kunt maken van verwijderde en toegevoegde delen van inhoud (diff in GitHub of e-mailmeldingen van Jira wanneer het ticket is bijgewerkt)? Je hoeft alleen maar de verwijderde inhoud in te pakken met de<del><p>Net verwijderde inhoud</p></del>. Om alleen het toegevoegde deel van de inhoud weer te geven, kun je de tag op precies dezelfde manier. Deze tag heeft ook twee attributen:
Er zijn natuurlijk veel meer nuttige tags in HTML . Ik raad je ten zeerste aan om ze allemaal te gebruiken wanneer dat mogelijk en gepast is. Uw klanten en app-gebruikers zullen u dankbaar zijn voor deze aanpak. Wees echter voorzichtig, want sommige tags kunnen deprecated zijn. Je kunt er altijd voor zorgen dat een minder gebruikelijke tag die je wilt gebruiken nog steeds geldig is en goede ondersteuning heeft in MDN-documentatie.
Dutch 
English 
German 
Swedish 
Danish 
Norwegian 
Finnish 
French 
Polish 
Arabic 
Italian 
Japanese 
Korean 
Spanish