Toegankelijkheidsonderzoek

Issues:
Audit digitale toegankelijkheid website Amsterdam Airport City

(Alleen de bevindingen)

Scope van de evaluatie

Naam website Amsterdam Airport City
Scope van de website Alle pagina's op www.amsterdamairportcity.com/.
Conformiteitsdoel WCAG 2.1 niveau AA

Uitgebreide toetsresultaten

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: Op pagina www.amsterdamairportcity.com/your staan staan 4 links met iconen. Deze iconen hebben een alt-tekst die niet altijd iets toevoegd aan het geheel (zoals 'globe' of 'clock'). Het advies is om (in de code) het getal samen te voegen met de kop, zodat de nieuwe kop bijv '67 Business Parks' wordt. Het icoon kan dan een lege alt krijgen (alt=""). [Daarnaast is het stukje code ' <div class="field__label visually-hidden">Image</div>' overbodig, gebruikers van voorleessoftware horen <img> elementen al voorgelezen als 'Afbeelding'.]
Wanneer die combinatie niet duidelijk genoeg is, kan de benodigde extra informatie visually hidden worden toegevoegd.

Bevinding 2: De iconen naast Highways, Superfast broadband, etc. op pagina www.amsterdamairportcity.com/your-business-our-locations hebben een alt-tekst die geen informatie toevoegd. De tekstuele titels omschrijven de informatie al voldoende. (de iconen). Deze iconen kunnen het beste een lege alt-tekst krijgen.
[Ook hier wordt eerst nog 'Image' voorgelezen.]

Bevinding 3: De alternatieve tekst van de afbeeldingen van de kaart op de homepage is niet beschrijvend genoeg: 'Amsterdam Airport City connected to the world - 01'(/02/03/04). Er wordt een tekstueel alternatief geboden voor de tekst op de afbeeldingen, maar gebruikers weten niet wát er op de kaart staat en dus ook niet waar zij een alternatief voor krijgen.

Bevinding 4: De alternatieve tekst van de afbeeldingen van de kaart op de homepage is niet compleet. De eerste kaart mist in de 'Textual description' de tekst "pre-Covid 2020".

Bevinding 5: Niet alle tekstuele informatie op de afbeelding van de kaart op pagina www.amsterdamairportcity.com/globally-connected komt terug in het tekstalternatief van de afbeelding, of in de tekst op de pagina. Het gaat bijv. om de tekst '244 million consumers within 1000 kilometers'. Screenreadergebruikers hebben daardoor niet de beschikking over dezelfde informatie als ziende gebruikers.

Bevinding 6: Het logo van de gemeente Haarlemmermeer bovenaan pagina www.amsterdamairportcity.com/ heeft geen alternatieve tekst.
Dit geldt ook voor het logo van 'I amsterdam'.
Dit komt op alle pagina's voor.

Bevinding 7: Op pagina www.amsterdamairportcity.com/ staat onder 'Key sectors' tweemaal het logo van l'Oréal Nederland (International Headquarters en Consumer Goods & Food). De alternatieve tekst is 'logo L'Oréal' maar het woord 'Nederland' mist. Dat geldt ook voor het logo van 'Kite, a gilead company' (Life Sciences and Health).
Dit komt ook voor op pagina www.amsterdamairportcity.com/hero-balancer-wins-share-award-… bij het logo van Hero Balancer.

Bevinding 8: Op pagina www.amsterdamairportcity.com/ heeft onder Key sectors - Energy de afbeelding als alternatieve tekst 'Clean energy', maar dat is niet beschrijvend genoeg voor screenreadergebruikers.
Ook de afbeeldingen op pagina www.amsterdamairportcity.com/news-and-business-stories hebben niet allemaal een beschrijvende alternatieve tekst. Bijvoorbeeld de afbeelding naast de kop 'Schneider Electric ranked world’s most sustainable corporation by Corporate Knights' heeft als afbeelding 'Infographic Schneider', terwijl er geen infographic op de afbeelding staat.
Ook de alternatieve teksten op afbeeldingen op pagina's als www.amsterdamairportcity.com/leading-quality-life en www.amsterdamairportcity.com/technology beschrijven vaak niet wat op de afbeelding staat. Controleer alle afbeeldingen op de website en ga na of ze decoratief zijn (dan kan de alt-tag leeggelaten worden) of beschrijf de inhoud van de afbeelding.
Dit komt op meer pagina's voor.

