Jumbo

Jumbo

Onze bevindingen over de webwinkel van Jumbo

Logo Jumbo

Jumbo

URL voorpagina: https://www.jumbo.com/
Datum van testen: 20 november 2023
Getest door: Caitlin de Rooij

Jumbo heeft er dit jaar voor gezorgd dat alle onderzoeksvragen die voorheen met “nee” beantwoord konden worden, dit jaar minstens “met moeite”, of met “ja” beantwoord kunnen worden. Daarnaast hebben zij veel code fouten, die automatisch gescand kunnen worden, aangepakt. Dit zorgt ervoor dat de score van Jumbo weer een klein beetje is gestegen

Er zijn ook wat punten die een lagere score hebben gehad, maar over het algemeen is Jumbo goed bezig. 

Wat bij Jumbo opvallend is, is dat er wijzigingen gemaakt zijn aan de website die specifiek invloed hebben op de toegankelijkheid. Echter, werkt dit soms averechts. Dit zie je bijvoorbeeld bij het toevoegen van de aria-labels in het aanmeldformulier. Dit is onnodig geweest, want de velden hebben goede labels, die in de code gelinkt zijn aan het input veld. Zonder het toevoegen van de aria-labels, was het aanmeldformulier prima geweest. Nu is het onduidelijk, omdat er Engelstalige ID’s worden uitgesproken, in plaats van Nederlandstalige labels. 

Een opvallende verbetering in de bestelflow is het kiezen van de winkel die de bestelling bezorgt. Hier merk je dat er veel aandacht is besteed aan toegankelijkheid: 

  • Alle knoppen hebben beschrijvende namen. 
  • Na het kiezen van een winkel staat de focus weer op de “reserveer” knop, dus je hoeft niet terug te tabben. 
  • Als je op “reserveer” klikt, hoor je heel duidelijk tot hoe lang je reservering geldig is. 

Ook fijn aan Jumbo is dat de optie om hulp te vragen altijd aanwezig is in het bestelproces en je binnen enkele stappen daadwerkelijk een manier krijgt om contact te zoeken. Het enige minpunt is dat er alleen contact gezocht kan worden via een telefoonnummer. Dit is voor dove mensen geen optie.

Vergelijking vorig jaar

  • De zoekfunctie is goed te besturen met het toetsenbord, inclusief de zoeksuggesties. Vorig jaar was dat niet het geval.
  • Vorig jaar konden de zoekfilters met een schermlezer niet gebruikt worden, dit jaar kan dat wel. De werking met het toetsenbord is alleen nog niet helemaal juist. 
  • De styling van de prijs van producten maakt dat voor schermlezers de prijs niet helemaal duidelijk wordt uitgesproken, zeker in het geval van een product in de aanbieding.

Kan ik het hoofdmenu gebruiken?

Testresultaten toetsenbord

Het hoofdmenu werkt goed. De toetsenbord focus begint in een veiligheidswaarschuwing pop-up. Op zich is het goed dat de focus hier begint, zodat ze aandacht meteen naar deze belangrijke melding gaat. Visueel is het echter verwarrend, omdat je verwacht dat het bovenaan begint en je even op zoek moet. 

De submenu’s klappen helaas niet uit met het toetsenbord. (Ook aangegeven in 2022)

Een skiplink zou handig zijn, zodat je niet op elke pagina door het menu hoeft te tabben.

Testresultaten VoiceOver

De submenu’s zijn niet te openen. Verder heeft alles een duidelijke naam en werking.

Kan ik de zoekfunctie op de voorpagina gebruiken?

Ik zoek op roomboter

Testresultaten toetsenbord

Ja. 

De zoeksuggesties zijn met het toetsenbord te bereiken. Vorig jaar was dat niet het geval.

Testresultaten VoiceOver

Ja, echter heeft de knop om de zoekterm te wissen geen naam. (Ook aangegeven in 2022)

De zoeksuggesties zijn te bereiken met het toetsenbord, echter hoor je niet dat er zoeksuggesties zijn. Je kunt er heen tabben, maar ze krijgen focus na de zoekknop, dus je moet er op de gok bij komen.

Kan ik het filter bij de zoekresultaten gebruiken?

https://www.jumbo.com/zoeken?searchType=keyword&searchTerms=roomboter

Testresultaten toetsenbord

Dit werkt. De besturing werkt anders dan verwacht, omdat de checkboxes geen echte checkboxes zijn. Normaliter gebruik je de spatiebalk om een checkbox te activeren. Hier moet je enter gebruiken. 

De “toon meer” knoppen zijn goed te gebruiken, vorig jaar konden zij niet met het toetsenbord bestuurd worden. Ook blijft de focus op het geactiveerde element. Vorig jaar moest je na het toepassen van het filter elke keer opnieuw terug tabben naar de filters. Dat is een grote verbetering. 

Testresultaten VoiceOver

