Alleen de bevindingen:
Quickscan digitale toegankelijkheid website social.overheid.nl

Uitkomst: Onvoldoende

Bevinding 1: Op pagina https://social.overheid.nl/about is groot het rijksoverheidslogo te zien. De alternatieve tekst (alt) ontbreekt bij dit logo. Vul dit met bijvoorbeeld: Logo Rijksoverheid Dit geldt ook voor het iets kleinere logo op dezelfde pagina.

Bevinding 2: Als je zoekt op 'overheid' verschijnen er resultaten op https://social.overheid.nl/search. Onder het kopje '# Hashtags' verschijnen hashtags en het gebruik in de afgelopen 2 dagen. Dit wordt gepresenteerd met een grafiekje. Mensen die het scherm niet (goed) kunnen zien weten nu niet wat de voortgang is van de hashtag in de afgelopen dagen.

Bevinding 3: Bij berichten van @DigitaleOverheid zijn sommige afbeeldingen netjes voorzien van een alternatieve tekst via het alt-attribuut. Sommige hebben dat niet. Zorg ervoor dat mensen die een bericht posten dit gemakkelijk kunnen doen en dit niet snel vergeten. Bijvoorbeeld via een melding: 'Weet je zeker dat deze afbeelding geen alternatieve tekst nodig heeft?'.

Bevinding 4: Bij een bericht wordt in de rechterbovenhoek de tijd of datum van de plaatsing van het bericht getoond. Ervoor zie je een bolletje die aanduidt dat dit bericht openbaar is. Zorg ervoor dat deze tekst op correcte wijze aangeboden wordt zodat deze voor iedereen zichtbaar is. (Zie mijn eerdere opmerking bij de zoekknop bij SC 4.1.2)

Bevinding 5: Op pagina https://social.overheid.nl/auth/sign_in zie je bovenaan het Mastodon logo. Dit logo heeft geen alternatieve tekst ('Logo Mastodon'). Tevens ontbreekt de linkdoel, namelijk de homepage van social.overheid.nl. Geef het logo de naam gevolgd door het linkdoel, zodat de bedoeling van de link duidelijk is en bedienbaar met stem.

Bevinding 6: Wanneer bezoekers op pagina https://social.overheid.nl/auth/sign_in een formulierveld niet goed invullen, verschijnt er een foutmelding. Blinden en slechtzienden die met een screenreader werken krijgen geen signaal dat er iets is gewijzigd en dat er foutmeldingen staan op het scherm. De focus komt direct op het foutieve veld, de rode tekst wordt overgeslagen.

Uitkomst: Niet duidelijk

Bevinding 7: Advies: Op een aanzienlijk aantal plekken wordt een title-attribuut gebruikt. Dit title-attribuut zorgt voor een tooltip. Het nadeel van de tooltip is dat deze over de onderliggende tekst heen staat en niet groter wordt als je een groter lettertype kiest (inzoomt met de browser). Het voornaamste probleem is echter dat het title-attribuut vaak een herhaling is van de onderliggende tekst. Het risicio is aanwezig dat met sommige voorleessoftware de teksten2x worden voorgelezen. Het title-attribuut is echt onnodig, want deze werkt al zonder meer niet op devices waar je geen muis gebruikt.

Bevinding 8: Advies: Op https://social.overheid.nl/@DigitaleOverheid krijg je een oevrzicht van de berichten van Digitale Overheid. Deze berichten zijn visueel gescheiden van elkaar met een dun streepje. Als je de pagina laat voorlezen dan is die cheiding niet duidelijk. Je weet dan ook niet bij welk bericht de knoppen horen. Dat geldt ook voor het tijdstip van publiceren van het bericht, waarbij je niet kunt bepalen of dit bij dit of het vorig bericht hoort. Ik heb hier niet direct een eenvoudige oplossing voor; dit zou eens apart uitgewerkt moeten worden. Ik kan dit ook eens tegen andere experts aanhouden.

