Samenvatting
Tellr heeft intern de opdracht gekregen om onderzoek te doen naar de toegankelijkheid van de website app.tellr.nl. Er zijn 4 schermen geselecteerd en deze zijn gecontroleerd of ze voldoen aan de criteria uit de WCAG 2.1.
De app voldoet aan 30 van de 44 succescriteria.
Bij de volgende 14 criteria zijn problemen gevonden:
-
1.1.1 Niet-tekstuele content (A)
-
1.3.1 Info en relaties (A)
-
1.3.2 Betekenisvolle volgorde (A)
-
1.4.3 Contrast (minimum) (AA)
-
1.4.10 Reflow (AA)
-
2.1.1 Toetsenbord (A)
-
2.4.1 Blokken omzeilen (A)
-
2.4.2 Paginatitel (A)
-
2.4.7 Focus zichtbaar (AA)
-
3.1.1 Taal van de pagina (A)
-
3.1.2 Taal van onderdelen (AA)
-
3.3.1 Fout identificatie (A)
-
3.3.3 Foutsuggestie (AA)
-
4.1.2 Naam, rol, waarde (A)
Volledig onderzoek
Principe 1. Waarneembaarheid
Het pricipe is dat de mensen de inhoud van je website moeten kunnen zien en horen, ook als ze niet alles kunnen zien of horen. In dit hoofdstuk zal er gekeken worden in hoeverre de website Tellr de richtlijnen van waarneembaarheid volgt.
Richtlijn 1.1 Tekstalternatieven
1.1.1 Niet-tekstuele content
Conclusie: ❌ voldoet niet.
| Scherm | Probleem | |
| 1 | Kalender | Gebruikers uitnodigen en instellingen hebben een uuid, in plaats van een functieomschrijving. Hierdoor weet een persoon met een screenreader bijvoorbeeld niet waar deze knoppen voor gebruikt worden. Een oplossing is om hier een label aan toe te voegen met 'uitnodigen' en 'instellingen', dit punt staat op de roadmap. |
| 2 | Kalender | Volgende en vorige periode missen een label/uitleg die de functie beschrijft. Een oplossing is om 'volgende periode' en 'vorige periode' neer te zetten. |
Richtlijn 1.2 Op tijd gebaseerde media
1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen)
Conclusie: ✅ voldoet.
1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen)
Conclusie: ✅ voldoet.
1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)
Conclusie: ✅ voldoet.
1.2.4 Ondertitels voor doven en slechthorenden (live)
Conclusie: ✅ voldoet.
1.2.5 Audiodescriptie (vooraf opgenomen)
Conclusie: ✅ voldoet.
Richtlijn 1.3 Aanpasbaar
1.3.1 Info en relaties
Conclusie: ❌ voldoet niet.
| Scherm | Probleem | |
| 1 | Kalender | Er is nergens een titel met het woord 'kalender'. De h1 wordt gebruikt voor de filter titels. Een oplossing zou zijn om een verborgen h1 titel te maken bovenin de dom, en om dan de overige titels h2 of h3 te maken. |
| 2 | Strategie | Alle headings gebruiken hier h1. Er is dus geen hierarchie qua titels. Een oplossing zou zijn om ze te splitsen in h1, h2 en h3. |
| 3 | Strategie instellingen | Er zijn hier meerdere titels, zoals 'Strategie instellingen' die niet gebruik maken van een header tag. |
| 4 | Alle | Het Tellr logo linksbovenin heeft geen informatie over waar de link heen gaat. |
1.3.2 Betekenisvolle volgorde
Conclusie: ❌ voldoet niet.
| Scherm | Probleem | |
| 1 | Alle | Knoppen worden twee keer gefocust wanneer hier doorheen getabbed wordt. Dit zorgt voor verwarring, omdat het net zo goed de volgende knop zou kunnen zijn. De oplossing is om te kiezen voor een anchor tag, of een button. Niet tegelijkertijd gebruiken. |
1.3.3 Zintuiglijke eigenschappen
Conclusie: ✅ voldoet.
1.3.4 Weergavestand
Conclusie: ✅ voldoet.
1.3.5 Identificeer het doel van de input
Conclusie: ✅ voldoet.
Richtlijn 1.4 Onderscheidbaar
1.4.1 Gebruik van kleur
Conclusie: ✅ voldoet.
1.4.2 Geluidsbediening
Conclusie: ✅ voldoet.
1.4.3 Contrast (minimum)
Conclusie: ❌ voldoet niet.
| Scherm | Probleem | |
| 1 | Strategie | Thema's aanpassen link heeft een contrast waarde van 2.5:1. Dit bereikt niet het minimum van 4.5:1. Dit geldt ook voor de datum periode tekst. |
| 2 | Instellingen | Reguliere teksts heeft een contrast waarde van 2.5:1. Dit bereikt niet het minimum van 4.5:1. |
1.4.4 Herschalen van tekst
Conclusie: ✅ voldoet.
1.4.5 Afbeeldingen van tekst
Conclusie: ✅ voldoet.
1.4.10 Reflow
Conclusie: ❌ voldoet niet.
| Scherm | Probleem | |
| 1 | Account settings | Bij een kleine hoogte zijn er meerdere opties van de popup die buiten het scherm vallen. Dit zou scrollbaar moeten zijn. |
| 2 | Alle | Opmerkingen popup valt buiten het scherm bij kleine hoogte. Deze zou links van de knop passen. |
1.4.11 Contrast van niet-tekstuele content
Conclusie: ✅ voldoet.
1.4.12 Tekstafstand
Conclusie: ✅ voldoet.
1.4.13 Content bij hover of focus
Conclusie: ✅ voldoet.
Principe 2. Bedienbaar
Componenten van de gebruikersinterface en navigatie moeten bedienbaar zijn.
Richtlijn 2.1 Toetsenbordtoegankelijk
2.1.1 Toetsenbord
Conclusie: ❌ voldoet niet.
| Scherm | Probleem | |
| 1 | Alle | Opmerkingen popup is niet te bereiken met een toetsenbord. Deze moet de button tag en/of de eigenschappen van een button tag krijgen. |
2.1.2 Geen toetsenbordval
Conclusie: ✅ voldoet.
2.1.4 Enkel teken sneltoetsen
Conclusie: ✅ voldoet.
Richtlijn 2.2 Genoeg tijd
2.2.1 Timing aanpasbaar
Conclusie: ✅ voldoet.
2.2.2 Pauzeren, stoppen, verbergen
Conclusie: ✅ voldoet.
Richtlijn 2.3 Toevallen en fysieke reacties
2.3.1 Drie flitsen of beneden drempelwaarde
Conclusie: ✅ voldoet.
Richtlijn 2.4 Navigeerbaar
2.4.1 Blokken omzeilen
Conclusie: ❌ voldoet niet.
| Scherm | Probleem | |
| 1 | Alle | Er is geen manier om direct langs alle herhaalde menu opties naar de primaire content te gaan. |
2.4.2 Paginatitel
Conclusie: ❌ voldoet niet.
| Scherm | Probleem | |
| 1 | Kalender | Er is geen titel die de functie omschrijft. |
2.4.3 Focus volgorde
Conclusie: ✅ voldoet.
2.4.4 Linkdoel (in context)
Conclusie: ✅ voldoet.
2.4.6 Koppen en labels
Conclusie: ✅ voldoet.
2.4.7 Focus zichtbaar
Conclusie: ❌ voldoet niet.
| Scherm | Probleem | |
| 1 | Strategie | Meerdere knoppen rondom de thema's hebben geen focus state. |
Richtlijn 2.5 Input Modaliteiten
2.5.1 Aanwijzergebaren
Conclusie: ✅ voldoet.
2.5.2 Aanwijzerannulering
Conclusie: ✅ voldoet.
2.5.3 Label in naam
Conclusie: ✅ voldoet.
2.5.4 Bewegingsactivering
Conclusie: ✅ voldoet.
Principe 3. Begrijpelijk
Informatie en de bediening van de gebruikersinterface moeten begrijpelijk zijn.
Richtlijn 3.1 Leesbaar
3.1.1 Taal van de pagina
Conclusie: ❌ voldoet niet.
| Scherm | Probleem | |
| 1 | Alle | De lang van de html is engels, maar de tekst is nederlands. |
3.1.2 Taal van onderdelen
Conclusie: ❌ voldoet niet.
| Scherm | Probleem | |
| 1 | Login | Bij een verkeerde combinatie komt er te staan 'invalid login credentials'. Dit is een andere taal dan de rest van de content. |
Richtlijn 3.2 Voorspelbaar
3.2.1 Bij focus
Conclusie: ✅ voldoet.
3.2.2 Bij input
Conclusie: ✅ voldoet.
3.2.3 Consistente navigatie
Conclusie: ✅ voldoet.
3.2.4 Consistente identificatie
Conclusie: ✅ voldoet.
Richtlijn 3.3 Assistentie bij invoer
3.3.1 Fout identificatie
Conclusie: ❌ voldoet niet.
| Scherm | Probleem | |
| 1 | Login | Bij een verkeerde combinatie komt er te staan 'invalid login credentials'. Dit refereert niet direct naar de velden die fout zijn gegaan. Een beter alternatief zou kunnen zijn: 'Email of wachtwoord is verkeerd' |
3.3.2 Labels of instructies
Conclusie: ✅ voldoet.
3.3.3 Foutsuggestie
Conclusie: ❌ voldoet niet.
| Scherm | Probleem | |
| 1 | Login | Bij een verkeerde combinatie komt er te staan 'invalid login credentials'. Er is geen suggestie om het opnieuw te proberen met een andere input. Dit is wel wenselijk. |
3.3.4 Foutpreventie (wettelijk, financieel, gegevens)
Conclusie: ✅ voldoet.
Principe 4. Robuust
Content moet voldoende robuust zijn om betrouwbaar geïnterpreteerd te kunnen worden door een breed scala van user agents, met inbegrip van hulptechnologieën.
Richtlijn 4.1 Compatibel
4.1.1 Parsen
Conclusie: ✅ voldoet.
4.1.2 Naam, rol, waarde
Conclusie: ❌ voldoet niet.
| Scherm | Probleem | |
| 1 | Alle | Form-elementen missen op diverse plekken labels, ids en namen. |
| 2 | Alle | In de header zijn er links die zich voordoen als knoppen. Ze hebben dus de verkeerde rol (in dit specifieke geval hebben ze beide rollen). |
| 3 | Strategie instellingen | Bij de checkboxes zijn er labels die niet de label tag gebruiken. Het is gewenst om dit wel te doen. |
Links naar bronnen
In dit onderzoek wordt gerefereerd aan verschillende bronnen. Onderstaande lijst bevat de links naar deze bronnen.
- Gerefereerde specificaties