Hoe maak ik mijn Website Builder-site toegankelijker?
Een toegankelijke website zorgt ervoor dat alle gebruikers, ook mensen met een beperking, je content kunnen bekijken, begrijpen en gebruiken. Gebruik je Website Builder? Dan kun je de toegankelijkheid verbeteren door belangrijke elementen aan te passen en aanbevolen werkwijzen te volgen, zoals het toevoegen van alt-tekst aan afbeeldingen en te zorgen voor een duidelijke structuur in het ontwerp en de content. In dit artikel vind je een checklist met aanbevelingen en verschillende bronnen.
Als je algemene vragen over website-toegankelijkheid hebt, bekijk dan onze handleiding: FAQ over toegankelijkheid van je website.
Opmerking: Bij one.com streven we ernaar om je de tools te bieden waarmee je een website kunt maken en onderhouden die voldoet aan de toegankelijkheidseisen. Je bent echter zelf verantwoordelijk voor volledige naleving. We raden je daarom sterk aan om je goed te verdiepen in de lokale of regionale wetten over toegankelijkheid, omdat er mogelijk vereisten zijn die niet in dit artikel worden behandeld.
Visuele elementen
Alt-tekst voor afbeeldingen, pictogrammen en grafische elementen
Alt-tekst is een leesbare omschrijving van een afbeelding en dient als vervanging als de websitebezoeker deze niet kan zien. Schermlezers kunnen deze alt-tekst voorlezen. In de volgende handleidingen lees je hoe je alt-tekst toevoegt aan afbeeldingen of andere visuele elementen:
- Afbeeldingen (geldt ook voor SVG's en pictogrammen): Hoe voeg ik een afbeelding toe aan mijn Website Builder-site?
- Gebruik de logo-component in Website Builder
- Productafbeeldingen (Webshop): Producten beheren in de Webshop
- Galerij en slideshow voor afbeeldingen: De Galerij- en Afbeelding slider-component gebruiken in Website Builder
- Blogafbeeldingen: Aan de slag met Blogs in Website Builder
Jij hoeft geen alt-tekst toe te voegen aan achtergrondafbeeldingen, omdat die vaak alleen decoratief zijn. Alt-tekst is alleen nodig voor afbeeldingen die belangrijke content overbrengen, informatief zijn of interactie van de websitebezoeker vereisen.
Om aan te geven dat een afbeelding puur decoratief is en overgeslagen kan worden door hulpmiddelen, zet dan in de SEO in de afbeeldingsinstellingen de optie Zet als decoratief element op Aan.
Om volledige naleving te garanderen, raden we aan om alle afbeeldingen te controleren en alt-tekst toe toe voegen of ze als decoratieve elementen te markeren.
Paginataal
Door per pagina de taal in te stellen, zorg je dat schermlezers de pagina correct kunnen voorlezen. Volg de stappen in deze handleiding: Hoe stel ik de taal in voor een pagina in Website Builder?
Auditieve elementen
Ondertiteling en transcripties voor audio en video
Het is niet mogelijk om ondertiteling toe te voegen of transcripties te genereren met de Zelf-gehoste video-optie in Website Builder. Hiervoor zijn echter twee oplossingen:
- Upload de video via YouTube. YouTube ondersteunt ondertiteling. Lees er meer over in onze handleiding: Een YouTube-video toevoegen aan de website.
- Voeg een transcriptie toe als apart, toegankelijk document op je site, je kunt hiervoor het document-component gebruiken. Je leest hier meer over in onze handleiding: Hoe voeg ik een document toe aan mijn Website Builder-site?
Structuur en ontwerp
Semantische koppen
Gebruik de hiërarchie van semantische koppen (H1, H2, H3, paragraaf) in de tekstopmaak om je content logisch en overzichtelijk te ordenen via tags op HTML-pagina's. Hulpmiddelen zoals schermlezers gebruiken deze structuur om content te begrijpen en in de juiste volgorde te presenteren voor de websitebezoeker.
In de Website Builder-editor worden koppen duidelijk gemarkeerd (Kop 1, Kop 2, enz.) wanneer je een tekst-component gebruikt. Je kunt een kop via het menu selecteren wanneer je een nieuw tekst-component aan je site toevoegt, of deze bewerken in het eigenschappenpaneel voor bestaande tekst-componenten.
De Website Builder-templates bevatten duidelijke koppen en tags, en volgen standaard de hierboven beschreven structuur.
Contrastverhouding voor tekst
De minimale vereisten voor de contrastverhouding van websitetekst zijn:
- Koppen: 3:1
- Paragrafen: 4.5:1
Je kunt de tekstkleurverhouding in Website Builder als volgt aanpassen:
Wanneer het kleurenthema AAN staat:
Als je een kleurenthema op je site gebruikt, moet je de contrastverhouding bewerken via de instellingen van het kleurenthema. In deze handleiding wordt uitgelegd hoe je dat kunt doen: Kleurenthema gebruiken in Website Builder.
Wanneer het kleurenthema UIT staat:
Als het kleurenthema is uitgeschakeld, moet je de contrastverhouding bewerken via de algemene instellingen:
- Ga naar Template instellingen rechts onder in de Website Builder-editor.
- Klik op Template-stijlen bewerken in het menu dat verschijnt.
- Je ziet nu een overzicht van alle tekststijlen die op je website worden gebruikt (tekst, links, menu, knop en tabel). Klik op Tekstkleur voor elk item, om via de kleurkiezer een kleur te selecteren of een hex-code in te voeren.
Let op: De Website Builder kan de exacte contrastverhoudingen van je site niet weergeven. Gebruik hiervoor externe tools om deze waarden te bepalen. Probeer bijvoorbeeld deze tool van WebAIM. Hier voer je de hex-codes voor de voor- en achtergrond in en pas je vervolgens de kleur aan totdat je de juiste contrastverhouding en bijbehorende hex-codes bereikt hebt. Je kunt deze codes vervolgens overnemen in Website Builder door kopiëren en plakken.
Niet-tekstueel contrast
Kleurrijke elementen op je website die geen tekst bevatten, zoals achtergronden van secties of gekleurde knoppen, kun je aanpassen via de kleurenthema- of globale template-instellingen, zoals hierboven beschreven.
De stijl van elk element kun je verder aanpassen via de component-instellingen. Als je bijvoorbeeld op een sectie, header of footer klikt, zie je de optie om de kleur of stijl van het item te wijzigen.
Navigatie
Toetsenbordtoegankelijkheid
We raden aan om duidelijke content te gebruiken en complexe elementen, zoals focus-trigger content of hoverboxen te vermijden. Deze laatste kun je vervangen door afbeeldingen of links.
Let op, dropdown menu's zijn wel toegankelijk via het toetsenbord.
Pauzeren, stoppen of verbergen van content
Alle bewegende of interactieve elementen op je website moeten handmatig te besturen of te verbergen zijn. Hier zijn een paar punten die je moet controleren als je deze op je website gebruikt:
- Afbeeldingslider: Voor dit component is automatisch afspelen standaard ingeschakeld, maar je kunt dit uitschakelen en handmatige bediening toevoegen. Ga naar je afbeeldingslider-component, klik op Slideshow instellingen en selecteer vervolgens Navigatie.
- GIF's: Vermijd het uploaden van GIF's via de afbeelding-component als deze geen bedieningselementen bevatten.
- Achtergrondafbeeldingen en -video's: Deze elementen hebben momenteel geen afspeel-/pauzefunctie, we werken aan een oplossing om ook dit aan te bieden. Tot die tijd raden we aan bewegende- of videoachtergronden te vermijden.
- Video's: Zorg ervoor dat bedieningsknoppen zichtbaar zijn en dat automatisch afspelen is uitgeschakeld. Je leest meer over video-instellingen in onze handleiding: Hoe voeg ik een video toe aan mijn Website Builder-site?
Knipperende content
content met meer dan drie flitsen per seconde moet vermeden worden. De Website Builder bevat geen standaard knipperende content, maar je kunt deze wel uploaden. We raden aan om dat niet te doen of in ieder geval een optie beschikbaar te maken voor de bezoeker om deze content handmatig te bedienen of over te slaan.
Gerelateerde artikelen: