Logo heeft meer tekst dan het tekstalternatief

Het logo in de linkerbovenhoek van de cookiebanner bevat de tekst "Makelpunt.nl", maar de alt-tekst is alleen "logo". In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat.

Oplossing:

Verander de alt-tekst zodat de volledige tekst van het logo erin staat: “Makelpunt.nl”.

Voldoet niet aan SC 1.1.1 Non-text Content

Toegankelijke namen zijn in het Engels geschreven

In de rechterbovenhoek staat een logo met een link. De toegankelijke naam van deze link komt van het aria-label-attribuut en is in het Engels: “Cookiebot - opens in a new window”. Deze naam wordt voorgelezen door schermlezers, volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands).

Oplossing:

Vertaal de teksten van de aria-label-attributen naar het Nederlands, zodat ze correct worden uitgesproken door schermlezers.

Voldoet niet aan SC 3.1.2 Language of Parts

strong-element is gebruikt voor opmaak

In de tab “Toestemming” zijn er selectievakjes met de labels “Noodzakelijk”, “Voorkeuren”, “Statistieken” en “Marketing”. Deze labels zijn gemarkeerd met het <strong>-element om ze vetgedrukt te maken. Het strong-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (vetgedrukte tekst).

Oplossing:

Verwijder de onnodige strong-elementen en gebruik CSS om de tekst vet te maken.

Voldoet niet aan SC 1.3.1 Info and Relationships

Visueel meerdere alinea’s, in de code maar één

In de tab “Over” is een tekstblok met meerdere alinea’s onjuist gemarkeerd als één <div>-element. Visueel lijkt de tekst uit meerdere alinea’s te bestaan: blokjes tekst met witruimtes ertussen. Deze structuur moet ook in de code staan.

Oplossing:

Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.

Voldoet niet aan SC 1.3.1 Info and Relationships

De accordeon heeft geen koppen of de rol van kop is overschreven

In de tab “Details” staan secties met verborgen inhoud, zoals “Noodzakelijk” en “Cookiebot”. De elementen in deze secties die de verborgen inhoud openen en sluiten hebben niet de juiste rol van kop. De teksten waarmee je delen van een accordeon kunt inklappen en uitklappen, doen dienst als koppen voor die delen. Daarom moeten deze teksten ook de rol van kop hebben. Het gaat verkeerd als deze teksten niet in de code als kop zijn gemarkeerd met een h-element zoals h2 of h3.

Voldoet niet aan SC 1.3.1 Info and Relationships

strong-element in plaats van kop-element

In de tab “Details” staan secties met verborgen inhoud. In deze secties zijn sommige teksten onjuist gemarkeerd met <strong> in plaats van de juiste kop-elementen. Bijvoorbeeld “CookieConsent [x11]”, “1.gif”, “cflb”. Het strong-element is niet bedoeld om koppen mee te markeren. Je moet dat altijd doen met een kop-element, zoals h2. Koppen gebruik je om een tekst te structureren. Alleen als je ze als kop markeert met een kop-element, begrijpt hulpsoftware die betekenis. Het strong-element gebruik je wel als je nadruk wilt geven aan enkele woorden of een zinsdeel.

Oplossing:

Verwijder het strong-element en gebruik de juiste kop-elementen om deze koppen te markeren, zoals <h2> of <h3>.

Voldoet niet aan SC 1.3.1 Info and Relationships

Zichtbare linktekst komt niet terug in toegankelijke naam

In de tab “Details” staan in de secties met verborgen inhoud (“Noodzakelijk”, “Marketing” en “Niet geclassificeerd”) links met de zichtbare tekst “Meer informatie over deze aanbieder”. De zichtbare teksten van de links zijn niet opgenomen in hun toegankelijke namen die via een aria-label zijn ingesteld: “Privacybeleid van Cookiebot - opent in een nieuw venster” en “Privacybeleid van Google - opent in een nieuw venster”. Als de zichtbare tekst van een link niet voorkomt in de toegankelijke naam, kan de link niet met spraak worden bediend. De commando’s die de bezoeker uitspreekt door de tekst van de link voor te lezen, zullen de link dan niet activeren.

Oplossing:

