Hele sample

Uitkomst: Onvoldoende

Hele sample

Bevindingen:

Over het algemeen zijn afbeeldingen voorzien van een goed tekstalternatief, zoals het logo bovenaan de pagina. En als afbeeldingen puur decoratief zijn, hebben ze een lege alt-tag, waardoor ze genegeerd worden door hulpsoftware.

Maar op de pagina https://veiligthuistwente.nl/ervaringsverhalen/ staan op het moment van testen drie afbeeldingen. De eerste twee hebben een lege alt-tag omdat ze decoratief zijn, maar de derde heeft als toegankelijke naam ’tekening-kind’. Deze omschrijving moet duidelijker, of weggelaten worden.
Een soortgelijk iets gebeurt op https://veiligthuistwente.nl/kennisbank/, waar onderaan een afbeelding staat met als toegankelijke naam ‘maatschappelijk werker’, terwijl er ook een ander persoon op de foto staat. Een betere titel zou zijn ‘maatschappelijk werker praat met jongere die op de bank zit’. Maar de tekst in het aangrenzende blok gaat over mensen inzetten voor ouderen in onze samenleving, dus deze afbeelding decoratief maken is misschien beter.

Verder heeft de knop om de chatfunctie te sluiten als toegankelijke naam alleen ‘Sluit’ en om te annuleren alleen ‘Annuleren’. Wanneer je de knop kan zien is dit voldoende, maar als je visueel beperkt bent en de inhoud aan je wordt voorgelezen, weet je niet wat je op dat moment gaat sluiten. Hier zou je gebruik kunnen maken van een aria-label=”Sluit chat”.

Door de gebruikte techniek wordt de video in een iframe op https://veiligthuistwente.nl/ik-maak-mij-zorgen/ niet herkend als video. Schermleessoftware maakt hier een afbeelding van met als naam ‘maxresdefault’, zie ook 2.4.2.

Hele sample

Uitkomst: ➖ Niet van toepassing

Hele sample

Bevindingen:

Er is geen louter video of audio gebruikt binnen de steekproef.

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

De animatie op https://veiligthuistwente.nl/ik-maak-mij-zorgen/ bevat niet-automatisch gegenereerde ondertitels, waardoor aan dit criterium wordt voldaan.

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

Omdat de animatie voor 23 september 2020 is gepubliceerd (namelijk op 29 januari 2020) valt deze onder de uitzondering voor dit criterium.

Er is geen audiodescriptie of tekstalternatief voor de animatie op https://veiligthuistwente.nl/ik-maak-mij-zorgen/.

Er kan een transcript van de animatie geschreven worden, die vervolgens onder de video wordt geplaatst. Dit transcript moet niet alleen de gesproken tekst, maar ook alle belangrijke gebeurtenissen in beeld bevatten. Deze tekst kan visueel verborgen zijn, zolang die maar wordt opgepikt door voorleessoftware.

Er kan ook gekozen worden om een tweede audiolaag toe te voegen aan de animatie waarin de audiodescriptie wordt uitgesproken.

Hele sample

Uitkomst: ➖ Niet van toepassing

Hele sample

Bevindingen:

Geen live audiocontent aanwezig binnen de steekproef.

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

Omdat de animatie voor 23 september 2020 is gepubliceerd (namelijk op 29 januari 2020) valt deze onder de uitzondering voor dit criterium.

Er is geen audiodescriptie of tekstalternatief voor de animatie op https://veiligthuistwente.nl/ik-maak-mij-zorgen/.

Er kan ook gekozen worden om een tweede audiolaag toe te voegen aan de animatie waarin de audiodescriptie wordt uitgesproken.

Zie ook 1.2.3

Hele sample

Uitkomst: ❌ Onvoldoende

Hele sample

Bevindingen:

Op verschillende pagina’s, zoals de homepagina en de contactpagina staan dikgedrukte regels tekst boven informatie. Hierdoor wekt het de indruk dat het kopjes zijn, maar deze zijn niet als kop opgemaakt. Voorbeelden zijn ‘bezoekadres’, ‘postadres’, ‘parkeren’ en ‘pers/media’ op https://veiligthuistwente.nl/ of https://veiligthuistwente.nl/contact/ en vergelijk dit met ‘Als je belt’ en ‘Als je chat’ op https://veiligthuistwente.nl/ik-maak-mij-zorgen/

Overigens zouden deze titels ook als een lager kopniveau opgemaakt mogen zijn, voor als een H3 visueel niet wenselijk is.

Op de pagina https://veiligthuistwente.nl/category/actueel/ staan afbeeldingen, datums en type artikel boven de kop waar ze bij horen. Hierdoor klopt de volgorde programmatisch niet meer. Zie ook 1.3.2

Verder heeft de chat een H3 in de titel, waardoor die altijd bij de bovenliggende H2 lijkt te horen. Zo zou de chat onder de kop ‘Deel je kennis met ons’ vallen op de pagina https://veiligthuistwente.nl/kennisbank/, maar onder ‘Zoek maar uit waar je gaat slapen!’ op de pagina https://veiligthuistwente.nl/ik-maak-mij-zorgen/

Hele sample

Uitkomst: ❌ Onvoldoende

Hele sample

Bevindingen:

Op de pagina https://veiligthuistwente.nl/category/actueel/ staan afbeeldingen, datums en type artikel boven de kop waar ze bij horen. Hierdoor klopt de volgorde programmatisch niet meer.
De kop zou in de DOM boven alle inhoud die er bij hoort moeten staan, zoals afbeelding, datum en type bericht. Vervolgens mag dit door CSS wel weer anders ingedeeld worden. Zie ook 1.3.1

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

Op de pagina https://veiligthuistwente.nl/contact/ wordt de tekst ‘de buttons hieronder’ gebruikt. Deze button staat in de leesvolgorde ook onder de tekst en blijft hier staan in elke weergave. Hierdoor wordt aan dit criterium voldaan.

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

De site is op mobiele apparatuur zowel in landschaps- als portretstand te gebruiken.

Hele sample

Uitkomst: ❌ Onvoldoende

Hele sample

Bevindingen:

Het klachtenformulier op https://veiligthuistwente.nl/klachten/ en het contactformulier op https://veiligthuistwente.nl/contact/ hebben geen autocomplete-attribuut voor ‘Telefoonnummer’.

De velden voornaam en e-mailadres worden wel goed ingevuld, ook bij het inschrijfformulier voor de nieuwsbrief op https://veiligthuistwente.nl/voor-professionals/.

De overige velden hoeven niet ingevuld te worden via autocomplete, omdat hier niet om standaard persoonlijke informatie gevraagd wordt.

Hele sample

Uitkomst: ❌ Onvoldoende

Hele sample

Bevindingen:

Bij formulieren verschijnen tekstuele foutmeldingen, maar deze moeten duidelijker de fout omschrijven. Niet ‘Vul een geldige naam in’, maar ‘Er is geen geldige plaats ingevuld’, zodat de gebruiker ook weet wat de fout is.

Hele sample

Uitkomst: ➖ Niet van toepassing

Hele sample

Bevindingen:

Er is geen geluidsweergave die automatisch speelt binnen de steekproef.

Hele sample

Uitkomst: ❌ Onvoldoende

Hele sample

Bevindingen:

De kleuren het menu voldoen niet allemaal. De kopjes boven de menu-items, zoals Algemeen en Situaties, hebben tekstkleur #0F9BD7 op achtergrond #E8F5FA, Dit levert een contrast op van 2,8:1 onder het minimum van 3 benodigd voor deze tekst.

Op de pagina https://veiligthuistwente.nl/voor-professionals/ staat onderaan een blauw blok met ‘Meer weten?’. De combinatie van tekst in kleur #FFFFFF en achtergrond in kleur #0F9BD7 geeft een contrast van 3,1:1. Voor tekst kleiner dan 18,66 pixels zoals de twee links in dit blok is een contrast van minimaal 4,5:1 benodigd. De snelste oplossing is deze tekst groter maken, deze is nu net 18 px.

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

