{"id":25452,"date":"2024-07-02T08:20:47","date_gmt":"2024-07-02T06:20:47","guid":{"rendered":"https:\/\/www.destination.one\/blog\/?p=25452"},"modified":"2024-07-02T09:19:20","modified_gmt":"2024-07-02T07:19:20","slug":"barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt","status":"publish","type":"post","link":"https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/","title":{"rendered":"Barrierefreies Webdesign – Programmierbeispiele f\u00fcr eine inklusive Online-Welt"},"content":{"rendered":"
<\/div><\/div><\/div>

Hinter jeder Website steht ein individueller Quellcode inklusive verschiedener, komplexer HTML-Strukturelemente. Stetig im Wandel bieten diese weitaus mehr Informationen, als auf den ersten Blick erkennbar. In den ersten Teilen unserer Blogreihe haben wir bereits \u00fcber die Relevanz von barrierefreien Inhalten, der rechtlichen Grundlage durch verschiedene Tests und auch \u00fcber M\u00f6glichkeiten der Gestaltung gesprochen. In diesem Artikel wird es nun technisch: wir gehen direkt in den Code und schauen uns beispielhaft ausgew\u00e4hlte Spezifikationen und Formatierungen an.<\/p>\n<\/div>

\u00dcbrigens:<\/strong> Viele Richtlinien f\u00fcr Barrierefreiheit sind auch aus SEO-Sicht f\u00f6rderlich!<\/div><\/div><\/div><\/div>
<\/div><\/div><\/div><\/section>
<\/div><\/div><\/div>
Funktionalit\u00e4t und Kompatibilit\u00e4t mit technischen Hilfsmitteln<\/h5>\n

Im Kontext von barrierefreiem Webdesign ist oft die Rede von speziellen Tools, Ger\u00e4ten oder Software – wie z. B. Braille-Tastaturen, Screenreadern oder Software zur Vergr\u00f6\u00dferung oder Erh\u00f6hung von Kontrasten.
\nDiese sind wichtig f\u00fcr Menschen mit Behinderungen und Einschr\u00e4nkungen, genauso wichtig ist aus Sicht von Barrierefreiheit aber, dass alleNutzer:innen eine Website problemlos bedienen k\u00f6nnen.
\nEgal ob f\u00fcr die Anzeige im Browser oder das Vorlesen durch den Screenreader – die Basis bildet immer der HTML-Code einer Website. Und damit der HTML-Code bestm\u00f6glich durch alle Ausgabeger\u00e4te verarbeitet werden kann, sind wir auch direkt beim ersten wichtigen Grundsatz<\/strong> f\u00fcr die Programmierung barrierefreier Websites:<\/p>\n<\/div>[vc_empty_space]

Das HTML muss valide sein und den offiziellen Spezifikationen folgen.<\/h6>\n<\/div>
[vc_single_image image=“25530″ img_size=“large“]<\/div><\/div><\/div>

Nur dann k\u00f6nnen Browser und andere Tools zuverl\u00e4ssig arbeiten.<\/p>\n

Den HTML-Code kann man sich als von der konkreten Darstellung unabh\u00e4ngige, abstrakte Form eines Dokuments vorstellen.
\nSo ist auf HTML-Ebene beispielsweise erst einmal v\u00f6llig unwichtig, ob eine \u00dcberschrift eine bestimmte Schriftgr\u00f6\u00dfe oder Schriftdicke hat – entscheidend ist, dass eben dieser Text, der als \u00dcberschrift dienen soll, auch als \u00dcberschrift gekennzeichnet ist (in diesem Fall geschieht dies durch Verwendung der h-Tags).<\/p>\n

Dies f\u00fchrt uns zu einem zweiten Grundsatz<\/strong>:<\/p>\n<\/div><\/div><\/div><\/div><\/div>[vc_empty_space]

Das HTML soll semantisch korrekt ausgezeichnet sein und losgel\u00f6st von der konkreten Darstellung die inhaltliche Gliederung des Dokuments (der Website) korrekt widerspiegeln.<\/h6>\n<\/div>

So gibt es spezielle HTML-Tags, die f\u00fcr den grundlegenden Aufbau eines Dokuments genutzt werden k\u00f6nnen:<\/p>\n<\/div>

  • \"nav\" f\u00fcr die Auszeichnung von Navigationsbereichen wie z. B. Men\u00fcs,<\/li>
  • \"main\" f\u00fcr den Bereich der Seite, die den Hauptinhalt enth\u00e4lt,<\/li>
  • \"footer\", \"header\",<\/li>
  • die h-Tags \"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\", die mittels \u00dcberschriften das Dokument gliedern<\/li><\/ul><\/div><\/div><\/div>
    [vc_single_image image=“25526″ img_size=“large“]<\/div><\/div><\/div><\/div>[vc_empty_space]
    Exkurs – richtige h-Tags<\/h6>\n<\/div>
    • h1 als oberste Ebene sollte der Titel des Dokuments sein; setze daher auch nur eine h1-\u00dcberschrift<\/li>
    • h2 bis h6 dienen dann der weiteren Gliederung, es d\u00fcrfen aber keine Ebenen ausgelassen werden; d. h. auf eine h2 folgt entweder eine h3, die einen Unterabschnitt zu der h2 kennzeichnet, oder eine h2, die einen neuen Abschnitt auf gleicher Ebene zu der vorangegangen h2 beginnt<\/li><\/ul>[vc_empty_space height=“48px“]

      Gut:<\/strong><\/p>\n<\/div>

        \n
      • h1\n
          \n
        • h2\n
            \n
          • h3<\/li>\n
          • h3\n
              \n
            • h4<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n
            • h2<\/li>\n
            • h2\n
                \n
              • h3<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/div>

                Schlecht:<\/strong><\/p>\n<\/div>

                  \n
                • h1\n
                    \n
                  • h3<\/li>\n
                  • \u00a0h2\n
                      \n
                    • h4<\/li>\n<\/ul>\n<\/li>\n
                    • h2<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>
                      <\/div><\/div><\/div><\/section>
                      <\/div><\/div><\/div>
                      [vc_empty_space height=“48px“]

                      Die korrekte semantische Auszeichnung erleichtert auch die Navigation mit Tools wie Screenreadern ungemein. So k\u00f6nnen Nutzer:innen einfach zum Hauptinhalt (<main>) springen oder sich anhand der \u00dcberschriften eine \u00dcbersicht des Contents verschaffen.<\/p>\n

                      Hilfreich sind dabei auch Sprungmarken:<\/strong> Links, die auf einen anderen Abschnitt eines Dokuments verweisen. Damit l\u00e4sst sich z. B. das Navigationsmen\u00fc \u00fcberspringen, oder man kann vom Ende des Dokuments wieder an den Anfang springen.
                      \nTechnisch sind diese Sprungmarken einfache Links, die im href-Attribut auf die ID des Elements verweisen, zu dem gesprungen werden soll:<\/p>\n

                      Die Sprungmarke:
                      \n<a href=“#>zum Content<\/a>
                      \nDurch entsprechendes CSS kann die Sprungmarke dann auch visuell versteckt werden, wenn diese sich prim\u00e4r an Screenreader richtet.<\/p>\n

                      Das Ziel, an das gesprungen wird:
                      \n<main id=“content“><\/p>\n<\/div>

                      Apropos Link:<\/strong> Auch f\u00fcr interaktive Elemente ist es wichtig, die korrekten HTML-Tags zu w\u00e4hlen.<\/div><\/div><\/div><\/div>
                      <\/div><\/div><\/div><\/section>
                      <\/div><\/div><\/div>
                      Links und Buttons<\/h6>\n<\/div>[vc_empty_space]
                      [vc_single_image image=“25532″ img_size=“large“]<\/div><\/div><\/div>

                      Ein Link ist ein Element, das bei Nutzung (i. d. R. durch einen einfachen Klick, aber auch das ist kontext-abh\u00e4ngig – Screenreader „klicken“ nicht) ein anderes Dokument oder einen anderen Abschnitt eines Dokuments \u00f6ffnet. Daf\u00fcr ist das <a>-Tag zu nutzen.<\/p>\n

                      F\u00fcr ein klickbares Element, das kein Link ist, sondern irgendeine andere Art von Interaktion ausl\u00f6st, ist <button> das korrekte Tag.<\/p>\n

                      Gerade Javascript-Frameworks machen es einfach, hier zu „mogeln“ und statt der korrekten Elemente zum Beispiel neutrale <div>-Tags zu nutzen, und diese mittels Javascript in Links oder Buttons umzuwandeln. Davon ist aber in jedem Fall abzuraten. Ebenso sollte auch ein a-Tag nicht als Button genutzt werden.<\/p>\n<\/div><\/div><\/div><\/div><\/div>[vc_empty_space]

                      Gut:<\/strong><\/p>\n<\/div>

                      <a href=“https:\/\/example.org\/XY“ title=“Dieser Link f\u00fchrt auf die Seite XY“>Link zu XY<\/a>
                      \n<button>Ich bin ein Button<\/button><\/p>\n<\/div><\/div><\/div><\/div>

                      Schlecht:<\/strong><\/p>\n<\/div>

                      <a href=“#“>Ich bin gar kein richtiger Link, sondern werde als Button genutzt<\/a>
                      \n<a href=“javascript:void(0)“>Bitte nicht nachmachen<\/a>
                      \n<div onclick=“someJavascriptFunction()“>not a real button<\/div><\/p>\n<\/div><\/div><\/div><\/div><\/div>

                      \u00dcbrigens:<\/strong> HTML-Elemente wie Links oder Buttons - wenn korrekt verwendet - erm\u00f6glichen direkt eine korrekte Tastaturbedienung - einfach so!<\/div>

                      Formular-Elemente wie Input-Felder oder Select-Elemente erfordern nat\u00fcrlich auch eine korrekte Auszeichnung.<\/p>\n

                      Formulare sind ein komplexes Thema bez\u00fcglich Barrierearmut, dennoch sei hier auf zwei wichtige Punkte verwiesen:<\/p>\n

                      1) Nutze native Formular-Elemente.<\/p>\n<\/div>

                      Gut:<\/strong><\/p>\n<\/div>

                      <select>
                      \n<option value=“1″>Eins<\/option>
                      \n<option value=“2″>Zwei<\/option>
                      \n<\/select><\/p>\n<\/div><\/div><\/div><\/div>

                      Schlecht:<\/strong><\/p>\n<\/div>

                      <div class=“select“>
                      \n<div class=“option“ value=“1″>Eins<\/div>
                      \n<div class=“option“ value=“2″>Zwei<\/div>
                      \n<\/div><\/p>\n<\/div><\/div><\/div><\/div><\/div>

                      \u00dcber CSS und Javascript l\u00e4sst sich das Aussehen und Verhalten eines Select-Elements zwar nachbauen, im Gegensatz zu nativen Elementen funktionieren diese aber eben nicht einfach so bei Tastaturbedienung, im Screenreader oder anderen Ausgabeger\u00e4ten.<\/p>\n<\/div>

                      2) Stelle sicher, dass jedes Formular-Element ein Label hat.<\/p>\n<\/div>

                      Gut:<\/strong><\/p>\n<\/div>

                      <label for=“feldName“>Beschriftung des Feldes<\/label>
                      \n<input type=“checkbox“ name=“feldName“ value=“1″ id=“feldName“>
                      \n<label>Beschriftung des Feldes<input type=“checkbox“ name=“feldName“ value=“1″ id=“feldName“><\/label><\/p>\n<\/div><\/div><\/div><\/div>

                      Schlecht:<\/strong><\/p>\n<\/div>

                      <p>Beschriftung des Feldes<\/p>
                      \n<input type=“checkbox“ name=“feldName“ value=“1″>
                      \n(es gibt keine semantische Verkn\u00fcpfung zwischen dem p-Tag und dem input-Feld)<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>

                      <\/div><\/div><\/div><\/section>
                      <\/div><\/div><\/div>
                      [vc_empty_space]
                      Und noch ein Grundsatz f\u00fcr die Programmierung: biete Alternativen f\u00fcr audiovisuelle Medien.<\/span><\/h6>\n<\/div>[vc_empty_space]

                      Wichtige Bilder, die zum Verst\u00e4ndnis der Seite notwendig sind, sollten zum Beispiel mit einem Alt-Text (alt=“Beschreibung des Bildinhalts“) beschrieben werden, damit er von Screenreadern entsprechend auditiv wiedergegeben werden kann. In den Alt-Texten sollte der Inhalt genau beschrieben werden.<\/p>\n

                      Hier ein Beispiel :
                      \n<img src=“marktplatz.jpg“ alt=“Ein belebter Marktplatz vor einer Kirche mit diversen Marktst\u00e4nden“><\/p>\n

                      Ebenso wichtig ist hierbei, dass rein dekorative Bilder mit einem leeren Alt-Tag versehen werden, sodass diese von Ausgabeger\u00e4ten entsprechend ignoriert werden k\u00f6nnen.<\/p>\n<\/div><\/div><\/div><\/div>

                      [vc_single_image image=“25536″ img_size=“large“]<\/div><\/div><\/div><\/div>[vc_empty_space]
                      \u00dcbrigens:<\/strong> Das gilt nicht nur f\u00fcr Bilder, sondern auch f\u00fcr Audio- und Videoinhalte, die durch Transskripte, Audiodeskriptionen oder Untertitel erg\u00e4nzt werden k\u00f6nnen.<\/div><\/div><\/div><\/div>
                      <\/div><\/div><\/div><\/section>
                      <\/div><\/div><\/div>
                      [vc_empty_space]
                      Spezielle Komponenten zur barrierearmen Programmierung: Beispiel ARIA<\/h6>\n<\/div>[vc_empty_space]
                      [vc_single_image image=“25540″ img_size=“large“]<\/div><\/div><\/div>

                      Barrierefreie Programmierung hat verschiedene Auspr\u00e4gungen und Optionen. Eine g\u00e4ngige und beliebte Erg\u00e4nzung sind bestimmte Spezifikationen wie z. B. ARIA. Bei Accessible Rich Internet Applications (ARIA) handelt es sich um einen Webstandard (seit 2014) in Form von zus\u00e4tzlichen HTML-Attributen. Diese bieten eine zus\u00e4tzliche Semantik und erm\u00f6glichen Entwickler:innen, die Inhalte einer Website f\u00fcr Menschen mit Einschr\u00e4nkungen besser zug\u00e4nglich zu machen.<\/p>\n<\/div><\/div><\/div><\/div><\/div>

                      Beispiele f\u00fcr den Einsatz von ARIA:<\/p>\n

                      Beschreibendes ARIA-Label f\u00fcr ein besseres Verst\u00e4ndnis eines Buttons
                      \n<a href=“\/unterseite“>Mehr erfahren<\/a> wird zu <a aria-label=“Erfahre hier mehr \u00fcber barrierefreies Webdesign“ href=“\/unterseite“>Mehr erfahren<\/a><\/p>\n

                      Verwendung der ARIA alert-Rolle, damit ein Screenreader einen solchen zuvor versteckten Text erkennt und vorliest, sobald er sichtbar ist
                      \n<div>Vielen Dank f\u00fcr Ihre Anmeldung zu unserem Newsletter<\/div> wird zu <div role=“alert“>Vielen Dank f\u00fcr Ihre Anmeldung zu unserem Newsletter<\/div><\/p>\n<\/div><\/div><\/div><\/div>

                      <\/div><\/div><\/div><\/section>
                      <\/div><\/div><\/div>
                      Wie barrierearm ist der Code meiner Website?<\/span><\/h5>\n

                      Um dies herauszufinden, gibt es verschiedene Tools und Techniken – je nach Betriebssystem und Browser. Zum Beispiel kann hier Firefox in der Developer-Version genutzt werden.<\/p>\n

                      In den Entwickler-Werkzeugen befindet sich der Reiter Barrierefreiheit, der uns genaue Ausk\u00fcnfte \u00fcber die Einstellungen auf einer Website gibt. Untersuchen k\u00f6nnen wir mit Hilfe dieser Funktion einzelne Elemente unserer Website, zum Beispiel einen Textblock innerhalb des Cookie-Banners. Wir sehen auf dem Beispielbild, dass dem Text die Rolle „text leaf“ zugeordnet ist. Durch diese zus\u00e4tzliche Auszeichnung werden Screenreader unterst\u00fctzt, den Inhalt und die Struktur einer Seite zu verstehen. Zudem wurde der Kontrast von Text zu Hintergrund \u00fcberpr\u00fcft nach den Richtlinien der WCAG-AA-Standards f\u00fcr barrierefreien Text.<\/p>\n<\/div>[vc_single_image image=“25547″ img_size=“full“]<\/div><\/div><\/div>

                      <\/div><\/div><\/div><\/section>
                      <\/div><\/div><\/div>

                      \nDiese hier aufgef\u00fchrten Code-Beispiele zeigen deutlich auf, welchen essentiellen Beitrag barrierefreie Programmierung leisten kann, um Menschen mit unterschiedlichen F\u00e4higkeiten und Einschr\u00e4nkungen gleicherma\u00dfen Zugang zu digitalen Inhalten und Services zu erm\u00f6glichen. Gibt es Fragen zum Thema oder Ihr m\u00f6chtet noch mehr erfahren? Schreibt uns gern unter sales@destination.one<\/span>\n<\/p><\/blockquote>\n<\/div><\/div><\/div><\/div>

                      <\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"Hinter jeder Website steht ein individueller Quellcode inklusive verschiedener, komplexer HTML-Strukturelemente. Stetig im Wandel bieten diese weitaus mehr Informationen, als auf den ersten Blick erkennbar. In den ersten Teilen unserer Blogreihe haben wir bereits \u00fcber die Relevanz von barrierefreien Inhalten, der rechtlichen Grundlage durch verschiedene Tests und auch \u00fcber M\u00f6glichkeiten der Gestaltung gesprochen. In diesem Artikel wird es nun technisch: wir gehen direkt in den Code und schauen uns beispielhaft ausgew\u00e4hlte Spezifikationen und Formatierungen an. \u00dcbrigens: Viele Richtlinien f\u00fcr Barrierefreiheit sind auch aus SEO-Sicht f\u00f6rderlich!Funktionalit\u00e4t und Kompatibilit\u00e4t mit technischen Hilfsmitteln Im Kontext von barrierefreiem Webdesign ist oft die Rede von speziellen Tools, Ger\u00e4ten oder Software - wie z. B. Braille-Tastaturen, Screenreadern oder Software zur Vergr\u00f6\u00dferung oder Erh\u00f6hung von Kontrasten. Diese sind wichtig f\u00fcr Menschen mit Behinderungen und Einschr\u00e4nkungen, genauso wichtig ist aus Sicht von Barrierefreiheit aber, dass alleNutzer:innen eine Website problemlos bedienen k\u00f6nnen. Egal ob f\u00fcr die Anzeige im Browser oder das Vorlesen durch den Screenreader - die Basis bildet immer der HTML-Code einer Website. Und damit der HTML-Code bestm\u00f6glich durch alle Ausgabeger\u00e4te verarbeitet werden kann, sind wir auch direkt beim ersten wichtigen Grundsatz f\u00fcr die Programmierung barrierefreier Websites: [vc_empty_space]Das HTML muss valide sein und den offiziellen Spezifikationen folgen. [vc_single_image...","protected":false},"author":21,"featured_media":25514,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":[],"categories":[360,430,62],"tags":[348,208],"yoast_head":"\nBarrierefreies Webdesign - Programmierbeispiele f\u00fcr eine inklusive Online-Welt - neusta tourism Blog<\/title>\n<meta name=\"description\" content=\"Erfahre in unserem Blogartikel, wie du durch valide HTML und semantisch korrekte Auszeichnung barrierefreies Webdesign und bessere SEO erreichst.\" \/>\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.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Barrierefreies Webdesign - Programmierbeispiele f\u00fcr eine inklusive Online-Welt - neusta tourism Blog\" \/>\n<meta property=\"og:description\" content=\"Erfahre in unserem Blogartikel, wie du durch valide HTML und semantisch korrekte Auszeichnung barrierefreies Webdesign und bessere SEO erreichst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/\" \/>\n<meta property=\"og:site_name\" content=\"neusta tourism Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/neustadestinationsolutions\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-02T06:20:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-02T07:19:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.destination.one\/blog\/wp-content\/uploads\/2024\/05\/programming-code-abstract-technology-background-software-developer-computer-script-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"1365\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sebastian Peine\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sebastian Peine\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"8\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/\"},\"author\":{\"name\":\"Sebastian Peine\",\"@id\":\"https:\/\/www.destination.one\/blog\/#\/schema\/person\/b66c8b092c54a430ae1dd78e1bb05f54\"},\"headline\":\"Barrierefreies Webdesign – Programmierbeispiele f\u00fcr eine inklusive Online-Welt\",\"datePublished\":\"2024-07-02T06:20:47+00:00\",\"dateModified\":\"2024-07-02T07:19:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/\"},\"wordCount\":2729,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.destination.one\/blog\/#organization\"},\"keywords\":[\"Barrierefreiheit\",\"Website\"],\"articleSection\":[\"Barrierefreiheit\",\"Development\",\"Digitalisierung\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/\",\"url\":\"https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/\",\"name\":\"Barrierefreies Webdesign - Programmierbeispiele f\u00fcr eine inklusive Online-Welt - neusta tourism Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.destination.one\/blog\/#website\"},\"datePublished\":\"2024-07-02T06:20:47+00:00\",\"dateModified\":\"2024-07-02T07:19:20+00:00\",\"description\":\"Erfahre in unserem Blogartikel, wie du durch valide HTML und semantisch korrekte Auszeichnung barrierefreies Webdesign und bessere SEO erreichst.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\/\/www.destination.one\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Barrierefreies Webdesign – Programmierbeispiele f\u00fcr eine inklusive Online-Welt\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.destination.one\/blog\/#website\",\"url\":\"https:\/\/www.destination.one\/blog\/\",\"name\":\"neusta tourism Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.destination.one\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.destination.one\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.destination.one\/blog\/#organization\",\"name\":\"neusta destination solutions\",\"url\":\"https:\/\/www.destination.one\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.destination.one\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.neusta-ds.de\/blog\/wp-content\/uploads\/2018\/11\/footer-logo.png\",\"contentUrl\":\"https:\/\/www.neusta-ds.de\/blog\/wp-content\/uploads\/2018\/11\/footer-logo.png\",\"width\":320,\"height\":97,\"caption\":\"neusta destination solutions\"},\"image\":{\"@id\":\"https:\/\/www.destination.one\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/neustadestinationsolutions\",\"https:\/\/www.instagram.com\/neusta_ds\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.destination.one\/blog\/#\/schema\/person\/b66c8b092c54a430ae1dd78e1bb05f54\",\"name\":\"Sebastian Peine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.destination.one\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.destination.one\/blog\/wp-content\/uploads\/2019\/10\/Sebastian_neu-150x150.jpg\",\"contentUrl\":\"https:\/\/www.destination.one\/blog\/wp-content\/uploads\/2019\/10\/Sebastian_neu-150x150.jpg\",\"caption\":\"Sebastian Peine\"},\"description\":\"Seit 2010 ist Sebastian Peine allgemein im Webbereich t\u00e4tig. Seinen Weg ins Agenturleben startete er dann 2 Jahre sp\u00e4ter. Ins Team von neusta destination solutions fand er 2017 und bereichert die Firma seitdem mit seinen Kenntnissen als Full-Strack-Developer mit Schwerpunkt auf TYPO3 und als Product Owner unseres CMS-Systems.\",\"url\":\"https:\/\/www.destination.one\/blog\/author\/sebastian-peine\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Barrierefreies Webdesign - Programmierbeispiele f\u00fcr eine inklusive Online-Welt - neusta tourism Blog","description":"Erfahre in unserem Blogartikel, wie du durch valide HTML und semantisch korrekte Auszeichnung barrierefreies Webdesign und bessere SEO erreichst.","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.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/","og_locale":"de_DE","og_type":"article","og_title":"Barrierefreies Webdesign - Programmierbeispiele f\u00fcr eine inklusive Online-Welt - neusta tourism Blog","og_description":"Erfahre in unserem Blogartikel, wie du durch valide HTML und semantisch korrekte Auszeichnung barrierefreies Webdesign und bessere SEO erreichst.","og_url":"https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/","og_site_name":"neusta tourism Blog","article_publisher":"https:\/\/www.facebook.com\/neustadestinationsolutions","article_published_time":"2024-07-02T06:20:47+00:00","article_modified_time":"2024-07-02T07:19:20+00:00","og_image":[{"width":2048,"height":1365,"url":"https:\/\/www.destination.one\/blog\/wp-content\/uploads\/2024\/05\/programming-code-abstract-technology-background-software-developer-computer-script-scaled.jpg","type":"image\/jpeg"}],"author":"Sebastian Peine","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"Sebastian Peine","Gesch\u00e4tzte Lesezeit":"8\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/#article","isPartOf":{"@id":"https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/"},"author":{"name":"Sebastian Peine","@id":"https:\/\/www.destination.one\/blog\/#\/schema\/person\/b66c8b092c54a430ae1dd78e1bb05f54"},"headline":"Barrierefreies Webdesign – Programmierbeispiele f\u00fcr eine inklusive Online-Welt","datePublished":"2024-07-02T06:20:47+00:00","dateModified":"2024-07-02T07:19:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/"},"wordCount":2729,"commentCount":0,"publisher":{"@id":"https:\/\/www.destination.one\/blog\/#organization"},"keywords":["Barrierefreiheit","Website"],"articleSection":["Barrierefreiheit","Development","Digitalisierung"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/","url":"https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/","name":"Barrierefreies Webdesign - Programmierbeispiele f\u00fcr eine inklusive Online-Welt - neusta tourism Blog","isPartOf":{"@id":"https:\/\/www.destination.one\/blog\/#website"},"datePublished":"2024-07-02T06:20:47+00:00","dateModified":"2024-07-02T07:19:20+00:00","description":"Erfahre in unserem Blogartikel, wie du durch valide HTML und semantisch korrekte Auszeichnung barrierefreies Webdesign und bessere SEO erreichst.","breadcrumb":{"@id":"https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.destination.one\/blog\/barrierefreies-webdesign-programmierbeispiele-fuer-eine-inklusive-online-welt\/barrierefreiheit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/www.destination.one\/blog\/"},{"@type":"ListItem","position":2,"name":"Barrierefreies Webdesign – Programmierbeispiele f\u00fcr eine inklusive Online-Welt"}]},{"@type":"WebSite","@id":"https:\/\/www.destination.one\/blog\/#website","url":"https:\/\/www.destination.one\/blog\/","name":"neusta tourism Blog","description":"","publisher":{"@id":"https:\/\/www.destination.one\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.destination.one\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.destination.one\/blog\/#organization","name":"neusta destination solutions","url":"https:\/\/www.destination.one\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.destination.one\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.neusta-ds.de\/blog\/wp-content\/uploads\/2018\/11\/footer-logo.png","contentUrl":"https:\/\/www.neusta-ds.de\/blog\/wp-content\/uploads\/2018\/11\/footer-logo.png","width":320,"height":97,"caption":"neusta destination solutions"},"image":{"@id":"https:\/\/www.destination.one\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/neustadestinationsolutions","https:\/\/www.instagram.com\/neusta_ds\/"]},{"@type":"Person","@id":"https:\/\/www.destination.one\/blog\/#\/schema\/person\/b66c8b092c54a430ae1dd78e1bb05f54","name":"Sebastian Peine","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.destination.one\/blog\/#\/schema\/person\/image\/","url":"https:\/\/www.destination.one\/blog\/wp-content\/uploads\/2019\/10\/Sebastian_neu-150x150.jpg","contentUrl":"https:\/\/www.destination.one\/blog\/wp-content\/uploads\/2019\/10\/Sebastian_neu-150x150.jpg","caption":"Sebastian Peine"},"description":"Seit 2010 ist Sebastian Peine allgemein im Webbereich t\u00e4tig. Seinen Weg ins Agenturleben startete er dann 2 Jahre sp\u00e4ter. Ins Team von neusta destination solutions fand er 2017 und bereichert die Firma seitdem mit seinen Kenntnissen als Full-Strack-Developer mit Schwerpunkt auf TYPO3 und als Product Owner unseres CMS-Systems.","url":"https:\/\/www.destination.one\/blog\/author\/sebastian-peine\/"}]}},"_links":{"self":[{"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/posts\/25452"}],"collection":[{"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/comments?post=25452"}],"version-history":[{"count":79,"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/posts\/25452\/revisions"}],"predecessor-version":[{"id":25549,"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/posts\/25452\/revisions\/25549"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/media\/25514"}],"wp:attachment":[{"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/media?parent=25452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/categories?post=25452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.destination.one\/blog\/wp-json\/wp\/v2\/tags?post=25452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}