Rapport:
Audit digitale toegankelijkheid Arbeidsvoorwaarden TNO

Uitkomst: Onvoldoende

Bevindingen: Op elk scherm binnen de steekproef staat het logo van TNO. Op het startscherm is dit logo opgemaakt met drie aparte SVG-elementen, op andere schermen binnen de steekproef is het logo opgemaakt met een img-element. Een logo is altijd informatief en dient een tekstueel alternatief te hebben. Momenteel ontbreekt deze op elk scherm binnen de steekproef. Een mogelijke oplossing is een beschrijvend tekstueel alternatief toe te voegen waarin alle zichtbare tekst is opgenomen, zoals "TNO innovation for life". Dit kan middels het title-element op één van de SVG-elementen op het startscherm, en het alt-attribuut op de schermen waar een img-element wordt gebruikt. Ook is het advies op het startscherm een enkel SVG-element (of img-element) te gebruiken in plaats van de huidige drie, of de twee SVG-elementen waaraan geen tekstueel alternatief wordt toegevoegd te verbergen voor hulpsoftware middels aria-hidden="true". Dit laatste is niet verplicht, maar wordt wel aangeraden.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Het proces" staan 6 stappen. Ook staat er onder elke stap een vierkantje met, wanneer de stap voltooid is, een oranje vinkje. Er is een tekstueel alternatief aanwezig voor het vinkje, middels een aria-label met de tekst "Vinkje met effen opvulling" op het overkoepelende div-element (met role="group"). Dit is geen beschrijvend tekstueel alternatief en de status van afgerond wordt ook niet overgebracht. Een mogelijke oplossing is een visueel verborgen tekst toe te voegen aan de voltooide stappen, zodat dit bijvoorbeeld "1. Voltooid: Sollicitatie" wordt (en het huidige tekstuele alternatief te verwijderen). Voor 'lege' vierkantjes, de 'onvoltooide' stappen, kan dan de visueel verborgen tekst "Niet voltooid:" worden toegevoegd zodat dit bijvoorbeeld "3. Niet voltooid: Arbeidsvoorwaardengesprek" wordt. Op deze manier is ook duidelijk bij welke stap het tekstuele alternatief hoort, wat momenteel niet het geval is. Deze situatie komt ook voor op het scherm met de tekst "Vervolgstappen".

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "TNO Units & Service-organisatie" staan drie SVG-elementen met ellipsen waar visueel mee wordt aangegeven dat dit de derde slide uit de reeks van 3 is. Momenteel ontbreekt er een tekstueel alternatief voor deze visuele informatie. Deze ellipsen worden op diverse schermen binnen de steekproef gebruikt, zoals op het scherm met de tekst "Medische wearables voor betaalbare zorg", het scherm met de tekst "High Tech Industry - Houd jij van een uitdaging? Dan zoeken wij jou!" en het scherm met de tekst "Energie en Materialen Transitie - Houd jij van een uitdaging?". Controleer de hele steekproef op bovenstaande bevinding.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Overzicht belangrijkste arbeidsvoorwaarden", staat onderaan de slide een icoon van een huisje. Deze fungeert als link, maar heeft momenteel geen tekstueel alternatief. Deze situatie komt op veel schermen binnen de steekproef voor, zoals op het scherm met de tekst "Mijn Beloning & Empower", het scherm met de tekst "Mijn Verzekeringen en kortingen" en het scherm met de tekst "Mijn Salarisschaal". Controleer de hele steekproef op bovenstaande. Deze situatie vormt ook een probleem onder succescriteria 2.4.4 en 4.1.2.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Medische wearables voor betaalbare zorg", staat een achtergrondafbeelding. Deze afbeelding heeft het tekstuele alternatief "Afbeelding met kaars, zilver, lichtAutomatisch gegenereerde beschrijving". Dit is geen beschrijvend tekstueel alternatief. Ook staat er op dit scherm een afbeelding van een vrouw. Hier is het tekstuele alternatief "quote Nina 350x350 (1)". Ook dit is geen toereikend tekstueel alternatief. Deze afbeeldingen kunnen worden beschouwd als decoratief, dus het advies is deze tekstuele alternatieven te verwijderen (evenals 'role="group"' bij de container om de afbeelding) en deze afbeeldingen als decoratief te markeren middels een leeg alt-attribuut (alt="").

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "High Tech Industry - Houd jij van een uitdaging? Dan zoeken wij jou!", staat een afbeelding met het tekstuele alternatief "Afbeelding met schermopname, tekst, tekenfilmAutomatisch gegenereerde beschrijving". Dit is geen beschrijvend tekstueel alternatief. Een mogelijke oplossing is de visueel zichtbare tekst toe te voegen als tekstueel alternatief (en de juiste taalaanduiding toe te voegen zodat hulpsoftware deze Engelse tekst juist uitspreekt).

Op pagina https://arbeidsvoorwaarden.tno.nl/ tussen verschillende schermen, zoals tussen het scherm met de tekst "Index" en het scherm met de tekst "TNO Arbeidsvoorwaarden" in, staat een afbeelding van een ladend voortgangsbalkje en de tekst "Loading". Er is geen toereikend tekstueel alternatief aanwezig voor deze visuele informatie. Een mogelijke oplossing is een tekstueel alternatief toe te voegen zoals "Aan het laden...". Deze situatie vormt ook een probleem onder succescriterium 4.1.3.

