logo anysurfer

Slides bedienen

  • Druk escape voor een overzicht van alle slides
  • Gebruik de pijltjestoetsen om horizontaal of verticaal tussen de slides te navigeren.
  • Of gebruik de knoppen rechtsonder.

Toegankelijkheid

parkeerplaats met symbool rolstoel op de grond
brede draaideur voor rolstoelgebruikers
bus van de lijn met uitklapbaar platform voor rolstoelen
met witte stok op geleidelijn
symbool ringleiding voor doven en slechthorenden

Digitale
toegankelijkheid

logo IE safari firefox chrome opera
desktop, laptop, tablet en smartphone verbonden met de cloud
logo PDF Word Excel

Assistive
technology

Stephen Hawking in zijn rolstoel
detail van Stephen Hawking met bril waaraan infrarood sensor is vastgemaakt die beweging van zijn wang detecteert
grote gele knop
puf en sip schakelaars
ijzer rooster over mac toetsenbord
Brailleleesregel met Mac OS X laptop
leesregel ingezoomd op 6 braillepunten
  • Zoomfunctie
  • Hoog contrast, grote muisaanwijzer
  • Browserextensies
  • Dicteren en gesproken commando's
  • Screenreaders (JAWS, NVDA, VoiceOver)
  • ...
AnySurfer, voor een toegankelijker internet
Logo van scholen die deelnemen aan toegankelijkheidsmonitor

Evolutie België

staafdiagram met cijfers van de monitor van 2007 tot 2017

Evolutie Vlaamse overheid

staafdiagram met cijfers van de steekproef vlaamse overheid

opleidingslokaal brussel, naar overzicht alle opleidingen
label onderaan luisterpuntbibliotheek, naar overzicht labeldragers

WCAG

Web Content Accessibility Guidelines

Web Content
Accessibility Guidelines

  • WCAG level A = AnySurfer checklist
  • WCAG level AA = EU wetgeving
  • WCAG level AAA = doelgroepspecifieke sites

Web Content
Accessibility Guidelines

Wetgeving

Richtlijn (EU) 2016/2102 van het Europees Parlement en de Raad van 26 oktober 2016 inzake de toegankelijkheid van de websites en mobiele applicaties van overheidsinstanties

Voor wie?

  • van toepassing op alle Europese lidstaten
  • verplichte Belgische wetgeving vóór 23/09/2018
  • enkel voor overheid
    • websites (incl. video en PDF)
    • intranetten
    • mobiele apps

Norm?

  • WCAG level AA
  • AnySurfer checklist is WCAG level A
  • Technische norm voor mobiele apps
    beschikbaar op 23/12/2018

Concreet

  • Toegankelijkheidsverklaring
  • "Feedbackmechanism"
  • "Enforcement procedure"

Meer details: Europese richtlijn: wie doet wat?

World Health Organisation
About 15% of the world's population lives with some form of disability.

Beperkingen

  • Visueel
  • Auditief
  • Motorisch
  • (Cognitief)

Belgische bevolking

  • 16% bevolking ouder dan 67 in 2015
  • 23% bevolking ouder dan 67 in 2060

personen met een beperking

Welke obstakels komen ze tegen?

Hilde

Audio & video

Hilde heeft ondertiteling nodig bij video

Vertalend ondertitelen

Poetin met ondertitels over dopingschandaal op Sporza

Ondertiteling voor doven en slechthorenden

YouTube TV klasse met captioning

Automatisch synchroniseren

YouTube backend met optie transcript maken en automatisch synchroniseren

Tekstversie/transcript

webaxe podcast transcript

Best practice

Ondertitel video

Voorzie een tekstversie voor podcasts

Tommy

Tommy

Taal

Tommy heeft problemen met moeilijke teksten

Taalniveaus

  • A basisgebruiker
    • A1 een naam lezen, een paar woorden herkennen
    • A2 korte zinnen, veel voorkomende woorden
  • B onafhankelijke gebruiker
    • B1 dagdagelijkse communicatie
    • B2 krant Metro
  • C vaardige gebruiker
    • C1 weekblad Knack
    • C2 proefschrift universiteit nanotechnologie
grafiek taalniveaus 40% nl is b1, 75% overheidsteksten is c1
Krachtens de bepaling van ons arbeidsreglement, waarvan u bij indiensttreding een kopie werd overhandigd, wordt het sturen van sms-berichten niet aanvaard als een geldige manier om een afwezigheid te melden.
Stuur geen sms-bericht om uw afwezigheid te melden.
  • Schrap overbodige info
  • Vermijd stadhuistaal
Dit formulier moet door de invuller ervan voor 1 februari worden teruggestuurd naar de personeelsdienst.
Stuur dit formulier vóór 1 februari terug naar de personeelsdienst.
  • Schrap overbodige info
  • Gebruik actieve zinnen

