WCAG 2.1 AA onderzoek -versie 1.0
| Onderzoeker | Opdrachtgever | Onderzochte website | Onderzoeksdatum |
|---|---|---|---|
| Els Groffen | Gemeente Nijmegen | intonijmegen.com | 30 mei 2022 |
Gemeente Nijmegen vindt het belangrijk dat iedereen digitale informatie kan lezen:
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:
Dit rapport beschrijft of de website https://www.intonijmegen.com/ voldoet aan deze 4 principes. Elk principe wordt beoordeeld op verschillende voorwaarden (succescriteria).
Het onderzoek naar de toegankelijkheid van https://www.intonijmegen.com/ is volgens de inspectiemethode WCAG-EM uitgevoerd en afgerond op 30 mei 2022. Van de 50 succescriteria waaraan voldaan moet worden volgens de Europese toegankelijkheidsnorm EN 301 549 (deze omvat de WCAG 2.1 niveau A + AA succescriteria), zijn 20 succescriteria voldoende of niet van toepassing. Het onderzoek laat zien dat er 30 succescriteria zijn die onvoldoende zijn. Dit betekent dat de website https://www.intonijmegen.com/ helaas nog niet voldoet aan de huidige toegankelijkheidseisen.
Veel van de problemen kunnen door de leverancier opgelost worden door aanpassingen te doen in het CSS. Hiermee kan bijvoorbeeld het contrast tussen kleuren aangepast worden zodat teksten beter leesbaar worden door mensen met een visuele beperking. Een ander voorbeeld is dat interactieve componenten niet altijd een zichtbare focus krijgen, ook dit is eenvoudig aan te passen in het CSS.Ook zal gekeken moeten worden naar het navigeren op de website met het toetsenbord. Er is een skiplink ingebouwd, maar die gaat visueel nergens naartoe. Klikt men vervolgens door met de TAB-toets, dan komt de focus op de items van het menu terecht die op dat moment niet zichtbaar zijn omdat het menu is gesloten.
In dit rapport worden voorbeelden gegeven van aangetroffen problemen. Dit betekent dat we hiermee niet álle problemen benoemen. Het kan zijn dat een soort probleem op meer plaatsen binnen de website voorkomt. Aan de andere kant is het het onderzoek gebaseerd op een steekproef. Het kan dus zijn dat er op niet gecontroleerde pagina's andere problemen voorkomen.
De website zal toegankelijker worden als de issues besproken in dit rapport, worden opgelost. Een eventueel heronderzoek kan het vervolg zijn in het proces naar volledige toegankelijkheid.
Into Nijmegen
Alle pagina's op https://www.intonijmegen.com/ (URI-basis)
Wettelijke uitzondering voor de overheid:
2.1
AA
WCAG-EM
Standaard webbrowsers en hulpapparatuur
Onderstaande tabel laat zien aan hoeveel voorwaarden (succescriteria) de website op dit moment voldoet.
| Voldoende | Onvoldoende | Niet aanwezig / Niet van toepassing |
|---|---|---|
| 14 | 30 | 6 |
Informatie en componenten van de gebruikersinterface moeten toonbaar zijn aan gebruikers op voor hen waarneembare wijze.
Alle niet-tekstuele content die aan de gebruiker wordt gepresenteerd, heeft een tekstalternatief dat een gelijkwaardig doel dient, behalve voor de hierna vermelde situaties.
Tekstalternatieven zijn een belangrijke manier om informatie toegankelijk te maken. Hulpsoftware maakt informatie via tekstalternatieven voor verschillende zintuigen waarneembaar. Bijvoorbeeld door tekst te kunnen zien, voorgelezen te krijgen of via braille te kunnen lezen.
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:
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.
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.
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.
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>
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.
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.
Voor media met vooraf opgenomen louter-geluid en vooraf opgenomen louter-videobeeld is het volgende waar, behalve als de audio of video een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld:
Deze voorwaarde gaat over alles wat alléén geluid is (bijvoorbeeld een podcast) of alléén videobeeld (bijvoorbeeld een animatie zonder geluid). Het gaat niet om live geluid of live video. Er moet een andere mogelijkheid zijn die dezelfde informatie geeft.
Er worden ondertitels voor doven en slechthorenden geleverd voor alle vooraf opgenomen audiocontent in gesynchroniseerde media, behalve als het mediabestand een meia-alternatief voor tekst is en duidelijk als zodanig is gelabeld.
Deze voorwaarde zorgt dat mensen die doof of slechthorend zijn, video’s kunnen bekijken en volgen. Door ondertitels aan te bieden, is alle belangrijke informatie ook te lezen.
Er wordt een alternatief geleverd voor op tijd gebaseerde media of audiodescriptie van de vooraf opgenomen video-content voor gesynchroniseerde media, behalve als het media bestand een media-alternatief voor tekst is en duidelijk als zodanig is gelabeld.
Met deze voorwaarde geef je mensen die blind of slechtziend zijn toegang tot informatie die te zien is, bijvoorbeeld in video. Hiervoor moet een uitgeschreven tekst beschikbaar zijn met alle informatie die te zien en te horen is.
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.
Er worden ondertitels voor doven en slechthorenden geleverd voor alle live audiocontent in gesynchroniseerde media
Voor alle gesproken tekst en andere belangrijke geluiden in een live video moet je ondertiteling aanbieden.
Dit succescriterium maakt het mogelijk voor mensen die doof of slechthorend zijn, om live (realtime) media of presentaties te bekijken en volgen. Met het aanbieden van ondertiteling is alle auditieve informatie in de livestream als leesbare tekst beschikbaar.
Er wordt audiodescriptie geleverd voor alle vooraf opgenomen videoontent in gesynchroniseerde media.
Voldoen aan deze voorwaarde zorgt dat mensen die blind of slechtziend zijn toegang krijgen tot informatie die te zien is in video’s. Deze voorwaarde is hetzelfde als voorwaarde 1.2.3. Maar omdat deze van niveau AA is, gaan de eisen nog wat verder. Een extra eis is het aanbieden van audiodescriptie met alle belangrijke informatie die te zien is.
Bij audiodescriptie beschrijft een stem tussen de dialogen door wat er in beeld te zien is. Denk aan gezichtsuitdrukkingen, omschrijving van de plaats en ontwikkelingen in de verhaallijn of wedstrijd.
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.
Informatie, structuur en relaties overgebracht door presentatie kunnen door software bepaald worden of zijn beschikbaar in tekst.
Voor deze voorwaarde moet informatie en opbouw van pagina-onderdelen in de code van de webpagina staan. Ook moet in de code staan hoe de onderdelen met elkaar te maken hebben (relatie). De informatie, opbouw en relatie van de onderdelen mag niet alleen duidelijk zijn via de vormgeving.
Voorbeeld: als een kop boven een alinea dik gedrukt is, is het voor iemand die goed kan zien duidelijk dat het een kop is. Iemand die hulpsofware gebruikt, moet die tekst ook als kop kunnen herkennen in de code (H1, H2 etc).
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 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.
Als de volgorde waarin content wordt gepresenteerd van invloed is op zijn betekenis, kan een correcte leesvolgorde door software bepaald worden.
Doel van deze voorwaarde is dat een logische volgorde die te zien is op een webpagina, ook in de code van de pagina staat. Dit gaat over situaties waarin de volgorde van de inhoud op een pagina invloed heeft op de betekenis. Bijvoorbeeld bij het beschrijven van recepten.
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.
Instructies die geleverd worden om content te begrijpen en te bedienen, zijn niet alleen afhankelijk van zintuiglijke eigenschappen van componenten als vorm, kleur, omvang, visuele locatie, oriëntatie of geluid.
Deze voorwaarde zorgt ervoor dat iedereen instructies heeft om de inhoud van de pagina te gebruiken. Ook als de websitebezoeker geen vorm, grootte en plaats op het scherm kan zien of geluid kan horen. Voorbeeld waarbij het fout gaat: "Klik op de rode knop links op het scherm".
De content beperkt de weergave en bediening niet tot een enkele presentatie-oriëntatie, zoals staand of liggend, tenzij een specifieke presentatie-oriëntatie essentieel is.
Doel van deze voorwaarde: ervoor zorgen dat inhoud zichtbaar is in de richting (staand of liggend) die de gebruiker het liefst heeft. Denk hierbij aan mensen in een rolstoel die bijvoorbeeld hun tablet vast hebben staan in een houder. Zij kunnen de richting van de tablet niet aanpassen.
Het doel van elk invoerveld waarmee informatie van de gebruiker wordt verzameld, kan door software bepaald worden wanneer:
Deze voorwaarde richt zich op het makkelijker invullen van online formulieren. Voldoen aan deze voorwaarde zorgt dat software invoervelden automatisch kan invullen. Dit helpt vooral gebruikers met een motorische of cognitieve beperking. Bijvoorbeeld mensen die hun armen niet (goed) kunnen gebruiken of moeite hebben met concentratie of het geheugen. Deze voorwaarde helpt ook mensen met een taalachterstand.
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.
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.
In de footer kun je je inschrijven voor de nieuwsbrief. Ook in dit mini-formulier ontbreekt het autocomplete-attribuut bij het inputveld.
Kleur wordt niet als het enige visuele middel gebruikt om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden.
Om informatie over te brengen mag niet alleen kleur gebruikt worden. Mensen met een visuele beperking zoals kleurenblindheid, missen dan informatie.
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.
Als een geluidsweergave op een webpagina automatisch meer dan 3 seconden speelt, is er of een mechanisme beschikbaar om de geluidsweergave te pauzeren of te stoppen, of er is een mechanisme beschikbaar om het geluidsvolume onafhankelijk van het overall systeemvolume te regelen.
Deze voorwaarde zorgt ervoor dat gebruikers van voorleessoftware geen last hebben van geluid op een webpagina.
De visuele weergave van tekst en afbeeldingen van tekst heeft een contrastverhouding van tenminste 4,5:1, behalve in de volgende gevallen:
Door deze voorwaarde kunnen mensen die minder goed kunnen zien makkelijker teksten lezen.
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.
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.
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.
Als tekst niet vergroot kan worden, kunnen slechtziende mensen de tekst misschien niet goed lezen. Ook kunnen zij informatie missen als tekst wegvalt bij het inzoomen tot 200%.
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.
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.
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.
In de footer valt de tekst "Hoe anderen Nijmegen hebben beleefd" weg en blijft alleen het icoontje van het uiltje over.
Als de gebruikte technologieën de visuele weergave tot stand kunnen brengen, wordt tekst gebruikt in plaats van afbeeldingen van tekst om informatie over te brengen behalve in de volgende gevallen:
Mensen met dyslexie of mensen die minder goed kunnen zien, moeten tekst kunnen aanpassen zoals zij het het liefst willen zien.
Content kan zonder verlies van informatie of functionaliteit en zonder te moeten scrollen in twee dimensies, worden weergegeven voor:
Met uitzondering van delen van de content die voor het gebruik of de betekenis een tweedimensionale lay-out vereisen.
De bedoeling van deze voorwaarde is om mensen te helpen die slecht kunnen zien. Wanneer zij tekst vergroten, is het handig als ze het kunnen lezen in 1 kolom en ze niet horizontaal moeten scrollen.
Getest met een schermbreedte van 1280 pixels + inzoomen naar 400%.
In de header verdwijnt de alineatekst die op de sliders staat.
Het menu blijft permanent in beeld waardoor deze over de tekst van de pagina komt te liggen en niet altijd leesbaar is.
Als het menu open wordt geklikt, verdwijnen de links die het menu moeten vormen, het menu is dus niet bruikbaar.
Daar waar teksten in kolommen staan, ontbreken navigatiepijlen om van de ene naar andere kolom te gaan.
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.
De visuele weergave van het volgende heeft een contrastverhouding van tenminste 3:1 ten opzichte van aangrenzende kleuren:
Dit succescriterium gaat ook over het contrast van de toetsenbordfocus als deze is aangepast met CSS. Als dit succescriterium niet goed wordt toegepast hebben mensen met een visuele beperking problemen met het doorlopen van de website omdat zij niet kunnen zien waar de ze zich bevinden op de website. In mindere mate zullen ook mensen met een cognitieve beperking en mensen die gebruik maken van alleen het toetsenbord om te navigeren, informatie kunnen missen.
Deze buttons worden bij meer sliders gebruikt. Zie bijvoorbeeld ook pagina https://www.intonijmegen.com/ontdek-nijmegen/highlights/walkofthetown.
Ook in de footer is er nauwelijks onderscheid te zien tussen de focusindicator en de achtergrond.
Bij content die wordt geïmplementeerd met opmaaktalen die de volgende stijleigenschappen voor tekst ondersteunen, is er geen sprake van verlies van content of functionaliteit door het instellen van alle volgende, en door het niet wijzigen van andere stijleigenschappen:
Uitzondering: Menselijke talen en scripts die geen gebruik maken van een of meer van deze eigenschappen voor tekststijl in schriftelijke tekst, kunnen voldoen aan de eisen door alleen gebruik te maken van de eigenschappen die bestaan voor de betreffende combinatie van taal en script.
Met de toepassing van dit succescriterium zorg je ervoor dat mensen de tekstafstand kunnen aanpassen om beter te kunnen lezen. Bijvoorbeeld door de afstand tussen regels of alinea's te vergroten of letters en woorden te vergroten.
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"
De koppen onder "Verhalen uit Nijmegen" missen een vierde regel.
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.
Wanneer aanvullende content zichtbaar wordt en daarna weer verborgen, door het gebruik van hover met de aanwijzer of focus met het toetsenbord, gelden de volgende zaken:
Uitzondering: de visuele weergave van de aanvullende content wordt beheerd door de user agent en wordt niet aangepast door de auteur.
Door toepassing van dit succescriterium kunnen mensen met een visuele beperking de content goed bekijken als zij met de muis over een tekst gaan of als een element de focus krijgt. Zij hebben ook voldoende tijd om de informatie te lezen.
Componenten van de gebruikersinterface moeten bedienbaar zijn.
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.
Alles moet bedienbaar zijn met het toetsenbord of vergelijkbare hulpapparatuur. Dit is belangrijk voor mensen met een visuele beperking, die alleen het toetsenbord moeten en geen muis. Ook mensen met een motorische beperking gebruiken soms een (alternatief) toetsenbord.
Als het menu is geopend, kunnen de submenu's niet met het toetsenbord benaderd worden.
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.
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.
Als de toetsenbordfocus met de toetsenbordinterface verplaatst kan worden naar een component van de pagina, dan kan de focus ook met alleen de toetsenbordinterface weer van dat component weg worden bewogen. En, als er meer nodig is dan de standaard pijl- of tabtoetsen of andere standaard methoden om de focus te verplaatsen, dan wordt de gebruiker geïnformeerd over de manier waarop de focus kan worden verplaatst.
Het doel van dit succescriterium is voorkomen dat mensen die alleen het toetsenbord gebruiken, vastlopen op een webpagina.
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:
Dit succescriterium wordt steeds belangrijker voor mobiele telefoons, omdat een groeiend aantal apps toetsenbordbediening vollediger mogelijk maakt. Foutief gebruik van dit succescriterium kan er voor zorgen dat mensen die spraaksoftware gebruiken per ongeluk iets kunnen activeren. Ook mensen die alleen het toetsenbord gebruiken bij een gewone desktop kunnen per ongeluk iets activeren.
Voor elke tijdslimiet die door de content wordt ingesteld, geldt ten minste één van de volgende zaken:
De bedoeling van dit succescriterium is dat alle gebruikers genoeg tijd krijgen om gebruik te maken van een website.
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.
Voor alle bewegende, knipperende, scrollende of automatisch actualiserende informatie gelden alle volgende zaken:
Het toepassen van dit succescriterium voorkomt dat bezoekers worden afgeleid tijdens het lezen of gebruiken van de webpagina. Alles wat automatisch beweegt op een website moet je op pauze kunnen zetten, stoppen of verbergen.
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.
Webpagina's bevatten niets wat meer dan drie keer flitst in enige periode van één seconde of de flits is beneden de algemene flits- en rodeflitsdrempelwaarden.
Dit succescriterium is belangrijk voor de groep van mensen met eplilepsie die ook gevoelig is voor lichtflitsen. Zij kunnen een aanval krijgen van epilepsie als iets meer dan drie keer flitst binnen een seconde.
Er is een mechanisme beschikbaar om blokken content die op meerdere webpagina's worden herhaald te omzeilen.
Voor mensen die blind zijn en mensen die alleen het toetsenbord gebruiken, is het heel vervelend om steeds weer opnieuw door terugkerende content te navigeren.
Met terugkerende content bedoelen we bijvoorbeeld het logo, het zoekveld, het servicemenu, het hoofdmenu of submenu aan de linkerkant van de pagina. Eigenlijk alles wat bovenaan de pagina staat, en terugkeert op iedere pagina van de website. Deze informatie moeten gebruikers kunnen overslaan.
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".
Webpagina's hebben titels die het onderwerp of doel beschrijven.
Met dit succescriterium help je gebruikers om (de juiste) content te vinden. Door te zorgen dat elke webpagina een duidelijke en beschrijvende titel heeft, kunnen mensen zich beter oriënteren op de website. PDF bestanden die in de browser worden geopend moeten ook een beschrijvende titel hebben.
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 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.
Het doel van dit succescriterium is dat de volgorde van de focus op de site juist en logisch is. Dit is van belang voor mensen die het toetsenbord gebruiken om te navigeren op de website.
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.
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.
Met het toepassen van dit succescriterium zorg je ervoor dat het doel van elke link duidelijk is.
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.
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).
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.
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.
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.
Op pagina https://www.intonijmegen.com/contact staat nog een link "Lees verder" onder de koptekst "Pers & media". Ook deze linktekst is niet duidelijk.
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.
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.
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".
Er is meer dan één manier beschikbaar om een webpagina binnen een verzameling webpagina's te vinden, behalve wanneer de webpagina het resultaat is van, of een stap in, een proces.
Mensen met een visuele of coginitieve beperking hebben baat bij dit succescriterium omdat er verschillende manieren worden aangeboden om door de website te navigeren.
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.
Koppen en labels beschrijven het onderwerp of doel.
De bedoeling van dit succescriterium is om gebruikers te helpen begrijpen welke informatie webpagina’s bevatten en hoe die informatie wordt gepresenteerd. Als koppen duidelijk en beschrijvend zijn, kunnen gebruikers makkelijker de gezochte informatie vinden. De relaties tussen verschillende onderdelen van de content wordt daarmee ook makkelijker te begrijpen.
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.
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".
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.
Elke gebruikersinterfacs die met het toetsenbord te bedienen is, heeft een bedieningswijze waarbij de indicator van de toetsenbordfocus zichtbaar is.
Het doel van dit succescriterium is dat een gebruiker kan zien welk element op de webpagina de focus heeft. Dit is van belang voor mensen die het toetsenbord gebruiken om een webpagina te bedienen en wel het scherm kunnen zien (bijvoorbeeld mensen met een motorische beperking).
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.
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.
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".
Alle functionaliteit waarmee bij de bediening gebruik wordt gemaakt van meerpunts- of padgebaseerde gebaren, kan worden bediend met een enkele aanwijzer zonder een padgebaseerd gebaar, tenzij een meerpunts- of padgebaseerd gebaar essentieel is.
De bedoeling van dit succescriterium is ervoor te zorgen dat inhoud kan worden bediend met eenvoudige invoer op alle mogelijke apparaten (tablets, mobiele telefoons, touchscreens, enz.) en met verschillende hulpapparatuur.
Voor functionaliteit die kan worden bediend met een enkele aanwijzer, geldt ten minste één van de volgende zaken:
De bedoeling van dit succescriterium is om het voor gebruikers makkelijker te maken om toevallige of foute muisbewegingen te voorkomen.
Bij componenten van de gebruikersinterface met labels die tekst of afbeeldingen van tekst bevatten, bevat de naam de tekst die visueel wordt weergegeven.
De bedoeling van dit succescriterium is ervoor te zorgen dat mensen met een handicap die op visuele teksten vertrouwen, deze teksten ook met hulpsoftware kunnen gebruiken. Elementen op de website worden vaak voorzien van zichtbare tekst zoals de naam van een formulierveld. In de code hebben deze elementen ook een programmatisch label; de ‘Accessible Name’. Dit label wordt gebruikt om voor te lezen bij gebruikers met hulpsoftware. Het is van belang dat de zichtbare tekstlabels van besturingselementen, overeenkomen met hun toegankelijke namen.
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.
Functionaliteit die kan worden bediend door de beweging van een apparaat of beweging van een gebruiker, kan ook worden bediend met componenten van de gebruikersinterface. De reactie op de beweging kan worden uitgeschakeld om onbedoelde activering te voorkomen, behalve wanneer:
Dit succescriterium is van toepassing op functies die worden geactiveerd door een apparaat te verplaatsen (bv. schudden of kantelen) of door naar het apparaat te gebaren. De bedoeling is dat deze functies ook bediend kunnen worden met reguliere interface componenten voor gebruikers.
Informatie en bediening van de gebruikersinterfacs moeten begrijpelijk zijn.
De standaard menselijke taal van diverse webpagina's kan door software bepaald worden.
Als je dit succescriterium toepast krijgen mensen die gebruik maken van spraaksoftware de tekst in de juiste taal voorgelezen. Dit succescriterium geldt ook voor PDF bestanden.
De menselijke taal van elke passage of zin in de content kan door software bepaald worden, behalve waar het gaat om eigennamen, technische termen, woorden uit een onbepaalde taal en woorden of zinsdelen die deel zijn gaan uitmaken van het jargon van de onmiddellijk omringende tekst.
Als de taal van de pagina is ingesteld op Nederlands en een deel van de tekst is in een andere taal, dan moet een zogenaamde taalswitch in de code worden aangebracht. Mensen die gebruik maken van voorleessoftware krijgen dan het stuk tekst ook in de juiste taal voorgelezen. Dit moet ook worden toegepast in PDF bestanden.
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.
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.
Als een component van de gebruikersinterface de focus krijgt, dan veroorzaakt dat geen contextwijziging.
Het doel van dit succescriterium is dat er geen onverwachte dingen plaatsvinden wanneer een gebruiker door de webpagina navigeert. Dit is belangrijk voor blinde mensen en mensen met een motorische beperking, die alleen het toetsenbord gebruiken. Ook voor mensen die een schermvergroter gebruiken, of voor mensen met een cognitieve beperking is het van belang.
Verandering van de instelling van een component van de gebruikersinterface veroorzaakt niet automatisch een contextwijziging, tenzij de gebruiker geïnformeerd is over het gedrag vóór het gebruik van de component.
Pas je dit succescriterium toe, dan zorg je ervoor dat het invoeren van gegevens of het selecteren van een bedieningselement voorspelbare gevolgen heeft. Met name mensen met een visuele beperking hebben hier baat bij.
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.
Navigatiemechanismen, die op meerdere webpagina's binnen een verzameling webpagina's herhaald worden, komen elke keer dat ze worden herhaald in dezelfde relatieve volgorde voor, tenzij een verandering wordt geïnitieerd door de gebruiker.
De bedoeling van dit succescriterium is om gebruikers te ondersteunen bij het navigeren op verschillende webpagina’s van een website. Mensen die slechtziend zijn en door middel van vergroting slechts een (klein) deel van de pagina zien kunnen bij toepassing beter voorspellen waar ze heen moeten scrollen. Ook mensen met een cognitieve beperking hebben baat bij goede toepassing van dit succescriterium.
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
Componenten die dezelfde functionaliteit hebben binnen een verzameling webpagina's worden consistent geïdentificeerd.
De bedoeling van dit succescriterium is dat componenten die steeds terugkeren op verschillende pagina's binnen een website ook dezelfde functionaliteit hebben. Denk aan tekstuele links, grafische links, JavaScript objecten, formulierknoppen, enz. Mensen die een screenreader gebruiken of een cognitieve beperking hebben hier baat bij omdat het met name voor deze groep fijn is dat terugkerende functies zoals bijvoorbeeld een zoekfunctie op iedere webpagina op dezelfde plaats staat.
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 invoerfout automatisch ontdekt wordt, dan wordt het onderdeel waar de fout zit geïdentificeerd en wordt de fout tekstueel aan de gebruiker meegedeeld.
Dit succescriterium zorgt ervoor dat het invoeren van gegevens of het selecteren van een bedieningselement voorspelbare gevolgen heeft.
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"
Als de content gebruikersinvoer vereist, dan worden labels of instructies geleverd.
De bedoeling van dit succescriterium is dat, als er een handeling van de gebruiker nodig is, er een label of instructie staat. Dit gaat om de tekst op knoppen en om de tekst bij formulier-invoervelden. Goed toegepast is het duidelijk voor de gebruiker wat een knop doet, of wat hij in moet vullen in een formulier.
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.
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)
Als een invoerfout automatisch ontdekt wordt en suggesties voor verbetering bekend zijn, dan worden de suggesties aan de gebruiker geleverd, tenzij dit de beveiliging of het doel van de content in gevaar zou brengen.
Met dit succescriterium maak je gebruikers duidelijk hoe ze een gemaakte fout in een formulier op kunnen lossen. Dit kan door een voorstel te doen hoe het formulierveld ingevuld moet worden. Mensen met een cognitieve beperking of mensen die blind zijn vinden het soms lastig om te begrijpen hoe ze een fout kunnen corrigeren. Een duidelijk voorstel kan daarbij helpen.
Voor webpagina's die wettelijke verplichtingen of financiële transacties voor de gebruiker uitvoeren, die, door gebruikers bedienbaar gegevens in gegevensopslagplaatsen verwijderen of wijzigen, of die antwoorden van de gebruiker verzenden, geldt ten minste één van de volgende zaken:
De bedoeling van dit succescriterium is voorkomen dat er, door het verzenden van een formulier, een actie wordt uitgevoerd die grote gevolgen kan hebben voor de gebruiker als deze niet op dat moment kan worden teruggedraaid.
Content moet voldoende robuust zijn om betrouwbaar geïnterpreteerd te kunnen worden door een breed scala van user agents, met inbegrip van hulptechnologiën.
In content die geïmplementeerd is met opmaaktalen hebben elementen volledige begin- en eindtags, zijn elementen genest volgens hun specificatie, bevatten elementen geen dubbele attributen en zijn alle ID's uniek, behalve waar de specificatie deze eigenschappen toelaat.
Het gaat hier om programmeerfouten in de code van de website. De meeste browsers zullen deze er wel uit filteren, maar hulpsoftware is vaak zo ver nog niet. Mensen die gebruik maken van hulpsoftware kunnen problemen ondervinden als de code niet goed is ingericht. Het kan er zelfs toe leiden dat de hulpsoftware vastloopt.
Op de homepage wordt in de code een <button> element niet afgesloten met </button> maar met alleen />. Dit komt voor op regel 1225
Op regel 1226 staat een </form> element zonder dat een <form> gevonden is
Als bij zoeken het woord "nieuws" wordt ingevuld laat de code tweemaal id="query" zien. Per pagina moet een id uniek zijn.
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.
Het doel van dit succescriterium is dat voor alle interactieve elementen, de naam en de rol (en eventueel andere eigenschappen), bepaald kunnen worden door hulpsoftware. Het gaat om elementen zoals links, knoppen, formuliervelden, enz. Als er geen goede informatie is over de naam, rol en waarde van een component kan dit gevolgen hebben voor de werking van hulpsoftware.
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.
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.
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.
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).
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
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.
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.
De bedoeling van dit succescriteriumg is ervoor te zorgen dat de rol of eigenschappen van statusberichten in de code is vastgelegd op een manier dat het werk van de gebruiker niet onnodig onderbroken wordt.
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.