Bij het ontwikkelen en testen van WordPress-websites is een staging omgeving essentieel om goed te kunnen ontwikkelen en bijvoorbeeld debuggen als je problemen hebt. Een staging omgeving biedt een veilige plek om wijzigingen door te voeren en nieuwe functionaliteiten te testen zonder de live website te verstoren.

Soms is het nodig of handig om bepaalde delen van de stagingomgeving door te verwijzen naar de live website, bijvoorbeeld mediabestanden die al op de live site staan. Ook kun je dit inzetten bij website die veel data hebben. Waarom zou je constant die data heen en weer verhuizen naar je staging omgeving als je dit kunt voorkomen met deze simpele redirect van de uploads folder?

Als je de onderstaande regel in je .htaccess bestand plaatst hoef je nooit meer de uploads folder naar je staging website over te zetten.

# Apache .htaccess
RedirectMatch 301 ^/wp-content/uploads/(.*) https://livewebsite.com/wp-content/uploads/$1

Als je gebruik maakt van hosting die NGINX gebruikt in plaats van Apache (zoals bijvoorbeeld Kinsta) dan kun je deze regels toevoegen in de NGINX configuratie:

# Nginx
location ~ ^/wp-content/uploads/(.*) {
rewrite ^/wp-content/uploads/(.*)$ https://livewebsite.com/wp-content/uploads/$1 redirect;
}

Bij beide opties moet je natuurlijk de juiste live locaties opgeven.

Wat doet deze redirect in een staging omgeving?

Deze regel zorgt ervoor dat alle mediabestanden (zoals afbeeldingen, PDF’s of video’s) op de staging omgeving niet lokaal worden geladen, maar direct van de live website komen. Dit kan handig zijn wanneer:

  1. Mediabestanden niet worden gekopieerd naar de stagingomgeving om schijfruimte te besparen;
  2. Je de staging omgeving wilt gebruiken zonder een exacte kopie van de uploads-map te hoeven maken
  3. Je wijzigingen wilt testen zonder dubbele opslag van mediabestanden;

Als een gebruiker op de stagingomgeving naar een afbeelding verwijst, zoals /wp-content/uploads/image.jpg, wordt deze via een permanente 301 redirect doorverwezen naar http://livewebsite.com/wp-content/uploads/image.jpg.

Wil je weten of het werkt? In de bron zie je nog steeds de ‘normale’ staging url’s bij de images staan. Als je in de Chrome developer console kijkt zie je bij de images een 302 redirect bij de status staan. Als je dit ziet dan weet je dat jouw instellingen goed ingesteld staan.

Chrome console

Voordelen van een 301 redirect op de uploads folder

Een belangrijke reden om deze 301 redirect te gebruiken is efficiëntie. Het kost veel minder tijd en serverruimte, omdat je niet alle mediabestanden hoeft te dupliceren naar de staging omgeving. Bovendien is het eenvoudiger om een staging omgeving snel op te zetten als je alleen de noodzakelijke onderdelen (zoals WordPress thema’s, plugins en databases) kopieert.

Daarnaast zorgt de permanente redirect (301) ervoor dat zoekmachines en browsers begrijpen dat de stagingomgeving niet de primaire bron van deze bestanden is. Dit voorkomt verwarring over duplicate content mocht je per ongeluk vergeten om het vinkje in de instellingen aan te zetten waarmee je Google vraagt om de website niet te indexeren.

Nadelen van deze oplossing

Hoewel deze aanpak veel voordelen biedt, zijn er ook enkele punten om rekening mee te houden:

  • Externe afhankelijkheid: Als de live website om wat voor reden dan ook offline is, kunnen de mediabestanden op de stagingomgeving niet worden geladen. Wat ons betreft geen probleem aangezien je prioriteit dan toch bij de live website ligt om die weer online te krijgen.
  • Beveiliging: Zorg ervoor dat je stagingomgeving niet publiek toegankelijk is. Gebruik een wachtwoordbeveiliging of IP-whitelisting om te voorkomen dat zoekmachines of bezoekers onbedoeld toegang krijgen.

