Programmeren
  // 5 min. read

De toekomst van Semantische HTML

Laten we eens terugblikken op mijn geboortejaar. Het is 1997, en Tim Berners Lee, oprichter van het WWW en directeur van het W3C, zei toen het volgende: "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." Hierbij vertelde hij dat het Web was ontworpen voor iedereen ongeacht de hardware, software, taal, locatie en handicap.

Stel je eens voor, je bent een middagje vrij. Je zit lekker achter de computer. Rechtsboven in beeld kijk je video's van schattige honden, rechtsonder scroll je door leuke memes en aan de linkerkant van je scherm ben je lekker online aan het shoppen. Heb je je tijdens zo'n middag wel eens beseft dat niet iedereen daar toegang tot heeft?

Over welke groep heb ik het dan? Dit zijn de mensen met bijvoorbeeld een functiebeperking die moeite hebben met het navigeren binnen een website. Hieronder vallen (kleuren)blinden en slechtzienden, doven en slechthorenden, dyslecten en ga zo maar door.

Volgens Stichting Accesibility zijn er in Nederland ongeveer 700.000 mensen die kleuren niet goed van elkaar kunnen onderscheiden. Dit is vooral het geval bij de kleuren groen en rood. Van de Nederlandse bevolking heeft verder 20% een motorische beperking, 19% een visuele beperking en 14% een auditieve beperking.

TotaalLichtMatigErnstig
Beperking%Aantal%Aantal%Aantal%Aantal
Motorisch202.749131.83633943472
Visueel192.611141.91122803446
Auditief141.924121.60022321119

Het percentage en het aantal mensen (x1.000) van 12 tot en met 79 jaar in Nederland met een beperking.

kleurenblind

Wat is Semantische HTML?

Ik had ook echt géén idee. Toen ik het aan Jeroen vroeg, zei hij: "ga naar een website, klik op je rechter muisknop en dan op inspecteren. Nu zie je aan de rechterkant van je scherm codes en blokjes. Als je codes zoals <nav> ziet, dan heb je te maken met een website die semantische HTML bevat." Wanneer je een page builder gebruikt, is het belangrijk om te weten dat hier vaak geen semantische HTML uit komt. Je kunt daarom alleen semantische HTML uitvoeren als je de gehele context snapt. Hier is dus een mens voor nodig!

Het gebruik van semantische HTML maakt je website toegankelijker en beter vindbaar in zoekmachines. Webtoegankelijkheid betekent het verwijderen van barrières voor mensen met een beperking. De betekenis van verschillende onderdelen van jouw webpagina is in de HTML-code vastgelegd. Hierdoor is de vormgeving van die onderdelen geen bepalende factor meer: je hoeft de grootte, vorm of kleur niet te zien om te begrijpen waar het over gaat. Hulptechnologie kan dat stukje dan apart voorlezen aan een bezoeker. Zoekmachines kunnen de kop gebruiken om belangrijke trefwoorden voor de pagina te bepalen. Wanneer je de pagina zonder vormgeving (CSS) bekijkt, blijf je de basis structuur zien.

Er zijn verschillende hulptechnologieën waardoor bezoekers van jouw website kunnen ervaren. Technieken zoals screenreaders die de tekst hardop voorlezen. Met Skip-links is je website navigeerbaar zonder muis. Closed Captions is het transcript van een video zodat doven ook kunnen meekrijgen wat er gezegd wordt. Daarnaast heb je nog kleurcontrast-analysatoren en andere plug-ins om het bijvoorbeeld ruis op een pagina te verbergen.

paralympics

In Amerika hebben ze het goed voor elkaar

Het is een tijdje geleden dat we bovenstaande zin hebben gehoord. En nee, ik wil zeker geen Twitter-gevecht beginnen met Trump. Dear Mister President, if you are reading this: it is still America first and The Netherlands second!

Op het gebied van semantische HTML is Amerika ons al een grote stap voor. De Europese digitale toegankelijke richtlijnen zijn in 2016 ingetreden. Deze richtlijnen zijn van toepassing op websites, apps en intranetten en extranetten die live gaan of substantieel aangepast worden na inwerktreding van de nieuwe regels. Nederland heeft een tijdelijk besluit digitale toegangkelijkheid voor overheidinstellingen ingesteld per 1 juli 2018. Volgens de wet en regelgeving moeten in september 2020 alle websites van overheidinstanties voldoen aan de richtlijnen en in juni 2021 moeten de apps er ook aan geloven. De regels gelden echter niet voor publieke omroepen en media-instellingen.