Het volgende wordt niet afgekeurd, maar kan wel worden verbeterd:
Op elk scherm binnen de steekproef worden SVG-elementen gebruikt. Decoratieve SVG-elementen zijn niet verborgen voor hulpsoftware. Dit wordt niet afgekeurd, maar kan wel worden verbeterd. Het advies is decoratieve SVG-elementen te verbergen voor hulpsoftware middels aria-hidden="true".

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op bijna elk scherm binnen de steekproef staat een visuele koptekst welke in de code niet als dusdanig is opgemaakt. Een voorbeeld hiervan is pagina https://arbeidsvoorwaarden.tno.nl/, het startscherm, met de tekst "TNO Innovatie voor het leven". Deze tekst ziet er visueel uit als koptekst, maar is opgemaakt met div-elementen. Dit brengt niet de juiste semantische betekenis over aan gebruikers van hulpsoftware. Een mogelijke oplossing is een h1-element te gebruiken voor deze tekst. Deze situatie komt op bijna alle schermen binnen de steekproef voor, zoals op het scherm met de tekst "Welkom bij TNO!", het scherm met de tekst "Het proces", het scherm met de tekst "Index", het scherm met de tekst "TNO Arbeidsvoorwaarden" en het scherm met de tekst "Mijn Beloning & Empower". Controleer de hele steekproef op bovenstaande bevinding.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Het proces" staan 6 stappen. Deze ziet er visueel uit als een geordende lijst, maar is in de code niet als dusdanig opgemaakt. Een mogelijke oplossing is gebruik te maken van een ol-element en li-elementen. Deze situatie komt ook voor op het scherm met de tekst "Vervolgstappen".

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Overzicht belangrijkste arbeidsvoorwaarden" staat een visuele ongeordende lijst. Deze is in de code niet als dusdanig opgemaakt. Momenteel zijn er div-elementen gebruikt. Dit brengt niet de juiste semantische betekenis over aan gebruikers van hulpsoftware. Een mogelijke oplossing is gebruik te maken van een ul-element en li-elementen. Deze situatie komt op diverse schermen binnen de steekproef voor, zoals op het scherm met de tekst "Mijn Verzekeringen en kortingen", het scherm met de tekst "Mijn Salarisschaal" en het scherm met de tekst "Acties voor het arbeidsvoorwaardengesprek" (hier is ook een geneste geordende visuele lijst aanwezig binnen de ongeordende lijst). Controleer de hele steekproef op bovenstaande bevinding.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Mijn Beloning & Empower", staat een visuele tabel. Deze is in de code niet als dusdanig opgemaakt. Momenteel wordt er gebruik gemaakt van div-elementen. Dit brengt niet de juiste semantische betekenis over aan gebruikers van hulpsoftware. Een mogelijke oplossing is gebruik te maken van een table-element. Deze situatie komt op meerdere schermen binnen de steekproef voor, zoals op het scherm met de tekst "Mijn Salarisschaal".

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Mijn Flexibele arbeidsvoorwaarden", staan de teksten "Wat jij wilt" en "Hoe werkt het?". Deze teksten zien er visueel uit als kopteksten, maar zijn in de code niet als dusdanig opgemaakt. Een mogelijke oplossing is gebruik te maken van h2-elementen voor deze teksten. Deze situatie komt op meerdere schermen binnen de steekproef voor, zoals op het scherm met de tekst "Mijn Salarisschaal" bij de teksten "Salarisschalen in € bruto per maand" en "Schaal 10" en op het scherm met de tekst "Acties voor het arbeidsvoorwaardengesprek" bij de tekst "Arbeidsvoorwaardengesprek". Controleer de hele steekproef op bovenstaande bevinding.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Over TNO" staat de tekst "Over TNO". Deze ziet er visueel uit als koptekst, maar is in de code niet als dusdanig opgemaakt. Een mogelijke oplossing is een h1-element te gebruiken voor deze tekst.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Over TNO" staat een visuele ongeordende lijst met onderwerpen. Deze is in de code niet als dusdanig opgemaakt. Een mogelijke oplossing is gebruik te maken van een ul-element en li-elementen.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Vestigingen in Nederland", staat een kaart met daarop de TNO vestigingen in Nederland. Momenteel is de kaart opgebouwd met losse div-elementen. Voor bezoekers die de kaart niet (goed) kunnen zien, is een herkenbare, gestructureerde lijst nodig in plaats van de huidige losse div-elementen. Een mogelijke oplossing is hier een ul-element en li-elementen voor te gebruiken.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "TNO Units & Service-organisatie" staat de tekst "Service-organisatie TNO" met hieromheen diverse afbeeldingen met teksten zoals "Mobiliteit & Gebouwde Omgeving". Momenteel is de visuele relatie niet programmatisch vastgelegd, waardoor het voor bezoekers die het scherm niet (goed) kunnen zien niet duidelijk is dat deze afbeeldingen en hun tekstuele alternatieven bij/onder deze tekst hoort. Een mogelijke oplossing is de tekst "Service-organisatie TNO" op te maken met een h2-element, met hieronder alle afbeeldingen.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Verbind jouw talenten aan TNO", wordt de volgorde en samenhang van informatie visueel overgebracht (met lijnen/posities), maar die structuur is niet semantisch vastgelegd in de code. Hierdoor is deze informatie niet op een gelijkwaardige manier beschikbaar voor bezoekers die het scherm niet (goed) kunnen zien. Ook staan er meerdere visuele kopteksten en lijsten, maar zijn deze in de code niet als dusdanig opgemaakt. Een mogelijke oplossing is de stappen op te maken als kopteksten ("Talent development programma" met een h2-element en "Trainingen voor starters" en "Werkomgeving = leeromgeving" met h3-elementen) en de visueel ongeordende lijsten in de code ook als dusdanig op te maken onder de betreffende kopteksten.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Voorbeeld loopbaanpaden TNO", wordt informatie op een visuele manier overgebracht. Momenteel is deze visuele informatie en zijn deze onderlinge relaties niet in de code vastgelegd, waardoor bezoekers die het scherm niet (goed) kunnen zien informatie missen. Een mogelijke oplossing is deze informatie in een tabel te plaatsen, of een complexe afbeelding aan te bieden (met duidelijk uitgeschreven tekst). Andere oplossingen zijn ook mogelijk.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "MBE belofte, proposities en toekomstambities" wordt informatie op een visuele manier overgebracht. Momenteel zijn de onderlinge relaties en de visuele structuur niet vastgelegd in de code, waardoor bezoekers die het scherm niet (goed) kunnen zien informatie missen. Een mogelijke oplossing is deze visuele informatie semantisch in de code vast te leggen middels kopteksten en ongeordende lijsten. Andere oplossingen zijn ook mogelijk.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Medische wearables voor betaalbare zorg", staan twee visuele kopteksten; "Medische wearables voor betaalbare zorg" en "Dit is onze tijd". Deze zien er beide uit als koptekst, maar zijn in de code niet als dusdanig opgemaakt. Momenteel wordt per letter een div-element gebruikt bij de tekst "Medische wearables voor betaalbare zorg". Een mogelijke oplossing is deze tekst in één h1-element te plaatsen, en de tekst "Dit is onze tijd" in een h2-element te plaatsen.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Energie en Materialen Transitie | Houd jij van een uitdaging?" staat een visuele ongeordende lijst met links. Deze visuele lijst is in de code niet als dusdanig opgemaakt. Een mogelijke oplossing is een ul-element en li-elementen te gebruiken voor deze lijst.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Acties voor het arbeidsvoorwaardengesprek", staan de teksten "Stap 3", "Stap 4", "Stap 5" en "Stap 6". De actieve stap wordt visueel aangegeven door een donkerpaarse achtergrond. Deze informatie is niet programmatisch te bepalen en is daardoor niet beschikbaar voor bezoekers die de pagina niet (goed) kunnen zien. Een mogelijke oplossing is gebruik te maken van aria-current="step" voor de huidige stap.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Welkom bij TNO!", staat bovenaan het scherm de teksten "Intro" en "Welkom bij TNO!". De visuele leesvolgorde komt niet overeen met de leesvolgorde in de code; de teksten "Intro" en "Welkom bij TNO!" staan in de code onder de tekst "TNO is het instituut ... jouw persoonlijke ambities.". Dit is geen logische leesvolgorde. De tekst "Intro" en "Welkom bij TNO!" dienen in de code bovenaan bovengenoemde alinea te staan zodat het overeenkomt met de visuele leesvolgorde. Deze situatie komt op meerdere schermen binnen de steekproef voor, zoals bij het scherm met de tekst "Het proces". Hier staat de koptekst helemaal onderaan de hoofdinhoud.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "TNO Units & Service-organisatie", staat de tekst "Over TNO | Feiten". Visueel staat deze helemaal bovenaan het scherm. In de code staat deze tekst echter onder de visuele koptekst "TNO Units & Service-organisatie". Dit is geen logische leesvolgorde, omdat deze tekst is bedoeld als locatie-aanduiding en vóór de kop hoort te komen. Een mogelijke oplossing is deze tekst bovenaan te plaatsen in de code en het overeen te laten komen met de visuele leesvolgorde. Deze situatie komt op bijna alle schermen binnen de steekproef voor, zoals op het scherm met de tekst "Een relatie gebaseerd op wederzijds waarde toevoegen", het scherm met de tekst "Verbind jouw talenten aan TNO" en het scherm met de tekst "Voorbeeld loopbaanpaden TNO". Controleer de hele steekproef op bovenstaande bevinding.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Het proces", staan 6 stappen. Deze stappen zijn opgemaakt uit een cijfer, een beschrijving en eventueel een aanvullende tekst, zoals "3" en "Arbeidsvoorwaardengesprek" en "financiële aanbieding en vragen". De visuele leesvolgorde komt niet overeen met de leesvolgorde in de code; het cijfer staat in de code onder de beschrijving. Ook staan de aanvullende teksten, bijvoorbeeld "financiële aanbieding en vragen", in de code niet direct onder de beschrijving van de stap. Ten slotte staan (wanneer deze niet decoratief zijn bedoeld) de vierkantjes met de vinkjes niet direct onder de stap waar deze visuele informatie toe behoort. Dit is geen logische leesvolgorde. Een mogelijke oplossing is gebruik te maken van een ol-element en li-elementen waarin alle teksten staan, zodat dit bijvoorbeeld "3. Arbeidsvoorwaardengesprek, financiële aanbieding en vragen" wordt. Een vergelijkbare situatie komt ook voor op het scherm met de tekst "Vervolgstappen".

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Index" staan 4 onderwerpen, "TNO Arbeidsvoorwaarden", "Vervolgstappen", "TNO" en "TNO Units & Service-organisatie". Hierboven staat de tekst "Klik op één van de vier onderwerpen om meer te lezen". Ook zijn er visueel verborgen letters aanwezig, "A", "B", "C" en "D". In de code, de volgorde is als volgt: "A", "TNO Arbeidsvoorwaarden", "B", "C", "D", "Vervolgstappen", "TNO", "TNO Units & Service-organisatie" en "Klik op één van de vier onderwerpen om meer te lezen". Dit is geen logische leesvolgorde. Een mogelijke oplossing is de letters A t/m D te verwijderen en deze onderwerpen op te maken als ongeordende lijst met een ul-element en li-elementen. Boven deze lijst (onder de visuele koptekst "Index") moet dan de tekst "Klik op één van de vier onderwerpen om meer te lezen" worden geplaatst, zoals in de visuele leesvolgorde.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Feiten", staan de teksten "992 Patenten", "4,4 Klanttevredenheid", "56 Hoogleraren" en "1000 Publiek-Private samenwerkingen". In de code, de volgorde is als volgt: "992", "4,4", "56", "1000", "Patenten", "Klanttevredenheid", "Hoogleraren" en "Publiek-Private samenwerkingen". Dit is geen logische leesvolgorde. Een mogelijke oplossing is de cijfers en teksten op te maken als ongeordende lijst met een ul-element en li-elementen waar de bijbehorende cijfers en teksten samen in staan, zoals "992 Patenten".

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Verbind jouw talenten aan TNO", wordt de volgorde en samenhang van informatie visueel overgebracht (met lijnen/posities). In de code staat informatie van de twee programma-onderdelen echter door elkaar, waardoor de leesvolgorde in de code niet overeenkomt met de visuele volgorde. Dit zorgt voor een verwarrende situatie.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "MBE belofte, proposities en toekomstambities" wordt informatie op een visuele manier overgebracht. De leesvolgorde in de code komt niet overeen met de visuele volgorde, waardoor onderlinge relaties verloren gaan. Zo is een voorbeeld van de leesvolgorde in de code: "Onze ambities als krantenkop", "Onze proposities en markten" en "Onze beloften" (direct onder elkaar, van onder naar boven vergeleken met de visuele volgorde), gevolgd door alle 'tegelcontent' naast deze teksten. Dit is geen logische leesvolgorde.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Medische wearables voor betaalbare zorg", staan de teksten "Wereldwijd dragen 1 miljard ... gezondheid makkelijker maken." en "Nina Haring, Scientist bij TNO". Deze teksten staan visueel onder de visuele koptekst "Dit is onze tijd" en de link "Medische wearables voor betaalbare zorg". In de code staan deze teksten hier echter boven. Dit is geen logische leesvolgorde. Een mogelijke oplossing is ervoor te zorgen dat de leesvolgorde in de code overeenkomt met de visuele volgorde.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Mijn Beloning & Empower", staat een visuele tabel. Boven deze visuele tabel staat de tekst "Verhogingstabel persoonlijke salarisgroei". In de leesvolgorde in de code staat deze tekst onder de visuele tabel. Dit is geen logische leesvolgorde. Een vergelijkbare situatie komt voor op het scherm met de tekst "Voorbeeld loopbaanpaden TNO" bij de tekst "Van Junior Scientist naar Principal Scientist". Dit kan worden opgelost door de leesvolgorde in de code overeen te laten komen met de visuele volgorde.