Om deze redirectregel toe te passen, voeg je de regel toe aan het .htaccess-bestand in de root van je staging omgeving. Zorg ervoor dat de staging omgeving goed gescheiden is van de live website om fouten of conflicten te voorkomen. Een typische situatie waarin je deze setup gebruikt, is bij het testen van aanpassingen in je thema of plugins. Als je bijvoorbeeld werkt aan een nieuwe lay-out of functionaliteit en je afbeeldingen vanuit de live website laadt, kun je volledig focussen op het testen zonder onnodige vertragingen.

Het gebruik van een RedirectMatch 301 op een staging omgeving is een slimme en efficiënte manier om mediabestanden van de live site te gebruiken. Het maakt je staging lichter en sneller, terwijl je toch toegang hebt tot alle nodige mediabestanden. Door deze aanpak goed te implementeren, kun je tijd besparen en tegelijkertijd consistentie garanderen tussen je staging- en liveomgeving.

Mocht je twijfelen over hoe je deze redirect moet instellen of wil je hulp bij het optimaliseren van je stagingomgeving? Neem gerust contact met ons op. Wij helpen je graag verder!

Hoe werkt een screenreader op een Mac?

Op een Mac-computer is de standaard ingebouwde screenreader VoiceOver beschikbaar. Dit krachtige hulpmiddel helpt gebruikers met een visuele beperking om het scherm te navigeren en te gebruiken via gesproken feedback of braille-uitvoer. Hieronder leggen we uit hoe VoiceOver werkt en hoe je het kunt gebruiken.

VoiceOver activeren

VoiceOver kan eenvoudig worden ingeschakeld:

  1. Ga naar Systeeminstellingen > Toegankelijkheid > VoiceOver en schakel het in.
  2. Of gebruik de sneltoets Command + F5.

Bij het inschakelen biedt VoiceOver een korte introductie en een gids om de basisfuncties te leren.

Navigeren met VoiceOver

VoiceOver maakt gebruik van toetsencombinaties en een cursor die elementen op het scherm markeert. Hier zijn enkele basisprincipes:

  1. De VoiceOver-cursor
    De cursor beweegt tussen elementen zoals knoppen, links, en tekst. Een gebruiker kan horen welk element is geselecteerd.
  2. Toetsenbordnavigatie
    • Gebruik de Tab-toets om door interactieve elementen te navigeren.
    • Combineer toetsen zoals Control en Option (samen de “VO-toetsen”) met pijltjestoetsen om de cursor te verplaatsen:
      • VO + Pijl-rechts: Naar het volgende element.
      • VO + Pijl-omlaag: Inhoud van het huidige element lezen.
    • Interactie met inhoud
      Voor complexe inhoud, zoals tabellen of widgets, activeer je interactie met VO + Shift + Pijl-omlaag. Hiermee kan VoiceOver dieper in een sectie navigeren.
    • Snelle navigatie
      Schakel snelle navigatie in met Links + Rechts pijl tegelijk, zodat je eenvoudiger door pagina’s en apps beweegt.

VoiceOver en WordPress websites

Op websites leest VoiceOver de structuur en inhoud voor. Dit werkt het best als de site is gebouwd volgens de WCAG-richtlijnen:

  • Koppenstructuur: Navigeren met VO + Command + H om koppen te doorlopen.
  • Links en knoppen: Snel overzicht met VO + Command + L of VO + Command + K.
  • Formulieren: Gebruik de Tab-toets en VoiceOver geeft automatisch feedback over elk veld.

Extra functionaliteiten

  • Rotor: Met een draaiende lijst (opgeroepen via VO + Command + U) kunnen gebruikers eenvoudig navigeren tussen koppen, links, of andere elementen.
  • Braille: VoiceOver ondersteunt braille-uitvoer als er een brailleleesregel is aangesloten.

Met deze tools en navigatiemogelijkheden kunnen gebruikers met VoiceOver een Mac effectief gebruiken. Het is essentieel dat websites en apps toegankelijk worden ontworpen om optimaal te functioneren met deze screenreader.