Voeg de zichtbare tekst toe aan de toegankelijke naam, bij voorkeur vooraan. In dit geval pas je het aria-label aan, zodat de zichtbare tekst er ook in komt te staan. Bijvoorbeeld: aria-label=”Meer informatie over deze aanbieder - Privacybeleid van Cookiebot - opent in een nieuw venster”).

Voldoet niet aan SC 2.5.3 Label in Name

Kop is niet gemarkeerd als koptekst

In de tab “Details” is in de sectie met de verborgen inhoud “Toestemming voor meerdere domeinen” de volgende tekst niet gemarkeerd als kop: “Lijst met domeinen waarop uw toestemming van toepassing is”. Blinde bezoekers hebben niets aan een (tussen)kop die er wel uitziet als kop, maar die niet als kop is gemarkeerd. Via de koppen op een pagina kunnen gebruikers van hulpsoftware de inhoud scannen of snel naar een bepaalde sectie springen. Maar dat kan alleen als de kop ook echt in de code staat. Als koppen alleen visueel als kop zijn vormgegeven (bijvoorbeeld vetgedrukt), ontstaat bovendien nog een ander probleem: de structuur van de informatie in de code wijkt dan af van de visuele structuur.

Oplossing:

Dit voorkom je door koppen altijd te markeren met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.

Voldoet niet aan SC 1.3.1 Info and Relationships

Opsomming is niet opgebouwd met de HTML-elementen <ul> en <li>

In de tab “Details” staat de tekst “Wij gebruiken geen cookies van dit type” in de secties met verborgen inhoud onder “Voorkeuren” en “Statistieken”. Deze tekst is in de code gemarkeerd als een <p>-element en geplaatst in het <ul>-element (lijst). Hierdoor bevat het lijst-element elementen die niet zijn toegestaan als ‘direct kind’, namelijk het <p>-element.

Oplossing:

Zorg dat alle opsommingen op de juiste manier in de code zijn gemarkeerd.

Voldoet niet aan SC 1.3.1 Info and Relationships

Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

Op alle pagina's staat witte tekst op een lichtblauwe achtergrond of omgekeerd waarbij het contrast niet voldoende is, namelijk 4,0:1. In het hoofdmenu gaat het bijvoorbeeld om de tekst “Inloggen”, op de homepage Home gaat het om de links “Zoeken” en “Lees meer”, en op de pagina Contact zie je het bijvoorbeeld bij de knop “Formulier verzenden”.

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

Voldoet niet aan SC 1.4.3 Contrast (Minimum)

Logo heeft meer tekst dan het tekstalternatief

Op alle pagina's staan logo’s onder de kop “Partners”. De zichtbare tekst van sommige logo's is niet opgenomen in de alternatieve tekst van die logo’s. Bijvoorbeeld: zichtbare tekst van het logo “S-PORT EEN INITIATIEF GEMEENTE'S-HERTOGENBOSCH”, alt-tekst “S-Port logo”, zichtbare tekst “BIM maakt ondernemen mogelijk”, alt-tekst “BIM logo” enzovoorts. In het tekstalternatief staat dus niet alle tekst die in het logo te zien is. Dit moet wel. Zo weten bezoekers die het plaatje niet kunnen zien, ook precies wat er staat.

Oplossing:

Verander de alt-teksten van de logo’s zodat de volledige tekst die te zien is in het logo erin staat.

Voldoet niet aan SC 1.1.1 Non-text Content

Contrast tussen focusindicator en achtergrond is te laag

Op alle pagina's staat onderaan een link met een icoon van een pijl om omhoog te scrollen. Als deze link toetsenbordfocus krijgt, krijgt de link een witte rand. De contrastverhouding tussen de focusindicator (de rand) en de witte achtergrond is 1,01:1. Hierdoor is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om te zien dat dit element toetsenbordfocus heeft.

Oplossing:

Gebruik voor de focusindicator een kleur met een contrast van minimaal 3,0:1 met de achtergrond.

Voldoet niet aan SC 1.4.11 Non-text Contrast

De hamburgerknop van het mobiele menu bevat overbodige tekst

Op kleine schermen staat een menuknop met de toegankelijke naam “Menu knop”, waarmee je het mobiele navigatiemenu kunt openen. Het woord “knop” is overbodig, omdat deze informatie al aanwezig is door de rol van het navigatiemenu.

Oplossing:

Verwijder het woord “knop” uit de toegankelijke naam van de knop.

Voldoet niet aan SC 2.4.6 Headings and Labels