Het volgende wordt niet afgekeurd, maar kan wel worden verbeterd:
Op elk scherm binnen de steekproef staat het logo van TNO. Visueel en in de leesvolgorde in de code staat deze onderaan de slide. Voor bezoekers die het scherm niet (goed) kunnen zien zou het duidelijker zijn als het logo als eerste element op de slide wordt gepresenteerd. Het advies is daarom het logo bovenaan in de leesvolgorde te plaatsen.
https://arbeidsvoorwaarden.tno.nl/

Het volgende wordt niet afgekeurd, maar kan wel worden verbeterd:
Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Mijn Salarisschaal", staat de tekst "Maandbedragen per 1 januari 2025 (in €)". Visueel staat deze onder de visuele tabel. Voor bezoekers die het scherm in één oogopslag kunnen zien is dit geen probleem; voor gebruikers van hulpsoftware zou het echter duidelijker zijn als deze tekst in de leesvolgorde boven de tabel zou staan waar deze tekst naar refereert. Op die manier is de informatie ook duidelijk voor bezoekers die het scherm niet (goed) kunnen zien.

Uitkomst: Voldoende

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Voorbeeld loopbaanpaden TNO", staat een visuele tabel met diverse pijlen in verschillende kleuren. Hier wordt betekenis uitsluitend via kleur overgebracht. Diverse pijlen hebben vergelijkbare kleuren, waardoor bijvoorbeeld bezoekers met kleurenblindheid de pijlen niet van elkaar kunnen onderscheiden. Zo heeft de beige pijl een gemeten kleurcontrast van minder dan 1,1:1 ten opzichte van de grijze pijl en er is geen andere manier om de pijlen te van elkaar te differentiëren.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://arbeidsvoorwaarden.tno.nl/, het startscherm met de tekst "TNO Innovatie voor het leven", staat de link "Klik hier om door te gaan". Deze blauwe tekst heeft een gemeten contrastwaarde van 3,0:1 ten opzichte van de oranje achtergrond. Dit is onvoldoende en moet tenminste 4,5:1 zijn. Deze situatie komt op meerdere schermen binnen de steekproef voor, waaronder op de schermen met de teksten "Welkom bij TNO!" en "Het proces". Controleer de hele steekproef op bovenstaande bevinding.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Index", staat de tekst "TNO". Deze witte tekst heeft een gemeten contrastwaarde van 2,9:1 ten opzichte van de oranje achtergrond. Dit is onvoldoende en moet tenminste 4,5:1 zijn (de tekstgrootte is 21px en de dikte is normaal/400, wat ervoor zorgt dat dit net niet onder grote tekst valt).

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Vervolgstappen", staan de teksten "1. Sollicitatie" en "2. Online algemene informatie arbeidsvoorwaarden". Deze lichtblauwe teksten hebben een gemeten contrastwaarde van 1,3:1 ten opzichte van de witte achtergrond. Dit is onvoldoende en moet tenminste 4,5:1 zijn.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Vestigingen in Nederland", staan diverse witte teksten op een oranje achtergrond (zoals "Petten"). Deze witte teksten hebben een gemeten contrastwaarde van 2,9:1 ten opzichte van de oranje achtergrond. Dit is onvoldoende en moet tenminste 4,5:1 zijn.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Acties voor het arbeidsvoorwaardengesprek", staan de teksten "Stap 4", "Stap 5" en "Stap 6". Deze witte teksten hebben een gemeten contrastwaarde van 1,3:1 ten opzichte van de lichtblauwe achtergrond. Dit is onvoldoende en moet tenminste 4,5:1 zijn.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "TNO Units & Service-organisatie", staat de tekst "Mobiliteit & Gebouwde omgeving". Deze witte tekst heeft een gemeten contrastwaarde van 2,9:1 ten opzichte van de oranje achtergrond. Dit is onvoldoende en moet tenminste 4,5:1 zijn.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "MBE belofte, proposities en toekomstambities" staat witte tekst op een oranje achtergrond. De gemeten contrastwaarde van deze witte tekst is 2,9:1 ten opzichte van de oranje achtergrond. Dit is onvoldoende en moet tenminste 4,5:1 zijn. Deze situatie komt ook voor op het scherm met de tekst "Energie en Materialen Transitie - Houd jij van een uitdaging?".