Een screenreader is een hulpmiddel dat digitale content omzet in gesproken tekst of braille, zodat mensen met een visuele beperking websites kunnen gebruiken. De WCAG (Web Content Accessibility Guidelines) biedt richtlijnen om ervoor te zorgen dat websites correct functioneren met screenreaders. Bijvoorbeeld, het gebruik van semantische HTML zorgt ervoor dat schermlezers de structuur en betekenis van een pagina goed begrijpen, zoals koppen, lijsten en knoppen.

Daarnaast spelen ARIA-attributen (zoals aria-label of aria-describedby) een belangrijke rol bij WCAG-naleving. Ze bieden aanvullende informatie aan screenreaders over interactieve elementen en dynamische content. Zonder naleving van WCAG-richtlijnen kunnen screenreaders geen duidelijke, bruikbare ervaring bieden, wat betekent dat je website mogelijk ontoegankelijk is voor een belangrijke groep gebruikers.

Screenreaders uitleg

Screenreaders zijn essentieel voor gebruikers met visuele beperkingen, omdat ze webpagina’s navigeren en de inhoud interpreteren door deze hardop voor te lezen of in braille weer te geven. De WCAG (Web Content Accessibility Guidelines) biedt richtlijnen om ervoor te zorgen dat websites optimaal werken met deze technologie. Dit omvat duidelijke structuur, begrijpelijke content en technische ondersteuning via semantische HTML en ARIA-attributen.

Belangrijke WCAG-principes, zoals Perceivable” en “Operable”, sluiten goed aan bij de functionaliteit van screenreaders. Bijvoorbeeld:

  • Tekstalternatieven: Voor afbeeldingen is een alt-tekst verplicht, zodat screenreaders de afbeelding kunnen beschrijven.
  • Navigatie: Een logische koppenstructuur (bijv. <h1> tot <h6>) en skip-links helpen screenreader-gebruikers om snel door een pagina te bewegen.
  • Interactiviteit: Buttons en formulieren moeten correcte labels en rollen hebben, zodat een screenreader de functie goed kan benoemen.

Zonder aandacht voor WCAG-normen, zoals het correct gebruik van structuur en labels, kunnen screenreaders de inhoud niet effectief overbrengen. Dit leidt tot een ontoegankelijke en frustrerende ervaring voor gebruikers met een visuele beperking. WCAG-richtlijnen zorgen er daarom voor dat jouw website toegankelijk en bruikbaar is voor iedereen.

Wat betekent de taalinstelling in HTML?

De taalinstelling in HTML bepaalt de hoofdtaal van een webpagina. Dit gebeurt met het lang-attribuut binnen de <html>-tag. Voor een Nederlandstalige pagina gebruik je bijvoorbeeld:

<html lang="nl">

Dit attribuut is belangrijk voor browsers, zoekmachines en assistieve technologieën, zoals schermlezers. Het zorgt ervoor dat de inhoud op de juiste manier wordt gepresenteerd en uitgesproken.

Waarom is het instellen van de taal belangrijk?

  1. Betere schermlezerondersteuning
    Schermlezers gebruiken de taalinstelling om teksten correct uit te spreken. Zonder deze informatie kunnen woorden verkeerd worden geïnterpreteerd of uitgesproken.
  2. Zoekmachine-optimalisatie (SEO)
    Zoekmachines gebruiken de taalinstelling om de inhoud correct te indexeren en relevante zoekresultaten te leveren.
  3. WCAG-naleving
    De WCAG vereist dat de taal van de pagina wordt aangegeven om de toegankelijkheid te waarborgen. Dit valt onder WCAG 2.1 richtlijn 3.1.1 (Language of Page).

Hoe stel je de taal in?

Je stelt de taal van een pagina in door het lang-attribuut toe te voegen aan de <html>-tag in je HTML-document. In een WordPress website gebeurt dit al standaard vanuit WordPress. Het is extra van belang om te controleren als je bijvoorbeeld een meertalige website hebt. WPML of een andere plugin moet je correct instellen om de href-lang toe te voegen in de juiste taal.

