Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website haskennisplein.sharepoint.com

(Alleen de bevindingen)

Scope van de evaluatie

Naam website haskennisplein.sharepoint.com
Datum 30 juli 2024
Scope van de website Binnen de scope van het onderzoek valt:
  • Alle pagina's op haskennisplein.sharepoint.com
  • Alle PDF's op haskennisplein.sharepoint.com
Buiten de scope van het onderzoek valt:
  • Subwebsite(s) waarbij de HTML en/of het systeem afwijkt van de onderzochte website.
  • Alle externe systemen en websites waar via het onderzochte domein met een link naar wordt verwezen.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

Aantal bevindingen: 28

1. Waarneembaar

1.1 Tekstalternatieven

1.1.1 Niet-tekstuele content (Niveau A)

Informatie over succescriterium 1.1.1 Niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 1: Het logo van HAS Green Academy in de header van iedere pagina, bijvoorbeeld https://haskennisplein.sharepoint.com/sites/haswise/, heeft de alternatieve tekst ‘Organisatielogo’ wat het niet omschrijft. Zorg dat het alt attribuut een tekst omvat naar de visuele weergave, zoals 'logo HAS Green Academy'.

Bevinding 2: In het navigatiemenu staat een wit huisje dat tevens een link naar de hoofdpagina is. De afbeelding heeft het attribuut role=presentation gekregen en wordt daarom niet voorgelezen door de meeste schermleessoftware. Het is genest in een <a> element met het aria-label 'HASWISE hubsite'. Maak het duidelijker waar het huisje voor dient, bijvoorbeeld middels de tekst 'ga naar de HASWISE hoofdpagina' op het img element, en verwijder het role=presentation attribuut. Men kan ook ervoor kiezen om de link samen te voegen met de link ‘Home’ die ernaast staat.

Bevinding 3: Op pagina https://haskennisplein.sharepoint.com/sites/haswise-studie-onderdelen/SitePages/Stage-in-Nederland.aspx staan twee afbeeldingen tussen de platte tekst. De afbeeldingen hebben het attribuut role=presentation gekregen en worden daarom niet voorgelezen door de meeste schermleessoftware. Ze zijn genest in button elementen, zonder toegankelijke tekst. Gebruikers van schermleessoftware horen bij de afbeeldingen slechts dat het klikbare elementen betreffen. Plaats deze content niet als button maar als afbeelding met een hiertoe bedoeld element en zorg voor een goede toegankelijk tekst binnen een alt attribuut. Dit probleem doet zich meermalig voor op de website. Zie tevens SC 1.3.3 en 4.1.2.

Bevinding 4: Op pagina https://haskennisplein.sharepoint.com/sites/haswise-onderzoek/sitepages/Ethisch-handelen.aspx is de grijze banner niet onzichtbaar gemaakt. De afbeelding is opgemaakt met role="img" hierdoor wordt deze afbeelding gepresenteerd aan hulpsoftware met een leeg tekstalternatief. Het advies is om dit soort afbeelding voor hulpsoftware te verbergen met aria-hidden="true".

1.2 Op tijd gebaseerde media

1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) (Niveau A)

Informatie over succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 5: Op pagina https://haskennisplein.sharepoint.com/sites/haswise-studie-onderdelen/SitePages/Stage-in-Nederland.aspx staat de video 'De duurzame stage van Suzanne'. In de video komt tekst in beeld, bijvoorbeeld 'hoe ziet je dag eruit?' rond 0:41 en 'hoe heb jij je stage gevonden?' rond 1:05. Doordat de personage meteen begint met beantwoorden is het verwarrend voor onder andere blinde bezoekers, gezien er voor de tekst in beeld geen audiodescriptie of media-alternatief aanwezig is. Zorg dat alle tekst in beeld een goed alternatief heeft.

1.2.5 Audiodescriptie (vooraf opgenomen) (Niveau AA)

Informatie over succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen)