Er gaat geen informatie verloren bij een resolutie van 1280×1024 pixels en 200% zoom in vergelijking met de standaardweergave.

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

Er is geen tekst aan afbeeldingen toegevoegd. Op elke pagina is de zichtbare tekst ook daadwerkelijk tekst binnen de pagina.

Er zijn twee uitzonderingen ten tijde van de test op https://veiligthuistwente.nl/category/actueel/. Een foto bij een artikel van 8 november 2023, waar tekst intrinsiek onderdeel is van een foto van een nieuwsartikel. De afbeelding bij een artikel van 22 maart 2022 staat een banner van SamenTwente. Deze bevat naast een logo ook een slogan. Het zou beter zijn om de slogan hier weg te laten.

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

Er verschijnt geen tweede (horizontale) scrollbalk bij een vensterformaat van 1280 x 1024 pixel en 400% zoom.

Hele sample

Uitkomst: ❌ Onvoldoende

Hele sample

Bevindingen:

Over het algemeen voldoen knoppen, formuliervelden en -knoppen en andere besturingselementen aan dit criterium. Het probleem zit in de balk van de chat. Hier zit een ‘i’ icoon in wat in gedeactiveerde staat de kleur #6FC3E7 op achtergrond #0F9BD7 heeft. Dit levert een contrast op van 1,5:1 op, wat lager is dan de 3:1 die een besturingselement moet hebben.

De focusindicator voor de knop ‘zoeken’ in het menu heeft dezelfde kleur als de knop zelf en valt daardoor niet genoeg op. Zie ook 2.4.7

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

Wanneer de stijleigenschappen worden gewijzigd, veranderen blokken en kaders van grootte mee. Er gaat hierdoor geen informatie verloren.

Hele sample

Uitkomst: ➖ Niet van toepassing

Hele sample

Bevindingen:

Niet aanwezig op binnen de onderzochte steekproef.

Hele sample

Uitkomst: ❌ Onvoldoende

Hele sample

Bevindingen:

De checkboxes in formulieren zoals op pagina https://veiligthuistwente.nl/contact/ kunnen geen focus ontvangen. Hierdoor zijn ze niet met het toetsenbord te bedienen.

Dit lijkt in de gebruikte sitetechniek te zitten, omdat Gravity Forms tabfocus normaal overlaat aan de user agent.

Hele sample

Uitkomst: ➖ Niet van toepassing

Hele sample

Bevindingen:

Er is geen toetsenbordval aanwezig binnen de steekproef.

Hele sample

Uitkomst: ❌ Onvoldoende

Hele sample

Bevindingen:

Wanneer de focus op de animatie op https://veiligthuistwente.nl/ik-maak-mij-zorgen/ staat, zijn onderdelen van de speler te bedienen met een enkele toets, denk aan ‘k’ om af te spelen/te pauzeren en ‘m’ om geluid te dempen.

Dit is makkelijk op te lossen door &disablekb=1 toe te voegen aan de videolink.

Hele sample

Uitkomst: ➖ Niet van toepassing

Hele sample

Bevindingen:

Er is geen content met tijdslimiet aanwezig binnen de steekproef.

Hele sample

Uitkomst: ➖ Niet van toepassing

Hele sample

Bevindingen:

Er is geen vorm van bewegende content aanwezig binnen de steekproef.

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

Op geen van de pagina’s binnen de steekproef is flitsende content aanwezig.

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

Op pagina’s is een skiplink aanwezig waardoor focus op de H1 van de pagina wordt gezet. Hierdoor wordt het blok aan de bovenkant van elke pagina met onder andere het zoek- en hoofdmenu omzeild.

Hele sample

Uitkomst: ❌ Onvoldoende

Hele sample

Bevindingen:

De paginatitels zijn gelijk aan de H1 van de pagina met vervolgens ‘ – Veilig Thuis Twente’ erachter. Hierdoor is altijd duidelijk wat de paginatitel is, mits er een goede H1 aan de pagina wordt gegeven. Binnen de steekproef is dit het geval, zelfs op de zoekpagina; deze heet ‘je zocht naar <zoekwoord>’.

Alleen de homepagina is hier een uitzondering op, deze heet ‘Home – Veilig Thuis Twente’. Dit is nog steeds voldoende duidelijk.

Het probleem zit hem in de embedded YouTube-video op de pagina https://veiligthuistwente.nl/ik-maak-mij-zorgen/. Deze is in een iframe geplaatst, maar door de gebruikte techniek wordt de titel van dit iframe niet herkend. Schermleessoftware zit dit als een afbeelding met als naam ‘maxresdefault’. Dat het wel goed kan, bewijst het iframe met de kaart op de pagina https://veiligthuistwente.nl/contact/, deze heeft netjes een titel.

Hele sample

Uitkomst: ❌ Onvoldoende

Hele sample

Bevindingen:

Het is voor de items in het hoofdmenu mogelijk om tabfocus te ontvangen terwijl het menu gesloten is. Hierdoor kun je niet zien wat nu exact tabfocus ontvangt. Dit gebeurt ook voordat je op de inhoud van de daadwerkelijke pagina komt. Zie ook 2.4.11

Wanneer het hoofdmenu wel geopend is, is het mogelijk om focus te krijgen op dingen die achter het geopende menu staan. Hierna kun je ook de complete pagina over tabben. Aangezien de scrollbalk verdwijnt, is navigeren lastig. Het zou beter zijn als de focus na het laatste menu-item zou verspringen naar de “sluit menu” knop, zodat de focus in het menu blijft tot dit gesloten wordt. Zie ook 2.4.11

Checkboxes en radio buttons in formulieren zijn niet te selecteren met tab en dus niet met het toetsenbord te bedienen. Zie ook 2.1.1

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

Er lijken allemaal links te staan die ‘lees dit artikel’ heten op https://veiligthuistwente.nl/category/actueel/, https://veiligthuistwente.nl/ervaringsverhalen/ en https://veiligthuistwente.nl/kennisbank/, maar dit is gewoon tekst in een blok wat op zich als link functioneert. En ook als was dit niet het geval, dan is het linkdoel duidelijk uit de context op te maken.

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

De pagina’s zijn te vinden via directe links, de zoekfunctie of de sitemap. Er is dus altijd meer dan één manier om op een pagina te komen.

Hele sample

Uitkomst: ❌ Onvoldoende

Hele sample

Bevindingen:

Op alle pagina’s bevat alles wat eruit ziet als een kop ook inhoud, alle knoppen en formuliervelden zijn voorzien van een passende tekst of label. Links beschrijven hun doel ook duidelijk.

De enige uitzondering is de chat. In de chatbalk staat rechtsbovenin een symbool van een ‘i’, waardoor je zou verwachten dat je informatie op kan vragen. Het enige wat deze knop doet is het chatvenster sluiten indien het geopend is en de pagina opnieuw openen in een nieuw venster.

Hele sample

Uitkomst: ❌ Onvoldoende

Hele sample

Bevindingen:

De focusindicator voor de knop ‘zoeken’ in het menu heeft dezelfde kleur als de knop zelf en valt daardoor niet genoeg op. Zie ook 1.4.11

Hele sample

Uitkomst: ❌ Onvoldoende

Hele sample

Bevindingen:

Het is voor de items in het hoofdmenu mogelijk om tabfocus te ontvangen terwijl het menu gesloten is. Hierdoor kun je niet zien wat nu exact tabfocus ontvangt. Zie ook 2.4.3

Wanneer het hoofdmenu wel geopend is, is het mogelijk om focus te krijgen op dingen die achter het geopende menu staan. Deze focus is niet te zien. Zie ook 2.4.3

