De website werkcentrumnoordoostbrabant.nl/ is onderzocht tussen 08 en 13 juli 2024. Het onderzoek is uitgevoerd aan de hand van de evaluatiemethode WCAG-EM. Doel van dit rapport is om te bepalen welke verbeteringen nodig zijn om dit digitaal kanaal toegankelijker te krijgen.
Uit het onderzoek naar toegankelijkheid is gebleken dat de website in bepaalde opzichten al goed toegankelijk is. Hierdoor kunnen veel mensen met een functiebeperking een groot deel van de content goed lezen en gebruiken.
Resultaten per principe
Principe
Resultaten per principe
Waarneembaar
11 uit 20
Bedienbaar
10 uit 20
Begrijpelijk
11 uit 13
Robuust
0 uit 2
Totaal
32 uit 55
Toelichting bij dit rapport
Doel van dit rapport
Dit onderzoek geeft een overzicht van de mate waarin de website momenteel voldoet aan de WCAG 2.2, niveau A en AA. WCAG, oftewel Web Content Accessibility Guidelines, zijn internationale richtlijnen voor de toegankelijkheid van webinhoud. Deze richtlijnen zijn opgedeeld in vier principes: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust, elk met specifieke meetbare succescriteria.
Testproces
Dit rapport is samengesteld met behulp van de WCAG-EM methodologie.
Het volgende proces is daarbij gebruikt:
vaststellen wat binnen en buiten scope valt
vaststellen gebruikte technologieën
samenstellen sample (steekproef)
onderzoek van de sample
beschrijven van gevonden issues
Het onderzoek omvat alle 55 eisen uit de Europese toegankelijkheidsnorm EN 301 549 (WCAG 2.2).
Het grootste deel van het onderzoek is een handmatig proces. Voor een deel van de criteria wordt ter ondersteuning gebruik gemaakt van automatische tools, zoals axe-core en Chrome Developer Tools.
Kleine letters
Omdat het onderzoek gebaseerd is op een steekproef, kan het zijn dat bepaalde problemen onopgemerkt blijven en bij een volgend onderzoek anders worden geëvalueerd. De steekproef vertegenwoordigt alle content op het getoetste domein Het onderzoek biedt een momentopname; bij het doorvoeren van verbeteringen kunnen nieuwe toegankelijkheidsproblemen ontstaan.
De beoordeling per criterium is gebaseerd op falsificatie: "voldoet" betekent dat we geen redenen hebben gevonden om het als "voldoet niet" te beoordelen.
Voor elk probleem geven we maximaal drie voorbeelden. Het is mogelijk dat hetzelfde probleem op meerdere plaatsen voorkomt. Gebruik dit rapport als een blueprint om alle delen van de website te controleren.
Scope
Pagina's
Scope:
Alle pagina's op werkcentrumnoordoostbrabant.nl/
Ondersteuning
De onderzochte website zou minimaal moeten kunnen worden gebruikt in de volgende browsers en hulptechnologieën:
Mozilla Firefox, versie 126
Google Chrome, versie 125
Apple Safari, versie 16
NVDA screen reader in combinatie met Firefox
VoiceOver screen reader in combinatie met Safari
gangbare browsers en hulpapparatuur
Gebruikte technologieën
De onderzochte maakt gebruik van de volgende technologieën:
HTML
CSS
JavaScript
WAI-ARIA
SVG
Steekproef
Voor dit onderzoek zijn de volgende pagina's gebruikt als representatieve steekproef van de onderzochte website:
Alle niet-tekstuele content die aan de gebruiker wordt gepresenteerd, heeft een tekstalternatief dat een gelijkwaardig doel dient, behalve in situaties vermeld op https://www.w3.org/Translations/WCAG22-nl/#niet-tekstuele-content.
Wanneer de website voor het eerst wordt bezocht, verschijnt een banner met een cookiemelding. In de linkerbovenhoek van deze cookiebanner staat een logo met de alternatieve tekst “logo". De alt-tekst van het logo tegenover is "logo - opens in a new window”. Deze tekst voldoet niet als alternatieve tekst voor een logo.
Oplossing
Het aria-label overschrijft de inhoud van het element. Verwijder het aria-label of geef het de gewenste alternatieve tekst.
<ahref="#"aria-label="logo - opens in a new window"> <svg> <title>Powered by Cookiebot</title> </svg> </a>
Logo onvoldoende alt-tekst
Onderaan de homepagina staat een knop om de cookie-instellingen te openen. In dat venster staat een logo met de zichtbare tekst "Powered by Cookiebot by Usercentrics". Het tekstalternatief van deze afbeelding is slechts "Cookiebot logo". Een logo is een informatieve afbeelding en moet altijd een tekstalternatief hebben waarin de volledige tekst van het logo is opgenomen. Geef dit logo alternatieve tekst waarin de volledige tekst van het logo voorkomt.
Oplossing
Vervang de waarde van de onderstaande aria-label door zichtbare tekst van het logo.
<ahref="https://www.cookiebot.com/en/what-is-behind-powered-by-cookiebot/"aria-label="Cookiebot logo - opens in a new window"lang="en"target="_blank"rel="noopener nofollow"> <svgviewBox="0 0 161.7 26"><titlelang="en">Cookiebot logo</title> </svg> </a>
Logo onvoldoende alt-tekst
Op de homepagina naast het kopje “Initiatiefnemers”, staan logo’s. Niet alle logo’s hebben de volledige tekst van het logo in het tekstalternatief. Bijvoorbeeld, op een van de logo’s is te zien: "wij leiden vakmensen op SBB erkend leerbedrijf". Het tekstalternatief is slechts "SBB".
Oplossing
<ahref="https://www.s-bb.nl/"> <imgsrc="#"alt="wij leiden vakmensen op SBB erkend leerbedrijf"> </a>
Informatieve afbeelding onvoldoende alt-tekst
Onderaan de homepagina staat een knop om de cookie-instellingen te openen. Deze knop opent een venster waarin een lijst staat met voorkeuren. Er zijn twee icoontjes: een slotje en een vinkje. Ze betekenen verschillende statussen, maar het tekstalternatief is in beide gevallen: “consent given”. Verander dit tekstalternatief zodat het de juiste status weergeeft.
Bij het icoon van het slotje vervang de waarde van het <title> attribuut naar <title>Kan niet worden aangepast</title> of iets dergelijks.
Informatieve afbeelding onvoldoende alt-tekst
In de header staat een menu. Naast elke menulink staat een pijltje dat aangeeft dat hier een dropdownmenu aanwezig is. Dit icoon heeft geen tekstalternatief. Dit kan worden opgelost door het toevoegen van een aria-expanded-attribuut. In het dropdownmenu staat een icoon met een kruis zonder een tekstalternatief.
Op de pagina Over Ons, onder de kopjes "Neem contact op" en "Gratis adviesgesprek", staan iconen van een telefoon en een envelop. Deze informatieve iconen hebben geen tekstalternatief. Dit kan worden opgelost door een span-element toe te voegen dat alleen zichtbaar is voor de schermlezer.
Nog een voorbeeld van de informatieve pictogrammen zonder tekstalternatief is te zien op de pagina Agenda. Elk evenement heeft drie iconen: datum, tijd en locatie. Geef deze iconen een tekstalternatief. Dit komt ook op andere pagina’s voor, zie Zoekresultaten en andere.
Op de homepagina, onder de header en achter de kop "Als je vooruit wilt", staat een decoratieve afbeelding. Deze afbeelding is toegevoegd via een img-element, maar het alt-attribuut ontbreekt. Wanneer een afbeelding wordt toegevoegd via een img-element, moet het alt-attribuut aanwezig zijn; anders leest de schermlezer de bestandsnaam voor. Dit zorgt voor een ontoegankelijke ervaring. Hetzelfde probleem wordt waargenomen op andere pagina’s:
1.2.3 - Audiodescriptie of media-alternatief (vooraf opgenomen)
Er wordt een alternatief geleverd voor op tijd gebaseerde media of audiodescriptie van de vooraf opgenomen videocontent geleverd voor gesynchroniseerde media, behalve als het mediabestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.
In de video op de pagina Zo werk ik verschijnt op verschillende momenten tekst in beeld, bijvoorbeeld rond 0:35 - tekst "Hoe heb jij je werk gevonden?" en aan het einde van de video. Er is echter geen media-alternatief of audiobeschrijving voor deze informatie.
Hetzelfde probleem wordt waargenomen voor de video op de pagina Wat is leerplicht?. Tekst verschijnt in beeld, bijvoorbeeld rond 0:07 - tekst "Hoe zit dat nou?" en aan het einde van de video. Ook voor deze video is geen toegankelijk alternatief geboden. Wanneer in de video tekst, logo’s of andere visuele informatie in beeld komt, kunnen mensen die blind zijn deze informatie niet zien.
Oplossing
Voor niveau A kan een volledig uitgeschreven tekst worden geboden waarin deze informatie wordt opgenomen. Dit is overigens geen oplossing meer voor niveau AA (Zie 1.2.5), want dan moet de oplossing echt in de video zelf geboden worden.
De video’s op de volgende pagina’s bieden geen audiodescriptie voor de belangrijke teksten die in beeld komen aan. Dit succescriterium is gerelateerd aan succescriterium 1.2.3.
In de video op de pagina Zo werk ik verschijnt op verschillende momenten tekst in beeld, bijvoorbeeld rond 0:35 - tekst "Hoe heb jij je werk gevonden?" en aan het einde van de video. Er is echter geen media-alternatief of audiobeschrijving voor deze informatie.
Hetzelfde probleem wordt waargenomen voor de video op de pagina Wat is leerplicht?. Tekst verschijnt in beeld, bijvoorbeeld rond 0:07 "Hoe zit dat nou?" en aan het einde van de video. Ook voor deze video is geen toegankelijk alternatief geboden.
Oplossing
Onder dit succescriterium is audiodescriptie vereist.
Controleer andere pagina's op het voorkomen van dit issue.
Wanneer de website voor het eerst wordt bezocht, verschijnt een banner met een cookiemelding. Onder de tab "Details" staan een aantal interactieve kopteksten, namelijk "Noodzakelijk", "Voorkeuren", "Statistieken" enzovoort. De relatie tussen deze teksten en de uitleg eronder is niet duidelijk in de HTML.
Oplossing
Door deze teksten binnen een heading-element te plaatsen, wordt de tekst van de knop ook als koptekst herkend door hulpsoftware.
Visuele structuur van informatie anders in de HTML
In de cookiebanner bevinden zich tabbladen met de labels 'Toestemming', 'Details' en 'Over'. Binnen het tabblad 'Over' staan zes alinea’s, bijvoorbeeld beginnend met 'Cookies zijn kleine tekstbestanden...'. Momenteel zijn alle paragrafen binnen een div-element geplaatst en gescheiden door het br-element.
Oplossing
Om de inhoud correct te structureren, dient elke alinea omsloten te worden door een p-element.
Kop niet als koptekst opgemaakt
In de cookiebanner op het tabblad 'Details', onder 'Noodzakelijk' en specifiek onder 'Cookiebot', worden tussenkopjes niet als kopteksten opgemaakt. Zo worden bijvoorbeeld '1.gif' en 'CookieConsent' opgemaakt met het strong-element, dat bedoeld is om inhoud te benadrukken, en niet als een alternatief voor koppen.
Oplossing
Gebruik in plaats daarvan kop-elementen (h1 - h6).
Ralatie tussen elementen
In de footer staan links naar sociale netwerken. Visueel is duidelijk dat deze links bij elkaar horen. In de HTML ontbreekt deze relatie. Wanneer een groep van links of een paginering aanwezig is op een pagina en een ziende bezoeker deze cluster als een groep waarneemt, moet deze relatie ook in de HTML duidelijk zijn.
Een mogelijke oplossing is het opnemen van deze elementen in een ul- of ol-element. Andere oplossingen zijn ook mogelijk. Dit komt op meerdere pagina’s voor.
Strong in koppen
In de footer staat een knop om cookie-instellingen te openen. In dat venster staan koppen die niet als koppen zijn opgemaakt. Het strong-element is gebruikt: "Cookie-instellingen", "Uw huidige stand", "Datum van toestemming" en "Uw toestemming ID". Het strong-element is niet bedoeld als alternatief voor koppen. Een kop moet altijd het kop-element hebben, bijvoorbeeld H2. Wanneer deze kop met een kop element wordt opgemaakt, wordt de structurele informatie die de tekst geeft ook overgedragen aan hulpsoftware. Het <strong>-element is slechts bedoeld om nadruk te geven aan enkele woorden of zinsdelen.
Oplossing
Vervang het <strong> element door een headings-element.
Twee kop-elemenent naast elkaar, verkeerde volgorde
Op de homepagina wordt de kop (<h2>) "WAAR KUNNEN WE JE MEE HELPEN?" direct gevolgd door een andere kop (<h4>)"Veelgestelde vragen". Nog een voorbeeld op dezelfde pagina - onder de kop "Veelgestelde vragen" van niveau 4 staat een kop "Wat is Werkcentrum Noordoost-Brabant?" van niveau 2.
Wanneer twee koppen elkaar opvolgen zonder inhoud ertussen, is het belangrijk om de juiste volgorde van de koppen te gebruiken. Als dit verkeerd wordt gedaan, kan een blinde bezoeker de indruk krijgen dat er inhoud ontbreekt.
Oplossing
Om dit probleem op te lossen, past de koptekstniveaus aan.
Op de homepagina staan nieuwsberichten. Elk bericht bestaat uit een lijn tekst, bijvoorbeeld "Werkcentrum wordt Werkcentrum Noordoost-Brabant". Deze tekst is opgemaakt als een koptekst. Dit is geen kop omdat er niets onder staat. Een definitie van een koptekst is tekst die iets vertelt over de inhoud eronder. Een heading moet dus altijd inhoud bevatten (tekst, afbeelding, tabel, lijst, video of andere). Tekst zonder inhoud eronder mag niet worden gemarkeerd als een heading (h1 - h6).
Oplossing
Verwijder het heading-element en gebruik CSS om deze tekst groter te laten lijken.
Kop-element onterecht
Op de homepagina, onder de kop "Als je vooruit wilt" staat ook een zoekveld. Als de bezoeker een zoekwoord intypt, verschijnt de lijst met suggesties. Als er geen suggesties zijn, verschijnt de tekst:
<h6 class="h6 mb-0">Er zijn helaas geen resultaten.</h6>. Deze tekst is opgemaakt als een kop, maar heeft geen inhoud eronder.
Oplossing
Verwijder het <h6>-element en gebruik CSS om deze tekst groter te laten lijken.
Relatie ontbreekt in de HTML
Op de pagina Nieuws staan filters om resultaten te verfijnen. Onder de tekst “Filter” en “Thema's” staan groepen selectievakjes. Deze elementen horen bij elkaar, maar deze relatie ontbreekt in de HTML. Wanneer er een groep selectievakjes of keuzerondjes op de pagina staat, moet deze groep dusdanig te worden gecodeerd dat hun relatie programmatisch te bepalen is.
Ervaringsverhalen
onder de kop "Blijf up-to-date". Het formulier bevat een groep "Ik ben" selectievakjes. Deze selectievakjes zijn niet gegroepeerd in de HTML
Oplossing
Dit kan worden gedaan door de groep in een <fieldset> te plaatsen. Conform het succescriterium 4.1.2 - 'Naam, rol, waarde' moet elke groep een naam hebben, dus moet er een <legend > worden meegegeven om het doel van deze groep duidelijk te maken.
Kop niet opgemaakt als een kop
Op de pagina Over ons, onder de koptekst, fungeert het woord "Delen" als een koptekst voor een groep links. Deze tekst is niet opgemaakt als een kop. Tekst die eruitziet en functioneert als een kop, maar niet als zodanig is opgemaakt, verliest zijn functie voor blinde bezoekers. Koppen kunnen worden gebruikt om de inhoud van de pagina te scannen of om naar een sectie te navigeren. Koppen die niet als zodanig zijn opgemaakt, kunnen niet voor deze doeleinden worden gebruikt. Een ander probleem is de structuur en hiërarchie van de informatie. Wanneer tekst alleen visueel als een kop verschijnt, verschilt de structuur van de informatie in de HTML van de zichtbare structuur.
Op de homepagina is de leesvolgorde van berichten onder de kop “Nieuwsberichten” niet zinvol. De afbeeldingen met tekstalternatieven staan boven de koppen van de artikelen. Wanneer deze artikelen van boven naar beneden worden voorgelezen, is het onduidelijk bij welk artikel de afbeeldingen horen. Als de pagina verschillende artikelen bevat, elk met een afbeelding, wat tekst en een koptekst, is de volgorde van deze elementen in de HTML belangrijk. De inhoud die onder de kop hoort, moet in de HTML onder de kop worden geplaatst. Anders wordt het, wanneer de inhoud van boven naar beneden wordt gelezen, onduidelijk bij welk artikel de afbeelding of tekst boven de kop hoort.
Oplossing
De inhoud die onder de kop hoort, moet in de HTML onder de kop worden geplaatst. Anders wordt het, wanneer de inhoud van boven naar beneden wordt gelezen, onduidelijk bij welk artikel de afbeelding of tekst boven de kop hoort.
Leesvolgorde klopt niet
Op de pagina Adviseurs staan gegevens van adviseurs die bestaan uit een afbeelding die wordt gevolgd door de koptekst in de HTML.
Oplossing
De beste manier om dit op te lossen is om deze alt-attributen leeg te laten. Zo worden ze verborgen voor de schermlezers en klopt de leesvolgorde. Nog een oplossing is het verwijderen van kop-elementen. Als alleen de linkteksten overblijven, is het probleem ook opgelost.
De visuele weergave van tekst en afbeeldingen van tekst heeft een contrastverhouding van ten minste 4,5:1, behalve in specifieke gevallen. Grote tekst en afbeeldingen van grote tekst hebben een contrastverhouding van ten minste 3:1. Tekst of afbeeldingen van tekst die deel zijn van een inactieve component van de gebruikersinterface, die puur decoratief zijn, die voor niemand zichtbaar zijn, of die onderdeel zijn van een afbeelding die significant andere visuele content bevat, hebben geen contrasteis. Tekst die onderdeel is van een logo of merknaam heeft geen contrasteis.
Een aantal teksten heeft een te laag contrast met de achtergrond. Wanneer het contrast te laag is, kan de tekst slecht leesbaar zijn voor de bezoekers met een visuele beperking. Het contrast moet bij de tekst minstens 4,5:1 zijn. Is de tekst groter dan 18 punt (=24 pixels) of 14 punt (=18,66 pixels) in combinatie met dik gedrukt dan dient het contrast ten minste 3,0:1 te zijn.
Onvoldoende tekstcontrast (grote tekst)
In de header staat het hoofdmenu met dropdowns. Met hoogcontrastknop aan, krijgt de kop in het submenu bijvoorbeeld “Werk”, dezelfde witte kleur als de achtergrond, waardoor de contrastverhouding 1,1:1 wordt.
Oplossing
De contrastverhouding dient minimaal 3,0:1 te zijn.
Onvoldoende tekstcontrast (normale tekst)
Op de homepagina staat onder het kopje "Als je vooruit wilt" een knop met de tekst "Zoeken". Een witte (#FFFFFF) tekst op een groene (#008B45) knop resulteert in een kleurcontrastverhouding van 4,4:1. Deze kleurencombinatie komt voor op verschillende pagina's van de website.
Oplossing
De contrastverhouding dient minimaal 4,5:1 te zijn.
Onvoldoende tekstcontrast (normale tekst)
Op de homepagina, onder de kopjes “Werk”, “Opleiding” en andere, staan links. Als een link, bijvoorbeeld “Solliciteren”, toetsenbordfocus krijgt, wordt de linktekst grijs (#9D96BC), zodat de contrastverhouding 2,8:1 wordt.
Oplossing
De contrastverhouding dient minimaal 4,5:1 te zijn.
Onvoldoende tekstcontrast (normale tekst)
Op de homepagina, met de hoogscontrastknop aan, worden links onzichtbaar. In een sectie onder “Veelgestelde vragen” en “Wie werken er (..)” staat een link met een kleurcontrast van 1,1:1.
Oplossing
De contrastverhouding dient minimaal 4,5:1 te zijn.
Onvoldoende tekstcontrast (normale tekst)
Op de pagina Ervaringsverhalen staat een formulier "Blijf up-to-date". De placeholder teksten in de invoervelden onder “Naam” en “E-mailadres” zijn grijs (#A2A6AA) en staan op een witte achtergrond. De contrastverhouding is 2,5:1.
Oplossing
De contrastverhouding dient minimaal 4,5:1 te zijn.
Onvoldoende tekstcontrast (normale tekst)
Op de pagina Ervaringsverhalen staat een formulier "Blijf up-to-date". Na het verzenden van het formulier verschijnt een melding om de bezoeker te bedanken. De tekst is zwart, de achtergrond is paars, en de contrastverhouding is 2,8:1. Zie ook het logo in de footer.
Oplossing
De contrastverhouding dient minimaal 4,5:1 te zijn.
Onvoldoende tekstcontrast (normale tekst)
Met de hoogcontrastknop aan, wanneer dit formulier leeg is verstuurd, verschijnen de foutmeldingen. De tekstkleur is rood (#DC3545) op een paarse achtergrond. Het contrast is 1,6:1. De formulieren staan op meerdere pagina’s.
https://werkcentrumnoordoostbrabant.nl/ervaringsverhalen
Oplossing
De contrastverhouding dient minimaal 4,5:1 te zijn.
Onvoldoende tekstcontrast (normale tekst)
Wanneer de hoogcontrastknop is aangezet, krijgt het kopje Zoekresultaten witte tekst die op een roze (#DAC2DF) achtergrond staat. De contrastverhouding is 1,6:1. Dit moet minstens 3.0:1 zijn voor deze kop.
Oplossing
Het label “Vind hier je antwoord” moet minimaal 4,5:1 contrast hebben.
Onvoldoende tekstcontrast (normale tekst)
Op de pagina met de zoekresultaten, wanneer de hoogcontrastknop is aangezet, krijgen de links in de paginering onvoldoende kleurcontrast wanneer ze focus krijgen. De linktekst wordt wit. In combinatie met een bijna witte achtergrond is het contrast 1,1:1. Dit kan voorkomen op alle pagina’s waar paginering staat.
Oplossing
Dit moet minimaal 4,5:1 zijn.
Onvoldoende tekstcontrast (normale tekst)
Op de pagina Hester Sybrandi staat een groep iconen van socialmedia netwerken naast het woord “Delen”. Wanneer de hoogcontrastknop is aangezet, wordt het kleurcontrast van het woord “Delen” 1,1:1.
Oplossing
Dit moet minimaal 4,5:1 zijn.
Foutmeldingen onvoldoende contrast
Op de pagina Contact staat een formulier. Als het formulier wordt verzonden met ongeldige gegevens, verschijnen foutmeldingen zoals "Dit 'Naam' veld is verplicht". De tekstkleur is rood (#DC3545). In combinatie met de paarse achtergrond is het kleurcontrast 2,5:1.
Behalve voor ondertitels voor doven en slechthorenden en afbeeldingen van tekst, kan tekst zonder hulptechnologie tot 200% geschaald worden zonder verlies van content of functionaliteit.
Wanneer de website wordt bekeken met een schermresolutie van 1280 bij 1024 en wordt ingezoomd tot 200%, verdwijnt het paneel met de toegankelijkheidstools. De knoppen “ReadSpeaker”, "Vergroot/Verklein leestekst" en "Verhoog schermcontrast" zijn niet meer beschikbaar. Deze bevinding wordt niet afgekeurd omdat deze tools niet essentieel zijn, de toegankelijkheid van de website niet verbeteren en in sommige gevallen juist verslechteren.
Oplossing
Het is verstandig om te overwegen of de aanwezigheid van deze tools in andere resoluties en zoomniveaus de gebruikerservaring verbetert. Als de tools echt niet bijdragen aan de toegankelijkheid en zelfs afbreuk doen aan de gebruiksvriendelijkheid, zou het een goede overweging kunnen zijn om ze volledig te verwijderen of te herzien hoe ze worden weergegeven en gebruikt op de website.
Wanneer de website voor het eerst wordt bezocht, verschijnt een cookiebanner. Wanneer wordt ingezoomd naar 400% bij een schermgrootte van 1280px breed, verdwijnt alle inhoud onder de tabbladen "Toestemming", "Details" en "Over". Wanneer 400% wordt ingezoomd, moet de pagina nog steeds functioneel zijn. Bezoekers met een visuele beperking moeten alle functionaliteit van de pagina kunnen gebruiken.
Oplossing
Maak de containers responsive.
Content verdwijnt
Op de pagina Onze Dienstverlenging staat een lang e-mailadres. Wanneer 400% wordt ingezoomd, moet de bezoeker horizontaal scrollen om dit adres te lezen.
Oplossing
Laat de tekst meeschalen of maak het kleiner.
Toegankelijkheidstools verdwijnen
Wanneer de website wordt bekeken met een schermresolutie van 1280 bij 1024 en wordt ingezoomd tot 200%, verdwijnt het paneel met de toegankelijkheidstools. De knoppen “ReadSpeaker”, "Vergroot/Verklein leestekst" en "Verhoog schermcontrast" zijn niet meer beschikbaar. Zie uitleg onder succescriterium 1.4.4.
Er is een contrastswitch aanwezig, waarmee het contrast van de gehele website veranderd kan worden. Als deze functie is geactiveerd, is er op de onderzochte webpagina’s toch nog een probleem met het contrast.
Focus onvoldoende contrast
Op de homepagina staat een knop "Alle veelgestelde vragen". Met de hoogcontrastknop aan, heeft de aangepaste focus onvoldoende kleurcontrast met de kleur van de achtergrond. De kleur van de focus is blauw (#0D6EFD). De achtergrondkleur is paars. Het kleurcontrast is 2,5:1. Als de standaard focusindicator wordt gebruikt is dit automatisch goed voor dit succescriterium (daar zijn geen contrasteisen voor). Mensen die dit dan willen aanpassen kunnen dit dan doen. Als de focusindicator niet standaard is kan dit niet aangepast worden en gelden wel contrasteisen.
Let op: het probleem met een blauwe aangepaste focusindicator wordt op de hele site waargenomen op de interactieve elementen die op de paarse achtergrond staan.
Oplossing
De contrastverhouding moet minstens 3,0:1 zijn.
Focus onvoldoende contrast
De focusrand in het lichte thema heeft onvoldoende contrast. Op de pagina Zoekresultaten staat paginering. Wanneer een link focus krijgt, verandert de achtergrond. De contrastverhouding is slechts 1,1:1 met de niet-gefocusde stijl.
Oplossing
Dit moet minimaal 3,0:1 zijn. Dit kan ook worden opgelost door de standaard focus van de browser te gebruiken.
Focus onvoldoende contrast
Op de pagina Ervaringsverhalen staat een formulier "Blijf up-to-date". Wanneer de hoogcontrastknop is aangezet, wordt de achtergrond van het formulier lichtpaars. De aangepaste focusindicator blauw (#0D6EFD) in combinatie met deze paarse achtergrond heeft een contrastverhouding van 1,6:1.
Oplossing
Dit moet minimaal 3,0:1 zijn.
Iconen onvoldoende contrast
Op de pagina Hester Sybrandi staat een groep iconen van social media netwerken naast het woord “Delen”. De kleuren van de iconen zijn aangepast aan de huisstijl van de website. Met de hoogcontrastknop aan, variëren deze kleuren van zwart tot blauw. Met een paarse achtergrond is het kleurcontrast onvoldoende: van 1,4:1 tot 2,5:1.
Oplossing
Dit moet minimaal 3,0:1 zijn.
Iconen onvoldoende contrast
Wanneer wordt ingezoomd met de hoogcontrastknop aan, verdwijnen de links in de footer achter knoppen met plusiconen. Zie bijvoorbeeld "Een baan vinden". De kleur van het icoon is wit. Met een witte achtergrond is de contrastverhouding minder dan 1,1:1.
Oplossing
Deze verhouding moet ten minste 3,0:1 zijn.
Iconen onvoldoende contrast
Op de pagina Loopbaanadvies staat een formulier waarin de verplichte velden een sterretje hebben. Wanneer de hoogcontrastknop wordt aangezet, verdwijnt het sterretje omdat het wit wordt en op een witte achtergrond komt te staan. De kleurcontrastverhouding is dan 1,1:1.
Alle functionaliteit van de content is bedienbaar via een toetsenbordinterface zonder dat afzonderlijke toetsaanslagen aan tijd gebonden zijn, behalve als de onderliggende functie een invoer vereist die afhangt van het pad dat de gebruiker aflegt en niet alleen van de eindpunten.
In de footer staat een knop om de cookie-instellingen te openen. Na het drukken op de knop "Verander uw toestemming" verschijnt het dialoogvenster van Cookiebot. In dat venster staan drie knoppen om een keuze te bevestigen. Het drukken op een van deze knoppen moet het venster afsluiten zodat de bezoeker verder naar de website kan. Dit is nu niet het geval. Na het drukken op een van deze drie knoppen verdwijnt het venster, maar komt gelijk weer tevoorschijn. Controleer deze widget met de cookies aan en uit.
Oplossing
Zorg ervoor dat deze banner met het toetsenbord kan worden afgesloten.
Knoppen niet met toetsenbord te bedienen
In de footer, wanneer ingezoomd, verdwijnen de kolommen met links achter de zogenaamde accordeons. Zie bijvoorbeeld "Een baan vinden". Deze knoppen zijn niet met het toetsenbord te bedienen.
Oplossing
Zorg ervoor dat alle functionaliteit via het toetsenbord kan worden bediend.
Links niet met toetsenbord te bedienen
In het hoofdmenu hebben sommige links een submenu. Deze functionaliteit is niet met het toetsenbord te bedienen.
Oplossing
Zorg ervoor dat submenu's met het toetsenbord kunnen worden geopend en genavigeerd, en dat de informatie in deze submenu's toegankelijk is voor alle gebruikers. Een toegankelijk alternatief zou kunnen zijn het plaatsen van de menu-items uit het submenu op de pagina waar de link in het hoofdmenu naar verwijst. Momenteel is dat niet het geval: in het submenu staan links die niet op de pagina staan.
Links niet met toetsenbord te bedienen
In het hoofdmenu hebben sommige links een submenu. In het submenu staat een knop met een kruisje om het menu te sluiten. Deze knop kan niet worden bediend met het toetsenbord.
Oplossing
Zorg ervoor dat alle interactieve elementen met toetsenbord te bedienen zijn.
Knop niet met toetsenbord te bedienen
Op de homepagina, naast het kopje “Initiatiefnemers”, staan logo's. Onder de logo's staat een knop "Pauzeer animatie". De knop kan niet worden geactiveerd met het toetsenbord.
Oplossing
Zorg ervoor dat alle interactieve elementen met toetsenbord te bedienen zijn.
Knop niet met toetsenbord te bedienen
Op de pagina Nieuws staat een zijkolom met filters. De knop Wis alle filters wist de geselecteerde filters. Deze knop kan niet worden geactiveerd met het toetsenbord. Hetzelfde probleem wordt waargenomen op alle pagina’s waar filters staan.
Oplossing
Zorg ervoor dat alle interactieve elementen met toetsenbord te bedienen zijn.
Wanneer een sneltoets in content wordt geïmplementeerd door alleen letters (inclusief hoofdletters en kleine letters), leestekens, cijfers of symbolen te gebruiken, geldt ten minste één van de volgende zaken ( uitzetten,opnieuw toe te wijzen of alleen actief bij focus).
Op de volgende pagina’s staan video’s. Binnen deze videospelers is het mogelijk om sneltoetsen van één karakter te gebruiken voor de bediening. Bij de Youtube video’s kan de ’k’ gebruikt worden om de video te starten dan wel te stoppen en de ’m’ om het geluid uit te zetten. Deze sneltoetsen mogen alleen actief zijn als de focus op de betreffende knop staat.
Het probleem is hier dat deze sneltoetsen ook actief zijn als de toetsenbordfocus op een ander element binnen de video staat. Dit kan problemen opleveren voor mensen die met spraakbediening werken en waarbij deze letters kunnen voorkomen in de woorden die uitgesproken worden. Ook kan dit problemen opleveren voor mensen die per ongeluk een toets op het toetsenbord indrukken.
Oplossing
Bij de YouTube videospeler kan dit eventueel opgelost worden door de parameter disablekb=1 toe te voegen aan de URI van de video in de HTML code.
<iframewidth="516"height="291"src="https://www.youtube.com/embed/V0VRnpBcp2Y&disablekb=1"title="video: Zo Werk ik! - Ibrahim bij Jumbo Supermarkten"></iframe>
Op alle pagina’s behalve op de homepagina werkt de skiplink niet. Wanneer de skiplink wordt geactiveerd, wordt de bezoeker doorgestuurd naar de homepagina. Een skiplink is een mechanisme om blokken met herhalende inhoud binnen de pagina te omzeilen. Een skiplink moet de eerste link op de pagina zijn. Hij kan verborgen zijn, maar moet zichtbaar worden zodra hij focus krijgt. Hij mag niet naar een andere pagina verwijzen, wat nu het geval is.
Oplossing
Laat de skiplink naar <header class="hero"> verwijzen.
Als in webpagina's sequentieel genavigeerd kan worden en de navigatiesequenties hebben invloed op de betekenis of het gebruik, dan krijgen focusbare componenten de focus in de juiste volgorde waardoor betekenis en bedienbaarheid behouden blijft.
Als de website voor het eerst bezocht wordt, verschijnt een popup met een cookiemelding. In de cookiebanner zijn er tabbladen "Toestemming", "Details" en "Over". Als een bezoeker de tab "Details" activeert, gaat de focus eerst langs de opties "Over" of "Toestemming" voordat de focus in het tabblad komt dat bij "Details" hoort. Dat is dus niet de bedoeling.
Oplossing
De toetsenbordbediening voor tabs moet bestaan uit een combinatie van gebruik van de TAB-toets en de pijltjestoetsen. Met de TAB-toets moet de toetsenbordfocus op de actieve tab geplaatst worden. Met de pijltjestoetsen moet ik dan kunnen wisselen tussen de tabs. Als ik dan een andere tab activeer, moet ik vervolgens met de TAB-toets naar de inhoud van het bijbehorende tabblad gaan. Dan werkt het logisch en zoals verwacht.
Focus volgorde in het mobiele menu
Wanneer op de pagina wordt ingezoomd, verschijnt de zogenaamde hamburger knop met drie horizontale lijnen. Deze knop opent een mobiel menu. De focus gaat niet meteen naar dit menu, maar loopt eerst door de interactieve elementen die onder dit menu staan. Dit is geen logische focusvolgorde. Dit gebeurt alleen op de pagina’s anders dan de homepage.
Het tweede issue met focus in dit menu is dat de focus het menu kan verlaten. Na het navigeren door het laatste item van het submenu met het toetsenbord, verplaatst de focus zich naar interactieve elementen op de pagina, in plaats van binnen het submenu te blijven totdat de bezoeker het sluit. Dit is geen logische focusvolgorde.
Oplossing
De focus mag niet op onzichtbare elementen landen en mag het menu niet verlaten.
Advies
Het volgende is geen afkeur volgens WCAG, maar kan verbeterd worden om de pagina toegankelijker en gebruiksvriendelijker te maken.
Onderaan de pagina staat paginering. Wanneer op de link wordt gedrukt, scrolt de pagina omhoog terwijl de focus op de paginering blijft. Wanneer de bezoeker vervolgens op de Tab-toets drukt, gaat de focus naar de footer. Dit is verwarrend omdat deze lange pagina twee keer grote scrollbewegingen maakt: eerst helemaal naar boven en dan helemaal naar beneden.
Het linkdoel kan bepaald worden uit enkel de linktekst of uit de linktekst samen met zijn door software bepaalde linkcontext, behalve daar waar het doel van de link een dubbelzinnige betekenis kan hebben voor gebruikers in het algemeen.
Wanneer de website voor het eerst wordt bezocht, verschijnt een banner met een cookiemelding. Onderaan deze cookiebanner staat een link met de zichtbare tekst "Powered by Cookiebot by Usercentrics". Het doel van de link is "logo - opent in een nieuw venster". De bestemming van deze link is niet duidelijk.
Oplossing
Pas het aria-label aan.
Links met dezelfde tekst
Wanneer de website voor het eerst wordt bezocht, verschijnt een banner met een cookiemelding. Onder het tabblad “Details”, onder het kopje “Noodzakelijk” staan links met dezelfde tekst: "Meer informatie over deze aanbieder". Deze links hebben dezelfde toegankelijkheidsnaam, maar leiden naar verschillende pagina's, waardoor het doel van de links onduidelijk is.
Oplossing
Pas de aria-labels aan.
Links in het mobiele menu
Wanneer alle pagina's op een klein scherm worden weergegeven, verschijnt er bovenaan een knop met een hamburgermenu, weergegeven door een icoon met drie horizontale lijnen. In het mobiele menu staan links met een icoon van een pijl. Deze links hebben geen toegankelijkheidsnaam, waardoor het doel van de link onduidelijk is. Een blinde bezoeker weet niet wat de bestemming van deze link is.
Oplossing
Zorg ervoor dat alle links een duidelijk linkdoel hebben. Dit kan door deze links te combineren met de links met tekst.
Links zonder inhoud
Op de pagina Adviseurs staan adviseurs. Elke kaart werkt als een link. De link heeft echter geen toegankelijkheidsnaam.
Als de website voor het eerst bezocht wordt, verschijnt een cookiemelding in een popup. In deze melding staan knoppen, namelijk "Weigeren", "Selectie toestaan" en "Alles toestaan". Visueel is duidelijk wat het doel is van deze knoppen, omdat deze visueel in de context staan van de popup. Voor mensen die blind zijn en hulpsoftware gebruiken en met de Tab-toets van de ene interactieve component naar de volgende springen, zijn deze knopteksten niet heel duidelijk. Hulpsoftware kan er niet automatisch de context bij voorlezen. Het is dus beter om hier voor hulpsoftware het doel van de knoppen duidelijker te maken. Visueel mag dit hetzelfde blijven, maar mag ook aangepast worden. Zolang het voor hulpsoftware maar duidelijker is. In plaats van "Weigeren" kan dan bijvoorbeeld met een aria-label de tekst "Weigeren van alle cookies" gebruikt worden. Belangrijk is in ieder geval dat de zichtbare tekst altijd terugkomt in het aria-label om te blijven voldoen aan succescriterium 2.5.3.
Oplossing
In plaats van "Alles toestaan" zou er beter visueel kunnen staan "Alle cookies toestaan". Als er visueel wel "Alles toestaan" blijft staan, dan moet in het aria-label attribuut iets staan als "Alles toestaan: alle cookies toestaan" (let op dat de zichtbare tekst letterlijk en bij elkaar terug moet komen in het aria-label voor SC 2.5.3).
Functie knop onvoldoende duidelijk
Op alle pagina's staat een paneel met de toegankelijkheidstools. Het bevat een knop "Vergroot/Verklein leestekst". De knop heeft twee modi, maar de toegankelijkheidsnaam wordt niet gewijzigd wanneer de modus wordt veranderd. De naam geeft dus niet de functie weer van wat er gebeurt als de knop wordt geactiveerd.
Oplossing
Dit kan worden opgelost door het aria-label te verwijderen of aan te passen.
Functie knop onvoldoende duidelijk
In de footer op elke pagina staat een knop om Cookie-instellingen te openen. De toegankelijkheidsnaam van deze knop is "Open widget" en beschrijft de functie van de knop niet.
Oplossing
Dit kan worden opgelost door het aria-label te verwijderen of aan te passen.
iframe onvoldoende title
Op de pagina Zo werk ik! staat een video. Het titelattribuut van het iframe is "Zo Werk ik! - Ibrahim bij Jumbo Supermarkten" en het woord "video" ontbreekt. Het title-attribuut beschrijft het type inhoud niet. Een iframe heeft een goede beschrijving nodig, die meestal wordt gegeven in het title-attribuut van het iframe. Deze titel moet het type inhoud in het iframe beschrijven en een unieke beschrijving van de inhoud geven. Deze tekst zal een blinde bezoeker helpen beslissen of de inhoud van het iframe de moeite waard is om te openen.
Hetzelfde probleem wordt waargenomen voor de video op de pagina Wat is leerplicht?
Oplossing
Voeg het wordje 'video' toe.
<iframesrc="video-url"title="Video: Zo Werk ik! - Ibrahim bij Jumbo Supermarkten"></iframe>
In de footer op elke pagina staat een knop om de cookie-instellingen te openen. Wanneer de website wordt bekeken met een schermresolutie van 1280 bij 1024 en wordt ingezoomd tot 250%, wordt de focusstijl verwijderd van de knop vanwege de outline: 0. De focus moet altijd zichtbaar zijn.
Wanneer een component van de gebruikersinterface de toetsenbordfocus krijgt, wordt die component niet volledig bedekt door de content die door de auteur is gecreëerd.
Wanneer de website voor het eerst wordt bezocht, verschijnt een banner met een cookiemelding. Wanneer tot 400% wordt ingezoomd bij een schermresolutie van 1280px, loopt de focus over elementen die verborgen zijn onder de sticky header en footer en is niet meer zichtbaar.
Oplossing
Zorg ervoor dat de cookiebanner meeschaalt bij vergroting zodat de focus zichtbaar wordt.
Bij componenten van de gebruikersinterface met labels die tekst of afbeeldingen van tekst bevatten, bevat de naam de tekst die visueel wordt weergegeven.
Wanneer de website voor het eerst wordt bezocht, verschijnt een banner met een cookiemelding. Onderaan deze cookiebanner staat een link met de zichtbare tekst "Powered by Cookiebot by Usercentrics". De toegankelijkheidsnaam van de link is "logo - opent in een nieuw venster". De zichtbare tekst op een interactief element mag niet te veel afwijken van de toegankelijkheidsnaam. Dit kan problemen veroorzaken voor bezoekers die spraakbesturing gebruiken, omdat de commando's die ze uitspreken deze elementen niet zullen activeren.
In de footer staat een knop om de cookie-instellingen te openen. In het venster staat een link met de zichtbare tekst "Powered by Cookiebot by Usercentrics" maar met de toegankelijkheidsnaam "Cookiebot logo - opent in een nieuw venster". Deze link is niet met stem te bedienen.
Oplossing
Om ervoor te zorgen dat stemactivering mogelijk is, moet de zichtbare tekst deel uitmaken van de toegankelijkheidsnaam, bij voorkeur vooraan geplaatst. Pas het aria-label aan.
Zichtbare tekst niet in de naam
Op de homepagina staan naast het kopje “Initiatiefnemers” logo’s. De afbeeldingen fungeren als links. De volledige tekst van het logo van SBB is "wij leiden vakmensen op SBB erkend leerbedrijf". De toegankelijkheidsnaam van de link is "SBB". Omdat deze teksten te veel verschillen, is deze link niet met stem te bedienen. Plaats alle zichtbare tekst in de toegankelijkheidsnaam van de link. Dit kan worden opgelost door het alt-attribuut van de afbeelding te gebruiken. Hiermee wordt de bevinding onder sc 1.1.1 opgelost.
Als een invoerfout automatisch ontdekt wordt, dan wordt het onderdeel waar de fout zit geïdentificeerd en wordt de fout tekstueel aan de gebruiker meegedeeld.
Op de pagina “Contact” staat een formulier. Als hier fouten worden gemaakt verschijnen foutmeldingen. Bijvoorbeeld "Dit veld is verplicht" als een verplicht veld niet is ingevuld. Dit is een instructie en geen foutmelding.
Oplossing
Verander de formulering om de bezoeker uit te leggen wat mis is met zijn invoer (“Dit veld is niet ingevuld”). Dit komt op alle pagina’s met formulieren voor.
Op de pagina Ervaringsverhalen staat een formulier "Blijf up-to-date". De velden "Naam" en "E-mailadres" hebben geen zichtbare labels. Een invoerveld moet altijd een permanent zichtbaar label hebben, als tekst of als afbeelding. Een placeholder kan niet als label dienen, omdat deze verdwijnt als de bezoeker begint te typen. Een invoerveld zonder zichtbaar label kan veel groepen bezoekers in verwarring brengen, omdat ze niet weten welke invoer wordt verwacht.
Oplossing
Voeg permanent zichtbare labels toe.
Controleer andere pagina's op het voorkomen van dit issue.
Voor alle componenten van de gebruikersinterface (inclusief, maar niet uitsluitend voor formulierelementen, links en door scripts gegenereerde componenten), kunnen de naam (name) en rol (role) door software bepaald worden; toestanden (states), eigenschappen (properties) en waarden (values) die door de gebruiker ingesteld kunnen worden, kunnen door software ingesteld worden; en kennisgeving van veranderingen in deze items is beschikbaar voor user agents, met inbegrip van hulptechnologieën.
In de header staat een menu. In het dropdownmenu staat een icoon met een kruis om het menu af te sluiten. Deze knop heeft geen toegankelijkheidsnaam en geen rol.
Wanneer alle pagina's op een klein scherm worden weergegeven, verschijnt er bovenaan een knop met een hamburgermenu, weergegeven door een icoon met drie horizontale lijnen. In het mobiele menu staan links met een icoon van een pijl. Deze links hebben geen toegankelijkheidsnaam, waardoor het doel van de link onduidelijk is. Een blinde bezoeker weet niet wat de bestemming van deze link is.
Oplossing
Zorg ervoor dat alle links een duidelijk linkdoel hebben. Dit kan door deze links te combineren met de links met tekst.
Knop geen status
De hamburgerknop opent en sluit het mobiele menu. De status van het mobiele menu is niet programmatisch te bepalen. Dit kan worden opgelost door het toevoegen van aria-expanded attribuut aan de knop.
De toegankelijkheidsknoppen in de header hebben geen statusaanduiding. Het is niet programmatisch te bepalen of ze aan of uit staan. Dit komt op alle pagina’s voor.
Oplossing
Dit kan worden opgelost door het aria-label te verwijderen en een verborgen tekst aan de knop toe te voegen.
<buttonid="increased-text"title="Switch naar grotere tekstgrootte"class="btn toolbar--button"aria-label="Vergroot/Verklein leestekst"> <spancalss="sr-only"> ingeschakeld</span> </button>
Status panelen
In de footer, wanneer ingezoomd, verdwijnen de kolommen met links achter de zogenaamde accordeons. Zie bijvoorbeeld "Een baan vinden". De status van deze panelen wordt niet overgebracht aan de schermlezer. Dit komt ook in andere secties op de homepagina en op andere pagina’s voor. Zie bijvoorbeeld onder “Werk”, “Opleiding” en meer.
Oplossing
Dit kan worden opgelost door het attribuut aria-expanded toe te voegen.
Knop geen naam, geen rol
Op de homepagina, naast het kopje “Initiatiefnemers” staat een carrousel met logo’s. Onder de logo's staat een knop "Pauzeer animatie". Deze knop heeft geen toegankelijkheidsnaam en de rol. De toegankelijkheidsnaam van een interactief element dient de functie van dit element te beschrijven en veranderen als de functie verandert. Wanneer deze naam ontbreekt, weet een blinde bezoeker niet wat dit element doet.
Oplossing
Gebruik <button>Pauseer animatie</button> element.
Knop geen naam
Op de pagina "Zoekresultaat" staat een zoekveld. Wanneer ingezoomd, verdwijnt het woord “Zoeken” en wordt de toegankelijkheidsnaam van de knop leeg.
https://werkcentrumnoordoostbrabant.nl/zoeken?search=werk
Oplossing
Dit kan worden opgelost door een aria-label toe te voegen aria-label=”Zoeken”.
Knop geen naam, geen rol
Wanneer wordt ingezoomd, verdwijnen de links in de footer achter knoppen met plusiconen. Zie bijvoorbeeld "Een baan vinden". Deze koppen (h5) dienen als knoppen om de verborgen inhoud te openen en te sluiten. De juiste rol ontbreekt om de schermlezer te laten weten dat dit interactieve elementen zijn. De status van deze sectie (open of dicht) is niet correct aangegeven. Het aria-expanded attribuut dient op het interactief element geplaatst te worden. Dit komt ook in andere secties van de homepagina voor. Zie “Werk”, “Opleiding” en andere onder de kop "Als je vooruit wilt".
Oplossing
<divid="accordionGroup"class="accordion"> <h3> <buttontype="button"aria-expanded="true"class="accordion-trigger"aria-controls="sect1"id="accordion1id"> <spanclass="accordion-title"> Personal Information <spanclass="accordion-icon"></span> </span> </button> </h3> <divid="sect1"role="region"aria-labelledby="accordion1id"class="accordion-panel"></div></div>
Link geen naam
Op de pagina Adviseurs staan adviseurs. Elke kaart werkt als een link. De link heeft echter geen toegankelijkheidsnaam.
Oplossing
Dit kan worden opgelost door een link om het gehele blok te plaatsen.
Advies
Op de website worden veel aria-labels gebruikt om secties van de pagina namen te geven. Bijvoorbeeld, het hoofdmenu heeft een aria-label met “Navbar - Mobile”. Ook wordt vaak een heading-element gebruikt om een navigatie een naam te geven. Deze teksten worden voorgelezen aan een blinde bezoeker, maar voegen geen waarde toe. Deze teksten zijn betekenisvol voor de ontwikkelaar, niet voor de gebruiker van een schermlezer. Dit kan veel simpeler en gebruiksvriendelijker worden gemaakt door al deze aria-labels, aria-labelledby en verborgen koppen te verwijderen.
In content die is geïmplementeerd met opmaaktalen kunnen statusberichten door software bepaald worden met behulp van rol (role) of eigenschappen (properties), zodat hulptechnologieën de berichten aan de gebruiker kunnen presenteren zonder dat ze de focus krijgen.
Op de homepagina staat onder het kopje "Als je vooruit wilt" een zoekveld. Als de bezoeker een zoekwoord intypt, verschijnt er een lijst met suggesties. Dit is een statusbericht, maar het wordt niet voorgelezen. Een attribuut `role="status"`` moet worden toegevoegd aan deze inhoud om het automatisch voor te lezen wanneer de lijst met suggesties verschijnt.
