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 OutlineOutline Headings.
  • Kies ook de optie OutlineShow Element Tag Names.
  • Kies nog een keer OutlineOutline Headings (bugje waarschijnlijk).
  • Als het goed is zie je nu kaders om de headings en welke heading (h1, h2 enzovoort) gebruikt is.
    Headings zichtbaar gemaakt met Web Developer

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

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

Handige opties

  • Disable ▸ JavaScript
    Javascript uitzetten, zodat je kunt zien hoe de site werkt als Javascript niet werkt.
  • Forms ▸ Populate form fields
    Handig om een formulier te testen. Met deze optie worden alle velden ingevuld.
  • 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?
  • Outline ▸ Outline Headings
    Voor controle of je de koppen goed hebt opgemaakt.
  • Outline ▸ Outline Tables » Outline Table Cells
    Controle of de tabelkopmaak goed is.
  • 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 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 voor Firefox en Chrome

Een andere handige tool in Firefox en Chrome om het contrast van tekst met achtergrond te testen is de WCAG Contrast Checker voor Firefox (WCAG Contrast Checker voor Chrome). De tool geeft direct aan of er contrastproblemen zijn. Zelf kun je het contrast testen door met een pipet de voorgrondkleur en de achtergrondkleur te selecteren.

15.4 Inspector voor Firefox en Chrome

Onder de rechtermuisknop van Firefox en Chrome zit een functie om je pagina te inspecteren. Hiermee kun je html- en css-code bekijken en bewerken.

15.5 HTML_CodeSniffer

HTML_CodeSniffer is een handig programma om te checken of een webpagina voldoet aan de Web Content Accessibility Guidelines (WCAG), de richtlijnen voor toegankelijkheid.

Installeren

  • Open je browser (de tool kan in elke browser geïnstalleerd worden).
  • Zorg dat je bladwijzerbalk zichtbaar is.
  • Ga naar HTML_CodeSniffer.
  • Op de pagina zie je button 'Get the Accessibility Auditor Bookmarklet'. Trek deze met je muis naar de bladwijzers toe.
HTML_CodeSniffer

Pagina testen

  • Ga naar een pagina die je wilt testen.
  • Klik in je bladwijzerbalk op HTMLCodeSniffer en je krijgt een rapportage. Deze meldt fouten (errors), waarschuwingen (warnings) en vermeldingen (notices).
    Rapportage van HTML_CodeSniffer: 51 fouten en 34 warnings
  • Zet de Warnings uit (die zijn minder belangrijk dan de errors).
  • Kies View Report.
  • Je kunt nu 1 voor 1 alle fouten bekijken. De tool laat ook zien waar de fout optreedt, behalve als het in de meta-informatie van de site zit.
    Melding dat alt-attribuut mist en icoontje dat wijst bij welk element de fout optreedt.

15.6 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.
  • 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.
top

Feedback

Contact

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