Omslag van 'Webtechniek voor niet-techneuten'

15. Tools in de browser (zoals add-ons)

Met verschillende gratis tools die je in de browser installeert, kun je heel makkelijk en snel pagina's controleren op toegankelijkheid en andere kwaliteitsaspecten.

15.1 Web Developer

Installeren

Ga naar de pagina om de extensie te installeren:

Als je Web Developer hebt geïnstalleerd, krijg je een extra icoontje in de werkbalk van je browser (zie hieronder).

Add-on Web Developer

Zie je het icoontje niet, dan moet je dat wellicht nog even toevoegen. Ga daarvoor naar Voorkeuren ▸ Add-ons.

Voorbeeld: headings zichtbaar maken met 'Outline Headings'

Voor toegankelijkheid is het belangrijk dat elke kop is opgemaakt met een heading (kopopmaakprofiel). De controle daarvan doe je als volgt:

  • Open Web Developer
  • Kies de optie Outline ▸ Outline Headings.
  • Kies ook de optie Outline ▸ Show Element Tag Names.
  • Kies nog een keer Outline ▸ Outline Headings (bugje waarschijnlijk).

Als het goed is zie je nu kaders om de headings en welke headings (h1, h2 enzovoort) gebruikt zijn.

Headings zichtbaar gemaakt met Web Developer

Headings die verborgen zijn, zie je niet met deze tool. Daarvoor gebruik je de HeadingsMap (zie verder).

Met Ctrl-R (Apple Command-R) haal je deze outlining weer weg.

Handige opties