Uitkomst: Onvoldoende

Bevinding 6: Op pagina https://haskennisplein.sharepoint.com/sites/haswise-studie-onderdelen/SitePages/Stage-in-Nederland.aspx staat de video 'De duurzame stage van Suzanne'. In de video komt tekst in beeld, bijvoorbeeld 'hoe ziet je dag eruit?' rond 0:41 en 'hoe heb jij je stage gevonden?' rond 1:05. Doordat de personage meteen begint met beantwoorden is het verwarrend voor onder andere blinde bezoekers, gezien er voor de tekst in beeld geen audiodescriptie aanwezig is. Zorg dat alle tekst in beeld een goed alternatief heeft.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 7: Op pagina https://haskennisplein.sharepoint.com/sites/haswise-actueel/SitePages/news-hub.aspx staat de kop “Filters” hieronder staan enkele uitklapbare knoppen die nu niet op de juiste manier zijn opgemaakt. De role="treegrid" is niet bedoeld voor dit soort componenten. Op dit moment is het visueel duidelijk dat deze onderdelen uitklapbaar zijn en die informatie is niet beschikbaar voor gebruikers die de caret die naar beneden wijst niet kunnen waarnemen. Het gebruik van role=”menubar” is ook onjuist. Het is een optie om hier de html-elementen details en summary te gebruiken om dit probleem op te lossen. Er zijn meer problemen met deze filteropties. Het gaat onder andere om toetsenbord bediening. Hulpsoftware geeft op dit moment niet de juiste informatie aan gebruikers van hulpsoftware om het voor deze groep mogelijk te maken het nieuws te filteren.

Bevinding 8: Op pagina https://haskennisplein.sharepoint.com/sites/haswise-studie-onderdelen/SitePages/Stage-in-Nederland.aspx staat een video binnen een iframe. Het iframe heeft een aria-label 'YouTube-videospeler' (wat het niet omschrijft) echter is het genest in een div element met een eigen aria-label 'Druk op Enter of op de pijl-omlaag om de ingesloten inhoud in te voeren'. Zorg voor een tekst die de video omschrijft.

Bevinding 9: Op pagina https://haskennisplein.sharepoint.com/sites/haswise-over-de-has/SitePages/rvt.aspx staat een tabel. Visueel bestaat de eerste rij uit kopcellen, echter is de inhoud van deze cellen opgemaakt middels het strong-element. Dit element dient om de nadruk te geven op enkele woorden of zinnen, niet voor styling. Zorg bovendien dat dit geen datacellen (TD) maar kopcellen (TH) zijn zodat ze goed in verband staan met de informatie in de onderstaande kolommen.

Bevinding 10: Op alle pagina’s van https://haskennisplein.sharepoint.com/sites/haswise/ staan bovenaan uitklapbare menu’s zoals “Voor studenten”. Hier staan vetgedrukte teksten die nu niet de juiste relatie met de onderstaande content hebben. Het advies is om deze tekst op te maken als kop, zodat de relatie met de onderstaande content ook voor gebruikers van hulpsoftware beschikbaar is. Het advies is om van deze pop-ups dialoogvensters met koppen en lijsten met links te maken.

Bevinding 11: Advies: Op pagina https://haskennisplein.sharepoint.com/sites/haswise-over-de-has/SitePages/rvt.aspx zijn de visueel grote kop 'Samenvatting' en kleine kop 'Contact' beiden opgemaakt als kop op niveau 2. Advies is om de visuele styling van koppen en de corresponderende kopniveaus in HTML gepaard te laten gaan. Net zoals een bezoeker met het blote oog de structuur van de pagina kan zien, bepaalt schermleessoftware de structuur in HTML voor de blinde bezoeker. Dit probleem doet zich op veel pagina's voor; het is raadzaam om dit integraal te wijzigen.