Wanneer de website wordt bekeken bij een resolutie van 1280×1024 en wordt ingezoomd tot 400% en/of wanneer de tekstafstand wordt aangepast, ontstaan er in Firefox diverse contrastproblemen. Hieronder volgen een aantal voorbeelden. Niet alle situaties zijn benoemd, omdat vergelijkbare situaties vrijwel op elk scherm binnen de steekproef voorkomen. Controleer daarom de hele steekproef op vergelijkbare situaties.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het startscherm met de tekst "TNO Innovatie voor het leven", staat de tekst "Klik hier om door te gaan". Deze blauwe tekst valt bij inzoomen en bij het aanpassen van de tekstafstand buiten de oranje achtergrondkleur en staat vervolgens op een blauwe achtergrond. Deze tekst heeft op dat moment een gemeten contrastwaarde van 1,5:1 ten opzichte van de blauwe achtergrond. De zwarte tekst "Intro" valt bij inzoomen buiten de witte achtergrond en heeft dan een gemeten contrastwaarde van 1,5:1 ten opzichte van de blauwe achtergrond.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Het proces", vallen diverse stapteksten bij inzoomen en bij het aanpassen van de tekstafstand buiten de blauwe achtergrond en hebben dan een gemeten contrastwaarde van 1,1:1 ten opzichte van de achtergrondafbeelding. Dit is onvoldoende.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Index", valt de blauwe tekst "TNO Units & Service-organisatie" bij inzoomen en bij het aanpassen van de tekstafstand buiten het witte vlak en heeft dan een gemeten contrastwaarde van 1,5:1 ten opzichte van de blauwe achtergrond. Dit is onvoldoende.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "TNO Arbeidsvoorwaarden", vallen diverse witte teksten zoals "Volgende", "Overzicht belangrijkste arbeidsvoorwaarden", "Mijn flexibele arbeidsvoorwaarden" en "Mijn flexibele werkplek" bij inzoomen en bij het aanpassen van de tekstafstand buiten de blauwe vlakken en hebben dan een gemeten contrastwaarde van minder dan 1,1:1 ten opzichte van de grijze achtergrond. Dit is onvoldoende.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Mijn Flexibele arbeidsvoorwaarden", vallen diverse zwarte teksten bij inzoomen en bij het aanpassen van de tekstafstand buiten de witte vlakken en hebben dan een gemeten contrastwaarde van gemiddeld 2,0:1 ten opzichte van de achtergrondafbeelding. Dit is onvoldoende.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Vestigingen in Nederland", staat een kaart met daarop de TNO vestigingen in Nederland. Wanneer de tekstafstand wordt aangepast en/of wordt ingezoomd, vallen de vestigingen buiten de oranje vlakken en hebben dan een gemeten contrastwaarde van minder dan 1,1:1 ten opzichte van de witte kaart. Ook de link "Bekijk op TNO.nl" valt buiten het oranje vlak en heeft dan een gemeten contrastwaarde van 2,2:1. Dit is onvoldoende.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Over TNO", staat de visuele koptekst "Over TNO". Deze oranje tekst heeft een gemeten contrastwaarde van 2,9:1 ten opzichte van de witte achtergrond. Dit is onvoldoende en moet tenminste 3,0:1 zijn.

