Into Nijmegen

WCAG 2.1 AA onderzoek -versie 1.0

Gemeente Nijmegen vindt het belangrijk dat iedereen digitale informatie kan lezen:

• Op ieder apparaat
• Op ieder moment
• Op iedere locatie
• Ongeacht leeftijd, ervaring, situatie of beperking

Met iedereen bedoelen we dan ook echt iedereen, dus ook de 4 miljoen mensen die een  functionele beperking hebben. Bijvoorbeeld mensen die slecht kunnen zien of geen muis kunnen gebruiken.

Volgens het Tijdelijk besluit digitale toegankelijkheid overheid van juli 2018 moeten websites en mobiele apps van Nederlandse overheidsinstanties voldoen aan toegankelijkheidseisen. De verantwoording hiervoor staat in een toegankelijkheidsverklaring op de website.

De toegankelijkheidseisen staan in de Web Content Accessibility Guidelines 2.1 (WCAG 2.1). Gemeenten moeten voldoen aan niveau A en AA van deze eisen. De WCAG 2.1 is opgedeeld in 4 principes:

• Waarneembaar (omschrijf of toon het als ik het niet kan zien of horen, denk ook aan voldoende kleurcontrast, schaalbaarheid etc.)
• Bedienbaar (zorg dat je de website met welk middel dan ook kan bedienen)
• Begrijpelijk (zorg dat mens en software het begrijpt, geef bijvoorbeeld de taal van de pagina aan, maar ook fouten bij formulieren)
• Robuust (code en elementen kloppen, dit zorgt dat het werkt, ook met verschillende hulpsoftware en apparaten)

Dit rapport beschrijft of de website https://www.intonijmegen.com/ voldoet aan deze 4 principes. Elk principe wordt beoordeeld op verschillende voorwaarden (succescriteria).

Onderstaande tabel laat zien aan hoeveel voorwaarden (succescriteria) de website op dit moment voldoet.

Ten eerste een compliment voor het gebruik van alternatieve teksten. Over het algemeen worden deze goed ingezet. Op een aantal punten gaat het nog niet helemaal goed, die bespreek ik hieronder:

1. Op pagina https://www.intonijmegen.com/ontdek-nijmegen/old-city-young-vibe staat bovenaan de pagina de promo video "Old city, young vibe".De video wordt via een iframe geplaatst. Dit iframe heeft een title-attribuut met de waarde "YouTube video player". Voor mensen met een visuele beperking is het van belang te weten wat ze kunnen verwachten van de inhoud van een video voordat zij hem starten. Zij kunnen dan beter inschatten of ze de video willen starten. Omdat het voor deze video niet mogelijk is voorafgaand een kop of alinea te plaatsen, waaruit duidelijk wordt wat er van de video verwacht wordt, moet hulpsoftware deze informatie uit het title-attribuut van het iframe halen. De huidige waarde zegt niets over de inhoud van de video.

2. Op dezelfde pagina staan video's naast de koppen "Bourgondisch genieten" en "Cultuur snuiven" die ook als informatief beschouwd worden, omdat ze extra informatie geven naast de tekst van deze onderwerpen. Daarom moet aan mensen die gebruik maken van hulpsoftware duidelijk gemaakt worden waarover deze video's gaan. Het iframe moet een title-attribuut bevatten wat de inhoud van de video beschrijft.

Op de website staan meer video's die via een iframe geplaatst zijn, waarvoor geldt dat er via het iframe een beschrijvende tekst meegegeven moet worden via het title-attribuut omdat de video's als informatief kunnen worden beschouwd.

3. Op dezelfde pagina staan afbeeldingen die deel uitmaken van een slider, bijvoorbeeld bij de koptekst "De oudste stad van Nederland". De afbeeldingen hebben geen alternatieve tekst en worden dus door hulpsoftware genegeerd. De slider biedt echter wel functies aan om de slider te bedienen en dat maakt het tegenstrijdig. Hulpsoftware gaat alle slides langs door de knoppen, maar ziet geen alternatieve tekst. Oplossing is dus óf wel alternatieve teksten aan de afbeeldingen toevoegen, óf je verbergt ook de knoppen van de slider zodat hulpsoftware deze niet kan zien.

4. Het logo in de linkerbovenhoek van iedere pagina wordt via CSS geplaatst. Als een afbeelding gebruikt wordt als hyperlink, wat hier het geval is, is de afbeelding functioneel en is het van belang een goede alternatieve tekst mee te geven die als linkdoel kan fungeren voor hulpsoftware. Het title-attribuut bij een hyperlink is alleen bedoeld voor aanvullende informatie. Als er geen aanvullende informatie nodig is kun je het title attribuut beter weg laten omdat tekst anders dubbel voorgelezen wordt.Omdat er ook tekst in het logo verwerkt is, moet deze tekst ook verwerkt worden in de alternatieve tekst. De alternatieve tekst kan via een verborgen <span> vermeld worden zoals ook gebeurt met de afbeeldingen op de homepage onder "Verhalen uit Nijmegen". Voorstel voor een alternatieve tekst van het logo op iedere pagina:<span class="sr-only"> "Logo Into Nijmegen, Old city Young vibe (home)"</span>