"De inkomensvervangende tegemoetkoming wordt toegekend aan de persoon met een handicap van wie is vastgesteld dat zijn lichamelijke of psychische toestand zijn verdienvermogen heeft verminderd tot een derde of minder van wat een gezonde persoon door het uitoefenen van een beroep op de algemene arbeidsmarkt kan verdienen."

"Als je door je handicap maar een derde kan verdienen van het loon van een gezonde persoon, krijg je een inkomensvervangende tegemoetkoming."

Best practice

  • Schrijf vanuit het taalniveau van uw doelpubliek
  • Iedereen leest graag duidelijke taal

David

Beeld

David gebruikt een screenreader en brailleleesregel

Brailleleesregel met Mac OS X laptop
leesregel ingezoomd op 6 braillepunten

Best practice

  • Correcte semantische structuur (koppen, lijsten, tabellen)
  • Geef een alt-tekst aan informatieve afbeeldingen

Karolijn

Spraakherkenning

Karolijn gebruikt spraakcommando's

Dragon Naturally Speaking

Demo

Best practice

  • Maak links en alt-teksten betekenisvol
  • Gebruik de juiste structuurelementen

Nina

Nina

Concentratie & dyslexie

Nina heeft moeite met beweging tekst op achtergrondafbeeldingen.

Achtergrondafbeeldingen

VDK spaarbank topnav links op achtergrondafbeelding onleesbaar

Drukke pagina

deathtobullshit.com by Brad Frost

Dyslexie

Wash-out effect

dyslexia washed out text

River effect

dyslexia river effect

Swirl effect

dyslexia swirl effect

Doen

  • Koppen, lijsten en korte paragrafen (chunking)
  • Regellengte (50-75 karakters?)
  • Regelhoogte (125% of 150% van fontgrootte?)
  • Fontgrootte (min. 16px?)
  • Veelgebruikte fonts
  • Highlight keywords
  • Inhoud in meerdere versies (video, infografiek)

Niet doen

  • Lange blokken tekst
  • Lange zinnen, moeilijke taal
  • Italics of hoofdletters
  • 'Clutter', afleiders, drukte

Best practice

  • Let op met tekst op achtergrondafbeeldingen
  • Leesbaarheid garanderen via chunking en typografie

Jerry

Jerry, kleurenblind

Kleur

Jerry kan moeilijk rood van groen onderscheiden

8% mannen is "kleurenblind"

  • deuteran (groen - komt het meest voor)
  • protan (rood - zeldzaam)
  • tritan (blauw - zeer zeldzaam)
nummer 74 onzichtbaar voor kleurenblinden
trivial pursuit spel blokje met verschillende kleuren
niet oké drukte winkel tabel met groen en rode cellen
oké drukte winkel tabel met 1, 2 of drie mannetjes in een cel
Two Dots: spel om bolletjes te verbinden. Links enkel kleur. Rechts ook vorm

Best practice

Gebruik niet alleen kleur om informatie over te brengen

Filemon

Filemon

+65

Filemon hoort en ziet niet meer zo goed

website met cataract simulatie

Vision simulator

Supernova configuration screen

Contrast

Turquoise blauwe tekst op donkergrijze achtergrond
contrast meting met color contrast analyzer = 2,3
lichtgroene tekst op witte achtergrond op website van pensioenen
contrast meting met color contrast analyzer = 2,6

Color contrast ratio

  • tekst kleiner dan 24px: minimum 4,5
  • tekst groter dan 24px: minimum 3
  • vetgedrukte tekst van minstens 18,5px: minimum 3

Vergroting

formulier waar velden en albels ver van elkaar staan
enkel de velden zijn zichtbaar, niet de labels
Contactformulier met labels boven velden

Tools

Best practices

  • Beperk witruimte tussen verbonden elementen (vergroting)
  • Hanteer een hoog kleurcontrast (4,5) voor tekst t.o.v. achtergrond

Jim

Jim

Motoriek

Jim gebruikt een headstick. Hij kan geen muis gebruiken

Voorbeelden

  • Dropdown menu (-/+)
  • Lightbox (-/+)
  • Tabvolgorde (-)
  • Focus outline (+)
  • Skiplink (-/+)

Best practice

Alles wat met de muis kan, werkt ook met het toetsenbord

Leg uw muis aan de kant

tab, shift+tab en entertoets

Wat kan u doen?

  1. Nina : leesbare tekst
  2. Tommy : klare taal
  3. Filemon : voldoende contrast
  4. Jerry : niet enkel kleur gebruiken
  5. David : structuur en tekstalternatieven
  6. Jim : logische tabvolgorde