Bevinding 9: Advies: Sommige bezoekers met hulpsoftware hebben baat bij een nette koppenstructuur. Nu worden er nog wel eens kopniveaus overgeslagen.

Bevinding 10: Advies: Op desktop in de linkerzijkant staan 2 onderdelen: 'social.overheid.nl' en 'Mastodon' met daarachter een opsomming van linkjes. Het zou mooier zijn om hiervoor een opsomming (ul/li-element) te gebruiken. De visuele vorm hoeft hierdoor niet te veranderen.

Uitkomst: Onvoldoende

Bevinding 11: Als je zoekt op 'overheid' verschijnen er resultaten op https://social.overheid.nl/search. Op desktop in het middendeel is een grijs vlak. De gekleurde teksten in dit deel hebben een te lage contrastverhouding. Dit is op te lossen door deze kleuren wanneer ze op grijs getoond worden iets donkerder te maken. Het gaat bijvoorbeeld om:

• 'Alles bekijken', deze paarse tekst heeft een contrastverhouding op de grijze achtergrond van 3,4:1 waar dit 4,5:1 moet zijn
• 'digitaleoverheid.nl', deze groene tekst heeft een contrastverhouding op de grijze achtergrond van 2,9:1 waar dit 4,5:1 moet zijn

Bevinding 12: Op pagina https://social.overheid.nl/auth/sign_in is een knop van witte tekst op een paarsige achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 4,4:1 waar dit 4,5:1 moet zijn.

Bevinding 13: Op pagina https://social.overheid.nl/auth/sign_in krijg je bij foutieve invoer een rode tekst op een rose achtergrond. Deze tekst heeft een te laag contrast. De contrastverhouding is 2,8:1 waar dit 4,5:1 moet zijn.

Uitkomst: Niet duidelijk

Bevinding 14: Advies: Wanneer bij een schermgrootte van 1280px breed ingezoomd wordt tot 150% dan wordt in de rechterzijde op pagina https://social.overheid.nl/@DigitaleOverheid een zoekknop, een wereldbolletje (Openbaar) en 3 blokjes naast elkaar getoond. Op dit deel van het scherm is de betekenis van de 3 blokjes 'Over'. Elders op de pagina, onderaan elk bericht hebben diezelfde drie blokjes een andere betekenis. geef knoppen en links geen dubbele betekenis.

Uitkomst: Niet duidelijk

Bevinding 15: Advies: Zorg ervoor dat bezoekers die berichten publiceren op de hoogte zijn van de regels. Als een bericht in een plaatje staat, zorg dan dat deze ook in tekst (visueel!) beschikbaar is. Een alternatieve test (alt) is dan niet voldoende.

Uitkomst: Onvoldoende

Bevinding 16: Wanneer bij een schermgrootte van 1280px breed ingezoomd wordt tot 400% dan worden op pagina https://social.overheid.nl/public/local de namen van de organisaties/personen die berichten plaatsen ingekort via drie puntjes. De tekst wordt daardoor slecht of niet leesbaar. Dit geldt ook voor de knop 'Inlo...'.

Bevinding 17: Wanneer bij een schermgrootte van 1280px breed ingezoomd wordt tot 400% dan worden op pagina https://social.overheid.nl/public/local de 3 tabs 'Openbare tijdslijnen', 'Andere servers' en 'Alles' verborgen achter de kop van de pagina 'Openbare tijdlijnen'. Zorg ervoor dat er zoveel mogelijk ruimte beschikbaar is voor de content. Zo hoeven de knoppen Registeren en Inloggen niet uitgebreid in beeld te hoeven blijven staan. Ook op andere plekken worden teksten afgekapt of komen ze over elkaar heen te staan zoals op: https://social.overheid.nl/@DigitaleOverheid

Uitkomst: Onvoldoende

Bevinding 18: Ofschoon in de code de kleur van de grijze zoekknop een waarde lijkt te hebben die met de grijze achtergrond voldoende contrast zou moeten hebben is de gemeten contrast te laag (reden kon ik niet vinden). De contrastwaarde van grijs op grijs is nu ongeveer 1,8:1 waar dit 3:1 moet zijn. Maak het icoontje in de knop donkerder.