5. Op pagina https://www.intonijmegen.com/blijf-op-de-hoogte/verhaal/fotoverslag-afghan-women-taboo-breaker zijn de afbeeldingen over de expositie aangemerkt als decoratief, ze hebben een lege alt-tekst. In dit geval is het beter de afbeeldingen wel een alternatieve tekst te geven omdat ze een beeld geven van de expositie en deze informatie nu gemist wordt door gebruikers van hulpsoftware.

6. Voor hulpsoftware is het gebruik van de knop om het menu te openen en te sluiten niet helemaal logisch. Er wordt een <button>-element gebruikt met een <span>-element met het title-attribuut "Menu". Dit is voor hulpsoftware verborgen door aria-hidden="true" en hierdoor krijgen gebruikers van hulpsoftware deze informatie niet mee.Een oplossing lijkt gevonden in het toevoegen van aria-expanded="false" bij een gesloten menu maar deze wijzigt niet naar aria-expanded="true" als het menu de status geopend heeft. Hier moet dus een oplossing voor gevonden worden.

Op de website staan video's die gepubliceerd zijn na 23 september 2020 waarbij audiodescriptie ontbreekt. Audiodescriptie is van belang voor mensen met een visuele beperking, omdat zij informatie missen die bijvoorbeeld alleen in tekst in beeld verschijnt, maar ook sfeerbeelden worden gemist zonder audiodescriptie. Voorbeeld video "Old City, Young Vibe" op pagina https://www.intonijmegen.com/ontdek-nijmegen/old-city-young-vibe. Hier komen teksten in beeld als "Old City, Young Vibe", "Oudste stad van Nederland", "Een stad vol verhalen", "Stad die zich blijft ontwikkelen", etc, tot aan "Mede mogelijk gemaakt door...". Deze teksten zouden bijvoorbeeld door een soort voice-over in een (extra) audiospoor meegenomen kunnen worden. Ook kan via de voice-over een impressie van de beelden worden gegeven. Een andere oplossing is een volledig uitgeschreven transcript waarin ook alle belangrijke beeldinformatie uitgeschreven wordt.

Audiodescriptie ontbreekt bij alle video's op de website die gepubliceerd zijn na 23 september 2020. Zie voorbeelden bij succescriteria 1.2.3. 

In tegenstelling tot succescriterium 1.2.3 is een volledig uitgeschreven tekst niet meer afdoende. De oplossing moet in het audiospoor verwerkt worden.

• Op pagina https://www.intonijmegen.com/blijf-op-de-hoogte/uitgelicht/fijne-terrassen-in-nijmegen staat een afbeelding die verpakt is in een H3 kop, namelijk de afbeelding van "De Meesterproef". Er is echter geen content waar de afbeelding een kop van zou moeten zijn, dus de H3 is niet logisch.

• Op pagina https://www.intonijmegen.com/evenementen-aanmeldformulier staat een tekst "Jouw onderneming op IntoNijmegen". Deze tekst is opgemaakt met een H4 wat op zich correct is, maar binnen de H4 wordt vervolgens ook het strong-element gebruikt.Het strong-element is bedoeld om extra nadruk te leggen. Voorleessoftware zal deze zin met extra nadruk voorlezen. Dat is niet nodig.In het CSS kan de opmaak voor H4 aangepast worden zodat deze dikgedrukt is.

• Op pagina https://www.intonijmegen.com/start-in-nijmegen/studeren/verenigingen/nijmeegse-studentenverenigingen is de eerste alinea opgemaakt met een strong element. Een strong element is alleen bedoeld voor sterke nadruk op een enkel woord of enkele worden en niet voor de visuele presentatie van een hele alinea. Gebruik daar CSS voor. Ook de tussenkoppen op deze pagina, bijvoorbeeld "Hoe het werkt" en "Voorwaarden" zijn opgemaakt met het strong-element. Dat is niet de bedoeling. Gebruik hiervoor CSS.

Het element strong wordt op meerdere pagina's foutief gebruikt. Dit is met name verwarrend voor mensen die voorleessoftware gebruiken.Zie bijvoorbeeld ook pagina https://www.intonijmegen.com/blijf-op-de-hoogte/uitgelicht/fijne-terrassen-in-nijmegen waar de eerste alinea ook opgemaakt is met het strong-element. De kopteksten "1. De Hemel" en "2. Café Maxim" zijn opgemaakt met H3, maar daarin is weer het strong element gebruikt. Beter is het CSS van deze kopteksten aan te passen zodat de gewenste weergave doorgegeven wordt.