Bevinding 9: De logo's onder 'Companies' op pagina www.amsterdamairportcity.com/your-business-our-locations hebben wel een alternatieve tekst met de naam van het bedrijf (alhoewel sommige logo's het onderschrift missen), maar er staat niet in de alternatieve tekst dat het om een logo gaat (op enkele uitzonderingen na, zoals Liberty Global).
Dit komt op meerdere pagina's voor, waaronder op www.amsterdamairportcity.com/technology.

Bevinding 10: Het deel-icoon naast de social media afbeeldingen op bijvoorbeeld pagina www.amsterdamairportcity.com/contact-us heeft als alternatieve tekst 'share icon'. Aangezien dit icoon functioneert als label voor de links ernaast, moet de tekst beschrijvender zijn, bijvoorbeeld 'Share on social media'. Dit komt op meerdere pagina's voor.

Bevinding 11: Op pagina www.amsterdamairportcity.com/leading-quality-life staan drie (niet dezelfde) afbeeldingen met dezelfde alternatieve tekst 'hyde park'. Als de afbeeldingen decoratief zijn, kan de alt-tag leeg worden gelaten. Zo niet, dan moet de inhoud van de afbeelding worden beschreven..

Bevinding 12: Dit is een advies: De social media afbeeldingen op onder andere pagina www.amsterdamairportcity.com/contact-us hebben zowel een alternatieve tekst als een title-attribuut. Dit kan tot gevolg hebben dat screenreadergebruikers deze informatie dubbel krijgen voorgelezen. Daarnaast wordt het title attribuut niet door alle hulpsoftware ondersteund als alternatieve tekst. Verwijder het title attribuut om dit probleem op te lossen. Dit komt op meerdere pagina's voor.

1.3 Aanpasbaar

1.3.1 Info en relaties (Niveau A)

Informatie over succescriterium 1.3.1 Info en relaties

Uitkomst: Onvoldoende

Bevinding 13: Op alle geteste pagina's zijn verborgen koppen gebruikt als een soort landmarks. Deze koppen zijn visueel verborgen, maar voor screenreaders niet. Bezoekers die een screenreader gebruiken krijgen bijvoorbeeld op pagina www.amsterdamairportcity.com/news-and-business-stories voor zij naar een volgende pagina klikken te horen dat zij op navigatiepunt 'Pagination' zijn. Dit gebeurt niet alleen met koppen. Wanneer gebruikers met een screenreader over pagina www.amsterdamairportcity.com/news-and-business-stories navigeren, krijgen zij naast de alternatieve tekst voor de afbeeldingen ook eerst 'Image' te horen. In de code heeft deze tekst de class fieldlabel visually hidden, maar voor hulpsoftware is deze tekst niet verborgen.

Bevinding 14: De links op de homepage die naar de nieuwsitems verwijzen (lijst van 9 items) zijn opgemaakt als kop niveau 2. Een tekst is alleen een kop als daar content onder staat. Gebruik <b> of CSS opmaak om de links vorm te geven om dit probleem op te lossen. Dit geldt onder andere ook voor de links naar nieuwsitems op pagina www.amsterdamairportcity.com/technology.

Bevinding 15: De bovenste items van de lijsten in de footer zijn visueel kopjes, maar niet zodanig gecodeerd. Screenreadergebruikers kunnen een headinglijst opvragen om zo over de pagina te navigeren. Kopjes die niet met een <h> element zijn opgemaakt, komen daar niet in voor wat het navigeren over de website voor screenreadergebruikers bemoeilijkt.
Dit geldt ook voor de tekst 'Patrick Verhulst' op pagina www.amsterdamairportcity.com/contact-us. Op pagina www.amsterdamairportcity.com/your-business-our-locations staan ook enkele teksten die visueel kopjes zijn, maar niet als kop zijn opgemaakt, zoals 'Key sectors' en 'Companies'.

