{"id":10905,"date":"2026-07-03T17:20:10","date_gmt":"2026-07-03T15:20:10","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?p=10905"},"modified":"2026-07-03T18:36:39","modified_gmt":"2026-07-03T16:36:39","slug":"barrierefreiheit-bei-interaktiven-karten","status":"publish","type":"post","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-interaktiven-karten\/","title":{"rendered":"Barrierefreiheit bei interaktiven Karten"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/digitale-barrierefreiheit.podigee.io\/371-karten-barrierefrei-gestaltenkarten-verbessert-v2\/embed?context=external&#038;theme=default\" style=\"border: 0\" frameBorder=\"0\" height=\"100\" width=\"100%\"><\/iframe><br \/>\nIn diesem Beitrag geht es um interaktive Kartendienste und darum, wie sie barrierefrei gestaltet werden k\u00f6nnen. Interaktive Karten spielen heute eine immer wichtigere Rolle. Es gibt einfache Kartenausschnitte, f\u00fcr die oft schon ein Alternativtext ausreicht. H\u00e4ufig werden jedoch komplexe, interaktive Karten eingebunden. Sie zeigen beispielsweise Filialen, Standorte oder andere Points of Interest. Auch im \u00f6ffentlichen Nahverkehr kommen sie zum Einsatz. Dort werden Haltestellen und Routen f\u00fcr Bus und Bahn dargestellt. Es geht also l\u00e4ngst nicht mehr nur um eine einfache Wegbeschreibung, sondern um umfangreiche Informationen. Deshalb ist Barrierefreiheit hier besonders wichtig.<br \/>\nKarten sind grunds\u00e4tzlich ein hilfreiches Mittel. Durch Dienste wie Google Maps sind viele Menschen daran gew\u00f6hnt, sich mit Karten zu orientieren. F\u00fcr sehende Personen bieten sie einen schnellen \u00dcberblick. Man erkennt sofort, wie viele Haltestellen sich in der N\u00e4he befinden und wo sie liegen. Diese Informationen lassen sich auf einen Blick erfassen.<br \/>\nF\u00fcr blinde Menschen sind Karten dagegen nur eingeschr\u00e4nkt barrierefrei nutzbar. Das liegt an der Art der Darstellung. Blinde Menschen erhalten Informationen in einer linearen Reihenfolge, also nacheinander. Eine zweidimensionale Orientierung mit horizontalen und vertikalen Beziehungen, wie sie Karten voraussetzen, ist deshalb deutlich schwieriger. Diese Einschr\u00e4nkung l\u00e4sst sich nur begrenzt ausgleichen. Auf m\u00f6gliche L\u00f6sungen gehe ich sp\u00e4ter noch genauer ein.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-interaktiven-karten\/#Visuelle_Zugaenglichkeit\" >Visuelle Zug\u00e4nglichkeit<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-interaktiven-karten\/#Alternative_Bedienung\" >Alternative Bedienung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-interaktiven-karten\/#Testen_mit_screenreadern\" >Testen mit screenreadern<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-interaktiven-karten\/#Alternative_Zugaenge\" >Alternative Zug\u00e4nge<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Visuelle_Zugaenglichkeit\"><\/span>Visuelle Zug\u00e4nglichkeit<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Zun\u00e4chst geht es um die visuelle Zug\u00e4nglichkeit. Nicht grafische Elemente wie Stra\u00dfen oder Marker f\u00fcr Bushaltestellen, Filialen oder andere Points of Interest ben\u00f6tigen einen Mindestkontrast von 3:1 gegen\u00fcber dem Hintergrund. Texte auf der Karte, zum Beispiel Stra\u00dfennamen oder Haltestellenbezeichnungen, m\u00fcssen dagegen einen Kontrast von mindestens 4,5:1 erreichen.<br \/>\nIn der Praxis ist das oft eine Herausforderung. Die Standarddarstellungen von Diensten wie OpenStreetMap oder Google Maps erf\u00fcllen diese Anforderungen h\u00e4ufig nicht. Eine gute L\u00f6sung ist deshalb ein Hochkontrastmodus. Nutzerinnen und Nutzer k\u00f6nnen per Schaltfl\u00e4che eine kontrastreiche Darstellung der Karte aktivieren. Gleichzeitig sollte die Karte vereinfacht werden. Weniger wichtige Details k\u00f6nnen ausgeblendet werden. Wer beispielsweise nach einer Bushaltestelle sucht, ben\u00f6tigt in der Regel keine detaillierte Darstellung von Parks oder anderen Hintergrundinformationen. So lassen sich die erforderlichen Kontraste besser einhalten und die \u00dcbersicht verbessern.<br \/>\nDer Hochkontrastmodus sollte au\u00dferdem unter verschiedenen Bedingungen zuverl\u00e4ssig funktionieren. Viele Kartendienste bieten beispielsweise einen Nachtmodus an. Dabei wird die Darstellung an dunkle Umgebungen angepasst. Auch in diesem Modus m\u00fcssen die erforderlichen Kontraste erhalten bleiben.<br \/>\nEin weiterer wichtiger Aspekt sind die Marker auf der Karte. Sie kennzeichnen die relevanten Orte, etwa Bushaltestellen, Bahnh\u00f6fe, Taxist\u00e4nde oder Filialen. Marker d\u00fcrfen sich nicht allein durch ihre Farbe unterscheiden. Stattdessen sollten sie zus\u00e4tzlich ein eindeutiges Symbol oder einen Buchstaben enthalten. So kann beispielsweise ein Bussymbol oder der Buchstabe \u201eB\u201c eine Bushaltestelle kennzeichnen. F\u00fcr Bahnh\u00f6fe kann ein entsprechendes Bahnsymbol verwendet werden. Dadurch bleiben die Informationen auch dann verst\u00e4ndlich, wenn Farben nicht sicher erkannt werden k\u00f6nnen.<br \/>\nAu\u00dferdem m\u00fcssen sich Marker deutlich vom Kartenhintergrund abheben. Helle Corporate-Design-Farben wie Hellblau oder Hellgr\u00fcn reichen daf\u00fcr h\u00e4ufig nicht aus. Stattdessen sollten Farben mit ausreichend hohem Kontrast verwendet werden.<br \/>\nEin Hochkontrastmodus ist aus meiner Sicht ein Muss. Ich bin allerdings nicht sicher, welche Kartendienste eine solche Funktion bereits anbieten. Bei Google Maps oder OpenStreetMap ist sie mir bisher nicht begegnet. M\u00f6glicherweise existiert sie, ich habe sie bisher nur nicht gefunden.<br \/>\nWenn ein Kartendienst einen Hochkontrastmodus unterst\u00fctzt, sollte diese Funktion unbedingt genutzt werden. Gibt es keine entsprechende M\u00f6glichkeit, sollte der Anbieter kontaktiert und um eine Umsetzung gebeten werden. Neben Google Maps und OpenStreetMap gibt es zwar weitere Kartenanbieter, die beiden sind jedoch die bekanntesten. Unabh\u00e4ngig vom Anbieter sollte das Ziel sein, eine kontrastreiche Darstellung der Karten bereitzustellen.<br \/>\nFalls eine Karte eine Legende enth\u00e4lt, muss auch diese barrierefrei gestaltet werden. Solche Legenden kommen zwar nicht besonders h\u00e4ufig vor, sie k\u00f6nnen aber beispielsweise unterschiedliche Kategorien von Orten kennzeichnen.<br \/>\nDabei d\u00fcrfen Farbe oder Form niemals die einzigen Unterscheidungsmerkmale sein. Ein rotes Symbol f\u00fcr eine Bank und ein gr\u00fcnes Symbol f\u00fcr ein Caf\u00e9 reichen allein nicht aus. Diese Informationen m\u00fcssen zus\u00e4tzlich textlich oder durch eindeutige Symbole vermittelt werden. Das entspricht auch den Anforderungen der WCAG zum Kriterium der sensorischen Merkmale. Farbe oder Form d\u00fcrfen niemals die einzige M\u00f6glichkeit sein, Informationen zu unterscheiden.<br \/>\nSeit der WCAG 2.2 gilt au\u00dferdem die Anforderung an die Mindestgr\u00f6\u00dfe interaktiver Elemente. Auch sie betrifft Karten. Anklickbare Elemente wie Marker oder Points of Interest m\u00fcssen mindestens 24 \u00d7 24 Pixel gro\u00df sein oder ausreichend Abstand zueinander haben. Deshalb sollte die Karte so gestaltet werden, dass diese Mindestgr\u00f6\u00dfe eingehalten werden kann und sich einzelne Marker leicht ausw\u00e4hlen lassen.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Alternative_Bedienung\"><\/span>Alternative Bedienung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ein weiterer zentraler Punkt ist die Bedienung der Karte. Auf Desktop-Systemen muss sie vollst\u00e4ndig mit der Tastatur nutzbar sein. Nutzerinnen und Nutzer sollten die Karte beispielsweise mit den Plus- und Minustasten vergr\u00f6\u00dfern oder verkleinern k\u00f6nnen. Das Verschieben des Kartenausschnitts sollte \u00fcber die Pfeiltasten m\u00f6glich sein. So l\u00e4sst sich die Karte auch ohne Maus vollst\u00e4ndig bedienen.<br \/>\nEbenso wichtig ist eine Funktion, mit der jederzeit zum Ausgangspunkt zur\u00fcckgekehrt werden kann. Wer sich auf der Karte weit bewegt oder stark herauszoomt, verliert leicht die Orientierung. Eine Schaltfl\u00e4che zum Zur\u00fccksetzen der Ansicht erleichtert die Navigation erheblich.<br \/>\nDiese Anforderungen gelten nicht nur f\u00fcr Desktop-Anwendungen, sondern auch f\u00fcr Smartphones. Mobile Websites und native Apps m\u00fcssen ebenfalls eine barrierefreie Kartensteuerung erm\u00f6glichen. Neben Touch-Gesten sollten daf\u00fcr gut erreichbare Bedienelemente vorhanden sein. Dazu geh\u00f6ren Schaltfl\u00e4chen zum Vergr\u00f6\u00dfern und Verkleinern sowie Steuerelemente zum Verschieben des Kartenausschnitts. Nur so kann die Karte unabh\u00e4ngig von der gew\u00e4hlten Eingabemethode zuverl\u00e4ssig genutzt werden.<br \/>\nDiese Funktionen geh\u00f6ren zu den grundlegenden Anforderungen an barrierefreie interaktive Karten. Auf sie sollte in keinem Fall verzichtet werden.<br \/>\nIm Zusammenhang mit der Tastaturbedienung gibt es noch einen weiteren wichtigen Punkt. Alle Marker oder Points of Interest m\u00fcssen per Tastatur erreichbar sein. Hinter diesen Elementen verbergen sich h\u00e4ufig zus\u00e4tzliche Informationen, etwa Adressen, \u00d6ffnungszeiten oder weitere Hinweise. Diese Informationen m\u00fcssen auch Tastaturnutzenden zug\u00e4nglich sein.<\/p>\n<p>Ein weiterer wichtiger Aspekt ist die M\u00f6glichkeit, die Karte zu \u00fcberspringen. Das gilt insbesondere f\u00fcr Desktop-Anwendungen und ist vor allem f\u00fcr Screenreader-Nutzende wichtig. Manche Karten verhalten sich mit Screenreadern problematisch. Nutzerinnen und Nutzer gelangen zwar in die Karte, erhalten dort aber unverst\u00e4ndliche oder schwer nachvollziehbare Ansagen. Teilweise ist es sogar schwierig, die Karte wieder zu verlassen. Woran das genau liegt, h\u00e4ngt vermutlich von der technischen Einbindung ab. Da Karten f\u00fcr blinde Menschen h\u00e4ufig nur eingeschr\u00e4nkt nutzbar sind, sollte es immer m\u00f6glich sein, sie einfach zu \u00fcberspringen. Niemand sollte gezwungen sein, sich durch eine komplexe Kartensteuerung zu arbeiten, wenn die eigentlichen Informationen auch auf anderem Weg verf\u00fcgbar sind.<br \/>\nDie Marker sollten deshalb fokussierbar sein. Erh\u00e4lt ein Marker den Tastaturfokus, sollten die zugeh\u00f6rigen Informationen beispielsweise in einem Tooltip oder einem vergleichbaren Element angezeigt werden. Entscheidend ist, dass alle Inhalte ohne Maus erreichbar sind.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Testen_mit_screenreadern\"><\/span>Testen mit screenreadern<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ein besonders wichtiger Punkt ist das Testen mit Screenreadern. Hier zeigt sich, ob die technische Einbindung der Karte tats\u00e4chlich funktioniert. Aus meiner Sicht lassen sich Karten mit Screenreadern nur eingeschr\u00e4nkt zug\u00e4nglich machen. Eine vollst\u00e4ndig barrierefreie Nutzung ist kaum m\u00f6glich. Umso wichtiger ist es, dass Nutzerinnen und Nutzer nicht in der Karte \u201egefangen\u201c werden.<br \/>\nBeim Test sollte deshalb \u00fcberpr\u00fcft werden, ob die Karte als solche erkannt wird, ob sie sich problemlos \u00fcberspringen l\u00e4sst und ob sich der Fokus anschlie\u00dfend normal weiterbewegen l\u00e4sst. Niemand sollte gezwungen sein, sich mit zahlreichen Tabulatortasten durch die Karte zu arbeiten. Diese Tests sollten sowohl auf Desktop-Websites als auch in nativen Apps durchgef\u00fchrt werden.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Alternative_Zugaenge\"><\/span>Alternative Zug\u00e4nge<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Kommen wir zum letzten und vielleicht wichtigsten Punkt: der Alternative zur Karte.<br \/>\nEine barrierefreie Alternative ist unverzichtbar. Karten lassen sich f\u00fcr Screenreader nur begrenzt zug\u00e4nglich machen. Selbst wenn einzelne Marker erreichbar sind, bleibt die r\u00e4umliche Anordnung der Informationen schwer verst\u00e4ndlich. Au\u00dferdem gibt es Menschen, f\u00fcr die Karten grunds\u00e4tzlich zu komplex sind oder die grafische Darstellungen nur eingeschr\u00e4nkt erfassen k\u00f6nnen.<br \/>\nDeshalb sollte immer eine gleichwertige Alternative angeboten werden. Aus meiner Sicht eignet sich daf\u00fcr am besten eine Tab-L\u00f6sung. Ein Tab enth\u00e4lt die Karte, der andere die gleichen Informationen in einer barrierefreien Form.<br \/>\nDiese Alternative kann unterschiedlich umgesetzt werden. M\u00f6glich ist eine Tabelle mit allen Standorten, eine einfache Liste der Points of Interest oder \u2013 bei vielen Eintr\u00e4gen \u2013 eine Suchfunktion. Nutzerinnen und Nutzer k\u00f6nnten beispielsweise ihre Adresse eingeben und erhalten anschlie\u00dfend alle Filialen oder Haltestellen in der Umgebung.<br \/>\nIm \u00f6ffentlichen Nahverkehr ist eine solche Alternative h\u00e4ufig bereits vorhanden. Die klassische Fahrplanauskunft liefert die Strecke in Textform, w\u00e4hrend die Karte lediglich eine zus\u00e4tzliche Visualisierung darstellt. In diesem Fall liegen die Informationen bereits doppelt vor: einmal als Text und einmal als Karte. Das ist eine gute L\u00f6sung.<br \/>\nEntscheidend ist, dass die Alternative inhaltlich gleichwertig ist. Sie muss dieselben wesentlichen Informationen bereitstellen wie die Karte.<br \/>\nEine vollst\u00e4ndige Routenplanung muss dabei nicht zwingend selbst entwickelt werden. H\u00e4ufig gen\u00fcgt es, die Navigation an einen etablierten Kartendienst wie Google Maps, OpenStreetMap oder Apple Maps zu \u00fcbergeben. Viele Nutzerinnen und Nutzer verwenden diese Dienste ohnehin f\u00fcr die eigentliche Navigation. Dadurch kann die Anwendung ihre Informationen barrierefrei bereitstellen, w\u00e4hrend die Navigation von einem spezialisierten Kartendienst \u00fcbernommen wird.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In diesem Beitrag geht es um interaktive Kartendienste und darum, wie sie barrierefrei gestaltet werden k\u00f6nnen. Interaktive Karten spielen heute eine immer wichtigere Rolle. Es&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-interaktiven-karten\/\">Weiterlesen<span class=\"screen-reader-text\">Barrierefreiheit bei interaktiven Karten<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10905","post","type-post","status-publish","format-standard","hentry","category-allgemein","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/10905","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/comments?post=10905"}],"version-history":[{"count":2,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/10905\/revisions"}],"predecessor-version":[{"id":10907,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/posts\/10905\/revisions\/10907"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=10905"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/categories?post=10905"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/tags?post=10905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}