Link naar pagina: Home

Alt-tekst zorgt voor herhaling van tekst

Op de homepage staat onder de kop “Vergaderen in karakteristieke ruimte?” een decoratieve afbeelding met de alt-tekst “Vergaderen in karakteristieke ruimte?”. Deze alt-tekst herhaalt de koptekst. De afbeelding draagt geen andere informatie over dan al in de koptekst staat. Daarom kun je deze als decoratief zien.

Oplossing:

Laat het alt-attribuut leeg om herhaling van de tekst te voorkomen (alt=””).

Voldoet niet aan SC 1.1.1 Non-text Content

Contrast tussen focusindicator en achtergrond is te laag

Op de homepage staat onder de kop “Zoek in ons aanbod 55 beschikbare objecten” een link met de tekst “Zoeken”. Bij toetsenbordfocus krijgt deze link een lichtblauwe rand. De contrastverhouding tussen deze focusindicator (de rand) en de witte achtergrond is 1,4:1. Hierdoor is het voor mensen met een visuele beperking of kleurenblindheid lastig of zelfs onmogelijk om te zien dat dit element toetsenbordfocus heeft. Hetzelfde probleem komt onder andere voor op de pagina Contact bij de knop "Formulier verzenden", op de pagina Login bij de knop "Inloggen" en op de pagina Beschikbaar aanbod bij link "Zoekalert maken".

Oplossing:

Gebruik voor de focusindicator een kleur met een contrast van minimaal 3,0:1 met de achtergrond.

Voldoet niet aan SC 1.4.11 Non-text Contrast

Kleurcontrast van tekst is te laag (tekst kleiner dan 24px en niet vetgedrukt)

Op de homepage staat boven de kop “Partners” blauwe tekst op een lichtgrijze achtergrond. Het gaat onder andere om de tekst “Ruim aanbod maatschappelijke ruimtes”. De contrastverhouding is hier te laag: 3,7:1. Hetzelfde probleem komt onder andere voor op de pagina Login bij de links "Wachtwoord vergeten?" en "Registreren", op de pagina Beschikbaar aanbod onder de kop “Filter resultaten” bij de tekst "Filters" en op de pagina Aanbod op landkaart bij de tekst "Filters".

Oplossing:

Deze tekst is kleiner dan 24px en niet vetgedrukt, daarom moet het contrast minimaal 4,5:1 zijn.

Voldoet niet aan SC 1.4.3 Contrast (Minimum)

Link naar pagina: Contact

strong-element is gebruikt in koptekst

Op deze pagina staat de subkop “Gemeente's-Hertogenbosch” onder de kop “Adresgegevens”. In deze subkop worden zowel een kop-element als het strong-element gebruikt. Het strong-element heeft een semantische waarde. Het geeft een bepaalde betekenis aan de tekst die erin staat, namelijk dat de tekst extra nadruk moet krijgen. Om die reden mag je dit element niet gebruiken om alleen een visueel effect te bereiken (vetgedrukt).

Oplossing:

Gebruik CSS om de tekst vetgedrukt te maken, en verwijder het strong-element.

Voldoet niet aan SC 1.3.1 Info and Relationships

HTML5-foutmeldingen worden getoond

Op deze pagina staat een formulier dat gebruikmaakt van HTML5-validatie, waarbij standaard HTML5-foutmeldingen worden getoond als iemand het formulier instuurt met lege velden of onjuiste gegevens. Deze foutmeldingen worden niet door alle browsers en schermlezers even goed ondersteund. Elke browser toont de meldingen anders, en niet altijd op een toegankelijke manier: de melding is soms kortaf en onvolledig. Hetzelfde probleem komt voor op de pagina Login.

Oplossing:

Voeg altijd zelf foutmeldingen toe aan het formulier. Controleer of er nog meer formulieren zijn waar dit voorkomt.

Voldoet niet aan SC 3.3.1 Error Identification

Foutmelding is een instructie in plaats van een uitleg over de fout

Als je het formulier op deze pagina instuurt met lege velden of onjuiste gegevens, verschijnt de melding "Dit veld is verplicht". Deze melding is een instructie, niet een echte foutmelding. Hetzelfde probleem komt voor op de pagina Login.

Oplossing:

