Toegankelijkheid: De DOM-volgorde van een website controleren en aanpassen
7 min
In dit artikel
- DOM-volgorde op websites
- Waarom de DOM-volgorde belangrijk is
- Automatische DOM in de Toegankelijkheidswizard
- De DOM-volgorde van een website handmatig wijzigen
- Websitetaal en DOM
De DOM-volgorde van een website is de volgorde waarin schermlezers en de Tab-toets inhoud op de pagina markeren en/of 'lezen'. Het moet een logische volgorde volgen om ervoor te zorgen dat bezoekers de best mogelijke ervaring op je website krijgen en door de inhoud ervan kunnen navigeren.
DOM-volgorde op websites
Website-DOM is de laad- en leesvolgorde van elementen op websitepagina's. Wix stelt automatisch een DOM-volgorde in op basis van de visuele volgorde van de elementen. Bij de ontwikkeling van onze toegankelijkheidshulpmiddelen testen wij onze producten met de volgende schermlezers:
- Windows + Firefox of Chrome: NVDA (gratis reader)
- iOS + Safari: Voiceover (ingebouwde lezer)
Dit betekent dat we de automatische DOM-volgorde van je website hebben gemaakt met de functies van de bovenstaande toepassingen in gedachten.
Waarom de DOM-volgorde belangrijk is
Het is mogelijk dat sommige websitebezoekers schermlezers en andere ondersteunende technologieën gebruiken om door je website te navigeren. Deze technologieën helpen bezoekers met visuele beperkingen door de inhoud van de website te scannen en deze hardop voor de bezoeker voor te lezen.
Bezoekers die schermlezers gebruiken en mensen met een mobiliteitsbeperking kunnen de Tab-toets gebruiken om door de inhoud van je website te navigeren. De DOM-volgorde van je website is daarom belangrijk voor bezoekers die schermlezers en/of de Tab-toets gebruiken, omdat ze in een logische volgorde door je website moeten kunnen navigeren.
Het websitemenu moet bijvoorbeeld eerst komen, gevolgd door de rest van de elementen in de koptekst, vervolgens de paginatitel, dan de pagina-inhoud, enzovoort. Als de DOM-volgorde onjuist is, kan dit ertoe leiden dat de schermlezer / Tab-toets pagina-inhoud overslaat of er doorheen springt.
Wil je de DOM-volgorde van de website testen?
Je kunt de automatische DOM-volgorde van een website testen door de Tab-toets van je toetsenbord te gebruiken of een schermlezer op de live versie van de website.
Automatische DOM in de Toegankelijkheidswizard
Wanneer je de Toegankelijkheid-wizard opent in de Studio Editor, zie je mogelijk de optie om de DOM-volgorde automatisch te ordenen. We raden aan deze optie te selecteren, omdat dit ervoor zorgt dat de scan van de wizard en de resulterende taken correct zijn.
Zie je dit selectievakje niet?
De optie om de DOM van de website te ordenen wordt niet ingevuld in de volgende gevallen:
- De website is gemaakt na begin november 2024.
- Je hebt eerder de DOM van de website geordend met de Toegankelijkheidswizard.
- Je hebt automatische DOM op de website uitgeschakeld.
De DOM-volgorde van een website handmatig wijzigen
Als je merkt dat de DOM-volgorde van je website niet logisch is, kun je deze handmatig aanpassen om een verbeterde ervaring voor bezoekers te garanderen.
Gebruik de Toegankelijkheidswizard en het Lagen-paneel om de DOM te wijzigen op Wix Editor-websites. Als je een website bouwt in de Studio Editor, kun je de volgorde aanpassen met de Lagen- en Pagina's-panelen van de website.
Belangrijk:
Als de Tab-volgorde van je website al logisch is, dan hoef je niets te doen. Het wijzigen van de volgorde wanneer deze al correct is, kan problemen veroorzaken voor bezoekers die schermlezers en / of de Tab-toets gebruiken.
Om de DOM-volgorde te wijzigen:
Wix Editor
Studio Editor
Omdat Wix automatisch een DOM-volgorde voor je website instelt, moet je deze uitschakelen in de Toegankelijkheidswizard. Je kunt de DOM-volgorde van elementen dan naar behoefte handmatig aanpassen in het Lagen-paneel van je website.
Om de DOM-volgorde handmatig te ordenen:
- Ga naar je Editor.
- Klik bovenaan op Instellingen en selecteer Toegankelijkheidswizard.
- Selecteer Website scannen in de wizard rechts.
- Klik op het Gedetecteerde problemen-tabblad.
- Selecteer Websiteniveau.
- Klik op DOM-volgorde organiseren.
- Selecteer Handmatig.
- Klik op Toepassen.
- Selecteer links in de editor Lagen
. - Controleer de lijst en verwijder overbodige elementen. Dat zijn onder andere dubbele elementen die niet op je website worden gebruikt en die gebruikers van schermlezers in verwarring kunnen brengen.
- Sleep en plaats de elementen in de gewenste volgorde.
Volgende stap:
Open de mobiele editor en herhaal dezelfde stappen.
Let op:
- Met de Tab-toets navigeer je alleen door de interactieve elementen van een website en niet door statische elementen zoals tekst. Als je een schermlezer wilt testen op statische elementen zoals tekst, volg dan de instructies in het helpcentrum van je schermlezer over hoe je goed navigeert op een website met een toetsenbord.
- Vastgezette elementen worden automatisch aan het einde van de tabvolgorde geplaatst. Als je wilt dat deze eerder in de volgorde worden weergegeven, raden we aan het element los te maken en in de koptekst te plaatsen.
En nu?
Ga terug naar de toegankelijkheidschecklist om verder te werken aan de toegankelijkheid van je website.
Websitetaal en DOM
Verschillende talen hebben verschillende leesrichtingen (bijvoorbeeld: Engels leest van links naar rechts en Hebreeuws leest van rechts naar links. Als je de taal van een website hebt gewijzigd naar een taal met een andere leesrichting, zijn de visuele en DOM-volgorde van elementen mogelijk niet langer uitgelijnd.
We raden aan de automatische DOM-optie in de Toegankelijkheidswizard in te schakelen om ervoor te zorgen dat de volgorde van elementen overeenkomt met de leesrichting van de websitetaal.
Belangrijk:
Als de website inhoud heeft in zowel talen van links naar rechts als van rechts naar links, raden we aan in plaats daarvan de DOM-volgorde handmatig aan te passen.
Om automatische DOM in de wizard in te schakelen:
- Scan de website met de Toegankelijkheidswizard.
- Klik op het Gedetecteerde problemen-tabblad.
- Selecteer Websiteniveau.
- Klik op DOM-volgorde organiseren.
- Selecteer Automatisch (aanbevolen).
- Klik op Toepassen.
- (Optioneel) Controleer de visuele weergave van website-elementen om er zeker van te zijn dat ze zijn uitgelijnd.
Let op:
- Deze optie kan de visuele weergave van elementen wijzigen, dus we raden aan de wijzigingen te bekijken om er zeker van te zijn dat de website eruitziet zoals jij wilt.
- Deze functie ondersteunt niet alle websitecomponenten en mogelijk moet je hun leesrichting handmatig aanpassen.
Ben je van gedachten veranderd?
Je kunt de automatische DOM-volgorde vanuit je editor terugdraaien:
- Wix Editor: Klik op het Ongedaan maken-pictogram
in de bovenste balk van je editor.
Let op: Deze optie is alleen van toepassing als de laatste actie die je hebt ondernomen het automatisch reorganiseren van de DOM-volgorde was. - Studio Editor: Herstel een vorige versie van de website vanuit de websitegeschiedenis.