EN 301 549 en WCAG | Digitoegankelijk

<!DOCTYPE html> <html lang="nl" dir="ltr"> <head> <meta charset="utf-8" /> <noscript><style>form.antibot * :not(.antibot-message) { display: none !important; }</style> </noscript><link rel="canonical" href="https://www.digitoegankelijk.nl/toegankelijkheid/en-301-549-en-wcag" /> <meta name="Generator" content="Drupal 10 (https://www.drupal.org)" /> <meta name="MobileOptimized" content="width" /> <meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="alternate icon" href="/themes/custom/dito/favicon.ico" type="image/vnd.microsoft.icon" /> <link rel="icon" href="/themes/custom/dito/favicon.svg" type="image/svg+xml" /> <title>EN 301 549 en WCAG | Digitoegankelijk</title> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/align.module.css?slp97g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/fieldgroup.module.css?slp97g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/container-inline.module.css?slp97g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/clearfix.module.css?slp97g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/details.module.css?slp97g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/hidden.module.css?slp97g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/item-list.module.css?slp97g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/js.module.css?slp97g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/nowrap.module.css?slp97g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/position-container.module.css?slp97g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/reset-appearance.module.css?slp97g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/resize.module.css?slp97g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/system-status-counter.css?slp97g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/system-status-report-counters.css?slp97g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/system-status-report-general-info.css?slp97g" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/tablesort.module.css?slp97g" /> <link rel="stylesheet" media="all" href="/core/modules/views/css/views.module.css?slp97g" /> <link rel="stylesheet" media="all" href="/modules/contrib/extlink/css/extlink.css?slp97g" /> <link rel="stylesheet" media="all" href="/modules/contrib/paragraphs/css/paragraphs.unpublished.css?slp97g" /> <link rel="stylesheet" media="all" href="/themes/custom/dito/css/flexboxgrid.min.css?slp97g" /> <link rel="stylesheet" media="all" href="/themes/custom/dito/css/dito.css?slp97g" /> <link rel="stylesheet" media="all" href="/themes/custom/dito/css/normalize.css?slp97g" /> </head> <body class="path-node page-node-type-basic-page"> <div class="black-background-menu"></div> <nav id="skipnav" class="skipnav list-group"> <a href="#main-content" class="sr-only sr-only-focusable list-group-item list-group-item-info"> Overslaan en naar de inhoud gaan </a> </nav> <div class="dialog-off-canvas-main-canvas" data-off-canvas-main-canvas> <header class="content-header clearfix"> <div class="layout-container"> <div data-drupal-messages-fallback class="hidden"></div> <div id="header" class="header"> <div class="logo-container"> <div class="wordmark"> <span class="sender">Ministerie van Binnenlandse Zaken en Koninkrijkrelaties</span> </div> <a href="/" class="logo-link" aria-label="Ministerie van Binnenlandse Zaken en Koninkrijkrelaties" title="Terug naar de homepage"> <div class="logo"> <img src="/themes/custom/dito/logo.svg" width="44" height="77" alt class="logo-image"> </div> </a> </div> </div> <nav class="navbar-nav navbar-full navbar-branded" id="navbar-main"> <div class="container navbar-toggleable-md"> <div class="row"> <ul class="navbar-nav"> <li class="nav-item"><a href="/">Home</a></li> <li class="nav-item"> <button class="nav-link icon-menu open-menu" type="button" data-toggler="collapse" aria-expanded="false" aria-label="Open menu">Open menu</button> </li> </ul> <div class="search-block"> <form action="/zoeken" method="get" id="search-search" accept-charset="UTF-8" novalidate="novalidate"> <div class="form-item form-item-query"> <label for="edit-main-search" class="sr-only">Zoeken</label> <input type="text" id="edit-main-search" name="query" value="" size="30" maxlength="128" class="form-text" placeholder="Voer uw zoekterm in"> </div> <div class="form-actions form-wrapper"> <button type="submit" id="submit-search" class="search-button form-submit">Zoeken</button> </div> </form> </div> </div> </div> </nav> <div class="big-menu"> <div class="container"> <div class="row"> <div id="block-dito-main-menu" class="main-navigation col-md-3 col-sm-6 col-xs-12"> <h3 id="block-dito-main-menu-menu">Menu</h3> <ul class="nav navbar-nav"> <li class="nav-item menu-item--expanded is-active dropdown"> <a href="/toegankelijkheid" class="nav-link is-active dropdown-toggle" data-target="#" data-toggle="dropdown" aria-expanded="false" data-drupal-link-system-path="node/126">Toegankelijkheid</a> <ul class="dropdown-menu"> <li class="dropdown-item menu-item--collapsed"> <a href="/toegankelijkheid/wat-is-digitale-toegankelijkheid" data-drupal-link-system-path="node/127">Wat is digitale toegankelijkheid?</a> </li> <li class="dropdown-item"> <a href="/toegankelijkheid/voordelen" data-drupal-link-system-path="node/128">Voordelen</a> </li> <li class="dropdown-item is-active"> <a href="/toegankelijkheid/en-301-549-en-wcag" class="is-active" data-drupal-link-system-path="node/129">EN 301 549 en WCAG</a> </li> </ul> </li> <li class="nav-item menu-item--expanded dropdown"> <a href="/wetgeving" class="nav-link dropdown-toggle" data-target="#" data-toggle="dropdown" aria-expanded="false" data-drupal-link-system-path="node/131">Wetgeving</a> <ul class="dropdown-menu"> <li class="dropdown-item"> <a href="/wetgeving/wat-is-verplicht" data-drupal-link-system-path="node/132">Wat is verplicht?</a> </li> <li class="dropdown-item"> <a href="/wetgeving/voor-wie-is-het-verplicht" data-drupal-link-system-path="node/133">Voor wie is het verplicht?</a> </li> <li class="dropdown-item"> <a href="/wetgeving/wat-als-ik-niet-voldoe" data-drupal-link-system-path="node/134">Wat als ik niet voldoe?</a> </li> <li class="dropdown-item"> <a href="/wetgeving/uitzonderingen" data-drupal-link-system-path="node/135">Uitzonderingen</a> </li> <li class="dropdown-item"> <a href="/wetgeving/beleid-nederland-en-europa" data-drupal-link-system-path="node/130">Beleid Nederland en Europa</a> </li> </ul> </li> <li class="nav-item menu-item--expanded dropdown"> <a href="/toegankelijkheidsverklaring" class="nav-link dropdown-toggle" data-target="#" data-toggle="dropdown" aria-expanded="false" data-drupal-link-system-path="node/380">Toegankelijkheidsverklaring</a> <ul class="dropdown-menu"> <li class="dropdown-item"> <a href="/toegankelijkheidsverklaring/model-toegankelijkheidsverklaring" data-drupal-link-system-path="node/383">Model toegankelijkheidsverklaring</a> </li> <li class="dropdown-item"> <a href="/toegankelijkheidsverklaring/status" data-drupal-link-system-path="node/137">Status in verklaring</a> </li> <li class="dropdown-item menu-item--collapsed"> <a href="/toegankelijkheidsverklaring/onderzoek" data-drupal-link-system-path="node/141">Toegankelijkheidsonderzoek</a> </li> <li class="dropdown-item"> <a href="/toegankelijkheidsverklaring/invulassistent" data-drupal-link-system-path="node/381">De 9 stappen van de invulassistent</a> </li> <li class="dropdown-item menu-item--collapsed"> <a href="/toegankelijkheidsverklaring/controle" data-drupal-link-system-path="node/149">Controle verklaringen</a> </li> <li class="dropdown-item"> <a href="/toegankelijkheidsverklaring/gemeenschappelijke-regelingen" data-drupal-link-system-path="node/496">Gemeenschappelijke regelingen</a> </li> <li class="dropdown-item"> <a href="/toegankelijkheidsverklaring/naar-een-verklaring-verwijzen-vanaf-je-website-app" data-drupal-link-system-path="node/547">Naar een verklaring verwijzen vanaf je website of app</a> </li> </ul> </li> <li class="nav-item menu-item--expanded dropdown"> <a href="/aan-de-slag" class="nav-link dropdown-toggle" data-target="#" data-toggle="dropdown" aria-expanded="false" data-drupal-link-system-path="node/138">Aan de slag</a> <ul class="dropdown-menu"> <li class="dropdown-item"> <a href="/aan-de-slag/wie-doet-wat" data-drupal-link-system-path="node/139">Wie doet wat?</a> </li> <li class="dropdown-item menu-item--collapsed"> <a href="/aan-de-slag/tips" data-drupal-link-system-path="node/142">Praktische toegankelijkheidstips</a> </li> <li class="dropdown-item"> <a href="/aan-de-slag/handleiding" data-drupal-link-system-path="node/143">Handleiding voor organisaties</a> </li> <li class="dropdown-item"> <a href="https://kennisbank.digitoegankelijk.nl">Kennisbank DigiToegankelijk</a> </li> </ul> </li> <li class="nav-item menu-item--expanded dropdown"> <a href="/ondersteuning" class="nav-link dropdown-toggle" data-target="#" data-toggle="dropdown" aria-expanded="false" data-drupal-link-system-path="node/183">Ondersteuning</a> <ul class="dropdown-menu"> <li class="dropdown-item"> <a href="/ondersteuning/hoe-ondersteunen-wij-overheidsorganisaties" data-drupal-link-system-path="node/258">Hoe ondersteunen wij overheidsorganisaties?</a> </li> <li class="dropdown-item"> <a href="https://www.digitoegankelijk.nl/leveranciers">Ondersteuning voor leveranciers</a> </li> <li class="dropdown-item menu-item--collapsed"> <a href="/ondersteuning/algemene-onderzoeken-platforms-en-apps" data-drupal-link-system-path="node/384">Algemene onderzoeken platforms en apps</a> </li> <li class="dropdown-item"> <a href="/ondersteuning/wekelijkse-kennissessies" data-drupal-link-system-path="node/257">Wekelijkse kennissessies</a> </li> <li class="dropdown-item menu-item--collapsed"> <a href="/ondersteuning/events-over-digitale-toegankelijkheid" data-drupal-link-system-path="node/260">Events over digitale toegankelijkheid</a> </li> </ul> </li> <li class="nav-item menu-item--expanded dropdown"> <a href="/toezicht" class="nav-link dropdown-toggle" data-target="#" data-toggle="dropdown" aria-expanded="false" data-drupal-link-system-path="node/145">Toezicht</a> <ul class="dropdown-menu"> <li class="dropdown-item"> <a href="/toezicht/inrichten-van-centraal-toezicht" data-drupal-link-system-path="node/197">Centraal toezicht</a> </li> <li class="dropdown-item"> <a href="/toezicht/overleg-met-overheidsorganisaties-over-toezicht" data-drupal-link-system-path="node/198">Overleg met overheidsorganisaties over toezicht</a> </li> <li class="dropdown-item"> <a href="/toezicht/dashboard-ondersteunt-toezichthouders" data-drupal-link-system-path="node/199">Dashboard ondersteunt toezichthouders</a> </li> <li class="dropdown-item"> <a href="/toezicht/certificering-gedragscode-onderzoeksbureaus" data-drupal-link-system-path="node/200">Certificering of gedragscode onderzoeksbureaus</a> </li> <li class="dropdown-item"> <a href="/toezicht/verplichte-eis-bij-aanbestedingen" data-drupal-link-system-path="node/201">Verplichte eis bij aanbestedingen</a> </li> <li class="dropdown-item"> <a href="/toezicht/onevenredige-last" data-drupal-link-system-path="node/150">Onevenredige last</a> </li> </ul> </li> <li class="nav-item menu-item--expanded dropdown"> <a href="/dashboard" class="nav-link dropdown-toggle" data-target="#" data-toggle="dropdown" aria-expanded="false" data-drupal-link-system-path="node/152">Dashboard</a> <ul class="dropdown-menu"> <li class="dropdown-item"> <a href="https://dashboard.digitoegankelijk.nl/">Dashboard DigiToegankelijk</a> </li> <li class="dropdown-item"> <a href="/dashboard/wat-het-dashboard-digitoegankelijk" data-drupal-link-system-path="node/176">Wat is het Dashboard DigiToegankelijk?</a> </li> <li class="dropdown-item"> <a href="/dashboard/hoe-zorg-ik-voor-een-compleet-overzicht" data-drupal-link-system-path="node/203">Hoe zorg ik voor een compleet overzicht?</a> </li> <li class="dropdown-item"> <a href="/dashboard/bronnen" data-drupal-link-system-path="node/174">Bronnen</a> </li> <li class="dropdown-item"> <a href="/dashboard/vragen-en-antwoorden-over-het-dashboard" data-drupal-link-system-path="node/175">Vragen en antwoorden over het dashboard</a> </li> <li class="dropdown-item"> <a href="/dashboard/uitleg-inventarisatielijst" data-drupal-link-system-path="node/246">Uitleg over de inventarisatielijst</a> </li> </ul> </li> </ul> </div> <div id="block-uitgelicht" class="col-md-3 col-sm-12 highlighted-menu"> <h3 id="block-uitgelicht-menu">Uitgelicht</h3> <ul class="nav navbar-nav"> <li class="nav-item"> <a href="/agenda" class="nav-link" data-drupal-link-system-path="node/270">Agenda</a> </li> <li class="nav-item"> <a href="/nieuws" class="nav-link" data-drupal-link-system-path="node/171">Nieuws</a> </li> <li class="nav-item"> <a href="/overzicht-publicaties" class="nav-link" data-drupal-link-system-path="node/416">Publicaties</a> </li> <li class="nav-item"> <a href="/meldpunt" class="nav-link" data-drupal-link-system-path="node/153">Meldpunt</a> </li> <li class="nav-item"> <a href="/veelgestelde-vragen" class="nav-link" data-drupal-link-system-path="node/177">Veelgestelde vragen</a> </li> <li class="nav-item"> <a href="/contact" class="nav-link" data-drupal-link-system-path="node/184">Contact</a> </li> </ul> </div> </div> </div> <a href="#" class="close-menu fa fa-times"> <span class="close-text">Sluit</span> </a> </div> <div class="herobanner-wrapper"> <div class="views-element-container herobanner" id="block-views-block-herobanner-block-1"> <div><div class="herobanner-view js-view-dom-id-aca66c51d57000a53ff90cf836a2879b0b53f6d67f9bca831e6ee829d13ff0f6"> <div class="views-row"><div class="herobanner-container"></div></div> </div> </div> </div> </div> </div> </header> <div class="layout-container"> <div class="breadcrumb-region"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div id="block-dito-breadcrumbs"> <ul class="breadcrumb"> <li class="breadcrumb-item"> <a href="/">DigiToegankelijk</a> </li> <li class="breadcrumb-item"> <a href="/toegankelijkheid">Toegankelijkheid</a> </li> <li class="breadcrumb-item"> <span class="breadcrumb-last">EN 301 549 en WCAG</span> </li> </ul> </div> </div> </div> </div> </div> <main id="main-content" class="page-content clearfix"> <div class="container"> <div id="block-dito-page-title" class="page-titel"> <h1> <span>EN 301 549 en WCAG</span> </h1> </div> </div> <div id="block-dito-content"> <article> <div> <div class="field field--name-field-content content-item-list"> <div class="field field--name-field-content content-item"> <div class="paragraph paragraph--type--_-column-80-20 paragraph--view-mode--default"> <div class="container"> <div class="row"> <div class="col-md-8 col-xs-12"> <div class="field field--name-field-left-80 content-item-list"> <div class="field field--name-field-left-80 content-item"> <div class="paragraph paragraph--type--wysiwyg-element paragraph--view-mode--default"> <div class="field field--name-field-body content-item"><p><span class="text-intro">Overheidsorganisaties moeten hun websites en apps verplicht toegankelijk maken. Maar h贸e doe je dat, en: hoe meet je dat? Daarvoor verwijst de wet naar een technische standaard (ook wel: norm): EN 301 549. Die norm verwijst zelf weer naar een andere norm: WCAG.</span></p> </div> </div> </div> <div class="field field--name-field-left-80 content-item"> <div class="paragraph paragraph--type--link-list paragraph--view-mode--default"> <h2 > Op deze pagina: </h2> <div class="link-list"> <ul class="field field--name-field-links-list content-item-list"> <li class="field field--name-field-links-list content-item"><a href="#en301549">EN 301 549: Europese toegankelijkheidsnorm</a></li> <li class="field field--name-field-links-list content-item"><a href="#wcag">WCAG: Richtlijnen voor webcontent</a></li> <li class="field field--name-field-links-list content-item"><a href="#wcag-em">Controleren of je voldoet aan WCAG</a></li> </ul> </div> </div> </div> </div> </div> <div class="col-md-4 col-xs-12"> <div class="field field--name-field-right-20 content-item-list"> <div class="field field--name-field-right-20 content-item"> <div class="paragraph paragraph--type--image-gallery paragraph--view-mode--default"> <div class="field field--name-field-image-gallery content-item"> <img src="/sites/default/files/2022-10/pexels-edmond-dant%C3%A8s-8547340%281%29.jpg" width="640" height="427" alt="" loading="lazy" /> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="field field--name-field-content content-item"> <div class="bg-pink paragraph paragraph--type--_-column-50-50 paragraph--view-mode--default"> <div class="container"> <div class="row"> <div class="col-md-6 col-xs-12"> <div class="field field--name-field-left-50 content-item-list"> <div class="field field--name-field-left-50 content-item"> <div class="paragraph paragraph--type--wysiwyg-element paragraph--view-mode--default"> <div class="field field--name-field-body content-item"><h2 id="en301549">EN 301 549: Europese toegankelijkheidsnorm</h2> <p><a href="https://www.etsi.org/deliver/etsi_en/301500_301599/301549/03.02.01_60/en_301549v030201p.pdf"><strong>EN 301 549</strong></a> is de naam van de Europese Norm (EN) voor digitale toegankelijkheid. In deze norm staan de eisen waaraan ICT-toepassingen moeten voldoen om toegankelijk te zijn voor mensen met een beperking. ICT-toepassingen zijn bijvoorbeeld websites en apps, maar het gaat ook over digitale informatie die niet op het internet staat, documenten en apparaten. Naast de <em>eisen </em>voor al deze ICT-toepassingen beschrijft EN 301 549 ook hoe je ICT-producten en -diensten toegankelijk moet <em>inkopen</em>.</p> <p>EN 301 549 heeft aparte hoofdstukken met de eisen voor websites en apps. Daarin verwijzen de makers van de norm weer naar een andere internationale norm, die al veel langer wordt gebruikt: WCAG.</p> </div> </div> </div> </div> </div> <div class="col-md-6 col-xs-12"> <div class="field field--name-field-right-50 content-item-list"> <div class="field field--name-field-right-50 content-item"> <div class="paragraph paragraph--type--quote paragraph--view-mode--default"> <div class="field field--name-field-quote content-item"><p>De Europese Norm EN 301 549 verwijst voor websites en apps naar een andere norm, die al veel langer bestaat: WCAG.</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="field field--name-field-content content-item"> <div class="third-column-bg-pink paragraph paragraph--type--_-column-50-50 paragraph--view-mode--default"> <div class="container"> <div class="row"> <div class="col-md-6 col-xs-12"> <div class="field field--name-field-right-50 content-item-list"> <div class="field field--name-field-right-50 content-item"> <div class="paragraph paragraph--type--wysiwyg-element paragraph--view-mode--default"> <div class="field field--name-field-body content-item"><h2 id="wcag">WCAG: Richtlijnen voor webcontent</h2> <p>De <a href="https://www.w3.org/Translations/WCAG21-nl/" lang="en">Web Content Accessibility Guidelines (WCAG)</a> zijn sinds 1999 de internationale standaard voor digitale toegankelijkheid. De organisatie <em>World Wide Web Consortium</em> (W3C) beheert de standaard. Om de zoveel tijd is er een update.</p> <p>WCAG is in het kort een lijst met allerlei <em>eisen</em>. Die eisen gaan over het ontwerpen, bouwen en onderhouden van websites en apps. Er wordt veel internationaal onderzoek gedaan naar deze eisen. De makers van WCAG luisteren daarbij goed naar mensen met een beperking. Zij willen dat de eisen uit WCAG nuttig zijn voor een zo breed mogelijke groep mensen, met verschillende beperkingen.</p> <p>Als je de eisen uit WCAG volgt, weet je dus dat je website of app in de basis toegankelijk is voor iedereen. Natuurlijk moet je daarnaast ook letten op de begrijpelijkheid van je teksten, de gebruikservaring en de gebruiksvriendelijkheid.</p> <h2>3 niveaus</h2> <p>WCAG is gelaagd opgebouwd. Er zijn 3 niveaus, A, AA en AAA. Eisen op niveau A vormen de absolute basis voor toegankelijkheid. Voor overheidsorganisaties zijn de eisen op niveau A 茅n AA verplicht. Bij elkaar gaat het om 50 eisen. Deze eisen worden in de norm <em>succescriteria </em>genoemd. Bij elk succescriterium zijn technieken beschreven waarmee je aan het criterium kunt voldoen.</p> <h2>4 principes</h2> <p>Naast de indeling op niveau is er ook een indeling op <em>principe</em>. Als je naar de principes kijkt, weet je eigenlijk al waar toegankelijkheid om draait.</p> </div> </div> </div> <div class="field field--name-field-right-50 content-item"> <div class="paragraph paragraph--type--accordion-content paragraph--view-mode--default"> <div class="field field--name-field-accordion-item content-item-list"> <div class="field field--name-field-accordion-item content-item"> <div class="paragraph paragraph--type--accordion-item paragraph--view-mode--default"> <h3> <button aria-expanded="false" class="accordion-head"> 1. Waarneembaar </button> </h3> <div class="accordion-content"> <div class="field field--name-field-content content-item-list"> <div class="field field--name-field-content content-item"> <div class="paragraph paragraph--type--wysiwyg-element paragraph--view-mode--default"> <div class="field field--name-field-body content-item"><p>Alles op jouw website of app moet voor iedereen waarneembaar zijn. Een eis onder dit principe is bijvoorbeeld dat je een alternatieve tekst toevoegt aan een (informatieve) afbeelding. Iemand die de afbeelding niet ziet, kan deze dan toch waarnemen.</p> </div> </div> </div> </div> </div> </div> </div> <div class="field field--name-field-accordion-item content-item"> <div class="paragraph paragraph--type--accordion-item paragraph--view-mode--default"> <h3> <button aria-expanded="false" class="accordion-head"> 2. Bedienbaar </button> </h3> <div class="accordion-content"> <div class="field field--name-field-content content-item-list"> <div class="field field--name-field-content content-item"> <div class="paragraph paragraph--type--wysiwyg-element paragraph--view-mode--default"> <div class="field field--name-field-body content-item"><p>Alles op jouw website of app moet door iedereen te bedienen zijn. Het navigatiemenu op jouw site moet bijvoorbeeld niet alleen met een muis, maar ook met het toetsenbord te bereiken zijn.</p> </div> </div> </div> </div> </div> </div> </div> <div class="field field--name-field-accordion-item content-item"> <div class="paragraph paragraph--type--accordion-item paragraph--view-mode--default"> <h3> <button aria-expanded="false" class="accordion-head"> 3. Begrijpelijk </button> </h3> <div class="accordion-content"> <div class="field field--name-field-content content-item-list"> <div class="field field--name-field-content content-item"> <div class="paragraph paragraph--type--wysiwyg-element paragraph--view-mode--default"> <div class="field field--name-field-body content-item"><p>Alles op jouw website of app moet te begrijpen zijn door <span lang="en">software</span> en mensen. Je moet bijvoorbeeld de taal van een pagina aangeven in de code. Hulptechnologie zoals een schermlezer (<span lang="en">screenreader</span>) kan de tekst dan in de juiste taal voorlezen. Ook voor mensen moet je website of app begrijpelijk zijn. Zo moet je bij een formulier aangeven w谩谩r de fout zit als iemand iets niet goed heeft ingevuld.</p> </div> </div> </div> </div> </div> </div> </div> <div class="field field--name-field-accordion-item content-item"> <div class="paragraph paragraph--type--accordion-item paragraph--view-mode--default"> <h3> <button aria-expanded="false" class="accordion-head"> 4. Robuust </button> </h3> <div class="accordion-content"> <div class="field field--name-field-content content-item-list"> <div class="field field--name-field-content content-item"> <div class="paragraph paragraph--type--wysiwyg-element paragraph--view-mode--default"> <div class="field field--name-field-body content-item"><p>Jouw website of app moet door veel verschillende apparaten en hulptechnologie gebruikt kunnen worden. Een voorbeeld van een eis onder dit principe is dat je voor de elementen op jouw webpagina of in jouw app aangeeft wat hun naam, rol en waarde is.</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="field field--name-field-right-50 content-item"> <div class="paragraph paragraph--type--wysiwyg-element paragraph--view-mode--default"> <div class="field field--name-field-body content-item"><h3>Versies van WCAG</h3> <p>In 1999 kwam WCAG versie 1.0 uit. In 2008 verscheen versie 2.0 en in 2018 verscheen de laatste en huidige versie, namelijk <a href="https://www.w3.org/Translations/WCAG21-nl/">WCAG 2.1</a>. Dit is de versie waar de norm EN 301 549 naar verwijst.</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="field field--name-field-content content-item"> <div class="bg-pink paragraph paragraph--type--_-column-50-50 paragraph--view-mode--default"> <div class="container"> <div class="row"> <div class="col-md-6 col-xs-12"> <div class="field field--name-field-left-50 content-item-list"> <div class="field field--name-field-left-50 content-item"> <div class="paragraph paragraph--type--wysiwyg-element paragraph--view-mode--default"> <div class="field field--name-field-body content-item"><h2 id="wcag-em">WCAG-EM: Controleer of je voldoet aan WCAG</h2> <p>Het W3C heeft ook een methode ontwikkeld om te controleren of een website aan WCAG voldoet: <a href="https://www.w3.org/TR/WCAG-EM/">WCAG-EM</a> (<span lang="en">Web Content Accessibility Guidelines Evaluation Method</span>). Vraag of de onderzoeker deze methode volgt bij het uitvoeren van een <a href="/aan-de-slag/toegankelijkheid-laten-onderzoeken">toegankelijkheidsonderzoek</a>. Dan kun je het onderzoek gebruiken als onderbouwing van de verplichte <a href="/wetgeving/toegankelijkheidsverklaring">toegankelijkheidsverklaring</a>.</p> </div> </div> </div> </div> </div> <div class="col-md-6 col-xs-12"> <div class="field field--name-field-right-50 content-item-list"> <div class="field field--name-field-right-50 content-item"> <div class="paragraph paragraph--type--image-gallery paragraph--view-mode--default"> <div class="field field--name-field-image-gallery content-item"> <img src="/sites/default/files/2022-12/pexels-christina-morillo-1181248.jpg" width="640" height="427" alt="" loading="lazy" /> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </article> </div> </main> <div class="region-contactblock"> <div class="layout-container"> <div class="container"> <div id="block-shareblock" class="share-block"> <div class="field field--name-field-link content-item-list"> <div class="field field--name-field-link content-item"><a href="" class="icon-pijl-boven top-link">Naar boven</a></div> <div class="field field--name-field-link content-item"><a href="" class="icon-printer print-link">Print</a></div> </div> </div> </div> </div> </div> </div> <div class="payoff"> <div class="logo"> <span class="payoff_information"> Jouw informatie toegankelijk voor iedereen </span> </div> </div> <footer id="footer" class="page-footer clearfix"> <div class="layout-container"> <div class="container"> <div id="block-footer"> <h2 class="visually-hidden" id="block-footer-menu">Footer menu</h2> <ul class="nav navbar-nav row"> <li class="nav-item menu-item--expanded col-xs-12 col-md-3"> <h3>Over deze site</h3> <ul class="menu"> <li class="nav-item"> <a href="/contact" class="nav-link" data-drupal-link-system-path="node/184">Contact</a> </li> <li class="nav-item"> <a href="/copyright" class="nav-link" data-drupal-link-system-path="node/83">Copyright</a> </li> <li class="nav-item"> <a href="/privacy" class="nav-link" data-drupal-link-system-path="node/84">Privacy</a> </li> <li class="nav-item"> <a href="/toegankelijkheid-van-deze-website" class="nav-link" data-drupal-link-system-path="node/185">Toegankelijkheid van deze site</a> </li> </ul> </li> <li class="nav-item menu-item--expanded col-xs-12 col-md-3"> <h3>Service</h3> <ul class="menu"> <li class="nav-item"> <a href="/cookies" class="nav-link" data-drupal-link-system-path="node/85">Cookies</a> </li> <li class="nav-item"> <a href="/over-digitoegankelijk" class="nav-link" data-drupal-link-system-path="node/82">Over DigiToegankelijk</a> </li> <li class="nav-item"> <a href="https://mailing.logius.nl/ct/m16/k1/-sAdc2s08WnNOt3jE78_nBHGHN5S3Rs8oPYiIOfa-6T2uFGNS5rYhSA5mRTRLpt-/EHvcF9kR5bxEWAr" class="nav-link">Schrijf je in voor de nieuwsbrief</a> </li> </ul> </li> </ul> </div> </div> </div> </footer> </div> <script type="application/json" data-drupal-selector="drupal-settings-json">{"path":{"baseUrl":"\/","pathPrefix":"","currentPath":"node\/129","currentPathIsAdmin":false,"isFront":false,"currentLanguage":"nl"},"pluralDelimiter":"\u0003","suppressDeprecationErrors":true,"clientside_validation_jquery":{"validate_all_ajax_forms":2,"force_validate_on_blur":false,"messages":{"required":"Dit veld is verplicht.","remote":"Please fix this field.","email":"Please enter a valid email address.","url":"Please enter a valid URL.","date":"Please enter a valid date.","dateISO":"Please enter a valid date (ISO).","number":"Please enter a valid number.","digits":"Please enter only digits.","equalTo":"Please enter the same value again.","maxlength":"Please enter no more than {0} characters.","minlength":"Please enter at least {0} characters.","rangelength":"Please enter a value between {0} and {1} characters long.","range":"Please enter a value between {0} and {1}.","max":"Please enter a value less than or equal to {0}.","min":"Please enter a value greater than or equal to {0}.","step":"Please enter a multiple of {0}."}},"data":{"extlink":{"extTarget":false,"extTargetAppendNewWindowLabel":"(opens in a new window)","extTargetNoOverride":false,"extNofollow":false,"extNoreferrer":false,"extFollowNoOverride":false,"extClass":"ext","extLabel":"(link is external)","extImgClass":false,"extSubdomains":true,"extExclude":"","extInclude":"","extCssExclude":"","extCssInclude":"","extCssExplicit":"","extAlert":false,"extAlertText":"This link will take you to an external web site. We are not responsible for their content.","extHideIcons":false,"mailtoClass":"mailto","telClass":"tel","mailtoLabel":"(link sends email)","telLabel":"(link is a phone number)","extUseFontAwesome":false,"extIconPlacement":"append","extFaLinkClasses":"fa fa-external-link","extFaMailtoClasses":"fa fa-envelope-o","extAdditionalLinkClasses":"","extAdditionalMailtoClasses":"","extAdditionalTelClasses":"","extFaTelClasses":"fa fa-phone","whitelistedDomains":null,"extExcludeNoreferrer":""}},"field_group":{"html_element":{"mode":"default","context":"view","settings":{"classes":"","id":"","element":"h2","show_label":false,"label_element":"h3","attributes":"","effect":"none","speed":"fast","show_empty_fields":false,"label_element_classes":""}}},"user":{"uid":0,"permissionsHash":"dd2f2c67e5f4c0ea9a0312830534b252518497db95aa8c34933474a14fd2a83c"}}</script> <script src="/core/assets/vendor/jquery/jquery.min.js?v=3.7.1"></script> <script src="/core/assets/vendor/once/once.min.js?v=1.0.1"></script> <script src="/sites/default/files/languages/nl_WoU85ZJ8msPA2X2zTGF5O50kmLsGkUZJbXIYYlogndo.js?slp97g"></script> <script src="/core/misc/drupalSettingsLoader.js?v=10.3.5"></script> <script src="/core/misc/drupal.js?v=10.3.5"></script> <script src="/core/misc/drupal.init.js?v=10.3.5"></script> <script src="/themes/custom/dito/node_modules/%40dictu/video/dist/video.js?slp97g"></script> <script src="/themes/custom/dito/js/script.js?slp97g"></script> <script src="/themes/custom/dito/js/anchorlink.js?slp97g"></script> <script src="/themes/custom/dito/js/video.js?slp97g"></script> <script src="/modules/contrib/extlink/js/extlink.js?v=10.3.5"></script>  <script type="text/javascript"> (function (window, document, dataLayerName, id) { (window[dataLayerName] = window[dataLayerName] || []), window[dataLayerName].push({ start: new Date().getTime(), event: "stg.start", }); var scripts = document.getElementsByTagName("script")[0], tags = document.createElement("script"); function stgCreateCookie(a, b, c) { var d = ""; if (c) { var e = new Date(); e.setTime(e.getTime() + 24 * c * 60 * 60 * 1e3), (d = "; expires=" + e.toUTCString()); f = "; SameSite=Strict"; } document.cookie = a + "=" + b + d + f + "; path=/"; } var isStgDebug = (window.location.href.match("stg_debug") || document.cookie.match("stg_debug")) && !window.location.href.match("stg_disable_debug"); stgCreateCookie("stg_debug", isStgDebug ? 1 : "", isStgDebug ? 14 : -1); var qP = []; dataLayerName !== "dataLayer" && qP.push("data_layer_name=" + dataLayerName), isStgDebug && qP.push("stg_debug"); var qPString = qP.length > 0 ? "?" + qP.join("&") : ""; (tags.async = !0), (tags.src = "https://statistiek.rijksoverheid.nl/containers/" + id + ".js" + qPString), scripts.parentNode.insertBefore(tags, scripts); !(function (a, n, i) { a[n] = a[n] || {}; for (var c = 0; c < i.length; c++) !(function (i) { (a[n][i] = a[n][i] || {}), (a[n][i].api = a[n][i].api || function () { var a = [].slice.call(arguments, 0); "string" == typeof a[0] && window[dataLayerName].push({ event: n + "." + i + ":" + a[0], parameters: [].slice.call(arguments, 1), }); }); })(i[c]); })(window, "ppms", ["tm", "cm"]); })(window, document, "dataLayer", "8196c6c4-9ac1-4490-bfb5-ccbee2c33ff4"); </script>  </body> </html>

CINXE.COM

EN 301 549 en WCAG | Digitoegankelijk