Taalinstellingen in WordPress website

  1. Hoofdpagina-taal instellen: Zorg dat het lang-attribuut altijd aanwezig is in de <html>-tag.
  2. Gebruik correcte taalcodes: Bijvoorbeeld nl voor Nederlands, en voor Engels, of fr voor Frans. Zie de officiële ISO 639-1-codes voor een volledig overzicht.
  3. Meertalige secties markeren: Als een sectie in een andere taal is, gebruik dan het lang-attribuut op elementniveau.
  4. Controleer via tools: Gebruik tools zoals de W3C HTML Validator om te controleren of de taal correct is ingesteld.

De tabvolgorde bepaalt de volgorde waarin interactieve elementen (zoals links, knoppen en formulieren) worden geselecteerd wanneer een gebruiker navigeert met de Tab-toets van een toetsenbord.

Een logische en consistente tabvolgorde is essentieel voor gebruikers die geen muis gebruiken, zoals mensen met motorische beperkingen of schermlezer-gebruikers.

Waarom is een logische tabvolgorde belangrijk?

  • Toegankelijkheid: Het zorgt ervoor dat iedereen, ongeacht beperkingen, eenvoudig door de website kan navigeren.
  • Gebruikerservaring: Een voorspelbare volgorde voorkomt verwarring en frustratie.
  • WCAG-vereiste: De Web Content Accessibility Guidelines (WCAG) stellen dat interactieve elementen logisch bereikbaar moeten zijn.

Best practices voor tabvolgorde

  1. Logische volgorde
    De tabvolgorde moet overeenkomen met de visuele volgorde op de pagina. Begin bovenaan en beweeg van links naar rechts, en van boven naar beneden.
  2. Gebruik semantische HTML
    Gebruik standaard HTML-tags zoals <button> en <a> in plaats van <div> of <span> voor interactieve elementen. Deze volgen automatisch de juiste tabvolgorde.
  3. Vermijd tabindex-manipulatie
    Gebruik tabindex alleen als het nodig is om een specifieke volgorde aan te passen. Vermijd negatieve waarden (tabindex="-1") tenzij een element bewust overgeslagen moet worden.
  4. Zorg voor focusstijlen
    Maak actieve elementen visueel herkenbaar met een duidelijke focusring, zodat gebruikers weten waar ze zich bevinden.

Hoe test je de tabvolgorde?

  • Handmatig testen: Gebruik de Tab-toets om te navigeren en controleer of de volgorde logisch is.
  • Gebruik tools: Toegankelijkheidstools zoals Axe of Lighthouse analyseren de tabvolgorde en identificeren problemen.

Een goed ontworpen tabvolgorde is een belangrijk onderdeel van een toegankelijke WordPress website. Het maakt navigeren eenvoudiger voor alle gebruikers en voldoet aan de WCAG-richtlijnen.

 

Een ARIA-label (Accessible Rich Internet Applications) is een HTML-attribuut dat wordt gebruikt om extra beschrijvende tekst toe te voegen aan interactieve elementen op een website. Het biedt toegankelijkheidsinformatie voor gebruikers van schermlezers zonder dat de tekst zichtbaar hoeft te zijn voor visuele gebruikers.

Het attribuut ziet er als volgt uit:

<button aria-label=”Sluiten”>✖</button>

Hiermee begrijpt een schermlezer dat de knop een “Sluiten”-functie heeft, zelfs als dit visueel niet direct duidelijk is.

Waarom is een ARIA-label belangrijk?

Verbetering van schermlezerervaring

Schermlezers gebruiken ARIA-labels om de bedoeling van interactieve elementen duidelijk te maken. Dit is cruciaal als een element een pictogram of niet-beschrijvende tekst gebruikt.

Toegankelijkheid voor alle gebruikers

ARIA-labels zorgen ervoor dat visueel beperkte gebruikers dezelfde ervaring hebben als ziende gebruikers. Ze maken complexe interfaces begrijpelijk.

WCAG-naleving

ARIA-labels zijn een belangrijk hulpmiddel om te voldoen aan de richtlijnen van de Web Content Accessibility Guidelines (WCAG).

Waar worden ARIA-labels gebruikt?

Knoppen en links

Wanneer de visuele inhoud (zoals een pictogram) niet voldoende beschrijvend is. Voorbeeld: <button aria-label="Start zoeken">🔍</button>.

