Studio Editor: Elementen reorganiseren op DOM-volgorde

Leestijd 4 minuten
Je kunt elementen op een Studio Editor-website herschikken en reorganiseren op basis van de DOM-volgorde. Dit kan de toegankelijkheid van de website verbeteren, omdat het ervoor zorgt dat bezoekers die ondersteunende technologieën gebruiken (zoals schermlezers, enzovoort) door de inhoud van de website in de weergavevolgorde kunnen navigeren.
In dit artikel lees je meer over:
Goed om te weten:
Het ordenen van elementen op DOM-volgorde is vooral belangrijk bij het gebruik van complexere indelingstools op een website, zoals stapels en flexboxes.

Het belang van de DOM-volgorde

Sommige websitebezoekers kunnen ondersteunende technologieën gebruiken om door websites te navigeren, zoals schermlezers en/of de Tab-toets. De DOM-volgorde van de website bepaalt de 'leesvolgorde' voor deze technologieën.
Een logische DOM-volgorde is daarom belangrijk, omdat deze ervoor zorgt dat alle bezoekers door de inhoud van de website 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.
Wil je de DOM-volgorde van een website controleren?
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.

De DOM-volgorde automatisch reorganiseren

Je kunt de DOM-volgorde van elementen in een onderdeel, flexbox of stapel of op een hele pagina automatisch reorganiseren. De volgorde is geoptimaliseerd om overeen te komen met de visuele volgorde van de elementen (van links naar rechts en van boven naar beneden). 
Tip:
Het reorganiseren van de DOM-volgorde van een pagina zorgt ervoor dat deze is geoptimaliseerd en kan indelingsproblemen verbeteren.

Van een pagina:

  1. Klik links in de Editor op Pagina's.
  2. Selecteer de betreffende pagina.
  3. Klik op het Meer acties-pictogram.
  4. Klik op DOM-volgorde reorganiseren.
Het Pagina's-paneel van een website. De cursor klikt op de optie om de DOM-volgorde van een pagina te reorganiseren.

Van elementen:

  1. Klik links in de Editor op Lagen .
  2. Selecteer het relevante onderdeel, de flexbox of de stapel.
  3. Klik op het Meer acties-pictogram.
  4. Klik op DOM-volgorde reorganiseren.
Het Lagen-paneel van een website. De cursor klikt op de optie om de DOM-volgorde van een onderdeel te reorganiseren.

De DOM-volgorde handmatig wijzigen

De DOM-volgorde van de website moet worden geoptimaliseerd. Als je echter een probleem hebt opgemerkt met de DOM-volgorde van een website waaraan je werkt, kun je dit handmatig wijzigen om overeen te komen met de visuele volgorde van elementen (van links naar rechts en van boven naar beneden).

Om de DOM-volgorde handmatig te wijzigen:

  1. Klik links in de Editor op Lagen .
  2. Kies wat je wilt organiseren:
    • Elementen binnen een onderdeel: 
      1. Selecteer een onderdeel om het te openen.
      2. Sleep de elementen naar de juiste positie.
    • Onderdelen: 
      1. Wijs het bovenste gedeelte aan en klik op het Meer acties-pictogram.
      2. Klik op Schikken.
      3. Klik op Naar voorgrond.
      4. Herhaal stap i-iii met alle andere onderdelen, terwijl je van boven naar beneden gaat in het paneel.
Het Lagen-paneel van een website. De cursor klikt op de optie om het bovenste gedeelte naar voren te halen.

Vond je dit artikel nuttig?

|