Bevinding 12: Advies: Op de website worden voor de koppenstructuur zowel kopniveaus (h1, h2, h3 etc.) als een aria-level attribuut (aria-level=1 aria-level=2 etc.) door elkaar gebruikt. Dit is niet afkeurbaar echter niet aan te raden, gezien het bij onder andere updaten van de content voor onregelmatigheden kan zorgen. Op pagina https://haskennisplein.sharepoint.com/sites/haswise-studie-onderdelen/SitePages/Stage-in-Nederland.aspx begint de koppenstructuur bijvoorbeeld met een aria-level=2, met vervolgens een h1 kop. Voor bezoekers die van hulpsoftware de koppenstructuur opvragen en hiermee door de website navigeren, kan dit verwarrend zijn. Laat op een pagina de algemene kop beginnen op niveau 1, en gebruik onderliggende niveaus voor verdere (sub)koppen.

Bevinding 13: Advies: Op pagina https://haskennisplein.sharepoint.com/sites/haswise-actueel/SitePages/news-hub.aspx staan nieuwsberichten. De volledige titel staat in een title attribuut. Dit attribuut wordt niet door alle schermleessoftware voorgelezen. NVDA leest hier de visuele titel voor maar dit is een ingekorte tekst, bijvoorbeeld 'Landelijk Lectorenplatf…ninklijke beschermvrouwe' wat het nieuwsitem niet omschrijft. Advies zou zijn om de gehele titel in HTML te plaatsen.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 14: Op pagina https://haskennisplein.sharepoint.com/sites/haswise-onderzoek/SitePages/Onderzoekspodcast.aspx staat onder 'Contactpersoon' de tekst 'Adviseur Marketing & Communicatie'. De lichtgrijze tekst (HEX ##858585) heeft 3,6:1 contrast, waar dit minimaal 4,5:1 behoort te zijn. Dit probleem doet zich meermalig voor op de website bij pagina's met dergelijke contactdetails.

Bevinding 15: Op pagina https://haskennisplein.sharepoint.com/sites/haswise/ staan nieuwsberichten. De lichtgrijze tekst (HEX ##858585) tussen de titel en de berichtgever heeft 3,6:1 contrast, waar dit minimaal 4,5:1 behoort te zijn.

Bevinding 16: Advies: Op alle pagina's waar placeholdertekst is gebruik heeft deze tekst niet in alle browsers voldoende contrast. Een tekst als "Zoeken op alle sites" op https://haskennisplein.sharepoint.com/sites/haswise/ heeft voor Mozilla Firefox gebruikers nu onvoldoende contrast. Het advies is om CSS aan te passen zodat placeholderteksten een opacity van 1 krijgen.

1.4.13 Content bij hover of focus (Niveau AA)

Informatie over succescriterium 1.4.13 Content bij hover of focus

Uitkomst: Onvoldoende

Bevinding 17: Op het moment dat een gebruiker de toetsenbordfocus op een onderdeel in de website heeft staan en per ongeluk het hoofdmenu opent is het mogelijk om dat opengeklapte menu te sluiten met de escape-toets. Dat lijkt goed, maar dat is niet het geval omdat de pagina terugspringt naar het onderdeel dat toetsenbordfocus heeft. Het is daardoor niet mogelijk om dit onderdeel te sluiten zonder dat de positie van de muisaanwijzer van plek veranderd. Het sluiten moet gedaan worden zonder de grootte en positie van de viewport aan te passen om te voorkomen dat informatie op het scherm onbereikbaar wordt.

2. Bedienbaar

2.4.2 Paginatitel (Niveau A)

Informatie over succescriterium 2.4.2 Paginatitel

Uitkomst: Voldoende

Bevinding 18: Advies: De hoofdpagina heeft als paginatitel 'HASWISE - Home'. De onderzochte pagina's hebben een titel overeenkomstig met een titel die in de content staat. Advies is om tevens de organisatie in de paginatitel op de nemen, zodat op generieke pagina's de bezoeker weet op welke website men is. 'Nieuws' bijvoorbeeld stylen als ‘Nieuws | intranet HASWISE’.

