Aangepaste CSS-stijlen

Om de content van een website te controleren gebruik ik een aantal aangepaste CSS-stijlen. Deze gebruik ik in combinatie met de browser extentie Stylus (download voor Firefox of Chrome). Hiermee kan ik deze stijlen aan- en uitzetten.

  1. Controleer koppen
  2. Controleer lijsten
  3. Controleer tabellen
  4. Controleer teksten
  5. Controleer landmarks
  6. Maak focus zichtbaar
  7. Pas tekstafstand toe

Controleer koppen

h1,
h2,
h3,
h4,
h5,
h6,
[role="heading"] {
    outline: 4px dashed #d91f11 !important;
}
h1:before {
    background: #d91f11 !important;
    color: #ffffff !important;
    content: "<h1>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
h2:before {
    background: #d91f11 !important;
    color: #ffffff !important;
    content: "<h2>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}

h3:before {
    background: #d91f11 !important;
    color: #ffffff !important;
    content: "<h3>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
h4:before {
    background: #d91f11 !important;
    color: #ffffff ! important;
    content: "<h4>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
h5:before {
    background: #d91f11 !important;
    color: #ffffff !important;
    content: "<h5>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
h6:before {
    background: #d91f11 !important;
    color: #ffffff !important;
    content: "<h6>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}

Controleer lijsten

ul,
ol,
dl,
[role="list"] {
    outline: 4px dashed #3c7d0e !important;
}
ul:before {
    background: #3c7d0e !important;
    color: #ffffff !important;
    content: "<ul>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
ol:before {
    background: #3c7d0e !important;
    color: #ffffff !important;
    content: "<ol>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
dl:before {
    background: #3c7d0e !important;
    color: #ffffff !important;
    content: "<dl>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
li:before {
    background: #3c7d0e!important;
    color: #ffffff !important;
    content: "<li>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
dt:before {
    background: #3c7d0e !important;
    color: #ffffff !important;
    content: "<dt>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
dd:before {
    background: #3c7d0e !important;
    color: #ffffff !important;
    content: "<dd>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}

Controleer tabellen

table,
tr,
th,
td,
[role="table"] {
    outline: 4px dashed #067a91 !important;
}
table:before {
    background: #067a91 !important;
    color: #ffffff !important;
    content: "<table>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
    display: table-caption;
}
tr:before {
    background: #067a91 !important;
    color: #ffffff !important;
    content: "<tr>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
th:before {
    background: #067a91 !important;
    color: #ffffff !important;
    content: "<th>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
td:before {
    background: #067a91 !important;
    color: #ffffff !important;
    content: "<td>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}

Controleer tekst

p,
strong,
em,
blockquote,
code {
    outline: 4px dashed #f5c518 !important;
}
p:before {
    background: #f5c518 !important;
    color: #000000 !important;
    content: "<p>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
strong:before {
    background: #f5c518 !important;
    color: #000000 !important;
    font-weight: normal;
    content: "<strong>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
em:before {
    background: #f5c518 !important;
    color: #000000 !important;
    text-decoration: none;
    content: "<em>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
blockquote:before {
    background: #f5c518 !important;
    color: #000000 !important;
    content: "<blockquote>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
code:before {
    background: #f5c518 !important;
    color: #000000 !important;
    content: "<code>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}


a,
[role="link"],
button,
[role="button"] {
    outline: 4px dashed #186ade !important;
}
a:before {
    background: #186ade !important;
    color: #ffffff !important;
    content: "<a>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
button:before {
    background: #186ade !important;
    color: #ffffff !important;
    content: "<button>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}

Controleer landmarks

header,
[role="header"],
nav,
[role="navigation"], 
main,
[role="main"],
aside,
[role="complementary"],
section,
[role="region"],
article,
[role="article"],
footer,
[role="contentinfo"] {
    outline: 4px dashed #cc1d92 !important;
}
header:before {
    background: #cc1d92 !important;
    color: #ffffff !important;
    content: "<header>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
nav:before {
    background: #cc1d92 !important;
    color: #ffffff !important;
    content: "<nav>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
main:before {
    background: #cc1d92 !important;
    color: #ffffff !important;
    content: "<main>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
aside:before {
    background: #cc1d92 !important;
    color: #ffffff !important;
    content: "<aside>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
section:before {
    background: #cc1d92 !important;
    color: #ffffff !important;
    content: "<section>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
article:before {
    background: #cc1d92 !important;
    color: #ffffff !important;
    content: "<article>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}
footer:before {
    background: #cc1d92 !important;
    color: #ffffff !important;
    content: "<footer>" !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
}

Maak focus zichtbaar

Blauw

a:focus,
*:focus {
outline: 4px solid royalblue !important;
outline-offset: 1px !important;
}

Groen

a:focus,
*:focus {
outline: 4px solid limegreen !important;
outline-offset: 1px !important;
}

Rood

a:focus,
*:focus {
outline: 4px solid crimson !important;
outline-offset: 1px !important;
}

Pas tekstafstand aan

* {
    line-height: 1.5 !important;
    letter-spacing: .12em !important;
    word-spacing: .16em !important;
}
p {
    margin-bottom: 2em !important;
}

Voorleessoftware gebruiken

Voorleessoftware (of screenreader) wordt veel gebruikt door mensen met een visuele beperking. Het programma zet tekst om in spraak. Het geeft een gesproken beschrijving van wat er op het scherm te zien is. Alle onderdelen worden benoemd: koppen, teksten, tabellen, lijsten maar ook bedieningselementen en de tekstalternatieven van niet-tekstuele content.

Het gebruik van voorleessoftware kan best moeilijk zijn. Voor het uitvoeren van taken werkt voorleessoftware met sneltoetsen en toetscombinaties. Dit komt doordat mensen die er gebruik van maken vaak zelf geen muis gebruiken.

In dit artikel staan de basis sneltoetsen en toetscombinaties voor NVDA en VoiceOver uitgelegd.

NVDA voor Windows

NVDA (Non Visual Desktop Access) is open source voorleessoftware voor Microsoft Windows. Het is gratis te gebruiken. NVDA werkt het best in combinatie met Firefox.

Aan de slag

Download NVDA op https://www.nvaccess.org/download/.

Stel NVDA in

Bij het openen van NVDA verschijnt het dialoogvenster “Welkom bij NVDA!”:

  • Schakel het aankruisvakje met de tekst ‘CapsLock als NVDA-toets gebruiken’ in.

Schakel NVDA in

NVDA kan worden ingeschakeld met de toetscombinatie Ctrl + Alt + N.

NVDA gebruikt de sneltoets CapsLock voor een deel van de commando’s. Deze combinatie wordt in de tabellen NVDA genoemd.

Lezen met NVDA

Gebruik de onderstaande toetscombinaties voor het lezen van een webpagina.

Toetscombinatie of sneltoetsTaak
NVDA + (pijltje naar beneden)Lees van begin tot huidige positie
CtrlStop met lezen
NVDA + (pijltje naar boven)Lees de huidige regel
(pijltje naar boven)Lees de vorige regel
(pijltje naar beneden)Lees de volgende regel
(pijltje naar rechts)Lees het volgende character
(pijltje naar links)Lees het vorige character
NVDA toetscombinaties en sneltoetsen voor lezen op een website

Gebruik de onderstaande sneltoetsen om te navigeren over een webpagina. Spring bijvoorbeeld van kop naar kop of van link naar link.

Als de onderstaande sneltoetsen worden gebruikt samen met de Shift-toets wordt naar het vorige element genavigeerd.

SneltoetsTaak
TabNaar het volgende bedieningselement
DNaar het volgende landmark
HNaar de volgende kop
1 (t/m 6)Naar de volgende kop van niveau 1 (t/m 6)
KNaar de volgende link
BNaar de volgende knop
LNaar de volgende lijst
INaar het volgende lijstitem
TNaar de volgende tabel
GNaar de volgende afbeelding
FNaar het volgende formulierelement
SpatieActiveer het huidige element
NVDA sneltoetsen voor navigeren op een website

Handige toetscombinaties voor NVDA

ToetscombinatieTaak
NVDA + F7Open de elementenlijst
Handige NVDA toetscombinaties

VoiceOver in macOS

Apple heeft met VoiceOver een schermlezer ingebouwd in macOS en iOS. VoiceOver werkt het best in combinatie met Safari, maar werkt ook met andere browsers.

Aan de slag

Stel macOS in

  1. Ga in macOS naar ‘Apple-menu’ () ‘Systeeminstellingen’ ‘Toetsenbord’.
  2. Schakel de schuifschakelaar bij de tekst ‘Toetsenbordnavigatie’ aan.

Stel Safari in

  1. Open Safari.
  2. Ga in Safari naar ‘Safari’ ‘Instellingen’ ‘Geavanceerd’ ‘Toegankelijkheid’.
  3. Schakel het aankruisvakje met de tekst ‘Tab-toets markeert elk onderdeel op webpagina’ in.

Stel (eventueel) de rotor in

  1. Open ‘VoiceOver-programma’
  2. Kies in ‘VoiceOver-programma’ voor ‘Web’ ‘Webrotor’.
  3. Selecteer en orden onderdelen.

Schakel VoiceOver voor macOS in

VoiceOver kan worden ingeschakeld met de toetscombinatie Command + F5.

VoiceOver gebruikt de toetscombinatie Control + Option voor elk commando. Deze combinatie wordt in de tabellen VO genoemd.

ToetscombinatieTaak
Command + F5Schakel VoiceOver in
Control + OptionVoiceOver actie toetsen (vanaf nu VO)
Startpunt voor VoiceOver

Lezen met VoiceOver voor macOS

Gebruik de onderstaande toetscombinaties voor het lezen van een webpagina.

ToetscombinatieTaak
VO + ALees de hele pagina
ControlStop met lezen
VO + (pijltje naar rechts)Lees het volgende onderdeel
VO + (pijltje naar links)Lees het vorige onderdeel
VO + PLees de huidige paragraaf
VO + SLees de huidige zin
VO + WLees het huidige woord
VO + BLees van begin tot huidige positie
VO + HomeNaar het begin van de webpagina
VO + EndNaar het eind van de webpagina
VoiceOver voor macOS toetscombinaties voor lezen op een website

Gebruik de onderstaande toetscombinaties om te navigeren over een webpagina. Spring bijvoorbeeld van kop naar kop of van link naar link.

Als de onderstaande toetscombinaties worden gebruikt samen met de Shift-toets wordt naar het vorige element genavigeerd.

ToetscombinatieTaak
TabNaar het volgende bedieningselement
VO + Command + HNaar de volgende kop
VO + Command + LNaar de volgende link
VO + Command + XNaar de volgende lijst
VO + Command + TNaar de volgende tabel
VO + Command + GNaar de volgende afbeelding
VO + Command + JNaar het volgende formulierelement
VO + SpatieActiveer het huidige element
VoiceOver voor macOS toetscombinaties voor navigeren op een website

Handige toetscombinaties voor VoiceOver voor macOS

ToetscombinatieTaak
VO + UOpen de rotor
Shift + VO + FOpen het zoekmenu
Handige VoiceOver voor macOS toetscombinaties

VoiceOver in iOS

Apple heeft met VoiceOver een schermlezer ingebouwd in macOS en iOS. VoiceOver werkt het best in combinatie met Safari, maar werkt ook met andere browsers.

Aan de slag

Stel (eventueel) de rotor in

  1. Ga in iOS naar ‘Instellingen’ ‘Toegankelijkheid’ ‘VoiceOver’ ‘Rotor’ Rotoronderdelen‘.
  2. Selecteer en orden onderdelen.

Schakel VoiceOver voor iOS in

VoiceOver kan worden ingeschakeld in de instellingen van iOS of met een sneltoets.

  1. Ga in iOS naar ‘Instellingen ‘Toegankelijkheid’ ‘VoiceOver’
  2. Schakel de schuifschakelaar bij de tekst ‘VoiceOver’ aan.

Lezen met VoiceOver voor iOS

GebaarTaak
TikkenEen onderdeel selecteren en uitspreken
Met twee vingers tikkenPauzeer het lezen
Naar rechts vegenLees het volgende onderdeel
Naar links vegenLees het vorige onderdeel
Met twee vingers naar rechts vegenEen groep onderdelen binnengaan
Met twee vingers naar links vegenEen groep onderdelen verlaten
Met twee vingers omhoog vegenLees de pagina vanaf het begin
Met twee vingers omlaag vegenLees de pagina vanaf de huidige positie
VoiceOver voor iOS gebaren voor lezen op een website

Handige gebaren voor VoiceOver voor iOS

GebaarTaak
Met twee vingers draaienOpen de rotor
Omhoog vegenNaar het vorige onderdeel gaan of verhogen
Omlaag vegenNaar het vorige onderdeel gaan of verhogen
Driemaal tikken met twee vingersOpen het zoekmenu
Handige VoiceOver voor iOS gebaren

Hulpmiddelen bij het toetsen

Er zijn veel hulpmiddelen die kunnen helpen bij het toetsen op digitale toegankelijkheid. Tools kunnen een goede ondersteuning zijn voor iemand die de richtlijnen begrijpt.

Tools kunnen nooit een volledig beeld geven van de toegankelijkheid. Niet alle succescriteria van WCAG zijn automatisch te toetsen. Er zijn veel succescriteria die handmatig moeten worden beoordeeld. Daar is specifieke kennis van de succescriteria en ondersteunende technieken voor nodig.

In dit artikel staan handige tools die een aantal succescriteria automatisch kunnen toetsen en tools die helpen bij het toegankelijk maken van een webpagina of PDF.

Tools

Alle tools zijn gratis te gebruiken, behalve Adobe Acrobat Pro DC.

Browser extenties

  • Web Developer: Web Developer is een hele veelzijdige browser extentie en kan, onder andere, de code van een pagina laten toetsen met de W3C-validator, de het formaat van de browser veranderen en de paginastructuur en alt-teksten laten zien. Beschikbaar voor Firefox, Chrome en Opera.
  • axe DevTools: Deze scanner geeft een duidelijk overzicht met problemen (en oplossingen) op een webpagina. Download voor Firefox of Chrome.
  • WAVE: WAVE geeft visueel een overzicht van toegankelijkheidsproblemen op een webpagina. Beschikbaar voor Firefox, Chrome en Edge. Ook beschikbaar via https://wave.webaim.org.
  • headingsMap: headingsMap geeft een compleet overzicht van alle koppen en kopniveaus op een webpagina. Download voor Firefox, Chrome of Edge.
  • Stylus: Voeg custom CSS toe aan je pagina. Download voor Firefox of Chrome.

Bladwijzers

Programma’s

Kleur

PDF’s

  • Adobe Acrobat Pro DC: Met Adobe Acrobat Pro DC kun je zelf PDF’s toegankelijk maken. Het heeft ook een ingebouwde toegankelijkheidscontrole. Niet gratis te gebruiken. Beschikbaar voor Windows en Mac.
  • PDF Acccessibility Checker (PAC): Dit programma geeft een overzicht van toegankelijkheidsproblemen in een PDF-bestand. Alleen beschikbaar voor Windows.

Voorleessoftware

  • NVDA: NVDA is open source voorleessoftware. Het werkt het best in combinatie met Firefox. Alleen beschikbaar voor Windows.
  • VoiceOver: VoiceOver is ingebouwd in macOS en iOS. Het werkt het best in combinatie met Safari. Alleen beschikbaar voor Mac.

Meer tools

Er zijn nog (veel) meer tools en er zullen nog nieuwe tools bij komen. Mis je nog een tool of heb je een aanvulling voor deze lijst? Neem contact op via niek@wcag.nl.