Bevinding 16: De tekst 'Amsterdam Airport City copyrights 2020' in de footer van de pagina is opgemaakt met <strong>. Ook de introductietekst op pagina www.amsterdamairportcity.com/xpo-decides-favour-amsterdam-… is opgemaakt met <strong>. Dit element markeert de tekst voor screenreadergebruikers als extra belangrijk. Gebruik strong daarom niet voor opmaak. Moet de tekst er toch vetgedrukt uitzien, gebruik dan <b> of gebruik CSS om hetzelfde visuele effect te bereiken.
Dit komt op meerdere pagina's voor, waaronder op www.amsterdamairportcity.com/your-business-our-locations, op www.amsterdamairportcity.com/leading-quality-life en op www.amsterdamairportcity.com/hero-balancer-wins-share-award-… (daar geldt dat ook voor de tekst 'Ted Braakman,....').

Bevinding 17: Alle kopjes behalve de h1 zijn op pagina www.amsterdamairportcity.com/photo-credits opgemaakt met <strong> ipv een headingselement.
Dit komt ook voor op pagina www.amsterdamairportcity.com/disclaimer.

Bevinding 18: De datum van het artikel op pagina www.amsterdamairportcity.com/xpo-decides-favour-amsterdam-… is opgemaakt met <em>. Dit element markeert de tekst voor screenreadergebruikers als extra belangrijk. Gebruik em daarom niet voor opmaak. Moet de tekst er toch schuingedrukt uitzien, gebruik dan <i> of gebruik CSS om hetzelfde visuele effect te bereiken.
Dit geldt ook voor de figcaption 'XPO Logistics rents19,000 m2 at SEGRO Park Amsterdam Airport (source: SEGRO)' onder de afbeelding op dezelfde pagina en de figcaption op pagina www.amsterdamairportcity.com/hero-balancer-wins-share-award-….

Bevinding 19: De quote van Ted Braakman op pagina www.amsterdamairportcity.com/hero-balancer-wins-share-award-… is opgemaakt met <em>. Gebruik in plaats daarvan bijvoorbeeld het <quote> element of (aangezien er aanhalingstekens gebruikt worden) gebruik CSS om hetzelfde visuele effect te bereiken.

Bevinding 20: Onder andere de tekst 'Education First English Proficiency Index 2019' op pagina www.amsterdamairportcity.com/access-talent is opgemaakt als <em>. Gebruikt <cite> voor het citeren van werken. Dit komt op deze pagina meerdere keren voor.
Dit komt op meerdere pagina's voor, waaronder op www.amsterdamairportcity.com/globally-connected.

Bevinding 21: Het icoon 'Print' op bijvoorbeeld pagina www.amsterdamairportcity.com/contact-us is opgemaakt als een lijst met één item. Dit is niet nodig.
Dit komt op meerdere pagina's voor.

Bevinding 22: Onder 'Business Center & Co-Working Space' op pagina www.amsterdamairportcity.com/your-business-our-locations staan onder de koppen 'Flexible work spaces' en 'Shared facilities' twee lijsten die er visueel uitzien als een lijst, maar dat in de code niet zijn.

Bevinding 23: Dit is een advies:
Op de homepage onder de header staan 4 links met afbeeldingen. Wanneer screenreaders op een link belanden, wordt zowel de tekst van het nummer, de afbeelding en de kop voorgelezen, als de paragraaftekst daaronder. Maak liever alleen de kop de linktekst en vergroot vervolgens het klikbare gebied van de link met CSS, zodat de tekst niet dubbel voorgelezen wordt en de gehele paragraaf niet ook voorgelezen hoeft te worden.

Bevinding 24: Dit is een advies:
De h1 van de homepage is 'Where business lives', waar 'Amsterdam Airport City' logischer en beschrijvender zou zijn.