Pas de tekst van de foutmelding aan. Een goede foutmelding maakt duidelijk dat er een fout is gemaakt, en geeft aan waar de fout zit. Vaak staat er een ontkenning in. Een voorbeeld van een goede foutmelding is: "Het veld is niet (goed) ingevuld."

Voldoet niet aan SC 3.3.1 Error Identification

Link naar pagina: Aanbod op landkaart

Kaart heeft geen tekstalternatief

Op deze pagina staat een kaart zonder een tekstalternatief. Deze kaart is niet bedoeld voor navigatie en valt daardoor onder de uitzondering van de wet. Overheidsorganisaties hoeven kaarten en kaarttoepassingen niet toegankelijk te maken als ze niet nodig zijn voor navigatie. Er is echter één uitzondering op deze regel: de informatie die op de kaart wordt getoond, moet ook in tekst op de pagina staan.

Oplossing:

Zorg dat de informatie die met de kaart wordt overgedragen, ook in tekst op de pagina voorkomt.

Voldoet niet aan SC 1.1.1 Non-text Content

Link naar pagina: Jeroen Bosch zaal

Link heeft geen toegankelijke naam

Op deze pagina staan links met afbeeldingen boven de kop “Jeroen Bosch zaal”, waarmee je de afbeeldingen kunt bekijken. Deze links hebben geen toegankelijke naam. Hierdoor begrijpen bezoekers die een schermlezer gebruiken niet wat de bestemming of de functie is van de link. Hetzelfde probleem komt voor op de pagina Monet zaal en op de pagina Grand Café 1629.

Oplossing:

Geef deze link een toegankelijke naam die het doel van de link beschrijft. Dit doe je door duidelijke linktekst te gebruiken, een aria-label toe te voegen of een andere geschikte techniek toe te passen.

Voldoet niet aan SC 4.1.2 Name, Role, Value

Link met een afbeelding, linkdoel is onbekend

Op deze pagina staan boven de kop “Jeroen Bosch zaal” afbeeldingen die een link zijn. Als je erop klikt, openen ze een weergave op volledig scherm van de afbeelding. Deze informatie is niet aanwezig in de HTML-code. Daardoor is het voor een blinde bezoeker niet duidelijk dat dit een link is die een grote weergave van afbeelding opent. Hetzelfde probleem komt voor op de pagina Monet zaal en op de pagina Grand Café 1629.

Oplossing:

Je lost dit op door informatie te geven over het gedrag van de link. Dit kun je als volgt doen: Verborgen tekst toevoegen: voeg beschrijvende tekst toe aan het a-element, zoals (“opent een grote weergave”), die je visueel verbergt met CSS (bijvoorbeeld met de class .sr-only). aria-haspopup=”dialog” gebruiken: voeg het attribuut aria-haspopup met de waarde dialog toe aan het a-element, om aan te geven dat de link een grote weergave opent. Dit kun je zien als een soort dialoogvenster.

Voldoet niet aan SC 2.4.4 Link Purpose (In Context)

Afbeelding zonder tekstalternatief is de enige inhoud van een link

Op deze pagina staan boven de kop “Jeroen Bosch zaal” afbeeldingen die ook een link zijn. Deze afbeeldingen zijn interactief: je kunt erop klikken. Maar doordat de alt-attributen van de afbeeldingen leeg zijn, hebben de links geen linktekst (zie ook succescriterium 2.4.4). Hetzelfde probleem komt voor op de pagina Monet zaal en op de pagina Grand Café 1629.

Oplossing:

Om de links toegankelijk te maken, geef je de afbeeldingen alt-teksten die het linkdoel beschrijven. Zo weten bezoekers die de afbeeldingen niet kunnen zien ook waar de links naartoe leiden.

Voldoet niet aan SC 1.1.1 Non-text Content

Toegankelijke namen zijn in het Engels geschreven

Op deze pagina staan boven de kop “Jeroen Bosch zaal” afbeeldingen die ook een link zijn. Deze links openen de afbeelding in een nieuw venster. Alle elementen in dit venster zijn in het Engels: “Previous (Left arrow key)”, “Next (Right arrow key)”, en “Close (Esc)”. Deze teksten zijn afkomstig van detitle-attributen. Deze teksten worden voorgelezen door schermlezers, volgens de uitspraakregels van de primaire taal van de pagina (in dit geval Nederlands). Hetzelfde probleem komt voor op de pagina Monet zaal en op de pagina Grand Café 1629.

Oplossing:

Vertaal de teksten van de title-attributen naar het Nederlands, zodat ze correct worden uitgesproken door schermlezers.

Voldoet niet aan SC 3.1.2 Language of Parts

Link heeft geen toegankelijke naam

Op deze pagina staat boven de kop “Plattegrond” een sectie met verborgen inhoud die als een link is toegevoegd. Deze link heeft geen toegankelijke naam.

Oplossing:

Geef deze link een toegankelijke naam die het doel van de link beschrijft. Dit doe je door duidelijke linktekst te gebruiken, een aria-label toe te voegen of een andere geschikte techniek toe te passen.

Voldoet niet aan SC 4.1.2 Name, Role, Value

Naam van de knop beschrijft niet wat de knop doet

Het volgende is niet fout, maar een advies om de site nog toegankelijker te maken.

Op deze pagina staan boven de kop “Jeroen Bosch zaal” afbeeldingen die ook een link zijn. Deze links openen de afbeelding in een nieuw venster. In dit venster staat in de rechterbovenhoek een sluitknop met het symbool “x”. De toegankelijke naam is “x”, en deze beschrijft de functie van de knop niet voldoende. Het title-attribuut bevat echter wel de tekst “Close (Esc)”. Hetzelfde probleem komt voor op de pagina Monet zaal en op de pagina Grand Café 1629.

Oplossing:

Voeg tekst toe die deze knop goed beschrijft.

Voldoet niet aan SC 2.4.6 Headings and Labels

Link naar pagina: Makelpunt 's-Hertogenbosch

strong-element is gebruikt voor opmaak

Op deze pagina staat een lijst met links onder de kop "Enkele ketenpartners van het Makelpunt zijn onder meer:". Het strong-element wordt hier onjuist gebruikt om de tekst vetgedrukt te maken.

Oplossing:

Verwijder de onnodige strong-elementen en gebruik CSS om de tekst vet te maken.

Voldoet niet aan SC 1.3.1 Info and Relationships

Opsomming is niet opgebouwd met het HTML-element <ul> of <ol>

Op deze pagina staat een lijst met 5 items onder de kop "Enkele ketenpartners van het Makelpunt zijn onder meer:". Deze opsomming is niet als lijst gemarkeerd in de code. Tekst die eruitziet als een opsomming, moet ook zo in de code worden gemarkeerd. Je gebruikt voor lijsten en opsommingen de HTML-elementen ol (lijst met cijfers) of ul (lijst met bullets). Meestal is hier een knop voor in de content-editor van een CMS. Hulpsoftware weet dan hoe de tekst is gestructureerd. Bovendien kondigen schermlezers dan het aantal items in de lijst aan, voordat ze die gaan voorlezen. Zo weet een blinde bezoeker hoeveel informatie er nog komt.

Oplossing:

Zorg dat alle opsommingen op de juiste manier in de code zijn gemarkeerd.

Voldoet niet aan SC 1.3.1 Info and Relationships

em-element is gebruikt voor opmaak

Op deze pagina staat een lijst onder de kop "Enkele ketenpartners van het Makelpunt zijn onder meer:". Het <em>-element is hier onjuist gebruikt om de tekst cursief te maken, bijvoorbeeld bij “(sport en gezondheid)”, “(maakt ondernemen mogelijk)”. Het em-element heeft een semantische waarde: het geeft een bepaalde betekenis aan de tekst die erin staat. Dit element geeft aan dat de tekst extra nadruk moet krijgen. Om die reden mag dit element niet gebruikt worden om alleen een visueel effect te bereiken (cursieve tekst).

Oplossing:

Verwijder de onnodige em-elementen en gebruik CSS om de tekst schuingedrukt te maken.

Voldoet niet aan SC 1.3.1 Info and Relationships

Link naar pagina: Aanbod op landkaart

Kaart heeft geen tekstalternatief

Op deze pagina staat een kaart zonder een tekstalternatief. Deze kaart is niet bedoeld voor navigatie en valt daardoor onder de uitzondering van de wet. Overheidsorganisaties hoeven kaarten en kaarttoepassingen niet toegankelijk te maken als ze niet nodig zijn voor navigatie. Er is echter één uitzondering op deze regel: de informatie die op de kaart wordt getoond, moet ook in tekst op de pagina staan.