Functie Beschrijving
Outline ▸ Outline Headings Voor controle of je de koppen goed hebt opgemaakt.
Outline ▸ Outline Tables ▸ Outline Table Cells Controle of de tabelopmaak goed is.
Images ▸ Display alt-attributes Toont alle alt-teksten van afbeeldingen.
Images ▸ Make images full size Controle of de afbeeldingen wel in de juiste grootte zijn geplaatst.
Information ▸ Display Title Attributes Weergave van title-attributen (die er beter niet kunnen zijn
Information ▸ Respons Headers Welke respons-header geeft de pagina, bijvoorbeeld 404?
Forms ▸ Populate form fields Handig om een formulier te testen. Met deze optie worden alle velden ingevuld.
Tools ▸ Validate HTML Controle of je bij de invoer geen ongeldige HTML hebt ingevoerd.
Tools ▸ Validate links Check of je geen dode links op je site hebt. Start deze check vanaf de homepage, dan pakt de tool je hele site. (De tool maakt gebruik van de W3C-linkchecker.)

De tool heeft veel meer mogelijkheden, dus bekijk de tool gerust verder.

15.2 HeadingsMap

Vaak is de h1 op de homepage verborgen. Met de add-on HeadingsMap kun je deze wel zien. Daarnaast heb je met deze tool in een oogopslag een goed beeld van alle headings op de pagina, inclusief de hiërarchische volgorde.

HeadingsMap: fouten in de hiërarchie zijn roodgekleurd

15.3 WCAG Contrast Checker

Als je de tool start, verschijnt er links een kolom met al direct de resultaten over het contrast. Standaard staat de tool ingesteld op WCAG 2 niveau AA. Je ziet per element een rood kruisje (niet goed) of groen vinkje (wel goed), daarnaast het gemeten contrastratio en daarnaast het element met de voor- en achtergrond.

Niveau AA eist een kleurcontrast van minimaal 4,5 voor gewone tekst. De waarde 4,12 resulteert dan ook in een rood kruisje.

Klik in de linkerkolom van de tool op een element en dit element krijgt in de site (rechterkolom) een rode omlijning.

Ook kun je het contrast testen door met een pipet de voorgrondkleur en de achtergrondkleur te selecteren.

Let op: de tool geeft soms ook onterechte foutmeldingen. De tool kijkt namelijk naar de onderliggende code. Een achtergrondafbeelding 'ziet' hij niet. Een contrastratio van bijvoorbeeld 1.0 is daarom bijna altijd onterecht.

15.4 Inspector voor Firefox en Chrome

Onder de rechtermuisknop van Firefox en Chrome zit een functie om je pagina te inspecteren, de inspector. Hiermee kun je html- en css-code bekijken en bewerken. Ook kun je daarmee testen op de mobiele weergave van je site.

Controle van de html en css van een pagina

De inspector is een handige tool om de html en css van elementen in de pagina te onderzoeken. Bijvoorbeeld:

  • De code bij een afbeelding controleren
  • De opmaak van een element onderzoeken
  • Codes aanpassen om het effect in de pagina te zien

Inspecteren starten

  • Chrome: Rechtermuisknop ▸ Inspecteren
  • Firefox: Rechtermuisknop ▸ Element Inspecteren

Het openen kan ook met een sneltoets:

  • Control + Shift + C (Windows, Linux, Chrome OS)
  • Command + Option + C (Mac)

De inspector opent aan de onderkant van je browserscherm.

Element inspecteren

  1. Kies in de toolbar voor de knop ‘Element inspecteren’ (knop met rechthoek en pijltje erin)
  2. Klik nu in de webpagina (bovenste deel) op een onderdeel dat je wilt onderzoeken. In het voorbeeld hieronder hebben we een afbeelding geselecteerd.
  3. In de inspector wordt de html-code zichtbaar:
    <a href="https://www.belastingdienst.nl/wps/wcm/connect/nl/contact/contact"> <img src="https://over-ons.belastingdienst.nl/wp-content/uploads/2019/12/Hoe-kunt-u-ons-bereiken_800-800x537.jpg" class="image wp-image-12306 attachment-medium size-medium" alt="" loading="lazy" style="max-width: 100%; height: auto;" srcset="https://over-ons.belastingdienst.nl/wp-content/uploads/2019/12/Hoe-kunt-u-ons-bereiken_800.jpg 800w, https://over-ons.belastingdienst.nl/wp-content/uploads/2019/12/Hoe-kunt-u-ons-bereiken_800-300x201.jpg 300w, https://over-ons.belastingdienst.nl/wp-content/uploads/2019/12/Hoe-kunt-u-ons-bereiken_800-768x516.jpg 768w" sizes="(max-width: 800px) 100vw, 800px" width="800" height="537"> </a>
    Deze html-code kun je ook aanpassen.
  4. Rechts van het html-scherm staat het css-scherm. Daar kun je code uitzetten of code wijzigen om het effect in de pagina te bekijken.
  5. En: is de html-code van de afbeelding correct?

Mobiele weergave bekijken via Inspector

  1. Ga in de webpagina staan.
  2. Open de inspector.
  3. Kies rechtsboven in de inspector het icoontje met de mobiele telefoons.
  4. Bovenin verschijnt een extra balk waarin je kunt kiezen voor het soort telefoon/tablet, de venstergrootte, staand/liggend, enzovoort.

15.5 aXe

Een hele handige tool om je site te testen op conformiteit op WCAG is de browseruitbreiding aXe. Ook deze tool werkt in Firefox en Chrome.

Installeren

  • Ga naar aXe.
  • Scroll iets naar beneden en kies daar de download voor Firefox of Chrome.
  • De download voor Firefox vind je bij add-on Axe voor Firefox.
  • Je komt bij de add-ons-pagina van je browser. Kies daar voor Toevoegen.

Gebruik in Firefox

  • Open een pagina die je wilt inspecteren.
  • Kies rechtermuisknop en kies daar in de pop-up voor Element inspecteren.
  • Je krijgt in het onderste deel van je scherm een deelvenster met een aantal tabbladen.
  • Klik op het tabblad aXe.
    Inspectie-venster met het tabblad aXe
  • Kies de optie Analyze.
  • aXe checkt de pagina op de WCAG-criteria. Je krijgt de resultaten te zien, met een kleine uitleg.

15.6 WAVE Accessibility Extension by WebAIM

Een andere handige tool om de toegankelijkheid van je site te testen is WAVE. De mogelijkheden zijn iets beperkter dan bij de Axe-tool, maar de interface is wel weer prettig. En de toelichtingen zijn ook zinvol. Gewoon even proberen zou ik zeggen!

Screenshot van WAVE
top

Wat vind je van dit hoofdstuk?

Feedback

Contact

Vul dit in als je wil dat we contact met je opnemen.