2.4.6 Koppen en labels (Niveau AA)

Informatie over succescriterium 2.4.6 Koppen en labels

Uitkomst: Onvoldoende

Bevinding 19: Op pagina https://haskennisplein.sharepoint.com/sites/Privacy staat er naast de koptekst 'Privacy' een onzichtbaar klikbaar vlak. Dit is waarschijnlijk bedoeld voor een icoon of afbeelding, echter in dit geval niet gebruikt. Gebruikers van schermleessoftware kunnen aan de het tekstalternatief afleiden dat het als link fungeert om naar de algemene privacy pagina te gaan. Bezoekers die middels het toetsenbord navigeren maar geen gebruik maken van andere hulpsoftware, zien hoe het vlak focus ontvangt, maar hebben geen idee wat de functie van dit onderdeel is. Los dit bijvoorbeeld op door deze link te verbergen voor alle gebruikers als er geen icoon op deze plek staat. Dat verbergen kan bijvoorbeeld met display:none. Dit type probleem komt ook voor op andere pagina's zoals https://haskennisplein.sharepoint.com/sites/haswise-over-de-has/sitepages/Instellingsdocumenten.aspx, daar geld hetzelfde advies.

2.5 Input modaliteiten

2.5.3 Label in naam (Niveau A)

Informatie over succescriterium 2.5.3 Label in naam

Uitkomst: Onvoldoende

Bevinding 20: Op pagina https://haskennisplein.sharepoint.com/sites/haswise/ staat midden bovenaan een invoerveld met de placeholdertekst "Zoeken op alle sites" en het aria-label "Zoekvak. Suggesties worden weergegeven terwijl u typt.". De tekst die in beeld staat moet terugkomen in de naam van het invoerveld. Die naam wordt nu volledig bepaald door het gebruik van een aria-label. Dit komt ook op andere pagina's voor.

Bevinding 21: Op pagina Op https://haskennisplein.sharepoint.com/sites/haswise/ staat linksboven de link "Organisatielogo". Deze naam van de link wordt helemaal bepaald door het aria-label attribuut op dit a-element. Het probleem is dat het logo van deze link de zichtbare tekst "HAS Green Academy" bevat. Om te voldoen moet de zichtbare tekst op het logo terugkomen in de naam van de link.

3. Begrijpelijk

3.1 Leesbaar

3.1.1 Taal van de pagina (Niveau A)

Informatie over succescriterium 3.1.1 Taal van de pagina

Uitkomst: Onvoldoende

Bevinding 22: De pagina https://haskennisplein.sharepoint.com/sites/haswise-en-international-student-info heeft een Engelse taalinstelling (lang="en"). De menubalk en overige headerelementen zijn echter Nederlands. Hier moet de taalinstelling lang="nl" gebruikt worden. Zie tevens SC 3.1.2

3.1.2 Taal van onderdelen (Niveau AA)

Informatie over succescriterium 3.1.2 Taal van onderdelen

Uitkomst: Onvoldoende

Bevinding 23: De pagina https://haskennisplein.sharepoint.com/sites/haswise-en-international-student-info begint met een Nederlands menu en moet daarom een Nederlandse taalinstelling krijgen. Hierdoor heeft de Engelse tekst op deze pagina een taalwisseling nodig naar het Engels. Dit kan gedaan worden door het gebruik vna het attribuut lang="en".

3.2 Voorspelbaar

3.2.2 Bij input (Niveau A)

Informatie over succescriterium 3.2.2 Bij input

Uitkomst: Onvoldoende

Bevinding 24: Op alle pagina's van https://haskennisplein.sharepoint.com/sites/haswise/ staat rechtsboven de mogelijkheid om van taal te wisselen. Daar is een element met role="combobox" gebruikt. Dat is niet de juiste rol voor deze functionaliteit. Het is niet toegestaan om een andere pagina te laden na het instellen van deze component van de gebruikersinterface.