Oplossing:

Zorg dat de informatie die met de kaart wordt overgedragen, ook in tekst op de pagina voorkomt.

Voldoet niet aan SC 1.1.1 Non-text Content

Link naar pagina: Monet zaal

Kop-element is gebruikt voor tekst die geen kop is

Op deze pagina is de tekst "Video's" geen kop, maar is deze wel gemarkeerd met een h3-element. Deze tekst is geen echte kop. Er staat namelijk geen inhoud onder. Maar door het h3-element krijgt de tekst wel deze betekenis. Kop-elementen zijn bedoeld om structuur te geven aan de informatie op een pagina. Mensen die schermlezers gebruiken, vertrouwen op de koppen om door de pagina te navigeren en de opbouw te begrijpen. Zorg dat de tekst die je in een kop-element zet ook echt de functie van kop of tussenkop heeft.

Oplossing:

Verwijder het h3-element en gebruik een ander element, zoals een p-element. Een andere oplossing is om de inhoud onder deze kop toe te voegen.

Voldoet niet aan SC 1.3.1 Info and Relationships

Link naar pagina: https://s-hertogenbosch.makelpunt.nl/aanbod/1167-jeroen-bosch-zaal Link naar PDF: Jeroen Bosch zaal

Geen bevindingen.

Link naar pagina Monet zaal Link naar PDF Monet zaal

Geen bevindingen.

Link naar pagina: Grand Café 1629

De problemen die op deze pagina zijn gevonden, zijn vergelijkbaar met of identiek aan de problemen die op andere pagina's en onderdelen van de website zijn gedetecteerd en beschreven.

Link naar pagina: Login

Invoervelden voor persoonlijke gegevens hebben geen autocomplete-attribuut

Op deze pagina ontbreekt het autocomplete-attribuut bij een formulier met invoervelden voor persoonlijke informatie. Het gaat om het veld “Wachtwoord*”. Kan een bezoeker in een formulier persoonlijke gegevens invullen zoals achternaam, e-mailadres of telefoonnummer? Dan moeten deze invoervelden het autocomplete-attribuut hebben. Hierdoor kunnen browsers en hulpsoftware helpen bij het invoeren. Bijvoorbeeld door de velden al automatisch in te vullen.

Oplossing:

Gebruik het autocomplete-attribuut voor alle velden waar persoonlijke informatie in moet worden gevuld. Voor het e-mailadres gebruik je bijvoorbeeld autocomplete="email". Op deze pagina vind je meer informatie over autocomplete en welke waardes je verplicht moet gebruiken: Input purposes.

Voldoet niet aan SC 1.3.5 Identify Input Purpose

Link naar pagina: Toegankelijkheidspagina

strong-element in plaats van kop-element

De teksten “Verklaring Toegankelijkheid”, “Wat kunt u van ons verwachten?” en “Handhavingsprocedure” zijn onjuist gemarkeerd met <strong>. Ze moeten met de juiste kop-elementen worden gemarkeerd. Hetzelfde probleem komt onder andere voor op de pagina Makelpunt 's-Hertogenbosch, bijvoorbeeld bij de tekst “Welkom op het Makelpunt ’s-Hertogenbosch!” en op de pagina Grand Café 1629 bijvoorbeeld bij de tekst "ARRANGEMENTEN".

Oplossing:

Verwijder het strong-element en gebruik de juiste kop-elementen om deze koppen te markeren, zoals <h2> of <h3>.

Voldoet niet aan SC 1.3.1 Info and Relationships

em-element is in plaats van kop-element gebruikt

Op deze pagina zijn de teksten “hoofddomein:”, “Feedback en contactgegevens:” en “PDF-bestanden” onjuist gemarkeerd met em-elementen. Ze moeten met de juiste kop-elementen worden gemarkeerd. Het em-element is bedoeld om woorden extra nadruk te geven. Het heeft daarmee een andere semantische waarde dan een kop. Dit element moet dan ook niet gebruikt worden voor koppen.

Oplossing:

Verwijder de em-elementen en markeer de tussenkopjes als h3-koppen (of een ander geschikt kopregelniveau).

Voldoet niet aan SC 1.3.1 Info and Relationships

Decoratieve afbeelding is niet verborgen voor schermlezers

