Maak je pagina's toegankelijk.

Learn DXPR BuilderManage the sitePagina’s toegankelijk en vindbaar maken

Je geeft elke afbeelding een beschrijving, houdt koppen op volgorde en maakt tekst leesbaar op kleur, zodat schermlezer- en toetsenbordgebruikers je pagina's kunnen gebruiken. Deze pagina somt op wat DXPR Builder voor je doet, wat je zelf toevoegt en hoe je het resultaat controleert voordat je publiceert.

Wat de builder voor je doet

  • Echte tekstopbouw. Het Tekst-element gebruikt CKEditor 5 met echte koppen (Heading 1 tot Heading 6), alinea's en lijsten.
  • ARIA op interactieve elementen. Tabs dragen role="tablist" en role="tab". Voortgangsbalken en cirkeltellers dragen role="progressbar" met hun minimum, maximum en huidige waarde. Titels van inklappanelen zijn knoppen die melden of hun paneel open is.
  • Toegankelijke editordialogen. Elk instellingendialoogvenster is een role="dialog" met aria-modal en een titel.
  • Toetsenbordtoegang in de editor. Enter opent de instellingen van een element, Escape sluit een paneel of deselecteert het element, en Ctrl (Cmd op een Mac) met een pijltjestoets verplaatst elementen. Zie de sneltoetsenreferentie voor het toetsenbord.

Lay-outelementen (secties, rijen en kolommen) zijn gewone div-elementen. De structuur die een schermlezer aankondigt komt uit je koppen.

Alt-tekst bij een afbeelding zetten

  1. Wijs de afbeelding aan en klik op More > Settings.
  2. Open het paneel SEO.
  3. Typ een beschrijving in Alt attribute: wat de afbeelding toont en waarom die op de pagina staat, in één of twee zinnen, zonder "image of".
  4. Klik in het dialoogvenster op Save en daarna op Save op de containerbalk.

SEO-paneel van een Afbeelding-element met de Alt attribute Orange painting of a face in profile, naast dat schilderij en het bijschrift Spring exhibition

Wanneer Alt attribute leeg is, schrijft het Afbeelding-element helemaal geen alt en lezen schermlezers mogelijk de bestandsnaam voor. Gebruik voor een puur decoratieve afbeelding in plaats daarvan een sectie-Background image in het paneel Style; schermlezers slaan achtergronden over. De Afbeeldingscarrousel gebruikt één Alt attribute voor al zijn afbeeldingen, dus beschrijf de set.

Door AI gegenereerde afbeeldingen beginnen met je prompt als alt-tekst. Bewerk die zodat hij het resultaat beschrijft in plaats van het verzoek. Zie alt-tekst voor afbeeldingen.

Koppen op volgorde houden

  1. Geef de pagina één Heading 1. De meeste thema's tonen de paginatitel als Heading 1, dus voeg geen tweede toe in de builder. Op DXPR CMS kun je die titel op één pagina verbergen: open op het bewerkformulier DXPR Theme Settings en vink Page Title aan onder DXPR Hide Regions.
  2. Markeer in de werkbalk van het Tekst-element met de koppenlijst sectietitels als Heading 2 en subsecties als Heading 3. Sla geen niveaus over.
  3. Gebruik de lijstknoppen van de werkbalk voor lijsten in plaats van getypte streepjes.

Drie elementen leggen hun kopniveau vast. De Title van Jumbotron is altijd Heading 1, de Title van Kaart is altijd Heading 5 en elke Toggle title van een inklappaneel is een Heading 2.

Kleurcontrast controleren

De kleurkiezers bieden het palet van je thema, maar meten geen contrast, dus controleer het zelf:

Tekst Minimale verhouding (WCAG AA)
Bodytekst 4.5:1
Grote tekst (24 px, of ongeveer 19 px vet) 3:1

Maak voor tekst op een foto de foto donkerder, zodat de verhouding over de hele afbeelding standhoudt. Zet in het paneel Background effects van de sectie Background effect op Gradient met halftransparante donkere Start color en End color. Achtergronden toont de stappen.

Paneel Background effects van een sectie met Gradient geselecteerd, donkere halftransparante kleurvakjes onder Start color en End color en richting 180, naast een bureaufoto die onder een witte kop is verdonkerd

De elementen Knop en Link tonen de tekst die je typt als de linktekst. Schrijf wat de link doet ("Register for Open Day"), niet "click here". Het Link-element heeft ook een Title attribute in zijn SEO-paneel voor een langere beschrijving.

Wat je ziet

  1. Zet View mode op de containerbalk op Preview, zodat geen enkele editorbediening in de weg zit.
  2. Druk op Tab om door de pagina te gaan. Elke knop, link en tab is bereikbaar en toont een zichtbare focusring.
  3. Een geautomatiseerde checker, zoals de toegankelijkheidsaudit van de browser of de axe-extensie, meldt geen fouten voor de builderinhoud op de gepubliceerde pagina.

Als je geen schoon rapport ziet

  • De checker meldt een afbeelding zonder alt-tekst. De Alt attribute van het Afbeelding-element is leeg. Vul die in, of verplaats een decoratieve afbeelding naar een sectieachtergrond.
  • De checker meldt twee Heading 1's. Een Title van Jumbotron is altijd Heading 1, naast de paginatitel van je thema. Gebruik in plaats daarvan een Tekst-element met een Heading 2.
  • De checker meldt een overgeslagen kopniveau. Een Title van Kaart is altijd Heading 5. Laat hem leeg en begin de kaart met een kop van een Tekst-element op het juiste niveau.
  • De checker meldt laag contrast op tekst op een foto. Voeg het hierboven beschreven verloop toe, of kies een donkerdere tekstachtergrond.

Wat nu?