Uitkomst: Onvoldoende

Bevindingen: Dit succescriterium heeft als doel dat content bruikbaar en leesbaar blijft bij vergroting tot 200%, zonder verlies van informatie of functionaliteit. Wanneer de website wordt bekeken bij een resolutie van 1280×1024 en wordt ingezoomd tot 200%, mag er geen content verloren gaan en mag horizontaal scrollen niet nodig zijn om de inhoud te kunnen lezen. Dit is belangrijk voor mensen met een visuele beperking die het beeld vergroten om informatie beter te kunnen zien.

Zoomen is uitgeschakeld in de code door middel van 'maximum-scale=1' en 'user-scalable=no' in het meta-element. Dit veroorzaakt problemen op mobiel. Verwijder deze restricties.
https://arbeidsvoorwaarden.tno.nl/

Wanneer de website wordt bekeken bij een resolutie van 1280×1024 en wordt ingezoomd tot 200%, wordt in Google Chrome en Safari geen enkele tekst aangepast. Dit vormt ook een probleem onder succescriterium 1.4.10, maar is daar niet nogmaals benoemd.
https://arbeidsvoorwaarden.tno.nl/

Wanneer de website wordt bekeken bij een resolutie van 1280×1024 en wordt ingezoomd tot 200%, wordt in Firefox de tekst wel aangepast, maar valt deze op bijna elk scherm binnen de steekproef buiten beeld en/of over elkaar heen waardoor deze niet (goed) meer leesbaar is. Dit gebeurt bijvoorbeeld op pagina https://arbeidsvoorwaarden.tno.nl/, het startscherm met de tekst "TNO Innovatie voor het leven". Hier staat de link "Klik hier om door te gaan". Deze linktekst valt gedeeltelijk over het woord "Leven" heen wanneer 200% wordt ingezoomd. Op het scherm met de tekst "Welkom bij TNO" vallen diverse teksten gedeeltelijk buiten beeld wanneer 200% wordt ingezoomd. Op het scherm met de tekst "Het proces" vallen alle stappen over elkaar heen. Op het scherm met de tekst "Index" valt de tekst "TNO Arbeidsvoorwaarden" achter andere content, en valt de tekst "TNO Units & Service-organisatie" gedeeltelijk buiten beeld. Op het scherm met de tekst "TNO Arbeidsvoorwaarden" vallen sommige teksten achter de blauwe vlakken. Op het scherm met de tekst "Mijn Verzekeringen en kortingen" valt bijna alle tekst over elkaar heen en vallen de teksten "Terug", "Vorige" en "Volgende" gedeeltelijk achter de blauwe vlakken en over elkaar heen. Omdat vergelijkbare situaties op vrijwel elk scherm binnen de steekproef voorkomen, is niet elke situatie benoemd. Controleer de hele steekproef op bovenstaande bevinding.

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Dit succescriterium heeft als doel dat content bruikbaar en leesbaar blijft bij vergroting tot 400%, zonder verlies van informatie of functionaliteit. Wanneer de website wordt bekeken bij een resolutie van 1280×1024 en wordt ingezoomd tot 400%, mag er geen content verloren gaan en mag horizontaal scrollen niet nodig zijn om de inhoud te kunnen lezen. Dit is belangrijk voor mensen met een visuele beperking die het beeld vergroten om informatie beter te kunnen zien.

