Toegankelijkheid hotelwebsite: boeking voor iedereen werkend maken

Toegankelijkheid hotelwebsite: boeking voor iedereen werkend maken

Hotelwebsites vragen bezoekers meer dan alleen lezen. Datums kiezen, kamers vergelijken, aantal gasten invoeren, prijzen controleren en betalen. Elke stap kan mislopen voor schermlezersgebruikers of toetsenbordgebruikers. Dit is nu wettelijk verboden.

De wet geldt al voor jou

De Europese Toegankelijkheidswet (Richtlijn 2019/882) geldt voor alle hotels die directe online boekingen aanbieden. In Nederland wordt dit via de Wet toegankelijkheid producten en diensten geïmplementeerd. In België is het de Wet van 8 mei 2019.

De conformiteitsdatum was 28 juni 2025. Deze is voorbij en handhaving is actief.

• Nederland: ACM (Autoriteit Consument & Markt) handhaaft. Boetes kunnen tot tienduizenden euro's bedragen afhankelijk van ernst.
• België: FOD Economie controleert. Boetes variëren van 500–5.000 euro en hoger.

Als je hotel directe boekingen accepteert via je website (Booking.com API, SiteMinder, of eigen systeem), ben je eronder begrepen.

Het grootste probleem: datumkiezers

Aangepaste kalenderwidgets zijn de nummer één blokkade. Veel kunnen niet alleen met toetsenbord worden gebruikt en werken niet met schermlezers. Een blinde of motorisch beperkte gebruiker kan geen datums selecteren.

Verplichte oplossing:

• Gebruik een standaard HTML-veld <input type="date"> of een echt toegankelijke bibliotheek (bijvoorbeeld Flatpickr, Litepicker, of AirBnb's react-dates met ARIA).
• Deze ondersteunen toetsenbord alleen: Tab om te navigeren, pijlen voor datums, Enter om te bevestigen.
• Test zonder muis. Als je een grafische kalender moet aanklikken, is het niet toegankelijk.

Als je een derde partij boekingsengine gebruikt (Booking.com, SiteMinder, etc.):

• Controleer of de reserveringswidget toegankelijk is.
• Vraag je leverancier: "Ondersteunt je boekingsengine volledige toetsenbordnavigatie en schermlezers?"
• Zo nee, documenteer deze beperking en geef een alternatieve link (contactformulier of telefoonnummer).

Kamerelectie

Kamerfoto's moeten beschrijvingen hebben. Uitrustingspictogrammen moeten leesbaar zijn voor schermlezers.

Wat je moet doen:

• Alt text op foto's: "Tweepersoonskamer met queensize bed, tuinzicht, eigen badkamer" (korte beschrijving, geen marketing).
• Uitrustingspictogrammen: elk pictogram moet zichtbare tekst of alt text hebben. Zet niet alleen een WiFi-pictogram. Schrijf "Gratis WiFi" of gebruik <img src="wifi.png" alt="Gratis WiFi">.
• Kamersvergelijking: als je een tabel aanbiedt, structureer deze met headers (<th>) en rijen (<tr>).

Guestenkiezer (aantal gasten)

De knoppen "+ Gasten" en "- Gasten" moeten duidelijk zijn en navigeerbaar.

• Duidelijke labels: niet zomaar + en -. Gebruik "Gast toevoegen" en "Gast verwijderen" (of visueel equivalent + aria-label voor pictogrammen).
• Logische Tab-volgorde: gebruiker moet met Tab voorspelbaar navigeren.
• Aantal weergeven: het totaal moet worden aangekondigd aan schermlezers. Voorbeeld: <span aria-live="polite">2 gasten</span>.

Betalingsstap

Dit is het meest gevoeligste deel. Dit moet volledig toegankelijk zijn.

Kaartgegevens velden:

• Elk veld (nummer, naam, vervaldatum, CVV) moet een echte <label> hebben.
• <label for="cardnum">Kaartnummer</label> <input id="cardnum">
• Alleen placeholders volstaan niet.

Foutmeldingen:

• Wees specifiek: "Ongeldig kaartnummer (16 cijfers)" niet alleen "Fout".
• Koppel fout aan veld: gebruik aria-invalid="true" en aria-describedby om naar fouttext te wijzen.

Beveiliging zonder toegankelijkheid op te offeren:

• Visuele CAPTCHA's blokkeren gebruikers. Gebruik in plaats daarvan een alternatie (audio CAPTCHA, hCaptcha toegankelijk, of reCAPTCHA v3 onzichtbaar).

Verplichte toegankelijkheidsverklaring

Je moet een toegankelijkheidsverklaring ergens op je website publiceren. Dit is verplicht.

• Zichtbare link: in voettekst of menu, "Toegankelijkheidsverklaring".
• Minimale inhoud:
  • Zeg wat wel toegankelijk is.
  • Noem bekende beperkingen (bijv. "Aangepaste datumkiezer: zie alternatief per telefoon").
  • Geef email en contactformulier voor probleemmeldingen.
  • Als je bekend bent of overheid, leg mogelijk uit welke fixes lopen.

Eenvoudig voorbeeld:

Toegankelijkheidsverklaring
Onze website streeft naar volledige toegankelijkheid.
✓ Teksten en afbeeldingen gestructureerd
✓ Formulieren met duidelijke labels
✓ Toetsenbordnavigatie ondersteund
✓ Voldoende contrast

Bekende beperkingen:
- Aangepaste datumkiezer: gebruik het alternatieve formulier om te boeken (contact@mijnhotel.nl of 06.XX.XX.XX.XX).

Meld een probleem: accessibility@mijnhotel.nl

Checklist: heb je het minimum gedaan?

• Datumkiezer werkt alleen met toetsenbord (niet alleen muis)
• Datumkiezer kondigt datums aan aan schermlezers
• Kamerfoto's hebben beschrijvende alt text
• Uitrustingspictogrammen hebben label of alt text
• Knoppen "+ Gasten" en "- Gasten" hebben duidelijk label
• Totaal gasten wordt dynamisch aangekondigd (aria-live)
• Kaartnummerveld heeft echte <label>
• Naamveld heeft echte <label>
• Vervaldatumveld heeft echte <label>
• CVV-veld heeft echte <label>
• Foutmeldingen zijn specifiek en gekoppeld aan velden
• CAPTCHA is toegankelijk (niet alleen visueel)
• Toegankelijkheidsverklaring bestaat met contactgegevens
• Alternatieve boeking per telefoon beschikbaar (indien beperkingen)
• Je hebt getest met schermlezer (NVDA gratis)

Wat je nu moet doen

1. Controleer je boekingsengine: test zonder muis. Kun je alleen met toetsenbord datums selecteren? Zo nee, is het een schending.

2. Test met schermlezer: download NVDA (gratis), start het en navigeer je boeking. Zijn stappen duidelijk voor iemand die blind is?

3. Controleer formulierlabels: open Inspector (F12), zoek <label> voor elk kaartgegevensveld. Geen <label> = ontoegankelijk.

4. Publiceer een verklaring: zelfs eenvoudig, het is verplicht. Noem beperkingen eerlijk.

5. Zorg voor alternatie: als je site blockeerbaarsen, geef een telefoonnummer of email voor boeking buiten je site.

6. Neem contact op met je boeking provider: vraag een accessibiliteitsplan. Grote spelers (Booking, SiteMinder) moeten helpen. Documenteer hun antwoord.

Toegankelijkheidscompliance is niet optioneel. De deadline is verstreken. Handhaving is begonnen. Handel nu.

Meer weten over de wet? Lees de Europese Toegankelijkheidswet voor ondernemers. Je bent ook verplicht een toegankelijkheidsverklaring te publiceren als je website onder de wet valt. Bekijk ook de gids voor restaurantwebsites voor vergelijkbare maatregelen.