Codekraker 25: Ted Roeloffzen
Webapplicaties voor iedereen toegankelijk? Het kan. Check in deze #Codekraker hoe dat werkt!
Een stap zetten in toegankelijkheid én een betere ontwikkelervaring: dat brengt Semantische HTML
Het belang van inclusie in de samenleving groeit, dit zien we terug in meerdere domeinen. Van de politiek tot het bedrijfsleven en in de media. Ook in het ontwikkelproces van software vind ik dat inclusie steeds meer top of mind worden. Dat maakt het noodzakelijk dat webapplicaties volledig toegankelijk zijn, want iedereen moet ze kunnen gebruiken. Mijn tip: maak gebruik van Semantische HTML en zet de eerste stap richting volledige toegankelijkheid van je webapplicatie.
Ik kwam bij dit onderwerp terecht, omdat we bezig waren met het ontwikkelen van een leerlingenportaal. Binnen leerlingpopulaties is er verschil in niveau en heb je onder andere te maken met leerlingen met een leerachterstand of dyslexie. Om het portaal ook voor hen toegankelijk te maken, keken we of een screenreader met het portaal om kon gaan. Een screenreader zorgt ervoor dat tekst kan worden voorgelezen. In mijn onderzoek hiernaar kwam ik al snel uit bij Semantische HTML en merkte dat ik hier zelf ook niet veel van wist. Door het juiste gebruik van de Semantische elementen kan er meer informatie worden gegeven aan screenreaders, waardoor de toegankelijkheid verbetert.
In de praktijk merkte ik dat het juiste gebruik van Semantische HTML niet de standaard is. Vaak wordt er gebruik gemaakt van te generieke HTML-elementen. Of semantische elementen worden niet op de juiste manier ingezet. Bij de introductie van HTML 5 is er een groot aantal elementen geïntroduceerd die functioneel niet anders zijn dan een ander element, maar wel een heel specifieke betekenis hebben. Daardoor voegen ze extra informatie toe. Een valkuil is dat je dan snel te veel semantische elementen gebruikt, waardoor de betekenis van die elementen verdund. Een voorbeeld van een structuur met en zonder Semantische HTML zie je hier:
Het toepassen van Semantische HTML is niet de enige stap richting volledige toegankelijkheid. Er zijn natuurlijk veel meer dingen die je als ontwikkelaar moet doen. Maar dit is een vrij gemakkelijke en efficiënte (eerste) stap. Verder zeg ik er altijd bij dat Semantische HTML ook bijdraagt aan ‘developer happiness’. Door het juiste gebruik van HTML-elementen wordt er namelijk meer context gegeven aan ontwikkelaars. Dit resulteert in meer overzicht en structuur in de code. Het is daarom belangrijk om vanaf het begin rekening te houden met toegankelijkheid en Semantische HTML direct toe te passen bij het bouwen van een webapplicatie. Als je je verder wil verdiepen in HTML-elementen en de betekenis ervan kan dat hier: https://developer.mozilla.org/en-US/docs/Web/HTML/Element.
Benieuwd naar andere codekrakers? Je checkt ze hier.