Wanneer de website (in Firefox) wordt bekeken bij een resolutie van 1280×1024 en wordt ingezoomd tot 400%, valt op bijna elk scherm binnen de steekproef tekst over elkaar heen en gedeeltelijk buiten beeld, waardoor deze niet (goed) meer leesbaar zijn. Dit gebeurt bijvoorbeeld op pagina https://arbeidsvoorwaarden.tno.nl/, het startscherm met de tekst "TNO Innovatie voor het leven". Hier vallen de teksten "TNO Innovatie voor het leven" en "Klik hier om verder te gaan" over elkaar heen en gedeeltelijk buiten beeld. Op het scherm met de tekst "Welkom bij TNO" valt de tekst "Welkom bij TNO!" en de volledige alinea hieronder over elkaar heen en gedeeltelijk buiten beeld. Op het scherm met de tekst "Het proces" vallen alle stappen over elkaar heen. Op de schermen met de teksten "Index", "TNO Arbeidsvoorwaarden" en "Mijn Verzekeringen en kortingen" valt alle tekst over elkaar heen en is deze niet meer leesbaar. Omdat vergelijkbare situaties vrijwel op elk scherm binnen de steekproef voorkomen, is niet elke situatie benoemd. Controleer de hele steekproef op bovenstaande bevinding.

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Het proces" staan 6 stappen. Ook staat er onder elke stap een vierkantje met, wanneer de stap voltooid is, een oranje vinkje. Dit oranje vinkje heeft een gemeten contrastwaarde van 2,6:1 ten opzichte van de achtergrondafbeelding. Dit is onvoldoende en moet tenminste 3,0:1 zijn.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Vervolgstappen", staan 6 stappen. Ook staat er onder elke stap een lichtblauw vierkantje met, wanneer de stap voltooid is, een lichtblauw vinkje. Deze hebben beide een gemeten contrastwaarde van gemiddeld 1,3:1 ten opzichte van de achtergrondafbeelding. Dit is onvoldoende en moet tenminste 3,0:1 zijn.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Voorbeeld loopbaanpaden TNO", staat een visuele tabel met diverse pijlen in verschillende kleuren. Diverse pijlen hebben onvoldoende kleurcontrast ten opzichte van de lichtblauwe achtergrond. Ten opzichte van de lichtblauwe achtergrond bedraagt het gemeten contrast: lichtoranje pijl 1,7:1, beige pijl minder dan 1,1:1, donkeroranje pijl 2,6:1 en grijze pijl 1,3:1. Dit is onvoldoende en moet tenminste 3,0:1 zijn.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "High Tech Industry - Houd jij van een uitdaging? Dan zoeken wij jou!" staan vijf blauwe ellipsen waar visueel mee wordt aangegeven dat dit de vierde slide uit de reeks van 5 is. De gemeten contrastwaarde van deze blauwe ellipsen is 1,5:1 ten opzichte van de blauwe achtergrond. Dit is onvoldoende en moet tenminste 3,0:1 zijn.

Uitkomst: Onvoldoende

Bevindingen: De stijlkenmerken zoals in dit succescriterium zijn beschreven, zijn van belang voor bijvoorbeeld mensen met dyslexie. Zij kunnen hiermee de tekst beter lezen. Het toepassen van deze stijlkenmerken mag echter niet leiden tot verlies van content of functionaliteit.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Mijn Verzekeringen en kortingen", vallen de woorden "contract", "TNO", "drie" en "diverse" over elkaar heen wanneer de tekstafstand wordt aangepast. Dit is verlies van content en wordt afgekeurd.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Mijn Salarisschaal", valt de tekst "Startschaal Master en PhD met enige jaren werkervaring." gedeeltelijk achter het grijze vlak van de visuele tabel wanneer de tekstafstand wordt aangepast. Dit is verlies van content en wordt afgekeurd.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Wanneer op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Index" tweemaal Tab wordt gebruikt en vervolgens Enter wordt gebruikt, verschijnt er een scherm met een laadicoon. Vanaf dat punt werkt de toetsenbordnavigatie niet goed meer binnen de digitale presentatie; het laadicoon blijft in het midden van het beeld staan en de content laadt hakkelig in. Het is wel mogelijk door alle schermen heen te navigeren met Enter, maar dit werkt niet soepel.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Na het openingsscherm op https://arbeidsvoorwaarden.tno.nl/ krijgt men een scherm "Welkom bij TNO". Hier is een animatie te zien. Er is geen toegankelijk mechanisme om deze animatie te stoppen of te pauzeren. Met de muisklik of Enter-toets stoppen is geen toegankelijk mechanisme (niet duidelijk voor mensen met een zichtbeperking, niet te gebruiken met spraakbesturing). Voeg een zichtbare knop toe met een duidelijk label. Dan is er een mechanisme aanwezig die voor iedereen te gebruiken is. Dergelijke bewegende content komt op veel schermen binnen de digitale presentatie voor. Controleer de hele steekproef op bovenstaande situatie.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Momenteel is er één paginatitel aanwezig voor alle schermen binnen de steekproef, "TNO_Arbeidsvoorwaarden_NE_2025_V1.9". Dit is geen duidelijke paginatitel; het omschrijft onvoldoende de inhoud en is niet uniek. Dit kan worden opgelost door voor elke unieke content die wordt ingeladen een unieke en beschrijvende paginatitel toe te voegen, zoals "Welkom bij TNO! | TNO arbeidsvoorwaarden 2025".
https://arbeidsvoorwaarden.tno.nl/

Uitkomst: Onvoldoende

Bevindingen: Bij succescriterium 1.3.2 is beschreven dat de leesvolgorde in de code niet overeenkomt met de visuele volgorde. Omdat toetsenbordfocus de DOM-volgorde (de volgorde van elementen in de code) volgt, leidt dit ook tot een niet-logische focusvolgorde van bedieningselementen. Deze problemen zijn hier niet nogmaals beschreven, zie voor de beschrijving succescriterium 1.3.2. Bij het oplossen van deze problemen moet er dus op gelet worden dat dit ook gaat voldoen aan dit succescriterium.
https://arbeidsvoorwaarden.tno.nl/

Uitkomst: Onvoldoende