• Op pagina https://www.intonijmegen.com/privacy-cookies staat een aantal kopteksten die visueel herkenbaar zijn doordat ze vetgedrukt weergegeven zijn. Bijvoorbeeld de koptekst "Persoonsgegevens die IntoNijmegen verwerkt". Deze zijn niet met een heading element (bijvoorbeeld een H2) opgemaakt maar foutief met een strong element. Op deze pagina is ook een ongeordende lijst te vinden met de items "Voornaam", "Achternaam", enz. Hier is geen lijstopmaak voor gebruikt met ul en li elementen, maar een p element. De items zijn onder elkaar geplaatst door br elementen en de bullets staan gewoon in de tekst als symbool.

Op de pagina staan ook nog kopteksten die herkenbaar zijn doordat ze cursief worden weergegeven. Hier zijn em elementen voor gebruikt, maar daar zijn em elementen ook niet voor bedoeld. Gebruik hier ook gewoon heading elementen (bijvoorbeeld h3) en maak deze op via CSS. Op deze pagina staat ook nog een datatabel. De kolomkoppen zijn hier niet in th elementen geplaatst, maar in td elementen. Visueel zijn wel strong elementen gebruikt, maar die zorgen niet voor de juiste relatie tussen de kolomkop en de data eronder. Het strong element moet verwijderd worden en er moeten th elementen worden gebruikt.

• De volgende PDF heeft geen tags en daardoor is er voor hulpsoftware (zoals voorleessoftware) geen informatie beschikbaar om de PDF te interpreteren. Omdat tags ontbreken kan de PDF niet volledig onderzocht worden (alle succescriteria met betrekking tot de PDF code laag zoals semantische koppen en alt teksten bij afbeeldingen). Let daarom op dat bij het oplossen van dit probleem nieuwe toegankelijkheidsproblemen kunnen ontstaan. Voorbeeld Zie: https://assets.citynavigator.nl/kuma-nijmegen-stadspartners/uploads/media/60d1e0235e25c/kaart-riverengebied-juni-2021-def-1.pdf"

Er staan op de homepage meerdere overzichten met content waarbij de content een koptekst bevat met visueel erboven eventueel een afbeelding en soms ook nog andere informatie. In de HTML-code staat in de meeste gevallen de koptekst met heading element bovenaan en dus is de relatie met de overige content van de blok goed. Er zijn echter ook uitzonderingen hierop waar het niet goed gaat.

Op pagina https://www.intonijmegen.com/ onder de koptekst "Uitagenda" staat wel een h3 koptekst bovenaan, maar die is met display:none; verborgen. Hulpsoftware pakt deze koptekst niet op. De zíchtbare koptekst staat onder de link, de afbeelding en de datum, maar voor hulpsoftware is de leesvolgorde niet logisch.

Op pagina https://www.intonijmegen.com/agenda/agenda-overzicht staat een vergelijkbaar blok content, waarbij ook visueel een datum boven een koptekst staat. Op deze pagina is het echter wel goed gedaan in de code en is er voor hulpsoftware een betekenisvolle volgorde.

Op pagina https://www.intonijmegen.com/agenda/agenda-overzicht/875577845/colin-benders onder de koptekst in het groene vlak "Ook interessant voor jou" staat de tekst "Uitverkocht" visueel boven de koptekst. Deze tekst staat in de HTML-code goed onder de koptekst. De datum die er visueel boven staat, staat ook in de HTML-code boven de koptekst wat het verwarrend maakt voor gebruikers van hulpsoftware, die hebben geen idee of deze datum bij het artikel hoort of bij een eerder artikel.

Voor mensen met een cognitieve- of motorische beperking is het fijn als het invullen van formulieren eenvoudig is. Daarom is het verplicht om aan formuliervelden waar persoonlijke gegevens verzameld worden, het attribuut 'autocomplete' toe te voegen.

1. Dit is goed gedaan op de pagina https://www.intonijmegen.com/evenementen-aanmeldformulier maar helaas is er in het formulier op pagina https://www.intonijmegen.com/start-in-nijmegen/studeren/verenigingen/nijmeegse-studentenverenigingen geen aandacht voor geweest.

2. In de footer kun je je inschrijven voor de nieuwsbrief. Ook in dit mini-formulier ontbreekt het autocomplete-attribuut bij het inputveld.

Op pagina https://www.intonijmegen.com/ staat bovenaan een slider. De actieve slide wordt hier weergegeven door een vierkantje in een solide kleur in plaats van een semi-transparante kleur. Het contrast tussen actief en niet-actief is hier lastig te meten, omdat de niet-actieve knop verschillende kleurentinten heeft vanwege de transparantie. Het advies is een keuze te maken zónder transparantie of een solide randje aan de vierkantjes toe te voegen.

• Halverwege de homepage, onder de kop "Beste Europese bestemming 2022", staan hyperlinks in de tekst die een te lage contrastwaarde hebben ten opzichte van de groene achtergrond. Het contrast is 3,5:1 waar dit minimaal 4,5;1 moet zijn.Dit geldt ook voor de link "Lees meer" op dit groene vlak.