De checkboxes zijn eigenlijk links. Met een schermlezer hoor je dus de naam van de link en weet je dat je dit met enter kunt openen. Wat je hierbij mist is de categorie waarin je iets aan het selecteren bent. Bij een normale checkbox hoor je normaal het label en de fieldset. Dus bijvoorbeeld “Zonder lactose, Allergie”. Dit hoor je nu niet. De “toon meer” knop is geen echte knop, met een schermlezer hoor je niet dat je het kan activeren, behalve dat de naam van het element tot actie aanspoort. Nadat je “toon meer” hebt geactiveerd, wordt de focus verplaatst naar een ander filter. Je moet nu dus terug tabben. Dit werkt vrij verwarrend.

Het is verbeterd, t.o.v. vorig jaar, toen konden de filters namelijk helemaal niet gebruikt worden. De werking is echter nog niet helemaal juist.

Kan ik een item kiezen uit de zoekresultaten?

Testresultaten toetsenbord

Om bij de zoekresultaten te komen moet je eerst langs alle filter opties. Omdat er ook geen skiplink op de pagina is, duurt dit vrij lang. Idealiter staat er bovenaan de pagina een skiplink en is er een skiplink voor het filtermenu, om direct naar de resultaten te springen.

Het product zelf krijgt geen visuele focus, de knop om het product meteen in de winkelwagen te doen wel. Deze verandering valt echter niet zo op. Je kunt hieruit wel herleiden wanneer je je op het product zelf bevindt. 

Testresultaten VoiceOver

Ja, de links hebben een duidelijke naam. Er staat onder elk product een knop “toevoegen aan winkelmandje”, het zou fijn zijn als aangeduid wordt om welk product dit dan gaat. (Onveranderd sinds 2022)

Kan ik een product bekijken (titel, prijs en omschrijving)?

https://www.jumbo.com/producten/jumbo-roomboter-ongezouten-250g-291627PAK

Testresultaten toetsenbord

Ja.

Testresultaten VoiceOver

De prijs heeft een speciale opmaak, waardoor je “twee vijftien” hoort. Idealiter hoor je hier gewoon €2,15. Omdat de kiloprijs hierna hoorbaar is, is wel te herleiden dat “twee vijftien” de prijs is. 

Het zou ook fijn zijn als de uitklappers, zoals “productomschrijving”, een heading zouden zijn, zodat je hier met een schermlezer gemakkelijk naar kunt navigeren. 

Bij een product in de aanbieding hoor je als prijs “4,36”, “2 49”. Hier is niet meer duidelijk wat nu de prijs is. Visueel zien we dat €4,36 de oude prijs is en €2,49 de kortingsprijs. 

Screenshot van de prijsweergave van een zak Aardappelen kruimig extra groot met korting in de webwinkel van Jumbo

Kan ik de opties wijzigen/ingeven (kleur, maat, aantal)?

Testresultaten toetsenbord

Ja.

Testresultaten VoiceOver

De optie om een product in de winkelwagen te stoppen is gecombineerd met het ingeven van het aantal. Dit wordt niet voorgelezen en de screen reader gebruiker heeft geen info over dat hier het aantal kan worden aangepast. Als er geen actie is wordt automatisch 1 item aan de winkelmand toegevoegd. Het is niet duidelijk hoe dit aantal te wijzigen op deze pagina. (Ook aangegeven in 2022)

Kan ik een artikel in het winkelwagentje stoppen?

Testresultaten toetsenbord

Ja.

Testresultaten VoiceOver

Je hoort geen feedback als een product is toegevoegd aan het winkelmandje. (Ook aangegeven in 2022)

Kan ik het winkelwagentje openen en uitlezen wat ik heb besteld?

Testresultaten toetsenbord

Ja. 

De focus volgorde is verbeterd t.o.v. vorig jaar. 

Testresultaten VoiceOver

De winkelwagen knop in het hoofdmenu heeft een duidelijke naam. De prijs mist alleen een euroteken, waardoor het niet als prijs wordt uitgesproken.

Screenshot van de VoiceOver actief op de site van Jumbo, waarin staat dat de prijs zonder euroteken wordt uitgesproken.

Als je het winkelmandje opent, opent er een modal. Dit wordt niet duidelijk uitgesproken. Je moet doorlezen om te weten dat je in de winkelmand bent. Vervolgens is er een aantal elementen met een Engelstalige naam, zoals het zoekveld. Visueel zie je een placeholder “Zoek in mijn mandje”. Je hoort “search-in-basket”. 

Screenshot van de VoiceOver actief op de site van Jumbo, waarin de engelstalige VoiceOver tekst staat, waar de placeholder nederlandstalig is.

De prijs is opgemaakt door twee headings. Het cijfer voor de komma is een heading niveau 4, het cijfer na de komma is een heading niveau 6. Dit maakt dat de prijs zeer onduidelijk wordt uitgesproken. 

Screenshot van de VoiceOver actief op de site van Jumbo. De prijs kan niet goed worden voorgelezen voor ongebruikelijke toepassing van headings.
Screenshot van de VoiceOver actief op de site van Jumbo. De prijs kan niet goed worden voorgelezen voor ongebruikelijke toepassing van headings. Deel 2, waarin het getal achter de komma wordt voorgelezen.