Bevindingen: Op veel schermen staan links zonder linkdoel. Dat gebeurt vaak bij klikbare vlakken in of rond een SVG-element. De zichtbare tekst staat wel in beeld, maar maakt geen deel uit van de link en is ook niet aan de link gekoppeld. Soms zijn er twee links; één zonder linkdoel (het klikbare SVG-vlak), en één met de zichtbare linktekst als linkdoel. Een voorbeeld hiervan is pagina https://arbeidsvoorwaarden.tno.nl/, het startscherm met de tekst "TNO Innovatie voor het leven". Hier staat, naast de link met de zichtbare linktekst "Klik hier om door te gaan", ook een tweede link zonder linkdoel (in het SVG-element van het oranje vlak). In andere gevallen is alleen een link aanwezig zonder linkdoel, terwijl de zichtbare linktekst wel aanwezig is op het scherm, maar niet als link is opgemaakt. Een voorbeeld hiervan is het scherm met de tekst "Index"; hier is per onderwerp een link zonder linkdoel aanwezig. De visueel zichtbare teksten "TNO Arbeidsvoorwaarden", "Vervolgstappen", "TNO" en "TNO Units & Service-organisatie" zijn niet gekoppeld als linkdoel. Houd één link over en geef deze een beschrijvende linktekst (in de meeste gevallen is dit de zichtbare tekst zelf, in sommige gevallen een tekstueel alternatief voor een icoon). Dergelijke links komen op bijna elk scherm binnen de steekproef voor, zoals op het scherm met de tekst "Het proces", het scherm met de tekst "Overzicht belangrijkste voorwaarden", het scherm met de tekst "TNO Arbeidsvoorwaarden" en het scherm met de tekst "Mijn Beloning & Empower". Controleer de hele steekproef op bovenstaande situatie. Deze situatie vormt ook een probleem onder succescriterium 4.1.2.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Mijn Beloning & Empower" staan onderaan het scherm links met de visuele linkteksten "Terug", "Vorige", "Volgende" en een link met een huis-icoon. Deze hebben geen linkdoel. De zichtbare tekst staat wel in beeld, maar maakt geen deel uit van de link en is ook niet aan de link gekoppeld. Deze situatie komt op veel schermen binnen de steekproef voor, zoals het scherm met de tekst "Mijn verzekeringen en kortingen" en het scherm met de tekst "Acties voor het arbeidsvoorwaardengesprek". Controleer de hele steekproef op bovenstaande situatie. Deze situatie vormt ook een probleem onder succescriterium 1.1.1 (het huis-icoon heeft geen tekstueel alternatief) en 4.1.2.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "TNO Arbeidsvoorwaarden" staan diverse onderwerpen. Momenteel is het onderwerp "Overzicht Belangrijkste arbeidsvoorwaarden" onderverdeeld in meerdere links; "Overzicht", "Belangrijkste" en "Arbeidsvoorwaarden". Dit creëert een verwarrende situatie met onduidelijke linkdoelen. De rest van de onderwerp-links op dit scherm hebben geen linktekst, zie bevinding hierboven.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Vervolgstappen", staan diverse "Klik hier om meer te lezen" links. Uit het linkdoel wordt niet duidelijk waar meer over kan worden gelezen. Deze informatie kan ook niet uit de linkcontext worden gehaald. Op deze manier zijn deze linkdoelen onvoldoende beschrijvend.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Vestigingen in Nederland", staat de link "Bekijk op TNO.nl". Uit het linkdoel wordt niet duidelijk wat precies kan worden bekeken op TNO.nl. Uit de visuele context kan worden gehaald dat er vestigingen worden bedoeld. Voor bezoekers die het scherm niet (goed) kunnen zien en hulpsoftware gebruiken is dit echter niet duidelijk. Een mogelijke oplossing is het linkdoel aan te passen naar "Bekijk TNO vestigingen op TNO.nl".

Het volgende wordt niet afgekeurd, maar kan wel worden verbeterd:
Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Het proces", staan twee "Klik hier om door te gaan" links (enkel één is zichtbaar, de ander is buiten beeld geplaatst). Het advies is de overbodige "Klik hier om door te gaan" link te verwijderen. Deze situatie vormt een probleem onder succescriterium 2.4.11.

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op geen van de schermen binnen de steekproef is een zichtbare focusindicator aanwezig wanneer de toetsenbordfocus op een element staat. Dit komt omdat 'outline:none;' is gebruikt om de standaard focusindicator uit te zetten. Op deze manier is de focusindicator nergens zichtbaar. Een mogelijke oplossing is de standaard focusindicator van de browser weer zichtbaar te maken door de 'outline: none;' styling te verwijderen. Deze standaard focusindicator van de browser voldoet automatisch aan contrasteisen. Ook kan ervoor worden gekozen een aangepaste focusindicator te gebruiken. Wel moet er dan voor worden gezorgd dat het contrast van deze focusindicator (overal) voldoende is.
https://arbeidsvoorwaarden.tno.nl/

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Energie en Materialen Transitie | Houd jij van een uitdaging?", staan diverse links, bijvoorbeeld met de visuele linktekst "Naar een overvloed aan Zonnestroom". De toegankelijkheidsnaam van deze link komt uit het title-attribuut van de link en is "https://www.tno.nl/nl/aandachtsgebieden/energietransitie/roadmaps/hernieuwbare-elektriciteit/zonne-energie/". De visuele tekst is hier niet in opgenomen. Hierdoor ontstaan problemen bij de bediening van dit element door middel van spraakbesturing. Bovenstaande geldt voor alle vergelijkbare links op dit scherm.

Uitkomst: Niet aanwezig

Uitkomst: Onvoldoende

Bevindingen: Er is geen lang-attribuut aanwezig bij het HTML-element om de standaard taal van de website in te stellen. Voeg een lang-attribuut aan het HTML-element toe met de juiste taalcode. Het betreft een Nederlandse website, dus de juiste taalcode is in dit geval "nl". https://arbeidsvoorwaarden.tno.nl/

Uitkomst: Voldoende