Uitkomst: Onvoldoende

Bevinding 19: Als je op https://social.overheid.nl/@DigitaleOverheid met de tabtoets navigeert en je komt in het berichtendeel dan kan je haast onmogelijk nog in de rechterkolom komen. Want elke keer als je naar een nieuw deel van de berichten navigeert met de tabtoets, verschijnen er onderaan nieuwe berichten. Dit is een ernstig toegankelijkheidsprobleem.

Uitkomst: Onvoldoende

Bevinding 20: Op elke pagina ontbreekt een mechanisme om de herhalende content over te slaan. Bezoekers die de website met toetsenbord bedienen en/of hulpsoftware moeten op elke pagina langs dezelfde onderdelen gaan voordat ze bij de inhoud van de pagina zijn. Dit kan je oplossen door een link op de pagina te plaatsen (skiplink) die de focus verplaatst naar de eerste unieke inhoud van de pagina. Deze link moet de eerste link van de pagina zijn. Deze link mag standaard verborgen zijn voor bezoekers, maar moet zichtbaar worden als de focus er op komt wanneer met het toetsenbord wordt genavigeerd.

Uitkomst: Onvoldoende

Bevinding 21: Op sommige elementen is de focus deels of helemaal niet zichtbaar. Zorg dat altijd visueel zichtbaar is waar je bent als je met toetsenbord door de content navigeert. Zo wordt bijvoorbeeld https://social.overheid.nl/public de 3 knoppen 'Deze server', 'Andere server' en 'Alles' slecht omlijnd waardoor niet duidelijk is welk onderdeel de focus heeft. Ook op andere plekken komen dit soort problemen voor.

Uitkomst: Niet duidelijk

Bevinding 22: Advies: Bied de mensen die berichten plaatsen ook de mogelijkheid om eventuele taalwisselingen aan te kunnen geven.

Uitkomst: Onvoldoende

Bevinding 23: Er is een rood sterretje te zien op de pagina's https://social.overheid.nl/auth/password/new, https://social.overheid.nl/auth/sign_in, https://social.overheid.nl/auth/confirmation/new maar nergens staat uitgelegd wat dit rode sterretje betekent. Op https://social.overheid.nl/auth/sign_in lijkt het sterretje bij één veld te ontbreken.

Uitkomst: Onvoldoende

Bevinding 24: De zoekknop is een afbeelding die door middel van een i-element en CSS-code in het zoekveld geplaatst. De wijze waarop met aria-label een naam aan de knop gegeven is werkt zo niet. Een aria-label kan enkel aan elementen worden toegekend met bepaalde rollen, bijvoorbeeld een knop of een afbeelding. De beste manier om dit op te lossen is een echte afbeelding te plaatsen in de knop (binnen het button-element). Door een afbeelding te gebruiken met het alt-attribuut (alt="Zoeken") is het mogelijk dat de Zoeken-knop altijd visueel en niet-visueel een naam heeft.

Uitkomst: Onvoldoende

Bevinding 25: Als je op https://social.overheid.nl/search een nieuwe zoekopdracht geeft begint voorleeshulpsoftware met lezen van alle content na het zoekveld. Dit zijn niet de resultaten. Het is dan ook niet duidelijk dat er iets gevonden is en hoeveel dat is. Dit geldt ook voor sommige links zoals Openbare tijdslijn. Zorg voor een goede focus-controle (waar zet je die?) en bericht aan hulpsoftware (wat is de status van het scherm).

Bevinding 26: Als je op de knop Registeren drukt verschijnt er een zogenaamde popup scherm. Hulpsoftware krijgt hiervan geen bericht door. Iemand die blind is weet dan ook niet dat er nieuwe content op het scherm is verschenen. Hiervoor is recentelijk native HTML voor beschikbaar waar alles geregeld wordt zoals, focus, toetsenbordbediening, statusmelding nvoor hulpsoftware, etc. Zorg er ook voor dat deze popup een sluitknop krijgt.