Dit probleem speelt op de website op alle plaatsen waar de groene achtergrond gebruikt wordt (#00865C) met donkergrijze teksten (#222221).

• Hetzelfde geldt voor hyperlinks in de blauwe kleur (#0181A1) op een lichtblauwe ondergrond (#E5F5F9), zoals bijvoorbeeld onder de kop "Voor wie", op pagina https://www.intonijmegen.com/ontdek-nijmegen/highlights/walkofthetown. Hierbij is de contrastratio 4,0:1 waar deze 4,5:1 moet zijn.

• Ook het contrast in PDF documenten wordt gecontroleerd voor dit succescriterium.In de PDF https://assets.citynavigator.nl/kuma-nijmegen-stadspartners/uploads/media/60d1e0235e25c/kaart-riverengebied-juni-2021-def-1.pdf is er een te lage contrastverhouding van de witte letters op de blauwe achtergronden (3,1:1 waar dit 4,5:1 moet zijn voor de donkerblauwe achtergrond en 2,7:1 voor de grijsblauwe achtergrond waar dit ook 4,5:1 moet zijn).

Op pagina 2 van deze PDF worden kleuren gebruikt voor tekst die een te laag contrast geven met de achtergrond:de lichtblauwe tekst (#7CCADF) heeft een veel te laag contrast met de grijsblauwe achtergrond (#E5F5F9), namelijk 1,6:1 waar dit 4,5:1 moet zijn. Ook met de witte achtergrond is het contrast te laag: 1,8:1 waar dit 4,5:1 moet zijn.De groene teksten (#84CEB3) hebben een te laag contrast met de witte achtergrond namelijk 1,8:1 in plaats van 4,5:1.Ditzelfde groen wordt ook gebruikt op de grijsblauwe achtergrond (#E5F5F9) en dan is het contrast 1,6:1 waar dit 4,5:1 moet zijn.

• Op pagina https://www.intonijmegen.com/start-in-nijmegen/studeren/verenigingen/nijmeegse-studentenverenigingen valt van de koptekst "Studentenverenigingen in Nijmegen" een deel van de groene tekst over de schuine groene achtergrond, afhankelijk hoe breed het venster is. De tekst wordt hierdoor minder goed leesbaar omdat het contrast te laag is. Moet zijn 4,5:1.
• In het menu staat een tekst "zoeken". Dit is een placeholder die verdwijnt zodra je tekst begint te typen. Het contrast van de tekst op de achtergrond is 2,5:1 waar dit ook 4,5:1 moet zijn.

De placeholder die in de footer gebruikt wordt voor het inschrijven voor de nieuwsbrief heeft een contrastratio van 2,4:1 waar dit 4,5:1 moet zijn.

Placeholderteksten komen op meerdere pagina's voor. Het contrast moet voor alle situaties bekeken worden.

Opmerking: Als de focus in de footer op de onderdelen komt die onder "Snel naar" staan, verdwijnt de tekst omdat het contrast te laag is en in dit blok de focus niet zichtbaar is (vanwege laag contrast). Er is een toegankelijk alternatief als de focus er niet op staat, maar wel goed om hier naar te kijken en op te lossen.

Als de website wordt bekeken bij een resolutie van 1024 x 788 pixels en ingezoomd wordt tot 200% is niet alle tekst of functionaliteit nog aanwezig, leesbaar of bruikbaar.

1. Op de homepage is tekst niet meer leesbaar omdat de navigatiepijltjes boven op de tekst vallen als er drie kolommen zijn. Dit probleem komt op alle pagina's voor waar artikelen in drie kolommen geplaatst zijn en je met de pijltjestoets naar andere artikelen kunt klikken.

2. Op de homepage vallen teksten weg in de header. Op pagina https://www.intonijmegen.com/start-in-nijmegen/studeren/verenigingen/nijmeegse-studentenverenigingen valt in de kop van de header het woord "Nijmegen" weg. Er moet "Studentenvereniging uit Nijmegen" staan. Als er bij een slide alineatekst is, zoals bijvoorbeeld bij de slide "Walk of the Town Audiotour", valt deze alineatekst weg.

3. In de footer valt de tekst "Hoe anderen Nijmegen hebben beleefd" weg en blijft alleen het icoontje van het uiltje over.

Getest met een schermbreedte van 1280 pixels + inzoomen naar 400%.

1. In de header verdwijnt de alineatekst die op de sliders staat.

2. Het menu blijft permanent in beeld waardoor deze over de tekst van de pagina komt te liggen en niet altijd leesbaar is.

3. Als het menu open wordt geklikt, verdwijnen de links die het menu moeten vormen, het menu is dus niet bruikbaar.

4. Daar waar teksten in kolommen staan, ontbreken navigatiepijlen om van de ene naar andere kolom te gaan.

5. Op pagina https://www.intonijmegen.com/privacy-cookies staat een datatabel met de verschillende soorten cookies die gebruikt worden. Deze datatabel valt aan de rechterkant weg en is niet meer benaderbaar als veel ingezoomd wordt.

Bovenstaand zijn voorbeelden die tijdens het toetsen naar voren zijn gekomen. Het kan zijn dat er op andere pagina's ook problemen voorkomen voor dit succescriteria. Het advies is hier goed op te testen.

• Op de homepage staat een slider met buttons om aan te geven welke slide actief is. Niet actieve slides hebben een button die semi-transparant is. Ten opzichte van de achtergrondfoto is er vaak een te laag contrast waardoor de buttons niet altijd goed zichtbaar zijn. Het gemiddelde contrast komt onder de 3,0:1 uit. Het is beter om geen transparantie te gebruiken. Ook als de buttons niet-actief zijn moeten ze nog wel te 'zien' zijn.

Deze buttons worden bij meer sliders gebruikt. Zie bijvoorbeeld ook pagina https://www.intonijmegen.com/ontdek-nijmegen/highlights/walkofthetown.

• Op de website wordt gebruikt gemaakt van een aangepaste focus-indicator. Als een aangepaste focusindicator wordt gebruikt moet deze ook aan de contrast-eis voldoen op elke mogelijke achtergrond. Dit levert op een aantal plaatsen op de website problemen op. De standaard focusindicator van de browser heeft geen contrast-eis en is dus altijd goed; hier wordt een uitzondering voor gemaakt.De focusindicator heeft als kleur #2181b7. Op bijvoorbeeld de groene ondergrond (#00865C) van de Uitagenda op de homepage heeft deze onvoldoende contrast, namelijk 1,1:1 waar dit 3,0:1 moet zijn.De focusindicator is ook niet goed zichtbaar op de pagina https://www.intonijmegen.com/blijf-op-de-hoogte/uitgelicht/fijne-terrassen-in-nijmegen waar in het groene gedeelte de focusindicator niet goed zichtbaar is bij de links naar "In de Kazerne" en "Mi Barrio".

Ook in de footer is er nauwelijks onderscheid te zien tussen de focusindicator en de achtergrond.

1. Op de homepage verdwijnt de derde regel van de tekst in de sliders, als de stijleigenschappen ingesteld worden zoals genoemd in dit succescriterium.Daar waar "Beste Europese Bestemming" over drie regels staan, mist het laatste woord "Bestemming"

2. De koppen onder "Verhalen uit Nijmegen" missen een vierde regel.

3. Hetzelfde geldt op pagina https://www.intonijmegen.com/blijf-op-de-hoogte/nieuwsberichten/eten-drinken voor de koppen van de artikelen.

Zo zijn er nog meer voorbeelden te noemen maar met bovenstaande voorbeelden is er een goede indicatie om de problemen op te lossen.

Componenten van de gebruikersinterface moeten bedienbaar zijn.

1. Als het menu is geopend, kunnen de submenu's niet met het toetsenbord benaderd worden.

2. Op pagina https://www.intonijmegen.com/agenda/agenda-overzicht?calendar_period=tomorrow&calendar_range=&search=&sort=&order=desc staat een aantal filters. Met het toetsenbord zijn de opties voor "Vandaag", "Morgen", of "Dit weekend" te selecteren, maar niet meer te deselecteren met het toetsenbord. Het kiezen van de datum is praktisch ook niet mogelijk. Met de pijltjestoetsen kun je wel door de kalender navigeren, maar je ziet de focus niet, dus je kunt nooit een datum kiezen die klopt.

3. De video's die op pagina https://www.intonijmegen.com/ontdek-nijmegen/old-city-young-vibe gepresenteerd worden zijn niet te starten als je alleen het toetsenbord gebruikt. Dit probleem komt voor op alle pagina's waarbij de video in een modal-venster geopend moet worden.

De slider bovenaan op de homepage, heeft geen mechanisme om de slideshow te pauzeren. Hierdoor kan het zijn dat mensen niet genoeg tijd hebben om de teksten op deze slides te lezen.

De slider bovenaan de homepage heeft bewegende content omdat de slides elkaar afwisselen. Er is geen mechanisme aanwezig die dat kan stoppen. Voor mensen met een concentratiestoornis kan dit storend zijn bij het lezen van de andere teksten op de homepage.

Er is een skiplink die naar het onderdeel "main" gaat. Maar als je op 'enter' klikt om de skiplink te volgen gebeurt er niets. Het doel van de skiplink wordt niet herkend en de focus wordt niet verplaatst. Het advies is om dit beter in te richten en de tekst van de skiplink aan te passen "Naar hoofdinhoud".

Het PDF document https://assets.citynavigator.nl/kuma-nijmegen-stadspartners/uploads/media/60d1e0235e25c/kaart-riverengebied-juni-2021-def-1.pdf heeft geen documenttitel gekregen in de bestandseigenschappen. Een documenttitel van een PDF document is net zo belangrijk als een paginatitel van een webpagina. Dit is het eerste wat voor wordt gelezen en moet dus een goede omschrijving geven van de inhoud van het document.Naast een goede titel, moet bij de bestandseigenschappen ook de weergave ingesteld worden op "documenttitel" in plaats van "Bestandsnaam". In Adobe Acrobat PRO is dit terug te vinden onder het Tabblad 'Weergave bij openen' en dan bij de 'vensteropties'. Bij 'Tonen' moet dus "Documenttitel" weergegeven worden of ingesteld worden. Dit geldt ook voor het andere PDF document uit de steekproef.

Voor de webpagina's zijn overal goede paginatitels gebruikt. Het advies is om bij de paginatitel van de homepage te vermelden dat dit ook de homepage is: <title>Officiële bezoekerswebsite van Nijmegen (home) | Into Nijmegen </title>

• Als het menu is geopend, moet je met de toets combinatie Shift+Tab terug navigeren om een deel van het menu te benaderen. Dit komt omdat in de HTML-volgorde de knop om het menu te openen pas na een aantal links van het menu staat.

• Als de video bij "Cultuur Snuiven" is geopend moet je eerst 'terug' navigeren met Shift+Tab om de video te kunnen bedienen. Dit is niet logisch. Als je een video opent of start verwacht je met de Tab-toets vooruit te kunnen navigeren om de video te bedienen. Terug navigeren kunnen mensen missen en denken dat de video niet bediend kan worden en dit is verwarrend.

Dit probleem speelt ook bij de andere video's op de website.

• De cookiemelding die je krijgt bij een eerste bezoek aan de website kan met het toetsenbord pas gesloten worden als je eerst alle interactieve elementen door hebt gelopen. Dit komt omdat de cookiemelding onderaan in de code verwerkt is en hierdoor pas als laatste door hulpsoftware gezien wordt. Omdat de cookiemelding ook over de content heen valt is het lastig te bepalen wanneer de focus er op komt.

1. Het logo van Into Nijmegen heeft geen duidelijk linkdoel, omdat een alternatieve tekst van de afbeelding ontbreekt. Het logo fungeert ook als hyperlink en het doel van de link wordt niet beschreven. Dit is op te lossen door een alternatieve tekst aan de afbeelding toe te voegen. Of voeg binnen de link een verborgen <span> toe, waaruit het doel van de link duidelijk wordt.

2. Op pagina https://www.intonijmegen.com/ontdek-nijmegen/highlights/walkofthetown staat een afbeelding van een routekaart. De kaart valt onder een uitzondering, maar voordat iemand bij de kaart komt moet een link gevolgd worden. Deze link heeft geen linktekst, omdat de kaart geen alternatieve tekst gekregen heeft. Maak hiervoor een linktekst die de functie beschrijft (openen van een vergroting van de kaart).

3. Op pagina https://www.intonijmegen.com/ staat een slider bovenaan. In de slides worden links "lees meer" gebruikt. Deze linktekst is niet duidelijk genoeg en er is geen door hulpsoftware te bepalen linkcontext aanwezig die het doel van deze links alsnog duidelijk maakt voor mensen die hulpsoftware gebruiken.

4. Op pagina https://www.intonijmegen.com/ staat ook een link "Lees meer" onder de koptekst "Beste Europese bestemming 2022". Ook dit linkdoel is niet duidelijk genoeg en er is geen linkcontext aanwezig die door hulpsoftware gebruikt kan worden.

5. Op pagina https://www.intonijmegen.com/vacatures staat twee keer een link "Bekijk de vacature". De linktekst is hetzelfde, maar de links gaan wel naar andere pagina's. De linktekst is dus niet eenduidig en hierdoor niet duidelijk genoeg. Er is geen linkcontext aanwezig die hulpsoftware kan gebruiken.

6. Op pagina https://www.intonijmegen.com/contact staat nog een link "Lees verder" onder de koptekst "Pers & media". Ook deze linktekst is niet duidelijk.

7. Op pagina https://www.intonijmegen.com/ontdek-nijmegen/highlights/walkofthetown staat onder de afbeelding van de kaart een link "Dat kan ook!". Uit de context blijkt waar de link voor bedoeld is maar het is beter om te kiezen voor de tekst "route als GPS-bestand" als link.

8. Op pagina https://www.intonijmegen.com/contact staat een link met linktekst "deze link". Dat is erg onduidelijk en hulpsoftware moet naar de context kijken om te weten waar de link naar toe gaat.

9. Als je de link uit punt 8 volgt staat het logo van Nijmegen in het zwart bovenaan. Maar als je hier op klikt kom je niet zoals verwacht op de homepage van intonijmegen terug maar op de website "Huis van de binnenstad".

De website heeft naast de navigatie in het menu een zoekmachine. Deze werkt niet optimaal. Als ik zoek op "Colin Benders" verwacht ik zoekresultaten te krijgen omdat er een pagina is over het concert van Colin Benders: https://www.intonijmegen.com/agenda/agenda-overzicht/875577845/colin-benders. Het zoekresultaat geeft 0 resultaten bij deze zoekopdracht.

Dit geldt ook als ik via de zoekfunctie zoek op "theaterdialogen". Ik krijg geen resultaten terwijl er wel een workshop was: https://www.intonijmegen.com/agenda/agenda-overzicht/1019175746/workshop-theaterdialogen-schrijven-16

Bovenstaande zoekopdrachten zijn lastig te vinden via de navigatie die wordt aangeboden via het menu.

Als tweede manier naast sitenavigatie mag ook een sitemap aangeboden worden.

1. In de footer staat een kop "Snel naar". Dit zegt niets over de content die onder de kop staat. Het is beter deze kop te vervangen door bijvoorbeeld "Populaire pagina's" of een andere kop die duidelijk maakt welke links daar gebundeld staan.

2. In het formulier op pagina https://www.intonijmegen.com/evenementen-aanmeldformulier, moet verplicht een afbeelding toe worden gevoegd. Het is niet duidelijk wat dit voor een afbeelding moet zijn. Het advies om bij de "Let op" tekst toe te voegen wat verwacht wordt. Het label op de knop "Kies een foto" kan beter aangepast worden naar "Kies een afbeelding".

3. In het formulier op pagina https://www.intonijmegen.com/start-in-nijmegen/studeren/verenigingen/nijmeegse-studentenverenigingen moeten meerdere foto's worden toegevoegd. Omdat er maar 1 foto per knop kan worden toegevoegd is het advies niet de meervoudsvorm "foto's" te gebruiken maar per uploadmogelijkheid het label "Foto 1 van de vereniging", "Foto 2 van de vereniging", "Foto 3 van de vereniging" te gebruiken.

1. Als je met het toetsenbord navigeert, ga je na de knop van het menu, meteen door naar de menu-items, zonder dat voor is gekozen het menu te openen. De focus komt dus te liggen op onzichtbare items.

2. In de footer is de focusindicator niet zichtbaar bij de afbeeldingen van bijvoorbeeld de socials omdat de kleur van de focusindicator nagenoeg identiek is aan de achtergrondkleur. De focusindicator zou hier beter een witte kleur hebben.

3. Op pagina https://www.intonijmegen.com/ontdek-nijmegen/old-city-young-vibe is de focus niet goed zichtbaar rond de knop om de video te starten. Dit geldt ook voor de knop om de video te starten bij het item "Cultuur snuiven".

Het logo op elke pagina fungeert als link. Dit logo bevat de tekst "Nijmegen, old city young vibe". Dit betekent dat de tekst terug moet komen in de toegankelijkheidsnaam van de link. Dat is nu niet het geval.(Uitleg: de toegankelijkheidsnaam is de tekst die door hulpsoftware gebruikt wordt om terug te geven aan de gebruiker waarmee duidelijk wordt wat de functie is van een interactief element.)

De toegankelijkheidsnaam van de link bevat nu alleen de tekst uit het title attribuut van de link en dat is "Into Nijmegen". Dit kan eenvoudig opgelost worden door de tekst "Nijmegen old city young vibe" op te nemen in de alternatieve tekst van de afbeelding. Deze tekst wordt dan ook deel van de linktekst die de toegankelijkheidsnaam bepaalt. Het probleem is nu dat iemand die spraakbedieningssoftware gebruikt niet de link kan activeren door de zichtbare tekst te gebruiken in het spraakcommando. Deze tekst komt namelijk niet terug in de toegankelijkheidsnaam van de link.

1. Op pagina https://www.intonijmegen.com/ontdek-nijmegen/old-city-young-vibe is voor de tekst "Old City, Young Vibe" geen taalwisseling ingesteld met behulp van HTML-code (lang="en).Voor gebruikers met voorleessoftware zal deze zinsnede steeds met een Nederlands accent uitgesproken worden.

2. De buttons voor het bedienen van de sliders op de homepage hebben Engelse labels; "Go to slide..."Het advies is om deze te vertalen naar het Nederlands of door middel van lang="en" een taalwissel te forceren zodat de tekst goed wordt voorgelezen voor hulpsoftware. Het advies is alle interactieve componenten te controleren op taal.

Bij de uitagenda op pagina https://www.intonijmegen.com/agenda/ staan filteropties bij het zoekveld. Boven het zoekveld staan bijvoorbeeld "Vandaag", "Morgen", enz. In de code blijkt dat dit radio-buttons zijn. Als de focus via het toetsenbord op "Vandaag" komt te staan, en je wilt met de pijltjestoets naar de optie "Morgen" gaan, laadt de pagina meteen opnieuw met de gekozen optie. De focus verschijnt vervolgens weer helemaal bovenaan de pagina. Hetzelfde geldt voor de opties onder het zoekveld. Ook dit zijn eigenlijk radio-buttons en kunnen ook als zodanig bediend worden. Ook dan treedt een contextwijziging op.

De navigatie op de website intonijmegen.com is visueel consistent. Het menu ziet er op iedere pagina hetzelfde uit maar als mensen met het toetsenbord door dit menu navigeren gaat het mis, maar dat hoort bij de opmerkingen bij succescriteria 2.4.3 en 2.4.7

Het advies is na te kijken wat er gebeurt in de browser Chrome als pagina's langer actief staan. Het icoontje met het loepje om te zoeken, krijgt dan een vreemd teken: ï,,3. Dit geldt ook voor de navigatiepijltjes naar links of rechts bij het overzicht van de blogs.In andere browsers speelt dit probleem niet.

Als een formulierveld niet is ingevuld komt er onder het veld te staan: "Deze waarde mag niet leeg zijn". Voor mensen die gebruik maken van hulpsoftware, moet duidelijk worden wat "Deze waarde" dan betekent. Voorbeeld hoe het beter kan: "Het veld e-mailadres is niet ingevuld"

1. In de footer staat een miniformulier met een <input> veld. Er ontbreekt een zichtbaar tekstlabel (in een label-element). Een placeholder die weer verdwijnt, maakt het lastig voor mensen met bijvoorbeeld een cognitieve beperking om te onthouden wat er ingevuld moet worden. Een zichtbaar label is de oplossing.

2. Bij de formulieren op pagina's https://www.intonijmegen.com/start-in-nijmegen/studeren/verenigingen/nijmeegse-studentenverenigingen en https://www.intonijmegen.com/evenementen-aanmeldformulier staan bij de verplichte velden een *.Dit is niet voldoende om aan te geven dat dit veld een verplicht veld is. Bovenaan het formulier moet aangegeven worden wat de betekenis is van *. Een andere oplossing is dit te vermelden in het label van het verplichte veld. Bijvoorbeeld: E-mailadres (verplicht veld)

1. Op de homepage wordt in de code een <button> element niet afgesloten met </button> maar met alleen />. Dit komt voor op regel 1225

2. Op regel 1226 staat een </form> element zonder dat een <form> gevonden is

3. Als bij zoeken het woord "nieuws" wordt ingevuld laat de code tweemaal id="query" zien. Per pagina moet een id uniek zijn.

1. De knop om het menu te openen heeft een goede naam, rol en waarde, maar als het menu geopend is en het X teken verschijnt dan wordt geen informatie meegegeven over de rol van dit element.Zie ook de opmerking bij succescriterium 1.1.1. Hulpsoftware kan de status niet bepalen van de knop. Dit kan opgelost worden door middel van Javascript die de waarde van aria-expanded aanpast.

2. Het invoerveld in de footer om je in te schrijven voor de nieuwsbrief heeft geen naam -> het label ontbreekt. Hierdoor kan hulpsoftware de toegankelijkheidsnaam niet bepalen waardoor het onduidelijk is welke informatie ingevuld moet worden.

3. Op meerdere pagina's kunnen video's afgespeeld worden. Bijvoorbeeld op pagina https://www.intonijmegen.com/ontdek-nijmegen/old-city-young-vibe. Hier staat een 'play' knop. Dit is een button element, maar zonder toegankelijkheidsnaam. Het button element heeft geen tekst binnen het element staan en heeft ook geen title attribuut of aria-label om een toegankelijkheidsnaam toe te voegen. Deze knop wordt bij meer video's gebruikt en heeft overal hetzelfde probleem.

4. Op pagina https://www.intonijmegen.com/ontdek-nijmegen/highlights/walkofthetown staat een afbeelding van een routekaart. De kaart valt onder een uitzondering, maar de kaart is wel interactief en fungeert als link naar een vergroting. Hulpsoftware kan geen toegankelijkheidsnaam van deze link bepalen (zie ook SC 2.4.4).

5. Het logo dat op iedere pagina terugkomt fungeert als link. Voor hulpsoftware ontbreekt de toegankelijkheidsnaam voor de link. Zie ook punt 1.1.1 en 2.4.4

6. Op pagina https://www.intonijmegen.com/agenda/agenda-overzicht staan een aantal filters, zoals "Vandaag", "Morgen", enz. In de HTML code staat voor de optie "Vandaag" nog een input element met id="calendar-period-all". Deze wordt gezien door hulpsoftware en moet dus ook een toegankelijkheidsnaam hebben. Deze ontbreekt nu echter.

Als op pagina https://www.intonijmegen.com/evenementen-aanmeldformulier het formulier verzonden wordt zonder iets in te vullen komt er bij ieder invulveld een statusbericht: "Deze waarde mag niet leeg zijn". Bij statusberichten moet het zo zijn dat de focus ook bij het veld terecht komt waar de status bij hoort zodat mensen met hulpsoftware weten dat het statusbericht hoort bij een invulveld waarmee nog iets moet gebeuren. Dit wordt over het algemeen gedaan door een koppeling te leggen tussen het statusbericht en het invulveld (via for="xxx" en id="xxx"). Bovendien met het statusbericht ook de rol meekrijgen van statusbericht en dat is hier niet gebeurd. Hulpsoftware kan nu niets met deze statusberichten. Het advies is om aan deze berichten een aria-live="polite" mee te geven.