4. Robuust

4.1 Compatibel

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 25: Op pagina https://haskennisplein.sharepoint.com/sites/haswise-actueel/SitePages/Verkiezingen---Studenten-leden-hogeschoolraad.aspx?web=1 staat de knop 'Hogeschoolraad HAS Hogeschool'. Als de muis kort op deze knop staat komt er een pop-up beeld en als de muis langer op deze knop staat komt er een andere pop-up in beeld met meer informatie. Indien de gebruiker deze knop activeert met en klik komt er een derde pop-up in beeld. Het is technisch niet mogelijk om één knop zo op te maken dat al deze verschillende mogelijke interacties goed beschikbaar zijn voor hulpsoftware. Het is ook zo dat het element met tabindex="0" een goede rol moet hebben. Het element met role="button" is door het gebruik van tabindex="-1" niet beschikbaar voor hulpsoftware.

Bevinding 26: dat bij hover een card met contactgegevens opent. Er is hier sprake van meerdere geneste elementen met de button rol. De button met het aria-label 'Naamregel voor de auteur van de pagina. Hogeschoolraad HAS Hogeschool . Druk op Enter om de details voor deze persoon te openen' heeft het attribuut tabindex="0", ofwel toetsenbordfocus zichtbaar. De geneste button met het aria-label 'Opent profielkaart voor Hogeschoolraad HAS Hogeschool' heeft het attribuut tabindex="-1", ofwel toetsenbordfocus onzichtbaar. Dit kan problemen veroorzaken bij schermleessoftware. Sommige hulpmiddelen lezen hier de tweede tekst niet voor. Nest interactieve functies niet op deze wijze. Dit probleem doet zich meermalig op de website voor.

Bevinding 27: Op pagina https://haskennisplein.sharepoint.com/sites/haswise-studie-onderdelen/SitePages/Stage-in-Nederland.aspx staan twee interactieve afbeeldingen, een kaart en een serie logo’s binnen een figure element. De afbeeldingen hebben het attribuut role=presentation gekregen en worden daarom niet voorgelezen door de meeste schermleessoftware. De figure-elementen hebben tabindex=”0” en vallen daardoor in de focus volgorde. Gebruikers van schermleessoftware horen bij de afbeeldingen slechts dat het klikbare elementen betreffen. Voor hulpsoftware is nu het figure-element de component van de gebruikersinterface. Maak dit soort afbeeldingen niet interactief. Indien de gebruiker de afbeelding groter wil zien is het herschalen van de pagina een betere optie. Zie tevens SC 1.1.1.

Bevinding 28: Het gebruik van het attribuut aria-haspop="true" is alleen toegestaan als er een WAI-ARIA menu of menubar in beeld komt na het activeren van de knop waarop dit attribuut staat. Elk gedetecteerd gebruik van dit attribuut met deze waarde heeft nu onjuiste informatie door aan gebruikers van hulpsoftware en wordt daarom afgekeurd. Op pagina https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup staat meer informatie over het gebruik van dit attribuut.

Onderbouwing van de evaluatie

Het onderzoek is uitgevoerd op basis van de evaluatiemethode van het W3C, WCAG-EM. Dit gebeurt grotendeels handmatig door een steekproef te nemen. Voor een quickscan geldt dat we slechts delen uit deze methodiek gebruiken. Ondanks alle zorgvuldigheid en ervaring van de onderzoeker kan het voorkomen dat een probleem niet gesignaleerd is. Houd er rekening mee dat in een volgend onderzoek bepaalde onderdelen anders worden beoordeeld omdat technologieën en hulpsoftware worden doorontwikkeld. Bij het handmatig onderzoek wordt gebruik gemaakt van tools.

Steekproef getoetste webpagina's

Ondersteunende technieken

Bronnen

Deze rapportage is grotendeels gemaakt met de online evaluatietool van W3C.

Geprint: 2024-11-23 09:09:33 v2.4-011