Bevinding 25: Dit is een advies:
De koppenstructuur op pagina www.amsterdamairportcity.com/accessibility is niet logisch. Na de h1 komen op deze pagina zijn alle koppen op deze pagina h4. Kopniveaus zijn niet alleen visueel, maar ook semantisch belangrijk. Een kopniveau geeft aan hulpsoftware en zoekmachines als Google aan welke tekst belangrijk is. Een h4 kop is minder belangrijk dan een h2. Zorg voor een goed oplopende koppenstructuur om dit probleem op te lossen.
Dit komt onder andere ook voor op pagina www.amsterdamairportcity.com/hero-balancer-wins-share-award-….

Bevinding 26: Dit is een advies:
Op pagina www.amsterdamairportcity.com/access-talent staat de linktekst 'here'. Dat is voor screenreadergebruikers die een linklijst opvragen niet beschrijvend genoeg. Het aanpassen van de algemene linkteksten in een lopende zin is een best practice.

Bevinding 27: Dit is een advies:
De tekst 'Get in touch with the expert team of Amsterdam Airport City!' op pagina www.amsterdamairportcity.com/contact-us is opgemaakt als <h3>, terwijl de tekst meer een introtekst lijkt te zijn. Als het geen kop is, maar alleen voor de opmaak als <h3> is gecodeerd, moet de kop met CSS worden vormgegeven in plaats van met een headingselement.

1.3.2 Betekenisvolle volgorde (Niveau A)

Informatie over succescriterium 1.3.2 Betekenisvolle volgorde

Uitkomst: Onvoldoende

Bevinding 28: De afbeelding, datum en tijd van de artikelen staan op pagina www.amsterdamairportcity.com/news-and-business-stories in de code bóven de kop van het artikel. Hierdoor is de relatie voor screenreadergebruikers niet duidelijk. Zorg ervoor dat extra informatie over een artikel onder de betreffende kop staan om dit probleem op te lossen. Dit geldt voor de volgorde in de code, visueel mag de informatie er wel boven staan.

Bevinding 29: Het logo van Hero Balancer, de quote en de dikgedrukte tekst aan zijkant van de pagina www.amsterdamairportcity.com/hero-balancer-wins-share-award-… staan in de code onder de 'Deel dit artikel' opties. Deze informatie hoort echter nog bij het artikel en zou dus boven de Deel-opties moeten staan.

1.4 Onderscheidbaar

1.4.3 Contrast (minimum) (Niveau AA)

Informatie over succescriterium 1.4.3 Contrast (minimum)

Uitkomst: Onvoldoende

Bevinding 30: De tekst 'Where business lives' in de header op de homepage heeft niet overal een hoog genoeg contrast met de achtergrond. De witte tekst heeft bijvoorbeeld op de foto rond de bomen een contrastratio van slechts 1,7:1, waar dat minimaal 3:1 moet zijn. Een mogelijke oplossing is het gebruik van een overlay over de foto om dit probleem op te lossen.

Bevinding 31: De rode teksten op de afbeelding van de kaart, zoals '> 300 direct international connections...' op www.amsterdamairportcity.com/ hebben een te lage contrastwaarde van 4,1:1.

Bevinding 32: De datum en tijd teksten op pagina www.amsterdamairportcity.com/news-and-business-stories hebben een te laag contrast. De contrastratio is hier 2,6:1, waar dat minimaal 4,5:1 moet zijn.

1.4.5 Afbeeldingen van tekst (Niveau AA)

Informatie over succescriterium 1.4.5 Afbeeldingen van tekst

Uitkomst: Onvoldoende

Bevinding 33: De afbeelding van de kaart op pagina www.amsterdamairportcity.com/ bevat afbeeldingen van tekst. Het gaat om de teksten 'Zoom in' en 'Zoom out'. De tekst kan niet worden aangepast aan de behoeften van (slechtziende) gebruikers, waardoor ze de tekst minder goed kunnen waarnemen.
Dit komt ook voor op pagina www.amsterdamairportcity.com/globally-connected voor de tekst 'Center of European purchasing power'.