In Amerika heb je de Americans With Disabilities Act (ADA). Deze wetgeving houdt in dat je niet mag discrimineren naar mensen met een beperking. Begin oktober van dit jaar spande een blind persoon een rechtzaak aan tegen pizzagigant Domino's. Zijn reden hiervoor was dat hij de website niet kon gebruiken en dit was tegen de ADA. In 2016 is al eerder een serie van rechtzaken tegen Toys R Us en Footlocker geweest. Deze bedrijven hebben er toen allemaal voor gekozen om een schikking te treffen. In Amerika zijn bedrijven al hard bezig alle websites te ontwerpen zodat iedereen er toegang tot heeft. De ADA wetgeving valt onder mensenrechten. Dit geeft het belang van het onderwerp aan, aan de andere kant van de oceaan.

Breda Actief

Breda Actief

Wij hebben het belang van semantische HTML van dichtbij mogen meemaken tijdens onze samenwerking met Stichting Breda Actief. Stichting Breda Actief heeft als missie om alle inwoners van Breda de mogelijkheid te geven tot sport en beweging.

Voor een maatschappelijk betrokken organisatie zoals stichting Breda Actief is webtoegankelijkheid erg belangrijk om haar doel te bereiken, want als je er voor wilt zorgen dat écht iedereen aan het sporten komt moet je er ook voor zorgen dat dan ook iedereen de website kan bedienen.

Om Breda Actief zo goed mogelijk te helpen bij het neerzetten van een succesvolle website, hebben we besloten het volgende als oplossing te bieden, om bij te dragen aan de online groei en de prachtige gestelde doelen.

  • Het platform met verschillende contentblokken ontwikkelen, die gebruikt worden voor het opbouwen van de pagina's
  • Door de contentblokken kan de content makkelijk beheerd worden, zonder problemen voor de layout
  • De inhoud van de blokken wordt ingeladen in een maatwerk Wordpress thema, zodat alle elementen goed toegankelijk zijn, zelfs voor mensen met een screenreader of gebruikers die geen muis kunnen bedienen
  • Een grote rol voor semantische HTML, iets wat pagebuilders of templates vaak niet kunnen leveren
  • Voor het juridische deel van de website hebben we een multisite opgeze, met als positieve consequentie dat de styling van beide sites zonder dubbel werk aangepast kan worden

Toekomstperspectief

Sinds de Europese richtlijnen van 2016 is de situatie ten opzichte van nu nog niet veranderd. Met de verwachte cijfers van onder andere de vergrijzing zal semantische HTML noodzakelijk zijn om iedereen op een zo goed mogelijke manier te kunnen blijven bedienen. Uit onderzoek van Stichting Accessibility uit 2018 zijn websites zoals Bol.com, Coolblue, Mediamarkt en Marktplaats onderzocht. Hiervan voldoen de websites gemiddeld niet aan ongeveer de helft van de criteria voor digitale toegankelijkheid. Stichting Accessibility meldt dat vooral blinde of slechtziende consumenten om deze reden vastlopen bij het doen van een aankoop. De onderzoekers concluderen dat het geen kwestie is van onwil, maar van een gebrek aan bewustzijn.

Naast de verbreding van het klantenbereik, geeft semantische HTML ook SEO voordelen. Google kan gezien worden als een blind persoon die navigeert over jouw website. Denk hierbij aan het toevoegen van alt-teksten aan afbeeldingen. Bij een toegankelijke structuur zal Google je een hogere SEO score geven, wat aantrekkelijk is voor elk bedrijf.

Check je eigen website

Vraag jij je na dit artikel ook af of jouw website gemaakt is voor iedereen, ongeacht beperking of andere barrières? Je kunt opgelucht adem halen, want dit kun je gewoon thuis vanaf de bank testen. Op Chrome kan je een plugin downloaden, genaamd 'pluginAccessibility Developers Tool'. Daarnaast kan je ook je website online testen via onderstaande websites:

  • De website tenon.io geeft overzichtelijke (betaalde) feedback en helpt ook met oplossingen.
  • acchecker.ca is een gratis website die jouw (potentiele) problemen in kaart brengt.
  • wave.webaim.org geeft gevisualiseerde feedback.
  • powermapper.com test je website niet alleen op toegankelijkheid, maar ook op spelling en broken links.

Dit artikel is met passie geschreven door Bytecode, een jonge en moderne web agency. Wij laten jou graag zien hoe je de kracht van het internet kunt gebruiken om alles uit jezelf te halen. Dit doen we door bijvoorbeeld dit artikel te schrijven, maar ook door deze inzichten in onze werkzaamheden te verwerken.

Wil je meer over ons weten of kunnen we misschien iets voor je betekenen? Neem gerust contact met ons op of kom een keer langs op de koffie!

We staan voor je klaar

Stuur ons een berichtje

Verzenden