Online kaarten | 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/aan-de-slag/tips/online-kaarten" /> <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>Online kaarten | Digitoegankelijk</title> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/align.module.css?srzh6r" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/fieldgroup.module.css?srzh6r" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/container-inline.module.css?srzh6r" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/clearfix.module.css?srzh6r" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/details.module.css?srzh6r" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/hidden.module.css?srzh6r" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/item-list.module.css?srzh6r" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/js.module.css?srzh6r" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/nowrap.module.css?srzh6r" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/position-container.module.css?srzh6r" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/reset-appearance.module.css?srzh6r" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/resize.module.css?srzh6r" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/system-status-counter.css?srzh6r" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/system-status-report-counters.css?srzh6r" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/system-status-report-general-info.css?srzh6r" /> <link rel="stylesheet" media="all" href="/core/modules/system/css/components/tablesort.module.css?srzh6r" /> <link rel="stylesheet" media="all" href="/core/modules/views/css/views.module.css?srzh6r" /> <link rel="stylesheet" media="all" href="/modules/contrib/extlink/css/extlink.css?srzh6r" /> <link rel="stylesheet" media="all" href="/modules/contrib/paragraphs/css/paragraphs.unpublished.css?srzh6r" /> <link rel="stylesheet" media="all" href="/themes/custom/dito/css/flexboxgrid.min.css?srzh6r" /> <link rel="stylesheet" media="all" href="/themes/custom/dito/css/dito.css?srzh6r" /> <link rel="stylesheet" media="all" href="/themes/custom/dito/css/normalize.css?srzh6r" /> </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 dropdown"> <a href="/toegankelijkheid" class="nav-link 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"> <a href="/toegankelijkheid/en-301-549-en-wcag" 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/onevenredige-last" data-drupal-link-system-path="node/150">Onevenredige last</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 is-active dropdown"> <a href="/aan-de-slag" class="nav-link is-active 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 is-active"> <a href="/aan-de-slag/tips" class="is-active" 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> <li class="dropdown-item"> <a href="/aan-de-slag/organisatiecultuur-en-toegankelijkheid" data-drupal-link-system-path="node/656">Organisatiecultuur en toegankelijkheid</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/de-toegankelijkheidsladder-hoe-volwassen-mijn-organisatie" data-drupal-link-system-path="node/657">De Toegankelijkheidsladder: hoe volwassen is mijn organisatie?</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="/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-48413600bc2c3754b73c1de9f8d4f861f6358e0839165845a48fd2422106a754"> <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="/aan-de-slag">Aan de slag</a> </li> <li class="breadcrumb-item"> <a href="/aan-de-slag/tips">Praktische toegankelijkheidstips</a> </li> <li class="breadcrumb-item"> <span class="breadcrumb-last">Online kaarten</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>Online kaarten</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="bg-grey 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">We gebruiken vaak een landkaart om informatie over locaties en geografie weer te geven. De informatie is zo lastig te beschrijven dat een kaartje vaak beter werkt. Helaas zijn veel digitale kaarten niet (volledig) toegankelijk.</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="#welke">Om welke toepassingen gaat het?</a></li> <li class="field field--name-field-links-list content-item"><a href="#verplicht">Wat is verplicht voor online kaarten?</a></li> <li class="field field--name-field-links-list content-item"><a href="#soorten">Twee soorten kaarten</a></li> <li class="field field--name-field-links-list content-item"><a href="#tips">Slim omgaan met online kaarten</a></li> <li class="field field--name-field-links-list content-item"><a href="#uitleg">Een toegankelijke kaart maken</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 loading="lazy" src="/sites/default/files/2022-10/pexels-pixabay-38271.jpg" width="640" height="425" alt="" /> </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-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="welke">Om welke toepassingen gaat het?</h2> <p><a href="/wetgeving/wat-is-verplicht">De wet</a> spreekt over <em>online kaarten </em>en <em>karteringsdiensten</em>. Daarmee worden alle digitale kaartoplossingen bedoeld die je op websites en in apps kunt gebruiken. Dat zijn:</p> <ul> <li>interactieve kaarten die je via een online dienst kunt invoegen (bijvoorbeeld Google Maps en Bing Maps);</li> <li>interactieve kaarten die in eigen beheer zijn gebouwd;</li> <li>interactieve kaarten die onderdeel zijn van een CMS;</li> <li>digitale statische afbeeldingen van kaarten.</li> </ul> </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--wysiwyg-element paragraph--view-mode--default"> <div class="field field--name-field-body content-item"><h2 id="verplicht">Wat is verplicht voor digitale kaarten?</h2> <p>In <a href="/wetgeving/wat-is-verplicht">de wet</a> staat wat verplicht is voor digitale kaarten en karteringsdiensten:</p> <ul> <li>Voor digitale kaarten en karteringsdiensten geldt een <a href="/wetgeving/uitzonderingen">uitzondering</a>. Dit houdt in: <ul> <li>Voor <strong>interactieve kaarten</strong> is het interactieve deel uitgezonderd. De pagina waarop de kaart staat is geen onderdeel van de uitzondering. Het mag ook niet leiden tot een toetsenbordval. </li> <li><strong>Digitale statische afbeeldingen van kaarten</strong> vallen ook onder de uitzondering. Ook hier geldt dat de pagina waar de afbeelding op staat geen onderdeel is van de uitzondering. Het advies is om wel een korte bondige tekst toe te voegen die context geeft. </li> </ul> </li> <li>Bij kaarten die bestemd zijn voor navigatie moet noodzakelijke informatie in de kaart w茅l verplicht (ook) op een toegankelijke, digitale manier getoond worden. Bijvoorbeeld door een lijst met adressen onder de kaart te plaatsen.</li> </ul> </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-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"><h2 id="soorten">Twee soorten kaarten</h2> <p>Het doel van een kaart bepaalt of je voor een toegankelijk alternatief moet zorgen. Stel dus eerst vast om welk type kaart het gaat.</p> <ol> <li><strong>Kaarten voor navigatiedoeleinden</strong> kun je gebruiken om een locatie of een route te bepalen: ze laten zien waar iets is. Bijvoorbeeld een adres, in welk gebied een dienst wordt aangeboden of waar de dichtstbijzijnde bushalte is. Voor dit soort kaarten moet je een toegankelijk alternatief geven.</li> <li><strong>Kaarten om geografie te beschrijven</strong> geven eigenschappen van het aardoppervlak weer. Bijvoorbeeld de samenstelling van de bodem, of de hoeveelheid neerslag in een bepaald gebied.</li> </ol> </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--quote paragraph--view-mode--default"> <div class="field field--name-field-quote content-item"><p>Kaarten die locaties of routes aangeven, moet je voorzien van een toegankelijk alternatief.</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="field field--name-field-content content-item"> <div class="paragraph paragraph--type--_-column-20-80 paragraph--view-mode--default"> <div class="container"> <div class="row"> <div class="col-md-4 col-xs-12"> <div class="field field--name-field-left-20 content-item-list"> <div class="field field--name-field-left-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 loading="lazy" src="/sites/default/files/2022-10/pexels-cottonbro-5370916.jpg" width="640" height="960" alt="" /> </div> </div> </div> </div> </div> <div class="col-md-8 col-xs-12"> <div class="field field--name-field-right-80 content-item-list"> <div class="field field--name-field-right-80 content-item"> <div class="paragraph paragraph--type--wysiwyg-element paragraph--view-mode--default"> <div class="field field--name-field-body content-item"><h2 id="tips">Slim omgaan met online kaarten</h2> <p>Als je een kaart toevoegt aan je digitale kanaal, houd dan rekening met de volgende punten:</p> <ul> <li><strong>Uitzondering alleen voor kaart zelf</strong>: De uitzondering geldt alleen voor de online kaart zelf. Dus niet voor de webpagina, de app of het document eromheen. De webpagina, het scherm of het document moet wel aan de toegankelijkheidseisen voldoen.</li> <li><strong>Toegankelijk alternatief</strong>: Is de kaart bedoeld voor navigatie? Dan moet je de voor een bezoeker noodzakelijke informatie ook op een toegankelijke manier laten zien. Dit is verplicht.</li> <li><strong>Doe wat wel kan: </strong>Daarnaast kun je de kaart zelf <em>zo toegankelijk mogelijk</em> maken. Zorg dat de contrasten tussen de gebruikte kleuren voldoende zijn, en dat de navigatie van de kaartapplicatie met het toetsenbord te bedienen is. Als de kaart illustratief wordt gebruikt (bijvoorbeeld een historische kaart), beschrijf dan het onderwerp van de kaart, het afgebeelde gebied, de maker en het jaartal.</li> </ul> <h3>Welk alternatief?</h3> <p>Wat een geschikt alternatief is, hangt af van het doel van de kaart. Op kaarten kun je heel veel informatie kwijt. Bedenk met welke vraag de bezoeker de kaart bekijkt, en focus je in het toegankelijke alternatief op deze informatie. Een paar voorbeelden:</p> <ul> <li><strong>Adressen en routes</strong>: Je kunt adressen en/of een routebeschrijving in tekst onder de kaart zetten.</li> <li><strong>Objecten</strong>: Als er objecten op de kaart worden getoond, dan kun je die objecten ook in een lijst weergeven. Zijn het veel objecten? Laat bezoekers dan filteren en sorteren.</li> <li><strong>Gegevens rond locatie</strong>: Gaat het om een kaart waarop gegevens worden getoond rond een bepaalde locatie? Geef dan als alternatief een formulierveld waarin de bezoeker de gewenste locatie kan invoeren. Op basis daarvan laat je de resultaten voor het gebied rond die locatie in een lijst zien.</li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="field field--name-field-content content-item"> <div class="bg-grey 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"><h2 id="uitleg">Een toegankelijke kaart maken</h2> <p>Er zijn manieren om (eenvoudige) kaarten toegankelijk aan te bieden. Bij sommige kaarten kun je een toegankelijke tekst met CSS en/of script omvormen tot een kaart. Zo kun je een lijst met gegevens (bijvoorbeeld namen van ministeries en hun adres) met CSS over een afbeelding van een kaart plaatsen.</p> <p>Als je rekening houdt met de toegankelijkheidseisen die hieronder zijn beschreven, kun je zo een toegankelijke kaart maken. Een toegankelijk alternatief is dan niet nodig. Let er wel op dat alle noodzakelijke informatie die je met de kaart wilt overdragen in de tekst staat.</p> <h3>Relevante toegankelijkheidseisen</h3> <p>Wil je een kaart toegankelijk maken, dan zijn de volgende toegankelijkheidseisen belangrijk.</p> <h4>Algemeen</h4> <ul> <li><a class="ext" href="https://www.w3.org/Translations/WCAG21-nl/#niet-tekstuele-content">1.1.1 Geef niet-tekstuele onderdelen zoals afbeeldingen en filmpjes een tekstuele beschrijving. (niveau A)</a></li> <li><a class="ext" href="https://www.w3.org/Translations/WCAG21-nl/#info-en-relaties">1.3.1 Zorg dat informatie, structuur en relaties in code of tekst zijn vastgelegd, en niet alleen in de vormgeving. (niveau A)</a></li> <li><a class="ext" href="https://www.w3.org/Translations/WCAG21-nl/#betekenisvolle-volgorde">1.3.2 Zorg dat de inhoud op een logische volgorde gelezen kan worden door alle bezoekers. (niveau A)</a></li> <li><a class="ext" href="https://www.w3.org/Translations/WCAG21-nl/#gebruik-van-kleur">1.4.1 Gebruik niet alleen kleur maar ook nog andere visuele middelen om informatie over te dragen. (niveau A)</a></li> <li><a class="ext" href="https://www.w3.org/Translations/WCAG21-nl/#contrast-minimum">1.4.3 Gebruik voor tekst voldoende contrast tussen voor- en achtergrondkleur. (niveau AA)</a></li> <li><a class="ext" href="https://www.w3.org/Translations/WCAG21-nl/#herschalen-van-tekst">1.4.4 Zorg dat alle tekst op de website tweemaal zo groot kan worden gemaakt zonder dat er iets wegvalt of niet meer werkt. (niveau AA)</a></li> <li><a class="ext" href="https://www.w3.org/Translations/WCAG21-nl/#afbeeldingen-van-tekst">1.4.5 Gebruik geen afbeeldingen van tekst, tenzij het echt niet anders kan. (niveau AA)</a></li> <li><a class="ext" href="https://www.w3.org/Translations/WCAG21-nl/#toetsenbord">2.1.1 Zorg dat alle functies met alleen het toetsenbord te bereiken en gebruiken zijn. (niveau A)</a></li> <li><a class="ext" href="https://www.w3.org/Translations/WCAG21-nl/#geen-toetsenbordval">2.1.2 Voorkom dat een bezoeker die alleen het toetsenbord gebruikt vast komt te zitten en niet verder kan. (niveau A)</a></li> <li><a class="ext" href="https://www.w3.org/Translations/WCAG21-nl/#focus-zichtbaar">2.4.7 Maak zichtbaar welk onderdeel van een pagina de focus heeft bij toetsenbordbediening. (niveau AA)</a></li> </ul> <h4>Kaarten met een animatie</h4> <ul> <li><a class="ext" href="https://www.w3.org/Translations/WCAG21-nl/#louter-geluid-en-louter-videobeeld-vooraf-opgenomen">1.2.1 Geef niet-live geluidsfragmenten en bewegend beeld (zonder geluid) een tekstuele beschrijving. (niveau A)</a></li> <li><a class="ext" href="https://www.w3.org/Translations/WCAG21-nl/#timing-aanpasbaar">2.2.1 Geef bezoekers de mogelijkheid om een tijdslimiet waarna automatisch iets gebeurt te verlengen of uit te zetten. (niveau A)</a></li> <li><a class="ext" href="https://www.w3.org/Translations/WCAG21-nl/#pauzeren-stoppen-verbergen">2.2.2 Geef bezoekers de mogelijkheid om bewegende, scrollende, knipperende en automatisch verversende onderdelen te stoppen. (niveau A)</a></li> <li><a class="ext" href="https://www.w3.org/Translations/WCAG21-nl/#drie-flitsen-of-beneden-drempelwaarde">2.3.1 Laat elementen niet zodanig flitsen dat bezoekers er een toeval door kunnen krijgen. (niveau A)</a></li> </ul> <h4>Kaarten waarbij de bezoeker een locatie kan invoeren</h4> <ul> <li><a class="ext" href="https://www.w3.org/Translations/WCAG21-nl/#foutidentificatie">3.3.1 Geef bij een verkeerd ingevuld formulierveld aan waar de fout zit en beschrijf wat er fout is. (niveau A)</a></li> <li><a class="ext" href="https://www.w3.org/Translations/WCAG21-nl/#labels-of-instructies">3.3.2 Geef duidelijke instructies bij invoervelden. (niveau A)</a></li> <li><a class="ext" href="https://www.w3.org/Translations/WCAG21-nl/#foutsuggestie">3.3.3 Geef bij een verkeerd ingevuld formulierveld waar mogelijk suggesties ter verbetering. (niveau AA)</a></li> </ul> </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\/156","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,"extTitleNoOverride":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","extPreventOrphan":false,"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?srzh6r"></script> <script src="/core/misc/drupalSettingsLoader.js?v=10.4.3"></script> <script src="/core/misc/drupal.js?v=10.4.3"></script> <script src="/core/misc/drupal.init.js?v=10.4.3"></script> <script src="/themes/custom/dito/node_modules/%40dictu/video/dist/video.js?srzh6r"></script> <script src="/themes/custom/dito/js/script.js?srzh6r"></script> <script src="/themes/custom/dito/js/anchorlink.js?srzh6r"></script> <script src="/themes/custom/dito/js/video.js?srzh6r"></script> <script src="/modules/contrib/extlink/js/extlink.js?v=10.4.3"></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

Online kaarten | Digitoegankelijk