1.4.10 Reflow (Niveau AA)

Informatie over succescriterium 1.4.10 Reflow

Uitkomst: Onvoldoende

Bevinding 34: Wanneer gebruikers met viewport 1280 bij 1024 inzoomen naar 400% en gebruik maken van de slider en de buttons om in of uit te zoomen op de kaart op de homepage, vallen de teksten van de buttons afhankelijk van hoever is ingezoomd over de tekst op de afbeelding heen.

Bevinding 35: Het volgende viel op:
Wanneer gebruikers met viewport 1280 bij 1024 inzoomen naar 300% verschijnt er op de pagina www.amsterdamairportcity.com/contact-us ineens tussen het kopieer url-icoon en het print-icoon een Whatsapp-icoon.
Een gebruiker kan ook via een webversie Whatsapp openen, dus het Whatsapp-icoon zou niet verborgen hoeven worden in een reguliere weergave.

1.4.11 Contrast van niet-tekstuele content (Niveau AA)

Informatie over succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitkomst: Onvoldoende

Bevinding 36: Het icoon voor het kopiëren van de url op bijvoorbeeld pagina www.amsterdamairportcity.com/contact-us heeft een te laag contrast. De contrastratio is hier 2,6:1, waar dat minimaal 3:1 moet zijn. Dit komt op meerdere pagina's voor.

Bevinding 37: Het Twitter-icoon op bijvoorbeeld pagina www.amsterdamairportcity.com/contact-us heeft een contrastwaarde van 2,9:1.

2. Bedienbaar

2.1 Toetsenbordtoegankelijk

2.1.1 Toetsenbord (Niveau A)

Informatie over succescriterium 2.1.1 Toetsenbord

Uitkomst: Onvoldoende

Bevinding 38: Het icoon voor het kopiëren van de url, bijvoorbeeld op pagina www.amsterdamairportcity.com/contact-us kan niet met het toetsenbord bediend worden.
Dit komt op meerdere pagina's voor.

2.4.3 Focus volgorde (Niveau A)

Informatie over succescriterium 2.4.3 Focus volgorde

Uitkomst: Onvoldoende

Bevinding 39: Op www.amsterdamairportcity.com/ staan onder de kaart verschillende contentblokken met onderwerpen, zoals 'Globally Connected'. Wanneer een onderwerp wordt geselecteerd, verwacht je dat de focus naar de nieuw verschenen content gaat, maar dat is nu niet het geval.
Zie ook criterium 4.1.3.

Informatie over succescriterium 2.4.4 Linkdoel (in context)

Uitkomst: Onvoldoende

Bevinding 40: Bovenaan iedere pagina staat de link 'Amsterdam Airport City'. De link heeft wel een title attribuut 'Back to frontpage' maar het title attribuut wordt niet door alle hulpsoftware ondersteund. Hierdoor is het linkdoel niet voldoende duidelijk.

Bevinding 41: Op pagina www.amsterdamairportcity.com/ staan een aantal 'Learn more' links. Bijvoorbeeld onder 'Key Sectors' - 'International Headquarters'. Het linkdoel kan niet uit deze linktekst worden bepaald. Voeg bijvoorbeeld (in verborgen tekst) toe waarover meer kan worden gelezen.
Bij de 'Learn more' link onder 'Globally Connected' gaat dit bijvoorbeeld wel goed.

Bevinding 42: Wanneer gebruikers op het print icoon op bijvoorbeeld pagina www.amsterdamairportcity.com/contact-us klikken, krijgen zij een pagina met de tekst 'Access denied. You are not authorized to access this page.' Gebruikers verwachten hier dat het printprogramma van hun eigen computer opent. Dit komt op meerdere pagina's voor.

Bevinding 43: Het icoon om de url van de pagina te kopiëren, bijvoorbeeld op pagina www.amsterdamairportcity.com/contact-us, werkt niet. Dit komt op meerdere pagina's voor.