Ook zitten er links met hele onduidelijke namen in het modal, zoals deze link met afbeelding zonder toegankelijke naam. De afbeelding is verstopt voor schermlezers, waardoor de link nu geen duidelijke naam heeft en wordt uitgesproken als “lijst.617bf6a147506fa3ad199cd9.html”.

Screenshot van de VoiceOver actief op de site van Jumbo. De afbeeldingslink heeft een zeer onbehulpzame naam zichtbaar.

Kan ik naar bestellen?

Testresultaten toetsenbord

Ja.

Testresultaten VoiceOver

Ja. Er staat echter onder de bestelknop “Je kan al bestellen vanaf 25 euro”. Dit is makkelijk te missen met een schermlezer, omdat de bestelknop eerder te horen is. 

Kan ik een account aanmaken?

Testresultaten toetsenbord

Ja, er wordt echter niet aangegeven welke velden verplicht zijn. (ook aangegeven in 2022) Dit zie je pas als je een veld niet invult en er een foutmelding onder verschijnt. 

Testresultaten VoiceOver

Met moeite. Het email veld heeft echter als toegankelijke naam “username”. Hierdoor is niet duidelijk dat je een emailadres in moet voeren. 

Screenshot waarin de onduidelijke benaming van het e-mailadresveld (gelabeld met username) zichtbaar is.

Als een veld fout ingevoerd wordt meldt de schermlezer dit meteen. De foutmeldingen zijn echter niet gekoppeld aan het invoerveld. 

Het zou fijn zijn als de wachtwoordeisen ook gekoppeld worden aan het wachtwoordveld, zodat je met de schermlezer hoort wat er benodigd is. 

Alle overige velden hebben een duidelijk label, echter is dit overschreven door het aria-label, wat opgemaakt is als een id, in plaats van een beschrijvend label. Hierdoor heeft elk veld een Engelstalige id als naam.

Screenshot waarin de onduidelijke benaming van het voornaam veld zichtbaar is.

Als het formulier met fouten verzonden wordt verschijnt er een overzicht met de foute velden bovenaan de pagina, dit hoor je met de schermlezer echter niet, tenzij je terug gaat lezen. Je krijgt dus geen feedback te horen als het fout is gegaan. 

Kan ik inloggen?

Testresultaten toetsenbord

Ja, er wordt echter gebruik gemaakt van de gele Jumbo kleur om actieve elementen aan te duiden. Hierdoor krijgen sommige knoppen een zeer lichtgele rand, op een witte achtergrond. Dit is voor alle gebruikers zeer slecht te zien. 

Testresultaten VoiceOver

Ja, je hoort echter geen feedback als het inloggen niet gelukt is. 

Kan ik een bezorgmoment kiezen?

Testresultaten toetsenbord

De keuzes zijn met het toetsenbord te bereiken. Er wordt gebruik gemaakt van keuzerondjes. Echter is dit visueel niet zichtbaar, waardoor de toetsenbordnavigatie soms wat onvoorspelbaar is. Dit zorgt er echter wel voor dat niet alle opties doorgelopen hoeven te worden.

Testresultaten VoiceOver

Ja, de labels bij de radiobuttons kunnen soms wel wat duidelijker, waar de dag en maand volledig uitgeschreven wordt. Dus in plaats van “do 29 dec” “donderdag 29 december”. (Ook aangegeven in 2022)

Na het kiezen van een moment moet je een winkel kiezen die de boodschappen bezorgt. Dit werkt zeer netjes met de schermlezer, hier is duidelijk aandacht aan besteed! Alle knoppen hebben beschrijvende namen. Na het kiezen van een winkel staat de focus weer op de “reserveer” knop, dus je hoeft niet terug te tabben. Als je op “reserveer” klikt, hoor je heel duidelijk tot hoe lang je reservering geldig is. 

Kan ik het eindbedrag en de bezorgkosten uitlezen?

Testresultaten toetsenbord

Ja.

Testresultaten VoiceOver

Op de overzichtspagina is alles te lezen met de schermlezer. De prijs wordt hier duidelijker uitgesproken dan in het winkelmandje. 

Kan ik om hulp vragen via de website?

Testresultaten toetsenbord

Er staat tijdens het bestelproces altijd een link in de header “Hulp nodig?”. Als je dit activeert opent een modal, hierin staan wat vragen die kunnen uitklappen en een manier om contact op te vragen. Alles is goed te besturen met het toetsenbord.

Testresultaten VoiceOver

Ja. De “Hulp nodig” knop opent een modal, dit hoor je niet, echter als je door tabt kom je al gauw bij de contactopties. Het telefoonnummer wordt netjes uitgesproken.

Meer over het webwinkel toegankelijkheidsonderzoek 2023?

Lees de conclusie van het webwinkel toegankelijkheidsonderzoek 2023

Bekijk de resultaten van de andere webwinkels in de top 15

Lees meer over onze methodiek

Kan jouw website hulp gebruiken met digitale toegankelijkheid?

Of heb je vragen over de European Accessibility Act? Level Level bereidt je voor op de toekomst met optimaal toegankelijke websites.