Formulierelementen

Voor extra uitleg als een veld geen visueel label heeft. Voorbeeld: <input type="text" aria-label="Zoekterm invoeren">.

Complexe widgets

Zoals carrousels, sliders, en modals.

Best practices voor het gebruik van ARIA-labels

Gebruik ARIA-labels alleen als het nodig is

Als een element al een duidelijk tekstlabel heeft, is een ARIA-label overbodig.

Houd beschrijvingen beknopt

Zorg dat de tekst duidelijk en to-the-point is.

Combineer niet met zichtbare labels

Gebruik geen aria-label als er een zichtbaar <label> of tekst bij het element staat. Dit kan verwarrend zijn.

Veelvoorkomende ARIA-attributen

aria-label
Beschrijft een element
aria-labelledby
Verwijst naar een ander element dat al een beschrijving bevat.
aria-describedby
Geeft aanvullende informatie, zoals uitleg of instructies.

ARIA-labels zijn een krachtig hulpmiddel om je website toegankelijker te maken voor gebruikers met schermlezers. Ze voegen essentiële beschrijvingen toe aan interactieve elementen, verbeteren de gebruikerservaring en helpen je voldoen aan toegankelijkheidsrichtlijnen.

Semantic HTML verwijst naar het gebruik van HTML-elementen die betekenis geven aan de inhoud die ze bevatten. In plaats van generieke tags zoals <div> of <span>, gebruik je semantische tags zoals <header>, <article>, <nav>, en <footer>. Deze tags beschrijven de structuur en functie van de inhoud voor zowel mensen als technologieën zoals schermlezers en zoekmachines.

Hoe draagt Semantic HTML bij aan toegankelijkheid?

  1. Verbeterde schermlezerondersteuning
    Schermlezers vertrouwen op semantische HTML om een pagina accuraat te interpreteren. Bijvoorbeeld:

    • Een <nav>-element wordt herkend als navigatie, waardoor een schermlezergebruiker het snel kan vinden en overslaan.
    • Een <h1> geeft aan dat het de belangrijkste kop op de pagina is.
  2. Betere focus en navigatie
    Semantische elementen zorgen ervoor dat toetsenbordnavigatie soepeler verloopt. Bijvoorbeeld, een gebruiker kan eenvoudig tabben tussen interactieve elementen in een <form> of naar de belangrijkste inhoud in een <main>-element springen.
  3. Automatische ARIA-ondersteuning
    Veel semantische HTML-tags hebben ingebouwde toegankelijkheidsfunctionaliteit. Bijvoorbeeld:

    • Een <button> heeft automatisch de rol “button” en reageert op toetsenbordacties, zonder extra ARIA-attributen.
  4. Consistente gebruikerservaring
    Door semantische HTML te gebruiken, begrijpen browsers en assistieve technologieën beter hoe een pagina gestructureerd is. Dit biedt een consistente ervaring voor gebruikers met of zonder beperkingen.

Voorbeelden van Semantic HTML

  • Koppenstructuur: Gebruik <h1> tot <h6> in logische volgorde om de inhoudsstructuur duidelijk te maken.
  • Lijsten: Gebruik <ul> of <ol> voor lijsten in plaats van een reeks <div>-elementen.
  • Knoppen: Gebruik <button> in plaats van een gestylede <div> of <a> voor acties.
  • Tabeldata: Gebruik <table>, <thead>, <tbody>, en <th> voor gestructureerde data.

Waarom is Semantic HTML belangrijk voor WCAG?

De WCAG (Web Content Accessibility Guidelines) benadrukken het belang van een goed gestructureerde, semantische HTML als basis voor een toegankelijke website. Dit helpt om:

  • Inhoud correct te presenteren aan schermlezers.
  • Navigatie te vereenvoudigen.
  • Onnodige afhankelijkheid van ARIA-attributen te verminderen.

Semantic HTML is een belangrijk onderdeel voor webtoegankelijkheid. Het zorgt ervoor dat je website begrijpelijk is voor gebruikers en technologieën, terwijl het de WCAG-richtlijnen volgt.

