{"id":2083,"date":"2017-05-17T15:08:05","date_gmt":"2017-05-17T13:08:05","guid":{"rendered":"https:\/\/www.clickstorm.de\/blog\/?p=2083"},"modified":"2021-12-14T15:21:28","modified_gmt":"2021-12-14T14:21:28","slug":"barrierefreie-webseiten","status":"publish","type":"post","link":"https:\/\/www.clickstorm.de\/blog\/barrierefreie-webseiten\/","title":{"rendered":"Barrierefreie Webseiten gestalten und programmieren"},"content":{"rendered":"<p>Barrierefreiheit ist im Alltag leichter erkennbar als im World Wide Web. Eine Rollstuhlrampe ist auff\u00e4lliger, als valides HTML. Aber auch im Internet ist eine barrierefreie Gestaltung wichtig. Nur so k\u00f6nnen Menschen mit Behinderung die Inhalte Ihrer Webseite einsehen. Zur Verdeutlichung dient das folgende Video:<\/p>\n<div class=\"privacy-container js-privacy-msg-video\"><img decoding=\"async\" class=\"privacy-text-image\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/plugins\/clickstorm-embed\/images\/comment-alt-exclamation.svg\" alt=\"Info Icon\"><\/p>\n<p class=\"privacy-text\">Dieses Video wird \u00fcber eine externe Plattform (YouTube) gehostet. Das Laden bedarf der Zustimmung unserer <a class=\"privacy-text-link\" href=\"https:\/\/www.clickstorm.de\/blog\/datenschutz\/\" target=\"_blank\">Datenschutzbestimmungen.<\/a><\/p>\n<p><a class=\"btn btn-primary btn-cookie js-cookie-open-modal\" data-cs-cookie-anchor=\"externalMedia\" href=\"#\">Einstellung vornehmen<\/a><\/div>\n<div class=\"iframe\"><iframe class=\"js-iframe-privacy-video\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"\" data-src=\"https:\/\/www.youtube-nocookie.com\/embed\/UREc1V_EkxQ\"><\/iframe><\/div>\n<p>In diesem Beitrag m\u00f6chten wir Ihnen zeigen, worauf bei barrierefreien Webseiten sowohl in der Gestaltung als auch in der Programmierung zu achten ist.\u00a0Erm\u00f6glichen Sie es Menschen wie Frau Hoffmann und Herrn M\u00e4nner Ihre Webseite zu bedienen!<\/p>\n<h2>Barrierefreies Webdesign<\/h2>\n<p>Bereits bei der Planung und Gestaltung der Webseite darf die Barrierefreiheit nicht au\u00dfer Acht gelassen werden. Im Nachhinein l\u00e4sst sie sich schwer integrieren. Beachten Sie daher schon bei der Erstellung die folgenden Punkte.<\/p>\n<h3>Aufbau der Seite<\/h3>\n<p>Die Seite muss \u00fcber eine klare Strukturierung erfolgen. Es ist davon auszugehen, dass der Nutzer die Webseite via Tastatur nutzt. Dabei geht er via der Tabulator-Taste von oben nach unten die Links und Formularelemente durch. Die aktuelle Position ist hierbei stets zu verdeutlichen, z.B. durch eine farbige Umrandung. Ebenso lesen ScreenReader die Webseite von oben nach unten vor.<\/p>\n<p>F\u00fcr die Erschlie\u00dfung des Inhalts d\u00fcrfen sensorische Merkmale wie Farbe, Form und Position von Elementen nicht erforderlich sein. Zum Beispiel sind Aussagen wie &#8222;Dr\u00fccken Sie den roten Knopf.&#8220; f\u00fcr Blinde nicht nachvollziehbar.<\/p>\n<p>Der Nutzer muss sich stets orientieren k\u00f6nnen.\u00a0Daf\u00fcr sind die folgenden Sachen zu beachten<\/p>\n<ul>\n<li>Aufbau der Hauptnavigation ist stets\u00a0einheitlich<\/li>\n<li>Aktive Men\u00fcpunkte sind hervorgehoben<\/li>\n<li>Unterstreichungen nur f\u00fcr Verlinkungen<\/li>\n<li>Besuchte Links werden gekennzeichnet<\/li>\n<li>Verwendung einer Breadcrumb (Brotkr\u00fcmelpfad)<\/li>\n<\/ul>\n<p>Die unterschiedlichen Auszeichnungen f\u00fcr Verlinkungen sind in der folgenden Grafik beispielhaft umgesetzt:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2109\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/05\/barrierefreie-verlinkungen.png\" alt=\"Beispiel f\u00fcr aktive und fokussierte Links im Men\u00fc\" width=\"1074\" height=\"607\" srcset=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/05\/barrierefreie-verlinkungen.png 1074w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/05\/barrierefreie-verlinkungen-300x170.png 300w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/05\/barrierefreie-verlinkungen-768x434.png 768w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/05\/barrierefreie-verlinkungen-1024x579.png 1024w\" sizes=\"auto, (max-width: 1074px) 100vw, 1074px\" \/><\/p>\n<p>Die Breadcrumb zeigt alle bisherigen Ebenen der Webseite auf. Hier sehe er wie beispielsweise wie folgt aus: <a href=\"https:\/\/www.clickstorm.de\/\" target=\"_blank\" rel=\"noopener noreferrer\">Startseite<\/a> &gt; <a href=\"https:\/\/www.clickstorm.de\/blog\/\" target=\"_blank\" rel=\"noopener noreferrer\">Blog<\/a> &gt; Artikel<\/p>\n<p>Neben der Navigation ben\u00f6tigt es wenigstens einen weiteren Zugangsweg. Dies kann entweder eine Sitemap oder eine Suche sein.<\/p>\n<h3>Skalierbarkeit<\/h3>\n<p>Die Webseite muss auch bei einer Zoom-Stufe von 200% noch bedienbar sein. Bei nur Text-Vergr\u00f6\u00dfern ist eine Bedienbarkeit bei 150% zu gew\u00e4hrleisten. Um das beispielsweise im Firefox zu testen, gehen Sie wie <a href=\"https:\/\/support.mozilla.org\/de\/kb\/webseitenzoom\" target=\"_blank\" rel=\"noopener noreferrer\">hier<\/a> beschrieben vor.<\/p>\n<h3>Kontrast<\/h3>\n<p>Bei Schriftgr\u00f6\u00dfen unter 24px sollte das Kontrastverh\u00e4ltnis bei 4,5:1, bei gr\u00f6\u00dferen Schriften 3:1. Dasselbe gilt bei Grafiken, die Schriften beinhalten. Diese sollten aber m\u00f6glichst vermieden werden. F\u00fcr die \u00dcberpr\u00fcfung des Kontrastverh\u00e4ltnisses, k\u00f6nnen Sie die Software <a href=\"https:\/\/www.paciellogroup.com\/resources\/contrastanalyser\/\" target=\"_blank\" rel=\"noopener noreferrer\">Colour Contrast Analyser<\/a>\u00a0nutzen.<\/p>\n<p>Ist der Kontrast nicht ausreichend, ist eine weitere, kontrastreichere Variante der Webseite zur Verf\u00fcgung zu stellen.<\/p>\n<h3>Dynamische Inhalte<\/h3>\n<p>Es muss die M\u00f6glichkeit geben, bewegte Inhalte abschalten oder ausblenden zu k\u00f6nnen.\u00a0Das sollte sowohl \u00fcber eine Schaltfl\u00e4che als auch via Tastatur m\u00f6glich sein. Selbes gilt auch f\u00fcr Ton. Dieser muss gestoppt werden k\u00f6nnen.<\/p>\n<p>Die Webseite darf nicht Flackern. Inhalte die Flackern, m\u00fcssen sp\u00e4testens nach dem dritten Mal stoppen.<\/p>\n<p>Sind Inhalte nur eine begrenzte Zeit aufrufbar, muss es m\u00f6glich sein, die Zeit zu verl\u00e4ngern. Beim Online-Banking ist Ihnen das sicherlich schon begegnet.<\/p>\n<h3>Formulare<\/h3>\n<p>Beschriftungen von Formularfeldern sind obligatorisch und immer\u00a0vor dem jeweilgien Feld anzuzeigen. Sollten bildbasierte Captchas zum Einsatz kommen, ist immer eine Alternative anzubieten (Audio oder Frage). Das Captchas nicht zwingend erforderlich sind, ist auch in unserem Artikel <a href=\"https:\/\/www.clickstorm.de\/blog\/alternativen-captchas-honeypot-blacklist\/\" target=\"_blank\" rel=\"noopener noreferrer\">Alternativen zum Captcha<\/a> nachzulesen.<\/p>\n<h2>Barrierefreie Programmierung<\/h2>\n<h3>Valides HTML und Barrierefreiheit?<\/h3>\n<p>Das HTML muss so geschrieben sein, dass keine Fehler im Quellcode auftauchen. Zur \u00dcberpr\u00fcfung dient der <a href=\"https:\/\/www.w3.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3C HTML-Validator<\/a>.<\/p>\n<p>\u00c4ltere HTML-Elemente und Attribute sind nicht mehr zu verwenden. Der aktuelle Standard (derzeit HTML5) ist zu verwenden.<\/p>\n<h3>Korrekte Auszeichnung von Elementen<\/h3>\n<p>Daten-Tabellen, \u00dcberschriften, Zitate und Listen sind mit den entsprechenden HTML-Tags zu kennzeichnen. F\u00fcr die Layout-Gestaltung sind Tabellen-Tags (&lt;table&gt;, &lt;td&gt; etc.) zu vermeiden.<\/p>\n<p>Normalerweise sind &lt;a&gt;- oder &lt;input&gt;-Tags f\u00fcr die Bedienung einer Webseite bestimmt. Sollten andere Tags z.B. zur Steuerung eines Bildwechslers genutzt werden, ist die Rolle der Elemente mit\u00a0<a href=\"https:\/\/wiki.selfhtml.org\/wiki\/WAI-ARIA\" target=\"_blank\" rel=\"noopener noreferrer\">WAI-ARIA<\/a>-Attributen zu kennzeichnen.<\/p>\n<h3>Verlinkungen<\/h3>\n<p>Das Logo auf verweist auf die Startseite.\u00a0Auf die aktuelle Seite d\u00fcrfen keine Links zeigen. Besuchte Links und aktive Men\u00fcpunkte sind zu kennzeichnen.<\/p>\n<h2>Barrierefreie Inhalte<\/h2>\n<p>In diesem Abschnitt sind vor allem Redakteure in der Pflicht. Sie m\u00fcssen die Inhalte barrierefrei pflegen. Aber auch Backend-Enwickler sind hier grefragt, da sie die M\u00f6glichkeit dazu schaffen m\u00fcssen.<\/p>\n<h3>Pflege von Alt-Attributen!<\/h3>\n<p>Ein wichtiger Aspekt, der hier oft vernachl\u00e4ssig wird, ist die Pflege von Bildbeschreibungen. Was hier zu beachten ist und welche weiteren Vorteile sich daraus ergeben erfahren Sie in unseren Artikel zum Thema <a href=\"https:\/\/www.clickstorm.de\/blog\/alt-attribute-bei-bildern\/\" target=\"_blank\" rel=\"noopener noreferrer\">Alternative Texte<\/a>.<\/p>\n<p>In dem Artikel erfahren Sie zudem, wie Sie die Informationen in <strong>TYPO3<\/strong> hinterlegen k\u00f6nnnen. Die Erweiterung <a href=\"https:\/\/www.clickstorm.de\/blog\/typo3-suchmaschinenoptimierung-seo-cs_seo\/\">cs_seo<\/a> ist hier sehr n\u00fctzlich. Mit ihr k\u00f6nnen Bilder im Backend angezeigt werden, die noch keinen alternativen Text haben und es kann direkt einer hinterlegt werden.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5119\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/06\/cs_seo-alternative-texte-fuer-bilder.png\" alt=\"TYPO3 Modul cs_seo mit Eingabemaske f\u00fcr alternative Texte\" width=\"770\" height=\"513\" srcset=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/06\/cs_seo-alternative-texte-fuer-bilder.png 770w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/06\/cs_seo-alternative-texte-fuer-bilder-300x200.png 300w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2016\/06\/cs_seo-alternative-texte-fuer-bilder-768x512.png 768w\" sizes=\"auto, (max-width: 770px) 100vw, 770px\" \/><\/p>\n<p>Bei Grafiken, die nur f\u00fcr die Gestaltung angelegt wurden, sollten keine alternativen Texte angegeben werden.<\/p>\n<p>Neben Bildern stellen Videos eine H\u00fcrde da. Hier ist mit Untertiteln und Beschreibungen zu arbeiten. Dar\u00fcber hinaus sind bei Ton oder stummen Videos sind gleichwertige Alternativen anzubieten.<\/p>\n<h3>Aussagekr\u00e4ftige Titel und Verlinkungen<\/h3>\n<p>Dokumenttitel sollten R\u00fcckschluss auf den Inhalt der Seite geben. Was f\u00fcr Suchmaschinen\u00a0hier noch zu beachten ist, erfahren Sie in unseren Artikel zu <a href=\"https:\/\/www.clickstorm.de\/blog\/seo-ueberschriften\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u00dcberschriften in Webseiten<\/a>.<\/p>\n<p>Ebenso ist bei Linktexten darauf zu achten, dass Sie das Ziel beschreiben. Hier kann zus\u00e4tzlich noch ein Titel-Attribut mit weiteren Informationen zum Linkziel angegeben werden. Bei Verweisen auf Dateien ist das Dateiformat zu benennen.<\/p>\n<h2>\u00dcberpr\u00fcfung von Webseiten auf Barrierefreiheit<\/h2>\n<h3>BITV<\/h3>\n<p><a href=\"https:\/\/www.gesetze-im-internet.de\/bitv_2_0\/BJNR184300011.html\" target=\"_blank\" rel=\"noopener noreferrer\">BITV<\/a> steht f\u00fcr die Barrierefreie-Informationstechnik-Verordnung. Die oben genannten Punkte stammen allen aus dem BITV-Test. Dabei wurden die wichtigsten Punkte genannt. Mit dem Test wird \u00fcberpr\u00fcft, ob die einzelnen Punkte der BITV eingehalten wurden. Den <a href=\"http:\/\/testen.bitv-test.de\/selbstbewertung\/test.php\" target=\"_blank\" rel=\"noopener noreferrer\">vollst\u00e4ndigen BITV-Test<\/a> k\u00f6nnen Sie selbst ausf\u00fchren. In dem Test selbst gibt es Anleitungen, wie die einzelnen Merkmale zu \u00fcberpr\u00fcfen sind. Hier sehen Sie einen Screenshot vom Test:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2110\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/05\/17-05-_2017_14-26-39.png\" alt=\"Screenshot BITV-Test\" width=\"946\" height=\"731\" srcset=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/05\/17-05-_2017_14-26-39.png 946w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/05\/17-05-_2017_14-26-39-300x232.png 300w, https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/05\/17-05-_2017_14-26-39-768x593.png 768w\" sizes=\"auto, (max-width: 946px) 100vw, 946px\" \/><\/p>\n<h3>Tools<\/h3>\n<p>Im gesamten Artikel wurden bereits verschiedene Hilfsmittel benannt, um die Barrierefreheit von Webseiten zu \u00fcberpr\u00fcfen. Hier nochmal eine Auflistung einiger\u00a0Programme und Online-Anwendungen:<\/p>\n<ul>\n<li><a href=\"http:\/\/testen.bitv-test.de\/selbstbewertung\/test.php\">BITV-Test<\/a>\u00a0| Selbsstest zur Einhaltung der BITV<\/li>\n<li><a href=\"https:\/\/www.bitvtest.de\/bitv_test\/das_testverfahren_im_detail\/werkzeugliste.html\" target=\"_blank\" rel=\"noopener noreferrer\">Werkzeugliste des BITV-Tests<\/a>\u00a0| u.a. diverse Browser-Plugins zur \u00dcberpr\u00fcfung einzelner Merkmale<\/li>\n<li><a href=\"http:\/\/wave.webaim.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">WAVE<\/a> | Online-Validator<\/li>\n<li><a href=\"https:\/\/www.experte.de\/barrierefreiheit\" target=\"_blank\" rel=\"noopener noreferrer\">Barrierfreiheit Test<\/a> | deutschsprachiger Online-Validator basierend auf <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Lighthouse<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/ER\/tools\/?q=bitv-german-government-standard\" target=\"_blank\" rel=\"noopener noreferrer\">Web Accessibility Evaluation Tools List<\/a> | Liste vom W3C, hier bereits gefiltert nach BITV-Tests<\/li>\n<\/ul>\n<p>Kennen Sie weitere Tools? Falls ja, schreiben Sie diese uns gerne in den Kommentaren.<\/p>\n<h2>Barrierefreiheit oder eher barrierearm<\/h2>\n<p>Eine Webseite komplett barrierfrei anzubieten ist oft nur theoretisch m\u00f6glich. Aufgrund dessen wird hier auch von barrierarmen Webseiten gesprochen.<\/p>\n<p>Barriefreiheit einer Webseite ist nur zu gew\u00e4hrleisten, wenn Grafiker, Entwickler und Redakteure zusammen an diesem Ziel arbeiten. Daher ist es wichtig alle Akteure f\u00fcr\u00a0die einzelnen Punkte zu sensibilisieren. Bei Webseiten von \u00f6ffentlichen Einrichtungen ist die Barrierefreiheit Pflicht. Dar\u00fcber hinaus sollten auch Unternehmen ein Interesse haben, dass Ihre Webseite f\u00fcr einen m\u00f6glichst gro\u00dfen Personenkreis zug\u00e4nglich ist.<\/p>\n<p>Wir haben in der Vergangenheit verschiedene Projekte umgesetzt, in denen das Thema Barriefreiheit eine Rolle spielte. Ihre Erfahrungen zum Thema k\u00f6nnen Sie gerne in den Kommentaren teilen. Falls Sie noch Fragen zum Thema haben, <a href=\"https:\/\/www.clickstorm.de\/kontakt\/\" target=\"_blank\" rel=\"noopener noreferrer\">sprechen Sie uns gerne an<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Machen Sie Ihre Webseite m\u00f6glichst vielen Menschen zug\u00e4nglich<\/p>\n","protected":false},"author":7,"featured_media":2097,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[137,136],"tags":[112,23,45,43,9,66],"class_list":["post-2083","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","category-seo","tag-barrierefreiheit","tag-cms","tag-entwicklung","tag-erfahrungen","tag-typo3","tag-webdesign"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Barrierefreie Webseiten gestalten und programmieren - clickstorm Blog<\/title>\n<meta name=\"description\" content=\"Barrierefreiheit macht Ihre Webseite f\u00fcr m\u00f6glichst viele Menschen zug\u00e4nglich. Mit diesen Tipps gestalten Sie Ihre Homepage barrierefrei.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.clickstorm.de\/blog\/barrierefreie-webseiten\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Barrierefreie Webseiten gestalten und programmieren - clickstorm Blog\" \/>\n<meta property=\"og:description\" content=\"Barrierefreiheit macht Ihre Webseite f\u00fcr m\u00f6glichst viele Menschen zug\u00e4nglich. Mit diesen Tipps gestalten Sie Ihre Homepage barrierefrei.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clickstorm.de\/blog\/barrierefreie-webseiten\/\" \/>\n<meta property=\"og:site_name\" content=\"clickstorm Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/de-de.facebook.com\/clickstorm\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-17T13:08:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-14T14:21:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/05\/barrierefreie-webseiten_teaser-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1170\" \/>\n\t<meta property=\"og:image:height\" content=\"577\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:site\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"6\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/barrierefreie-webseiten\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/barrierefreie-webseiten\\\/\"},\"author\":{\"name\":\"Marc\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/594fb824a2f049d33b2a1b4406bfc86b\"},\"headline\":\"Barrierefreie Webseiten gestalten und programmieren\",\"datePublished\":\"2017-05-17T13:08:05+00:00\",\"dateModified\":\"2021-12-14T14:21:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/barrierefreie-webseiten\\\/\"},\"wordCount\":1207,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/barrierefreie-webseiten\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/barrierefreie-webseiten_teaser-01.jpg\",\"keywords\":[\"Barrierefreiheit\",\"CMS\",\"Entwicklung\",\"Erfahrungen\",\"TYPO3\",\"Webdesign\"],\"articleSection\":[\"Frontend\",\"SEO\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/barrierefreie-webseiten\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/barrierefreie-webseiten\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/barrierefreie-webseiten\\\/\",\"name\":\"Barrierefreie Webseiten gestalten und programmieren - clickstorm Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/barrierefreie-webseiten\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/barrierefreie-webseiten\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/barrierefreie-webseiten_teaser-01.jpg\",\"datePublished\":\"2017-05-17T13:08:05+00:00\",\"dateModified\":\"2021-12-14T14:21:28+00:00\",\"description\":\"Barrierefreiheit macht Ihre Webseite f\u00fcr m\u00f6glichst viele Menschen zug\u00e4nglich. Mit diesen Tipps gestalten Sie Ihre Homepage barrierefrei.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/barrierefreie-webseiten\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/barrierefreie-webseiten\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/barrierefreie-webseiten\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/barrierefreie-webseiten_teaser-01.jpg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/barrierefreie-webseiten_teaser-01.jpg\",\"width\":1170,\"height\":577,\"caption\":\"Barrierefreie Webseiten, Mann mit Brille vor Laptop\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/barrierefreie-webseiten\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Barrierefreie Webseiten gestalten und programmieren\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"name\":\"clickstorm Blog\",\"description\":\"Neuigkeiten rund um Webentwicklung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\",\"name\":\"clickstorm GmbH\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"caption\":\"clickstorm GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/de-de.facebook.com\\\/clickstorm\\\/\",\"https:\\\/\\\/x.com\\\/clickstorm_gmbh\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCEaU1eUbug6OiI4uU6vA-cA\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/594fb824a2f049d33b2a1b4406bfc86b\",\"name\":\"Marc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g\",\"caption\":\"Marc\"},\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/author\\\/marc\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Barrierefreie Webseiten gestalten und programmieren - clickstorm Blog","description":"Barrierefreiheit macht Ihre Webseite f\u00fcr m\u00f6glichst viele Menschen zug\u00e4nglich. Mit diesen Tipps gestalten Sie Ihre Homepage barrierefrei.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.clickstorm.de\/blog\/barrierefreie-webseiten\/","og_locale":"de_DE","og_type":"article","og_title":"Barrierefreie Webseiten gestalten und programmieren - clickstorm Blog","og_description":"Barrierefreiheit macht Ihre Webseite f\u00fcr m\u00f6glichst viele Menschen zug\u00e4nglich. Mit diesen Tipps gestalten Sie Ihre Homepage barrierefrei.","og_url":"https:\/\/www.clickstorm.de\/blog\/barrierefreie-webseiten\/","og_site_name":"clickstorm Blog","article_publisher":"https:\/\/de-de.facebook.com\/clickstorm\/","article_published_time":"2017-05-17T13:08:05+00:00","article_modified_time":"2021-12-14T14:21:28+00:00","og_image":[{"width":1170,"height":577,"url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/05\/barrierefreie-webseiten_teaser-01.jpg","type":"image\/jpeg"}],"author":"Marc","twitter_card":"summary_large_image","twitter_creator":"@clickstorm_gmbh","twitter_site":"@clickstorm_gmbh","twitter_misc":{"Verfasst von":"Marc","Gesch\u00e4tzte Lesezeit":"6\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.clickstorm.de\/blog\/barrierefreie-webseiten\/#article","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/barrierefreie-webseiten\/"},"author":{"name":"Marc","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/594fb824a2f049d33b2a1b4406bfc86b"},"headline":"Barrierefreie Webseiten gestalten und programmieren","datePublished":"2017-05-17T13:08:05+00:00","dateModified":"2021-12-14T14:21:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/barrierefreie-webseiten\/"},"wordCount":1207,"commentCount":0,"publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/barrierefreie-webseiten\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/05\/barrierefreie-webseiten_teaser-01.jpg","keywords":["Barrierefreiheit","CMS","Entwicklung","Erfahrungen","TYPO3","Webdesign"],"articleSection":["Frontend","SEO"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.clickstorm.de\/blog\/barrierefreie-webseiten\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.clickstorm.de\/blog\/barrierefreie-webseiten\/","url":"https:\/\/www.clickstorm.de\/blog\/barrierefreie-webseiten\/","name":"Barrierefreie Webseiten gestalten und programmieren - clickstorm Blog","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/barrierefreie-webseiten\/#primaryimage"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/barrierefreie-webseiten\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/05\/barrierefreie-webseiten_teaser-01.jpg","datePublished":"2017-05-17T13:08:05+00:00","dateModified":"2021-12-14T14:21:28+00:00","description":"Barrierefreiheit macht Ihre Webseite f\u00fcr m\u00f6glichst viele Menschen zug\u00e4nglich. Mit diesen Tipps gestalten Sie Ihre Homepage barrierefrei.","breadcrumb":{"@id":"https:\/\/www.clickstorm.de\/blog\/barrierefreie-webseiten\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clickstorm.de\/blog\/barrierefreie-webseiten\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/barrierefreie-webseiten\/#primaryimage","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/05\/barrierefreie-webseiten_teaser-01.jpg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/05\/barrierefreie-webseiten_teaser-01.jpg","width":1170,"height":577,"caption":"Barrierefreie Webseiten, Mann mit Brille vor Laptop"},{"@type":"BreadcrumbList","@id":"https:\/\/www.clickstorm.de\/blog\/barrierefreie-webseiten\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.clickstorm.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Barrierefreie Webseiten gestalten und programmieren"}]},{"@type":"WebSite","@id":"https:\/\/www.clickstorm.de\/blog\/#website","url":"https:\/\/www.clickstorm.de\/blog\/","name":"clickstorm Blog","description":"Neuigkeiten rund um Webentwicklung","publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.clickstorm.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.clickstorm.de\/blog\/#organization","name":"clickstorm GmbH","url":"https:\/\/www.clickstorm.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","caption":"clickstorm GmbH"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/de-de.facebook.com\/clickstorm\/","https:\/\/x.com\/clickstorm_gmbh","https:\/\/www.youtube.com\/channel\/UCEaU1eUbug6OiI4uU6vA-cA"]},{"@type":"Person","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/594fb824a2f049d33b2a1b4406bfc86b","name":"Marc","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/85b6c585f298a873f9f4be166b9fbba00a9ad2482b92863d227e5d227136d135?s=96&d=mm&r=g","caption":"Marc"},"url":"https:\/\/www.clickstorm.de\/blog\/author\/marc\/"}]}},"_links":{"self":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/2083","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/comments?post=2083"}],"version-history":[{"count":10,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/2083\/revisions"}],"predecessor-version":[{"id":5121,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/2083\/revisions\/5121"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media\/2097"}],"wp:attachment":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media?parent=2083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/categories?post=2083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/tags?post=2083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}