Bevinding 44: Dit is een advies:
Op de homepage onder de header staan 4 links met afbeeldingen. De hele combinatie getal - icoon - titel - paragraaf is nu de linktekst. Hierdoor worden lange teksten voorgelezen en kan het met spraaksoftware lastig zijn de juiste link te activeren.
Maak liever de titel de linktekst en vergroot vervolgens het klikbare gebied met JavaScript.

2.4.7 Focus zichtbaar (Niveau AA)

Informatie over succescriterium 2.4.7 Focus zichtbaar

Uitkomst: Onvoldoende

Bevinding 45: Wanneer de slider naast de kaart op de homepage focus heeft, is dat niet zichtbaar. Zorg dat alle interactieve elementen een zichtbare focus hebben, zodat gebruikers die afhankelijk zijn van het toetsenbord ook op zicht over de pagina kunnen navigeren.
De pijltjesknoppen om door de slider/carrousel op de homepage te navigeren krijgen ook geen zichtbare focus.

Bevinding 46: Het icoon van Facebook op bijvoorbeeld pagina www.amsterdamairportcity.com/contact-us krijgt wel zichtbare focus, maar de linkerkant van de focusrand valt weg. Vergroot het gebied tussen het deel-icoon en het Facebook-icoon om dit probleem op te lossen. Dit geldt ook voor het Whatsapp icoon dat verschijnt wanneer gebruikers met viewport 1280 bij 1024 inzoomen naar 300% op dezelfde pagina. Dit komt op meerdere pagina's voor.

4. Robuust

4.1 Compatibel

4.1.1 Parsen (Niveau A)

Informatie over succescriterium 4.1.1 Parsen

Uitkomst: Onvoldoende

Bevinding 47: Op de homepage komt het meerdere malen voor dat een div element in een span element wordt geplaatst. Dat is niet toegestaan.

Bevinding 48: Op de homepage zijn meerdere paragraaf eind-tags gevonden, zonder openingstag. Dit komt op meerdere pagina's voor, onder andere op www.amsterdamairportcity.com/xpo-decides-favour-amsterdam-….

Bevinding 49: Voor de skiplink wordt het ARIA attribuut role=navigation gebruikt. Die rol verwijst juist naar een groep links die dienen als navigatie, die de skiplinkt juist over slaat. Role=navigation is hier niet van toepassing en onnodig.

4.1.2 Naam, rol, waarde (Niveau A)

Informatie over succescriterium 4.1.2 Naam, rol, waarde

Uitkomst: Onvoldoende

Bevinding 50: Op www.amsterdamairportcity.com/ staan onder de kaart verschillende contentblokken met onderwerpen, zoals 'Globally Connected'. De onderwerpen hebben de rol link, maar hier is een lijst met de rol tablist meer gepast omdat ze niet verwijzen naar een andere plek op de pagina of website, maar iets op de pagina veranderen. Aangezien deze links elders op de website ook voorkomen als daadwerkelijke pagina's is het verwarrend voor screenreadergebruikers die een linklijst opvragen, dat zij met de links op dezelfde pagina blijven. Dit geldt ook voor de onderwerpen onder Key sectors.

Bevinding 51: Er worden een aantal keer onnodige ARIA-attributen gebruikt, die voorgelezen worden aan screenreadergebruikers maar niets toevoegen. Bijvoorbeeld de tekst Amsterdam Airport City bovenaan de pagina (tevens link naar homepage) met aria-label 'branding' of de skiplink met aria-label 'skip-link'.

4.1.3 Statusberichten (Niveau AA)

Informatie over succescriterium 4.1.3 Statusberichten

Uitkomst: Onvoldoende

Bevinding 52: Op www.amsterdamairportcity.com/ staan onder de kaart verschillende contentblokken met onderwerpen, zoals 'Globally Connected'. Wanneer gebruikers op de homepage op de onderwerpen of op de knoppen van de slider/carrousel klikken, wordt er niet aan hulpsoftware doorgegeven dat er iets verandert op het scherm.

****** Tot.: 52 Bevindingen

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-04-26 02:52:44 v2.3-011