Bevindingen: Het volgende wordt niet afgekeurd, maar kan wel worden verbeterd:
Op bijna elk scherm binnen de steekproef staat momenteel Engelse tekst 'buiten' de zichtbare slide. Deze wordt momenteel niet gepresenteerd door hulpsoftware door het gebruik van 'aria-hidden="true"' op het overkoepelende div-element, maar wanneer dat probleem is opgelost zullen deze teksten wel gepresenteerd worden en verwarring veroorzaken bij bezoekers die hulpsoftware gebruiken. Het gaat hier bijvoorbeeld om de tekst [lang lang="en"]"title only white"[/lang] op het scherm met de tekst "TNO Arbeidsvoorwaarden" en de tekst [lang lang="en"]"Text + photo 100%"[/lang] op het scherm met de tekst "Overzicht belangrijkste arbeidsvoorwaarden" en het scherm met de tekst "Mijn Salarisschaal". Deze teksten dienen te worden verwijderd. Controleer de hele steekproef op bovenstaande.

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Niet aanwezig

Uitkomst: Voldoende

Uitkomst: Onvoldoende

Bevindingen: Op elk scherm binnen de steekproef wordt 'aria-hidden="true"' gebruikt op het overkoepelende div-element. Dit betekent dat de volledige inhoud binnen deze container niet zichtbaar is voor hulpsoftware en maakt de hoofdinhoud volledig ontoegankelijk. Hoewel 'aria-hidden="true"' wordt gebruikt, blijven links en knoppen binnen deze container toch beschikbaar voor hulpsoftware. Dit komt mogelijk doordat het focusbare elementen zijn. De 'platte' tekst is echter niet bereikbaar. Dit kan worden opgelost door aria-hidden="true" te verwijderen van het overkoepelende div-element.

Op veel schermen staan links zonder toegankelijkheidsnaam. Dat gebeurt vaak bij klikbare vlakken in of rond een SVG-element. De zichtbare tekst staat wel in beeld, maar maakt geen deel uit van de link en is ook niet aan de link gekoppeld. Soms zijn er twee links; één zonder naam (het klikbare SVG-vlak), en één met de zichtbare linktekst als toegankelijkheidsnaam. Een voorbeeld hiervan is pagina https://arbeidsvoorwaarden.tno.nl/, het startscherm met de tekst "TNO Innovatie voor het leven". Hier staat, naast de link met de zichtbare linktekst "Klik hier om door te gaan", ook een tweede link zonder toegankelijkheidsnaam (in het SVG-element van het oranje vlak). In andere gevallen is alleen een naamloze link aanwezig, terwijl de zichtbare linktekst wel aanwezig is op het scherm, maar niet als link is opgemaakt. Een voorbeeld hiervan is het scherm met de tekst "Index"; hier is per onderwerp een link zonder toegankelijkheidsnaam aanwezig. De visueel zichtbare teksten "TNO Arbeidsvoorwaarden", "Vervolgstappen", "TNO" en "TNO Units & Service-organisatie" zijn niet opgemaakt als toegankelijkheidsnaam. Dergelijke links komen op bijna elk scherm binnen de steekproef voor, zoals op het scherm met de tekst "Het proces", het scherm met de tekst "Overzicht belangrijkste voorwaarden", het scherm met de tekst "TNO Arbeidsvoorwaarden" en het scherm met de tekst "Mijn Beloning & Empower". Controleer de hele steekproef op bovenstaande situatie. Deze situatie vormt ook een probleem onder succescriterium 2.4.4. Zie succescriterium 2.4.4 voor advies.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Mijn Beloning & Empower" staan onderaan het scherm links met de visuele linkteksten "Terug", "Vorige", "Volgende" en een link met een huis-icoon. Deze hebben geen toegankelijkheidsnaam. De zichtbare tekst staat wel in beeld, maar maakt geen deel uit van de link en is ook niet aan de link gekoppeld. Deze situatie komt op veel schermen binnen de steekproef voor, zoals het scherm met de tekst "Mijn verzekeringen en kortingen" en het scherm met de tekst "Acties voor het arbeidsvoorwaardengesprek". Controleer de hele steekproef op bovenstaande situatie. Deze situatie vormt ook een probleem onder succescriterium 1.1.1 (het huis-icoon heeft geen tekstueel alternatief) en 2.4.4.

Op pagina https://arbeidsvoorwaarden.tno.nl/, het scherm met de tekst "Welkom bij TNO!", staan drie knoppen zonder toegankelijkheidsnaam. Deze knoppen lijken te fungeren als mechanismen om de automatisch afspelende video te pauzeren, hervatten en in fullscreen modus te zetten. De knoppen maken gebruik van zowel 'aria-pressed' als 'aria-hidden="true"'. Daarnaast worden ze visueel verborgen door middel van 'opacity: 0'. Ondanks dat de knoppen niet zichtbaar zijn, blijven ze wel focusbaar en worden ze nog steeds door hulpsoftware gepresenteerd. Omdat de knoppen een aria-pressed-attribuut hebben, worden ze door screenreaders geïnterpreteerd als toggle buttons. Doordat er geen toegankelijkheidsnamen aanwezig zijn, wordt alleen de rol "toggle button" voorgelezen, zonder verdere informatie over de functie van de knoppen. Een mogelijke oplossing is de knoppen te voorzien van duidelijke toegankelijkheidsnamen (bijvoorbeeld via een aria-label), 'aria-hidden="true"' te verwijderen en ze ook visueel beschikbaar te maken voor ziende bezoekers zodat zij de video ook kunnen pauzeren en/of stoppen.

Uitkomst: Onvoldoende

Bevindingen: Binnen de steekproef wordt op elk scherm gebruikgemaakt van 'aria-live="polite"' op de main-container. In een Single Page Application (SPA) zorgt dit ervoor dat elke DOM-wijziging als 'live update' wordt aangekondigd. Dit veroorzaakt veel ruis voor bezoekers die de website met een screenreader navigeren.
https://arbeidsvoorwaarden.tno.nl/

Op pagina https://arbeidsvoorwaarden.tno.nl/ tussen verschillende schermen, zoals tussen het scherm met de tekst "Index" en het scherm met de tekst "TNO Arbeidsvoorwaarden" in, staat een afbeelding van een ladend voortgangsbalkje en de tekst "Loading". Dit is een statusbericht, maar is momenteel niet correct als dusdanig opgemaakt in de code (het huidige 'aria-live="polite"' op de main-container is niet geschikt). Ook is er geen tekstueel alternatief aanwezig, wat zorgt voor een probleem onder succescriterium 1.1.1.