Hele sample

Uitkomst: ➖ Niet van toepassing

Hele sample

Bevindingen:

Niet aanwezig binnen de onderzochte steekproef.

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

Geen problemen gevonden met dit criterium binnen de steekproef.

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

De pagina’s binnen de steekproef voldoen aan dit criterium.

Hele sample

Uitkomst: ➖ Niet van toepassing

Hele sample

Bevindingen:

Niet aanwezig binnen de steekproef.

Hele sample

Uitkomst: ❌ Onvoldoende

Hele sample

Bevindingen:

Op de homepagina en de contactpagina is een Google Map iframe ingesloten. Deze kaart is te navigeren, maar dit is niet te doen door bediening met een ‘single pointer device’. Het is alleen mogelijk door te slepen met de muis of met de pijltjestoetsen op het toetsenbord.

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

De pagina’s binnen de steekproef voldoen aan dit criterium.

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

Het <lang> attribuut van elke pagina staat correct ingesteld op NL, want elke pagina is in het Nederlands.

Hele sample

Uitkomst: ➖ Niet van toepassing

Hele sample

Bevindingen:

Binnen de steekproef van pagina’s ben ik geen zinnen of passages in andere talen dan Nederlands tegengekomen.

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

Binnen de steekproef is geen pagina aanwezig waar focus voor een contextwijziging zorgt.

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

Componenten van de gebruikersinterface veroorzaken niet ongewenst een contextwijziging, waardoor aan dit criterium wordt voldaan.

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

De navigatie van de site verandert niet op verschillende pagina’s.

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

De zoekknop in het hoofdmenu en de zoekknop op de zoekpagina gebruiken beide de term ‘zoeken’.

Formulieren op de pagina’s https://veiligthuistwente.nl/contact/ en https://veiligthuistwente.nl/klachten/ gebruiken consistent ‘Verstuur mijn bericht’ en ‘Verstuur mijn klacht’.

Hele sample

Uitkomst: ➖ Niet van toepassing

Hele sample

Bevindingen:

Er wordt geen hulp geboden zoals bedoeld in dit criterium.

Hele sample

Uitkomst: ❌ Onvoldoende

Hele sample

Bevindingen:

Foutmeldingen bij formulieren geven een instructie, bijvoorbeeld ‘vul hier je voornaam in’, en geen foutmelding zoals ‘Je hebt geen geldige voornaam ingevoerd’. Zie ook 3.3.3

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

Invulvelden van formulieren zijn duidelijk gelabeld.

Hele sample

Uitkomst: ❌ Onvoldoende

Hele sample

Bevindingen:

De foutmeldingen bij een foutief e-mailadres zijn nu instructies, zie 3.3.1. Aangezien dit toch herzien moet worden, kan er gelijk gekeken worden naar foutsuggesties, zoals ‘Je hebt geen geldig e-mailadres ingevuld. Een geldig e-mailadres staat in de vorm naam@domein.nl‘.

Hele sample

Uitkomst: ➖ Niet van toepassing

Hele sample

Bevindingen:

Dit soort formulieren zijn niet aanwezig binnen de steekproef.

Hele sample

Uitkomst: ➖ Niet van toepassing

Hele sample

Bevindingen:

Er is geen proces waar dezelfde gegevens twee keer moeten worden ingevoerd tijdens hetzelfde proces binnen de steekproef.

Hele sample

Uitkomst: ➖ Niet van toepassing

Hele sample

Bevindingen:

Website heeft geen gedeelte waar gebruikers kunnen inloggen.

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

De pagina’s binnen de steekproef voldoen aan dit criterium

Hele sample

Uitkomst: ✅ Voldoende

Hele sample

Bevindingen:

Foutmeldingen krijgen de status aria-invalid=true. Dit is niet hoe dit standaard gedaan wordt, maar het zorgt wel voor live regions in de foutmeldingen.