WCAG 2.1 inspectie niveau AAA voor jscu.summerschool.sh ======================================================= Datum: 17 mei 2023 Uitvoerder: zelfrapportage De website is geschikt voor alle gangbare browsers en hulpapparatuur. Aan alle eisen van de WCAG2.1-A-standaard is voldaan. Aan niet alle eisen van de WCAG2.1-AA-standaard is voldaan. Aan niet alle eisen van de WCAG2.1-AAA-standaard is voldaan. Scope van het onderzoek ----------------------- * De webpagina https://jscu.summerschool.sh, waaronder: - de opdrachtbeschrijvingen bij alle challenges. * Niet de bestandsinhoud van downloads bij challenges. (Om deze puzzels op te lossen zullen potentiële deelnemers de downloads moeten analyseren met een verscheidenheid aan programma's. Het aanbieden van een meer toegankelijk alternatief gaat het doel voorbij van een puzzel.) De volgende pagina's maken deel uit van de steekproef: * https://jscu.summerschool.sh/ Dit is tevens de enige pagina op de website. Inspectiemethode ---------------- Dit onderzoek is handmatig uitgevoerd conform de evaluatiemethode WCAG-EM. De toegepaste norm is WCAG versie 2.1: https://w3.org/Translations/WCAG21-nl/ Voor de inspectie zijn de volgende browsers en andere software gebruikt: * Firefox versie 113.0.1 * Edge versie 112.0 * Safari op iOS versie 16.4 * cURL versie 7.68 * Vim versie 8.1 * OpenSSL versie 1.1.1f * Dolphin Supernova versie 19.04 (schermlezer) Webtechnieken waar gebruik van wordt gemaakt -------------------------------------------- De site gebruikt de volgende technieken: * HTML * CSS * SVG * Javascript * DOM * WAI-ARIA Beoordeling ----------- Criterium Omschrijving Niveau Resultaat 1.1.1 Niet-tekstuele content A voldoet 1.2.1 Audio en video (vooraf opgenomen) A voldoet 1.2.2 Ondertiteling (vooraf opgenomen) A voldoet 1.2.3 Audiobeschrijving (vooraf opgenomen) A voldoet 1.2.4 Ondertiteling (live) AA voldoet 1.2.5 Audiobeschrijving (vooraf opgenomen) AA voldoet 1.2.6 Doventolk (vooraf opgenomen) AAA voldoet 1.2.7 Uitgebreide audiobeschrijving (v.o.) AAA voldoet 1.2.8 Alternatieve media (vooraf opgenomen) AAA voldoet 1.2.9 Alleen-audio alternatief AAA voldoet 1.3.1 Info en relaties A voldoet 1.3.2 Betekenisvolle volgorde A voldoet 1.3.3 Zintuigelijke eigenschappen A voldoet 1.3.4 Weergave-oriëntatie AA voldoet 1.3.5 Identificeerbaar doel van invoer AA voldoet 1.3.6 Identificeerbaar doel van UI-elementen AAA voldoet 1.4.1 Kleurgebruik A voldoet 1.4.2 Geluidsbediening A voldoet 1.4.3 Contrast (minimum) AA voldoet 1.4.4 Herschalen van tekst AA voldoet 1.4.5 Afbeeldingen van tekst AA voldoet 1.4.6 Contrast (versterkt) AAA voldoet niet 1.4.7 Geen of weinig achtergrondgeluid AAA voldoet 1.4.8 Visuele presentatie AAA voldoet 1.4.9 Afbeeldingen van tekst (geen uitz) AAA voldoet 1.4.10 Reflow AA voldoet 1.4.11 Contrast van niet-tekstuele content AA voldoet niet 1.4.12 Tekstafstand AA voldoet 1.4.13 Content bij hover of focus AA voldoet 2.1.1 Toetsenbord A voldoet 2.1.2 Geen toetsenbordval A voldoet 2.1.3 Toetsenbord (geen uitzonderingen) AAA voldoet 2.1.4 Sneltoetsen van enkel teken A voldoet 2.2.1 Timing aanpasbaar A voldoet 2.2.2 Pauzeren, stoppen, verbergen A voldoet 2.2.3 Geen timing AAA voldoet 2.2.4 Onderbrekingen AAA voldoet 2.2.5 Opnieuw authenticeren AAA voldoet 2.2.6 Timeouts AAA voldoet 2.3.1 Drie flitsen of beneden drempelwaarde A voldoet 2.3.2 Drie flitsen AAA voldoet 2.3.3 Animaties van interacties AAA voldoet 2.4.1 Blokken overslaan A voldoet 2.4.2 Paginatitel A voldoet 2.4.3 Focusvolgorde A voldoet 2.4.4 Doel van een link (in context) A voldoet 2.4.5 Meerdere manieren AA voldoet 2.4.6 Koppen en labels AA voldoet 2.4.7 Focus zichtbaar AA voldoet 2.4.8 Locatie AAA voldoet 2.4.9 Doel van een link (alleen link) AAA voldoet 2.4.10 Sectiekoppen AAA voldoet 2.5.1 Aanwijzergebaren A voldoet 2.5.2 Aanwijzerannulering A voldoet 2.5.3 Label in naam A voldoet 2.5.4 Bewegingsactivering A voldoet 2.5.5 Doelwitformaat AAA voldoet 2.5.6 Gelijktijdige invoermethoden AAA voldoet 3.1.1 Taal van de pagina A voldoet 3.1.2 Taal van gedeeltes AA voldoet 3.1.3 Ongebruikelijke woorden AAA voldoet 3.1.4 Afkortingen AAA voldoet 3.1.5 Leesniveau AAA voldoet niet 3.1.6 Uitspraak AAA voldoet 3.2.1 Voorspelbaar bij focus A voldoet 3.2.2 Voorspelbaar bij invoer A voldoet 3.2.3 Consistente navigatie A voldoet 3.2.4 Consistente identificatie A voldoet 3.2.5 Contextveranderingen op verzoek A voldoet 3.3.1 Foutidentificatie A voldoet 3.3.2 Labels of instructies A voldoet 3.3.3 Suggesties bij fouten AA voldoet 3.3.4 Foutpreventie AA voldoet 3.3.5 Hulp AAA voldoet 3.3.6 Foutpreventie (alles) AAA voldoet 4.1.1 Parsen A voldoet 4.1.2 Naam, rol, waarde A voldoet 4.1.3 Statusberichten AA voldoet Toelichting ----------- 1.1.1 Niet-tekstuele content ✅ Alle niet-decoratieve afbeeldingen hebben een alternatieve beschrijving, ofwel met een alt-tag, of met ARIA. 1.2.1 Audio en video (vooraf opgenomen) ✅ Er is geen vooraf opgenomen audio of video aanwezig op de site. 1.2.2 Ondertiteling bij audio of video voor doven en slechthorenden (vooraf opgenomen) ✅ Er is geen vooraf opgenomen audio of video aanwezig op de site. 1.2.3 Audiobeschrijving of media-alternatief (vooraf opgenomen) ✅ Er is geen vooraf opgenomen audio of video aanwezig op de site. 1.2.4 Ondertiteling bij audio of video voor doven en slechthorenden (live) ✅ Er is geen live audio of video aanwezig. 1.2.5 Audiobeschrijving (vooraf opgenomen) ✅ Er is geen vooraf opgenomen audio of video aanwezig op de site. 1.2.6 Doventolk (vooraf opgenomen) ✅ Er is geen vooraf opgenomen audio of video aanwezig op de site. 1.2.7 Uitgebreide audiobeschrijving (vooraf opgenomen) ✅ Er is geen vooraf opgenomen audio of video aanwezig op de site. 1.2.8 Alternatieve media (vooraf opgenomen) ✅ Er is geen vooraf opgenomen audio of video aanwezig op de site. 1.2.9 Alleen-audio alternatief ✅ Er is geen vooraf opgenomen audio of video aanwezig op de site. 1.3.1 Info en relaties ✅ Overal waar dat mogelijk was is gebruik gemaakt van semantische HTML-tags. Waar dat niet kon is de functie geannoteerd met het 'role'-attribute. 1.3.2 Betekenisvolle volgorde ✅ De volgorde van alle pagina-elementen is de meest logische leesvolgorde. 1.3.3 Zintuigelijke eigenschappen ✅ Er wordt nergens gebruik gemaakt van kleur om statusveranderingen aan te geven. 1.3.4 Weergave-oriëntatie ✅ De site is bruikbaar op een display van ieder formaat of vorm. 1.3.5 Identificeerbaar doel van invoervelden ✅ Er zijn geen invoervelden op de site aanwezig. 1.3.6 Identificeerbaar doel van UI-elementen ✅ Waar geen semantische tags zijn gebruikt, is functionaliteit geannoteerd met het 'role'-attribute. 1.4.1 Kleurgebruik ✅ Kleur wordt niet gebruikt om informatie over te brengen. 1.4.2 Geluidsbediening ✅ Er is geen audio aanwezig op deze site. 1.4.3 Contrast (minimum) ✅ Alle grote tekst maakt minimaal een contrast van 3:1 met de achtergrond. Alle overige tekst maakt minimaal een contrast van 4.5:1 met de achtergrond. 1.4.4 Herschalen van tekst ✅ Alle tekst kan met de standaardfunctionaliteit van de browser worden geschaald. 1.4.5 Afbeeldingen van tekst ✅ Er zijn op deze site geen afbeeldingen van tekst. 1.4.6 Contrast (versterkt) ❌ In het lichte thema voldoen de links in de navigatiebalk niet aan deze eis. Verder maakt alle grote tekst een contrast van 4.5:1, en alle overige tekst een contrast van 7:1 met de achtergrond. 1.4.7 Geen of weinig achtergrondgeluid ✅ Er is op deze site geen achtergrondgeluid. 1.4.8 Visuele presentatie ✅ Aan de criteria onder deze kop is voldaan. De voor- en achtergrondkleur kunnen worden gekozen met een schakelaartje in de navigatiebalk, dat tevens initieel reageert op de instellingen van het besturingssysteem van de bezoeker. 1.4.9 Afbeeldingen van tekst (geen uitzonderingen) ✅ Er zijn op deze site geen afbeeldingen van tekst. 1.4.10 Reflow ✅ De site is zonder verlies van informatie bruikbaar op een display van ieder formaat of vorm. 1.4.11 Contrast van niet-tekstuele content ❌ Het beeldmerkje in de navigatiebalk waarmee je terug naar de top van de pagina navigeert maakt in het lichte thema te weinig contrast. Alle andere interface-elementen en grafische objecten maken een contrast van minstens 3:1 met de achtergrond. 1.4.12 Tekstafstand ✅ De regel- en paragraafafstand is ingesteld volgens de norm. 1.4.13 Content bij hover of focus ✅ Er is een indicator die verschijnt bij het hoveren boven een visknop, maar deze duidt alleen aan dat je momenteel hovert en bevat geen content, noch enige interactie-elementen. 2.1.1 Toetsenbord ✅ Alle functionaliteit op de site is te bereiken met het toetsenbord. 2.1.2 Geen toetsenbordval ✅ Er is geen toetsenbordval op deze website. 2.1.3 Toetsenbord (geen uitzonderingen) ✅ Alle functionaliteit op de site is te bereiken met het toetsenbord. 2.1.4 Sneltoetsen ✅ Er zijn in deze website geen sneltoetsen van slechts één printbaar karakter gedefinieerd. 2.2.1 Timing aanpasbaar ✅ Afgezien van het verstrijken van de inschrijftermijn zijn er geen tijdslimieten aanwezig op deze site. 2.2.2 Pauzeren, stoppen, verbergen ✅ Er zijn animaties op de site, die kunnen worden uitgeschakeld met een schakelaartje in de navigatiebalk, dat tevens initieel reageert op de instellingen van het besturingssysteem van de bezoeker. 2.2.3 Geen timing ✅ Afgezien van het verstrijken van de inschrijftermijn zijn er geen tijdslimieten aanwezig op deze site. 2.2.4 Onderbrekingen ✅ Er zijn geen onderbrekingen op deze site. 2.2.5 Opnieuw authenticeren ✅ Er is geen authenticatie op deze site. 2.2.6 Timeouts ✅ Afgezien van het verstrijken van de inschrijftermijn zijn er geen tijdslimieten aanwezig op deze site. 2.3.1 Drie flitsen of beneden drempelwaarde ✅ Er zijn geen acties die mogelijk flitsen veroorzaken. 2.3.2 Drie flitsen ✅ Er zijn geen acties die mogelijk flitsen veroorzaken. 2.3.3 Animaties van interacties ✅ Er zijn animaties op de site, die kunnen worden uitgeschakeld met een schakelaartje in de navigatiebalk, dat tevens initieel reageert op de instellingen van het besturingssysteem van de bezoeker. 2.4.1 Blokken overslaan ✅ Deze site heeft maar een pagina, dus zijn er geen blokken die worden herhaald op meerdere pagina's. 2.4.2 Paginatitel ✅ De pagina heeft een duidelijke titel. 2.4.3 Focusvolgorde ✅ De focusvolgorde van elementen volgt de structuur van de site. 2.4.4 Doel van een link (in context) ✅ Het doel van iedere link is duidelijk uit de koppenstructuur. 2.4.5 Meerdere manieren ✅ De site heeft maar een pagina. 2.4.6 Koppen en labels ✅ Koppen en labels beschrijven het doel. 2.4.7 Focus zichtbaar ✅ Het veranderen van de focus met het toetsenbord heeft een zichtbaar effect. 2.4.8 Locatie ✅ De site heeft maar een pagina. 2.4.9 Doel van een link (alleen link) ✅ Iedere link is voorzien van een beschrijvende tekst. 2.4.10 Sectiekoppen ✅ Sectiekoppen worden gebruikt om de content te organiseren. 2.5.1 Aanwijzergebaren ✅ Op deze site wordt geen gebruik gemaakt van pad-gebaseerde aanwijzergebaren. 2.5.2 Aanwijzerannulering ✅ Geen van de functionaliteiten die met een aanwijzer geactiveerd worden doen dat op het down-event. 2.5.3 Label in naam ✅ Geen van de interfacecomponenten hebben labels met een mix van tekst en beeld. Interfacecomponenten gelabeld met uitsluitend beeld hebben een beschrijving in de role- en aria-label-attributes. 2.5.4 Bewegingsactivering ✅ Er is geen functionaliteit die wordt geactiveerd door het apparaat of de gebruiker te bewegen. 2.5.5 Doelwitformaat ✅ Het kleinste doelwit voor aanwijzerinvoer dat niet als tekst in de lopende tekst is opgenomen meet 108 bij 108 pixels. 2.5.6 Gelijktijdige invoermethoden ✅ De site heeft geen restricties op het gebruik van invoermethoden. 3.1.1 Taal van de pagina ✅ De taal (Nederlands) kan programmatisch worden bepaald. 3.1.2 Taal van gedeeltes ✅ De site is uitsluitend in het Nederlands. 3.1.3 Ongebruikelijke woorden ✅ Hoewel sommige van de gebruikte termen mondiaal gezien waarschijnlijk ongebruikelijk zijn, is dat gebruik gangbaar binnen de technische community waar we in werven en niet exclusief aan deze website. 3.1.4 Afkortingen ✅ Er worden geen afkortingen gebruikt die exclusief zijn aan deze website of organisatie. 3.1.5 Leesniveau ❌ De hoofdtekst is waarschijnlijk te begrijpen voor lezers van middelbaar leesniveau, maar de beschrijvingen van de challenges voldoen niet aan deze eis. Die teksten zijn geschreven op technische, universitair geschoolde lezers, het beoogde publiek. 3.1.6 Uitspraak ✅ Van alle woorden is uit context en spelling duidelijk wat de uitspraak zou moeten zijn. 3.2.1 Voorspelbaar bij focus ✅ Er treden geen contextveranderingen op als een UI-component focus krijgt. 3.2.2 Voorspelbaar bij invoer ✅ Er treden geen contextveranderingen op als een UI-component invoer ontvangt. 3.2.3 Consistente navigatie ✅ De website heeft maar een pagina. 3.2.4 Consistente identificatie ✅ De website heeft maar een pagina. 3.2.5 Contextveranderingen op verzoek ✅ Alle contextveranderingen zijn gebruiker-geïnitieerd. 3.3.1 Foutidentificatie ✅ Er zijn geen invoervelden aanwezig op de site. 3.3.2 Labels of instructies ✅ Er zijn geen invoervelden aanwezig op de site. 3.3.3 Suggesties bij fouten ✅ Er zijn geen invoervelden aanwezig op de site. 3.3.4 Foutpreventie ✅ Er zijn geen invoervelden aanwezig op de site. 3.3.5 Hulp ✅ Er zijn geen invoervelden aanwezig op de site. 3.3.6 Foutpreventie (alles) ✅ Er zijn geen invoervelden aanwezig op de site. 4.1.1 Parsen ✅ De site bestaat uit geldige HTML5. 4.1.2 Naam, rol, waarde ✅ Van alle componenten kan de naam en rol door software bepaald worden. Er zijn geen componenten met eigenschappen of waarden die door de gebruiker kunnen worden ingesteld. 4.1.3 Statusberichten ✅ De site gebruikt geen statusberichten.