Op deze pagina staat boven de kop “Partners” een decoratieve afbeelding met de betekenisloze alt-tekst “dE3HTXptc2Dz-accessibility_16440.png”. Een decoratieve afbeelding geeft geen extra informatie en moet daarom verborgen worden voor schermlezers.

Oplossing:

Je kunt dit op verschillende manieren bereiken: Voor img-elementen gebruik je een leeg alt-attribuut: alt=””. Voor svg-elementen zorg je dat ze óf een title-element hebben, óf verborgen zijn via aria-hidden=”true”. Met aria-hidden=”true” kun je decoratieve afbeeldingen verbergen voor schermlezers. Hetzelfde probleem komt voor op de pagina Vergaderen in karakteristieke ruimte? en op de pagina Makelpunt's-Hertogenbosch.

Voldoet niet aan SC 1.1.1 Non-text Content

Link naar pagina: Sitemap

Het lang-attribuut ontbreekt

Op deze pagina ontbreekt het lang-attribuut op het html-element. Als dit attribuut niet aanwezig is, kan voorleessoftware de pagina niet in de correcte taal voorlezen. De software weet dan niet wat de primaire taal van de pagina is.

Oplossing:

Zorg dat het lang-attribuut aanwezig is op het html-element, en dat dit attribuut de taalcode bevat van de taal van de pagina, bijvoorbeeld lang=”nl” voor Nederlands.

Voldoet niet aan SC 3.1.1 Language of Page

Link naar pagina: Cookies

Visueel meerdere alinea’s, in de code maar één

Op deze pagina is onder de tekst “This website uses cookies … their services” een tekstblok met 6 alinea's onjuist gemarkeerd als een enkel <p>-element.

Oplossing:

Plaats elke alinea in een eigen p-element. Het aantal alinea’s dat je visueel ziet, moet dus gelijk zijn aan het aantal p-elementen in de code.

Voldoet niet aan SC 1.3.1 Info and Relationships

Kop is niet gemarkeerd als koptekst

Op deze pagina zijn de teksten “Necessary (14)”, “Marketing (5)” en “Unclassified (9)” niet gemarkeerd als koppen.

Oplossing:

Markeer koppen altijd met het juiste HTML-element, op het juiste kopniveau: h1, h2, h3, h4, h5 of h6. Meestal kun je het kopniveau kiezen via de content-editor in je CMS. De HTML-code voor de kop wordt dan automatisch toegepast.

Voldoet niet aan SC 1.3.1 Info and Relationships

Link naar pagina: Beschikbaar aanbod

Tabel voor lay-out, maar th-element aanwezig

Op deze pagina staan zoekresultaten met links. Elke link bevat een tabel voor lay-out. In de koprij worden th-elementen gebruikt. Deze tabel is gebruikt om de inhoud op een bepaalde manier vorm te geven. Het gaat dus niet om een tabel met gegevens, maar om een tabel voor lay-out. Je mag een tabel op deze manier gebruiken, maar dan mogen er geen th-elementen in voorkomen. Hetzelfde probleem komt voor op de pagina Jeroen Bosch zaal onder de kop “Vincent van Goghlaan 1 (5246GA )”, op de pagina Monet zaal onder de kop “Vincent van Goghlaan 1 (5246 GA)” en op de pagina Grand Café 1629 onder de kop “Citadellaan 7 (5211XA)”.

Oplossing:

Haal alle th-elementen weg, en voeg role=presentation toe aan het table-element.

Voldoet niet aan SC 1.3.1 Info and Relationships

Naam van de knop beschrijft niet wat de knop doet

Op deze pagina zijn er zoekresultaten met artikelen. Bij elk artikel staat een knop met een symbool van een asterisk (sterretje). Als je op deze knop klikt, verschijnt de melding “Toegevoegd als favoriet” met een sluitknop met het symbool “x”. De toegankelijke naam van deze knop is “x”. Deze naam beschrijft de functie van de knop niet duidelijk genoeg. Een blinde bezoeker weet daardoor niet wat deze knop precies doet. Hetzelfde probleem komt voor op de pagina Jeroen Bosch zaal, op de pagina Monet zaal en op de pagina Grand Café 1629.

Oplossing:

Voeg tekst toe die deze knop goed beschrijft, bijvoorbeeld “Sluit melding”.

Voldoet niet aan SC 2.4.6 Headings and Labels