Skip navigation links, ook wel “skip links” genoemd, zijn verborgen links die gebruikers direct naar de hoofdinhoud van een pagina leiden. Ze verschijnen meestal bovenaan de pagina en worden zichtbaar wanneer een gebruiker op de Tab-toets drukt.

Deze links zijn bedoeld voor mensen die navigeren met een toetsenbord of schermlezer. In plaats van telkens door herhaalde menu’s of koppen te tabben, kunnen gebruikers snel naar de relevante inhoud springen.

Skip links

Waarom zijn Skip Links belangrijk?

  1. Verbeterde toegankelijkheid: Gebruikers met een visuele of motorische beperking besparen tijd en moeite bij het navigeren.
  2. WCAG-compliance: De WCAG beveelt aan om herhaalde navigatie-elementen te vermijden, en skip links bieden hiervoor een oplossing.
  3. Gebruikersgemak: Ze zorgen voor een betere ervaring, ook voor niet-gehandicapte gebruikers die sneller willen navigeren.

Hoe werken Skip Navigation Links?

Een typische skip link is een verborgen ankerlink die zichtbaar wordt wanneer deze gefocust is. Bijvoorbeeld:

<a href=”#main-content” class=”skip-link”>Sla navigatie over en ga naar de inhoud</a>
<main id=”main-content”>
<!– Hoofdinhoud –>
</main>

De link verwijst naar een ID in de hoofdinhoud, waardoor een toetsenbordgebruiker direct daarheen kan springen.

Best Practices voor Skip Navigation Links

  1. Maak de link visueel zichtbaar bij focus: Zorg dat de link goed opvalt wanneer deze wordt geselecteerd.
  2. Plaats de link als eerste in de code: Zet de skip link bovenaan in je HTML, zodat het de eerste focusbare link is.
  3. Gebruik duidelijke tekst: Bijvoorbeeld “Sla navigatie over” of “Ga direct naar de inhoud”.
  4. Test functionaliteit: Controleer of de link goed werkt met toetsenbord en schermlezers.

Skip navigation links zijn een eenvoudige, maar krachtige manier om je website toegankelijker te maken. Ze verbeteren de gebruikerservaring voor iedereen en voldoen aan belangrijke toegankelijkheidsrichtlijnen.

Wil je skip links toevoegen aan jouw WordPress website? Wij zorgen ervoor dat het correct en gebruiksvriendelijk wordt geïmplementeerd!

Keyboard navigation verwijst naar de mogelijkheid om een website volledig te gebruiken met alleen een toetsenbord. Dit is essentieel voor gebruikers die geen muis kunnen gebruiken, zoals mensen met motorische beperkingen of schermlezer-gebruikers.

Met toetsenbordnavigatie kan een gebruiker door een website navigeren via toetsen zoals Tab, Shift + Tab, en de pijltjestoetsen.

Waarom is Keyboard Navigation belangrijk?

  • Toegankelijkheid: Voor mensen met een beperking is toetsenbordnavigatie vaak de enige manier om een website te gebruiken.
  • WCAG-vereiste: De richtlijnen vereisen dat alle interactieve elementen met het toetsenbord bedienbaar zijn.
  • Betere gebruikerservaring: Zelfs voor niet-gehandicapte gebruikers kan toetsenbordnavigatie handig zijn, bijvoorbeeld bij het invullen van formulieren.

Best practices voor Keyboard Navigation

  1. Gebruik een duidelijke focusstijl: Zorg dat actieve elementen visueel opvallen (bijvoorbeeld een omlijning bij tabben).
  2. Logische tabvolgorde: De tabvolgorde moet overeenkomen met de visuele volgorde van de pagina.
  3. Zorg dat alles bereikbaar is: Alle links, knoppen en formulieren moeten met de Enter– of Space-toets bruikbaar zijn.
  4. Voorkom traps: Zorg dat een gebruiker niet “vast” komt te zitten in modals of dropdowns.

Keyboard navigation is een fundamenteel aspect van een toegankelijke website. Zonder goede ondersteuning hiervan sluit je een belangrijke groep gebruikers uit. Wil je toetsenbordnavigatie verbeteren op jouw WordPress-site? Wij helpen je graag met advies en implementatie!