CMS: Praktische tips voor toegankelijkheid
13 min
In dit artikel
- Praktische tips voor alt-tekst voor CMS
- Voor niet-decoratieve afbeeldingen
- Voor decoratieve afbeeldingen
- Voor afbeeldingen die dienen als klikbare knoppen
- Voor galerijen die zijn gekoppeld aan 'Afbeelding'-veldtypen
- Voor galerijen die zijn gekoppeld aan de veldtypen 'Mediagalerij'
- Toegankelijke namen voor knoppen
- (Alleen Studio Editor) Elementen toevoegen aan afzonderlijke onderdelen bij het gebruik van 'Meer laden'-knoppen
- (Alleen statische pagina's) 'Volgend/vorig item'-knoppen aan containers toevoegen
- De tekst 'aantal items' aan een container vastmaken
- Invoerelementen toegankelijk maken
- Pagineringsbalken toegankelijk maken
- Veelgestelde vragen
Implementeer praktische tips voor toegankelijkheid in je CMS (Content Management System) om je website bruikbaar te maken voor alle bezoekers, inclusief degenen die afhankelijk zijn van ondersteunende technologieën. Deze methodes omvatten het toevoegen van toegankelijke namen aan knoppen, het gebruik van effectieve alt-tekst voor alle media en het plaatsen van elementen in onderdelen of containers met ARIA-attributen. Gebruik deze richtlijnen om iedereen te helpen gemakkelijker door je inhoud te navigeren en ermee te communiceren.
Praktische tips voor alt-tekst voor CMS
Alt-tekst is essentieel om context te bieden aan afbeeldingen, video's en vectorvormen. Beschrijf bij het schrijven van alt-tekst de media duidelijk en beknopt, alsof AI of schermlezers deze interpreteren. Houd alt-tekst onder de 125 tekens en vermijd woordgroepen als 'afbeelding van'. Bekijk Toegankelijkheid: Je afbeeldingen en galerijen voorbereiden voor een meer gedetailleerde begeleiding voor het schrijven van effectieve alt-tekst.
We raden aan een tekstveld in je CMS-verzameling te maken om als alt-tekst voor elk media-item te gebruiken. Om je verzameling georganiseerd te houden, plaats je dit veld naast het mediaveld dat het vertegenwoordigt en geef je het een duidelijke naam, zoals 'Alt-tekst [naam afbeelding/galerij]'.
Voor video-elementen wordt de alt-tekst-eigenschap Videobeschrijving genoemd in het dataset-koppelingspaneel. Gebruik voor vectorafbeeldingen of -vormen de Alt-tekst is gekoppeld aan-optie. Voor achtergrondafbeeldingen in onderdelen, stroken, kolommen of repeater-items (alleen Wix Editor) gebruik je Alt-tekst op de achtergrond is gekoppeld aan.
Voor decoratieve afbeeldingen en media die geen betekenisvolle inhoud overbrengen, kan hun alt-tekst leeg zijn. Hierdoor kunnen schermlezers deze overslaan en wordt afleiding verminderd.
Voor niet-decoratieve afbeeldingen
Wanneer je niet-decoratieve afbeeldingen aan je CMS toevoegt, is het cruciaal om beschrijvende alt-tekst te bieden. We raden aan een apart 'Tekst'-veldtype in je CMS-verzameling toe te voegen dat de alt-tekst van de afbeeldingen vertegenwoordigt. Concentreer je op het gebruik van specifieke en beschrijvende taal in je alt-tekst. Bijvoorbeeld, in plaats van de alt-tekst te schrijven als 'een vrouw', gebruik je 'een vrouw die madeliefjes plant in een tuin'.
Wanneer je de afbeelding in je editor aan de dataset koppelt, klik je op het Alt-tekst is gekoppeld aan-veld en selecteer je het alt-tekstveld dat je hebt gemaakt. Hierdoor kunnen schermlezers de afbeelding en het doel ervan beschrijven, waardoor je website inclusiever wordt.
Voor decoratieve afbeeldingen
Decoratieve afbeeldingen brengen meestal geen betekenisvolle inhoud over en vereisen geen alt-tekst. Als een afbeelding een louter decoratief doel dient, kun je de alt-tekst losgekoppeld laten in de dataset. Dit helpt schermlezers de afbeelding over te slaan, waardoor onnodige afleiding wordt voorkomen.
Voor afbeeldingen die dienen als klikbare knoppen
Als een afbeeldingslink gekoppeld is aan een dataset-actie, zoals het openen van de dynamische itempagina, moet de alt-tekst de actie beschrijven, in plaats van alleen de afbeelding zelf. Als het klikken op een afbeelding bezoekers bijvoorbeeld naar een profielpagina leidt, kan de alt-tekst 'Lees meer over Willis McSmoot' zijn.
Met expressies kun je statische tekst combineren (bijvoorbeeld: 'Lees meer over') met dynamische verzamelingsveldwaarden (bijvoorbeeld: 'Willes McSmoot') om ervoor te zorgen dat de alt-tekst per afbeelding varieert. Op deze manier kunnen bezoekers het doel van de afbeelding begrijpen bij het gebruik van ondersteunende technologieën.
Om expressies te gebruiken om aangepaste alt-tekst te maken:
- Koppel de relevante afbeelding aan de dataset die koppelt aan je verzameling.
- Klik op de Alt-tekst is gekoppeld aan-dropdown in het Afbeelding koppelen-paneel en selecteer Expressie.
- Klik op het Expressie-veld en voer een functie in die de alt-tekst maakt die je nodig hebt. Je kunt bijvoorbeeld de volgende functie invoeren om 'Lees meer over' te combineren met een 'titel'-veld dat de namen bevat:
1CONCAT("Lees meer over ",title)Voor galerijen die zijn gekoppeld aan 'Afbeelding'-veldtypen
Voor galerijen die koppelen aan 'Afbeelding'-veldtypen, is het belangrijk om alt-tekst voor elke afbeelding op te geven. Maak een apart 'Tekst'-veldtype in je CMS-verzameling specifiek voor alt-tekst van de afbeeldingen. Wanneer je de galerij aan je dataset koppelt, koppel je de Alt-tekst is gekoppeld aan-dropdown aan het bijbehorende alt-tekstveld. Dit zorgt ervoor dat schermlezers beschrijvingen van de afbeeldingen in de galerij kunnen geven, waardoor de toegankelijkheid wordt verbeterd.
Lees meer over het koppelen van galerijen aan je CMS-verzamelingsitems.
Voor galerijen die zijn gekoppeld aan de veldtypen 'Mediagalerij'
Het koppelen van een galerij aan het 'Mediagalerij'-veld is een goede manier om talloze afbeeldingen of video's over een item op een dynamische itempagina weer te geven. Voeg wanneer je dit doet, alt-tekst toe voor elk mediabestand rechtstreeks in het 'Mediagalerij'-veld in je verzameling. Klik naast het relevante item in je verzameling op het 'Mediagalerij'-veld om alt-tekst aan elk mediabestand toe te voegen. Daar kun je ook de titel en beschrijving van elk bestand invoeren. Hierdoor kunnen schermlezers context overbrengen voor zowel afbeeldingen als video's, zodat alle media-inhoud in je galerij toegankelijk is.
Lees meer over het koppelen van galerijen aan 'Mediagalerij'-velden.
Toegankelijke namen voor knoppen
Je kunt toegankelijke namen toevoegen aan knoppen die koppelen aan je CMS. Toegankelijke namen werken als alt-tekst, maar zijn specifiek voor knoppen. Ze helpen schermlezers te beschrijven wat de knop doet of waar deze naartoe leidt. Het toevoegen van toegankelijke namen aan knoppen verbetert de toegankelijkheid van je website en helpt alle bezoekers gemakkelijker door je inhoud te navigeren.
Wanneer je een knop aan je dataset koppelt, gebruik je de Toegankelijke naam is gekoppeld aan-dropdown om de toegankelijke naam te koppelen aan een 'Tekst'-veld in je verzameling. Dit veld moet de actie of bestemming van de knop duidelijk en beknopt beschrijven.
Gebruik bijvoorbeeld in plaats van een generieke naam zoals 'Klik hier', 'Lees meer over onze diensten' of 'Dien je aanvraag in'.
Indien nodig kun je expressies gebruiken om statische tekst te combineren met waarden uit je verzamelingsvelden. Op deze manier bieden schermlezers betekenisvolle beschrijvingen voor elke knop op basis van de inhoud. Je kunt bijvoorbeeld een toegankelijke naam maken zoals:
1CONCAT("Lees meer over ", title)(Alleen Studio Editor) Elementen toevoegen aan afzonderlijke onderdelen bij het gebruik van 'Meer laden'-knoppen
Wanneer je een 'Meer laden'-knop toevoegt in de Studio Editor, bewaar dan alles dat onder de repeater of galerij is geplaatst in een apart onderdeel. Als je elementen in hetzelfde onderdeel plaatst als de repeater of galerij, en direct onder de repeater of galerij, zullen de elementen elkaar overlappen wanneer op de 'Meer laden'-knop wordt geklikt. Deze overlap kan verwarring veroorzaken bij bezoekers omdat het de zichtbaarheid en toegankelijkheid belemmert.
Om dit probleem te voorkomen, moet je er altijd voor zorgen dat alle elementen die je onder de repeater of galerij wilt plaatsen, inclusief de 'Meer laden'-knop, aan een apart onderdeel zijn gekoppeld. Op deze manier, wanneer gebruikers op de 'Meer laden'-knop klikken, wordt de galerij of repeater op de juiste manier uitgevouwen zonder enige overlap, voor een duidelijkere en gebruiksvriendelijkere ervaring.
Lees meer over het toevoegen van een 'Meer laden'-knop:
(Alleen statische pagina's) 'Volgend/vorig item'-knoppen aan containers toevoegen
Als bezoekers op statische pagina's op 'Volgende/vorige item'-knoppen kunnen klikken die ervoor zorgen dat CMS-gekoppelde elementen de inhoud wijzigen, koppel de weergave-elementen dan aan een enkele container. Stel vervolgens de ARIA-attributen (Toegankelijke Rich Internet Applicaties) van de container in zodat schermlezers de gewijzigde inhoud kunnen aankondigen wanneer bezoekers op de knoppen klikken.
Je hoeft alleen de elementen toe te voegen die de veranderende inhoud weergeven. De 'Volgend/vorig item'-knoppen hoeven niet aan een container te zijn gekoppeld.
Wix Editor
Studio Editor
- Ga naar je editor.
- Voeg een container toe.
- Klik links in de editor op CMS
. - Klik op Je verzamelingen.
- Klik en sleep de elementen die CMS-inhoud weergeven naar de container om ze vast te maken.
- Schakel codering in als je dat nog niet hebt gedaan:
- Klik bovenaan op Dev-modus.
- Klik op Dev-modus inschakelen.
- Schakel dev-tools voor toegankelijkheid in:
- Klik bovenaan de editor op Instellingen.
- Selecteer Toegankelijkheidswizard.
- Klik in het paneel rechts op Toegankelijkheid dev-tools.
- Schakel in de editor de schakelaar naast Geavanceerde toegankelijkheidsinstellingen blootstellen in.
- Klik met de rechtermuisknop op de container met gekoppelde elementen die de inhoud van de CMS-verzameling weergeven.
- Selecteer Toegankelijkheid.
- Klik op Attribuut toevoegen.
- Klik op de Kenmerk -dropdown en selecteer aria-live.
- Klik op de Kenmerkwaarde-dropdown en selecteer beleefd.
- Klik op Toevoegen.
- Publiceer je website wanneer je klaar bent om de wijzigingen live te laten gaan.
De tekst 'aantal items' aan een container vastmaken
Als je het aantal dataset-items weergeeft in een tekstelement en bezoekers op een invoerelement kunnen klikken om het aantal items te wijzigen, voeg de tekst dan aan een container toe. Stel daarna de ARIA-attributen (Accessible Rich Internet Applications) van de container in zodat schermlezers het aantal items kunnen aankondigen wanneer dit verandert.
Dit kan relevant zijn wanneer bezoekers op invoer klikken die inhoud filteren of op invoer die inhoud verzamelt. Wanneer bezoekers het aantal weergegeven items kunnen wijzigen, voeg je de tekst die het aantal items toont aan een container toe, zodat schermlezers de wijziging kunnen aankondigen.
Wix Editor
Studio Editor
- Ga naar je editor.
- Voeg een container toe.
- Klik en sleep het tekstelement dat het aantal dataset-items weergeeft naar de container om deze vast te maken. Als je een ander tekstelement hebt dat uitlegt wat het aantal items vertegenwoordigt, voeg je dit ook toe aan de container (bijvoorbeeld: 'Resultaten').
- Schakel codering in als je dat nog niet hebt gedaan:
- Klik bovenaan op Dev-modus.
- Klik op Dev-modus inschakelen.
- Schakel dev-tools voor toegankelijkheid in:
- Klik bovenaan de editor op Instellingen.
- Selecteer Toegankelijkheidswizard.
- Klik in het paneel rechts op Toegankelijkheid dev-tools.
- Schakel in de editor de schakelaar naast Geavanceerde toegankelijkheidsinstellingen blootstellen in.
- Klik met de rechtermuisknop op de container met de gekoppelde tekstelement(en).
- Selecteer Toegankelijkheid.
- Voeg het eerste attribuut toe:
- Klik op Attribuut toevoegen.
- Klik op de Kenmerk-dropdown en selecteer aria-atomic.
- Klik op de Kenmerkwaarde-dropdown en selecteer true.
- Klik op Toevoegen.
- Voeg het tweede attribuut toe:
- Klik op Attribuut toevoegen.
- Klik op de Kenmerk -dropdown en selecteer aria-live.
- Klik op de Kenmerkwaarde-dropdown en selecteer beleefd.
- Klik op Toevoegen.
- Publiceer je website wanneer je klaar bent om de wijzigingen live te laten gaan.
Invoerelementen toegankelijk maken
Wanneer je invoerelementen hebt die zijn ingesteld om inhoud te filteren, worden de filters standaard toegepast zodra een bezoeker een selectie maakt. Je kunt dit gedrag wijzigen door een 'Filters toepassen'-knop toe te voegen.
Voor toegankelijkheid is het beter om een 'Filters toepassen'-knop toe te voegen. Met deze knop wordt de inhoud niet gefilterd totdat bezoekers erop klikken. Dit creëert een betere ervaring, vooral als gebruikers meerdere filters willen instellen voordat ze ze allemaal tegelijk toepassen.
Bij het weergeven van het aantal items in de dataset:
Als bezoekers kunnen klikken op invoer die het aantal items wijzigt, zorg er dan voor dat je de tekst die het aantal items weergeeft, aan een container toevoegt. Bekijk het gedeelte hierboven om meer te weten.
Pagineringsbalken toegankelijk maken
Om pagineringsbalken toegankelijker te maken, voeg je toegankelijke namen toe aan zowel de balk zelf als de knoppen. Deze namen zijn niet zichtbaar op het scherm, maar zijn essentieel voor schermlezers, zodat gebruikers begrijpen hoe ze door pagina's kunnen navigeren. Je kunt de pagineringsbalk bijvoorbeeld een naam geven die 'Paginanavigatie' is en duidelijke namen toewijzen aan knoppen zoals 'Volgende pagina', 'Vorige pagina' of ze aanpassen op basis van je inhoud (bijvoorbeeld: 'Volgend verhaal' of 'Vorige product').
Tip:
Als je in de Studio Editor een 'Meer laden'-knop hebt, zorg er dan voor dat je je pagineringsbalk en al het andere dat onder de repeater of galerij wordt weergegeven, in een apart onderdeel plaatst.
Veelgestelde vragen
Klik hieronder voor antwoorden op veelgestelde vragen over toegankelijkheid.
Hoe moet ik mijn alt-tekstveld een titel geven in het CMS?
Wat als de afbeelding van mijn repeater een mix van decoratieve en niet-decoratieve afbeeldingen gebruikt?
Kan ik een tooltip toevoegen aan een afbeelding die verschijnt wanneer bezoekers de afbeelding aanwijzen?
Zijn de succes-/foutberichten van mijn CMS-formulier toegankelijk?