{"id":613,"date":"2018-03-21T19:58:54","date_gmt":"2018-03-21T17:58:54","guid":{"rendered":"http:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=613"},"modified":"2022-07-17T11:37:12","modified_gmt":"2022-07-17T09:37:12","slug":"hypertext-markup-language-html","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/hypertext-markup-language-html\/","title":{"rendered":"Hypertext Markup Language (HTML) und Barrierefreiheit"},"content":{"rendered":"<p><script class=\"podigee-podcast-player\" src=\"https:\/\/player.podigee-cdn.net\/podcast-player\/javascripts\/podigee-podcast-player.js\" data-configuration=\"https:\/\/digitale-barrierefreiheit.podigee.io\/25-semantik-html-maschinenlesbarkeit\/embed?context=external\"><\/script><br \/>\nDie Basis-Sprache f\u00fcr das Web ist die Hypertext Markup Language (HTML). <\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 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\/barrierefreies-internet\/konzeption\/hypertext-markup-language-html\/#Die_Trennung_von_Struktur_und_Gestaltung\" >Die Trennung von Struktur und Gestaltung<\/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\/barrierefreies-internet\/konzeption\/hypertext-markup-language-html\/#Strukturierung_durch_Ueberschriften\" >Strukturierung durch \u00dcberschriften<\/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\/barrierefreies-internet\/konzeption\/hypertext-markup-language-html\/#Textstrukturierung\" >Textstrukturierung<\/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\/barrierefreies-internet\/konzeption\/hypertext-markup-language-html\/#Navigation\" >Navigation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/hypertext-markup-language-html\/#Semantisches_Markup\" >Semantisches Markup<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/hypertext-markup-language-html\/#WAI_ARIA\" >WAI ARIA<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/hypertext-markup-language-html\/#Lektuere-Empfehlungen\" >Lekt\u00fcre-Empfehlungen<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Die_Trennung_von_Struktur_und_Gestaltung\"><\/span>Die Trennung von Struktur und Gestaltung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ein wichtiges Prinzip von Zug\u00e4nglichkeit ist die Trennung von Struktur und Gestaltung. HTML enth\u00e4lt zwar einige Elemente, mit denen man Texte und Webseiten gestalten kann, sie gelten heute aber als unerw\u00fcnscht. Soweit das m\u00f6glich ist, soll die Struktur \u00fcber HTML und die Gestaltung \u00fcber CSS vorgenommen werden. Das erleichtert auch wesentlich die Wartung des Codes, macht die Seiten schlanker und kleine \u00c4nderungen am Design lassen sich schnell umsetzen.<br \/>\nStrukturierung und Gestaltung werden nicht nur in zwei verschiedenen Sprachen vorgenommen. Sie sollen auch inhaltlich getrennt werden. Theoretisch k\u00f6nnen die Gestaltungsanweisungen mit in die HTML-Datei gepackt werden. Das hat tats\u00e4chlich einen Vorteil: Wer die Webseite als einzelne HTML-Datei speichert, hat alle Gestaltungsanweisungen in der Datei. Die HTML-Datei auf der Festplatte sieht also \u00e4hnlich aus wie die Webseite aus dem Web, allerdings ohne Bilder. Allerdings wird sich derjenige, der die Seite danach pflegen darf herzlich bedanken, weil eingebetteter CSS-Code den Aufwand zur Gestaltung der Webseite erh\u00f6ht und eine Quelle f\u00fcr fehlerhafte Darstellung sein kann.  CSS-Anweisungen in HTML-Tags oder in der HTML-Datei sind also zu vermeiden.<br \/>\nVor allem Sehbehinderte k\u00f6nnen \u00fcber den Browser eigene Einstellungen f\u00fcr Schriftart, Schriftgrad oder Farben einstellen. Das wird durch die Trennung von Struktur und Design erleichtert. Wer das mal ausprobieren m\u00f6chte: Im Firefox unter Extras -> Einstellungen &#8211;< Inhalt bei Schriftarten und -farben auf \"Erweitert\" klicken. Dort ein paar Wunschwerte einstellen und das H\u00e4kchen bei \"Seiten das Verwenden eigener Schriftarten erlauben\" entfernen. \nFr\u00fcher wurden auch HTML-Tabellen zur Gestaltung verwendet. Es gab ansonsten kaum M\u00f6glichkeiten, Elemente auf der Webseite anzuordnen. Auch diese Konstruktionen sind mittlerweile verp\u00f6nt, allerdings noch auf vielen auch aktuellen Webseiten und in einigen Themes f\u00fcr WordPress und anderen Redaktionssystemen zu finden. Vor allem Screenreader-Nutzer sind wenig dankbar f\u00fcr solche Konstruktionen, weil Screenreader f\u00fcr jede Zelle die Spalte, Zeile und Inhalt vorlesen, was bei Datentabellen sinnvoll ist, aber bei normalen Inhalten schlicht st\u00f6rend und \u00fcberfl\u00fcssig ist. \n\n\n<h2><span class=\"ez-toc-section\" id=\"Strukturierung_durch_Ueberschriften\"><\/span>Strukturierung durch \u00dcberschriften<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>HTML verf\u00fcgt \u00fcber die sechs \u00dcberschriften-Ebenen &lt;h1&gt; bis &lt;h6&gt;. Normalerweise werden sie nur zur Strukturierung von Text verwendet. Allerdings kommt es selten vor, dass man auf einer einzigen Webseite alle sechs \u00dcberschrift-Ebenen verwendet.<br \/>\nMangels anderer L\u00f6sungen hat sich etabliert, den einzelnen Bereichen der Webseite \u00dcberschriften zu geben. Nutzer von Screenreadern haben so die M\u00f6glichkeit, einzelne Bereiche wie die Navigation, den Inhalt und so weiter direkt anzuspringen. <Navigationstasten<\/a> einzelne HTML-Elemente direkt anspringen.<br \/>\nEs gibt unterschiedliche Philosophien dahinter, welche \u00dcberschriftenebenen f\u00fcr die Bl\u00f6cke gew\u00e4hlt werden sollen. Ich finde es eher sinnvoll, \u00dcberschriften h\u00f6herer Hierarchien f\u00fcr den Text zu verwenden und \u00dcberschriften der unteren Hierarchien f\u00fcr die Bereichsnavigation einzusetzen. Dabei wird &lt;h1&gt; f\u00fcr die Haupt\u00fcberschrift im Inhaltsbereich verwendet, &lt;h2&gt; und &lt;h3&gt; f\u00fcr die Struktur innerhalb des Textes. Die \u00dcberschrift &lt;h6&gt; kann man hingegen zur Kennzeichnung der Bereiche verwenden.<br \/>\nDas Ganze wird als logische Strukturierung bezeichnet.<br \/>\nLogisch w\u00e4re allerdings eine andere als die oben beschriebene Vorgehensweise sinnvoll. Alle Bl\u00f6cke der Webseite wie die Kopfleiste, die Navigation oder der Hauptbereich bekommen die \u00dcberschrift 1, da sie alle auf der gleichen Ebene der Hierarchie liegen. Ihnen untergeordnete Elemente wie der Text im Inhaltsbereich erhalten entsprechend auch untergeordnete \u00dcberschriften. Wof\u00fcr man sich auch entscheidet, es sollte auf jeden Fall konsistent sein.<br \/>\nDas Ganze wird auch als \u00dcberschriften-Hierarchie bezeichnet. Das hei\u00dft, ein wichtigerrer Bereich einer Webseite hat eine \u00dcberschrift h\u00f6herer Ordnung als ein untergeordneter Bereich. Klingt kompliziert, ist aber recht einfach. Nehmen wir an, ich w\u00e4hle wie in diesem Artikel eine \u00dcberschrift 1 als oberste \u00dcberschriftenebene f\u00fcr meinen Text. Dann d\u00fcrfen die Zwischen\u00fcberschriften in diesem Text nicht ebenfalls eine \u00dcberschrift Ebene 1 haben, da die Abschnitte des Textes ein untergeordnetes Element des Textes sind. Und hier haben wir auch einen Kernwiderspruch der \u00dcberschriftenhierarchien. Mag sein, dass der Text das wichtigste Element der aktuellen Seite ist, logisch gesehen ist der Text aber ein untergeordnetes Element der Seite \u00e4hnlich wie die Navigation, die Kopf- oder Fu\u00dfzeile.<br \/>\n&lt;2>Sprunganker<br \/>\nSprunganker werden verwendet, damit Blinde einzelne Bereiche der WEbseite direkt anspringen k\u00f6nnen. Es sind Links, die Bereiche innerhalb einer Webseite verlinken, so wie bei der Wikipedia die Inhaltsverzeichnisse der Artikel. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Textstrukturierung\"><\/span>Textstrukturierung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wie schon erw\u00e4hnt werden zur Textstrukturierung \u00dcberschriften verwendet. Au\u00dferdem gibt es Elemente f\u00fcr ungeordnete und nummerierte Listen, Zitate oder Tabellen.<br \/>\nEs gibt einige M\u00f6glichkeiten, um Hervorhebungen in Texten zu machen. Wie schon erw\u00e4hnt, sollen Gestaltung und Strukturierung getrennt werden. Deshalb sind Elemente wie &lt;i&gt; f\u00fcr kursiv oder &lt;bold&gt; f\u00fcr fetten Text unerw\u00fcnscht. Stattdessen wird das &lt;strong&gt;-Element verwendet, das wird \u00fcber CSS formatiert. Hervorhebungen sollten nicht f\u00fcr wichtige Zwecke eingesetzt werden, sie werden von der Hilfssoftware von Blinden nicht ausgewertet. Auch f\u00fcr Sehbehinderte kann es schwierig sein, gefetteten von normalen Text zu unterscheiden oder kursiven Text zu lesen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Navigation\"><\/span>Navigation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>H\u00e4ufig werden HTML-Listen f\u00fcr die Navigationen verwendet. Die Listenpunkte und Einr\u00fcckungen von Listen werden dabei \u00fcber CSS wieder ausgeblendet. Wie erw\u00e4hnt k\u00f6nnen Blinde so gezielt nach der Navigation suchen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Semantisches_Markup\"><\/span>Semantisches Markup<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ein grundpfeiler der Barrierefreiheit im Internet ist das semantische Markup. Semantisch bedeutet in diesem Zusammenhang, dass die HTML-Tags maschinenlesbare Informationen dar\u00fcber enthalten, was sie einschlie\u00dfen. Viele Leute machen zum Beispiel eine Liste im Internet, indem sie ein Aufz\u00e4hlungszeichen schreiben und vielleicht noch eine Einr\u00fcckung machen. Dabei bietet HTML eigene Elemente f\u00fcr Listen, diese haben den Vorteil, dass sie auch von den Screenreadern von Blinden ausgelesen werden k\u00f6nnen.<br \/>\nInsgesamt hat HTML nur wenige semantische Elemente wie \u00dcberschriften, Listen und Zitatbl\u00f6cke. HTML war urspr\u00fcnglich vor allem f\u00fcr die Strukturierung von Text gedacht, die Gestaltung von Webseiten war nicht vorgesehen. Erst mit HTML5 und WAI ARIA wird eine st\u00e4rkere semantische Strukturierung von Webseiten m\u00f6glich. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"WAI_ARIA\"><\/span>WAI ARIA<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die Arbeitsgruppe des W3C f\u00fcr Barrierefreiheit \u2013 die WAI \u2013 arbeitet aktuell an einem Standard, um Anwendungen im Internet f\u00fcr Menschen mit Behinderung zug\u00e4nglich zu machen. Die Accessible Rich Internet Applications-Richtlinien(ARIA)  erg\u00e4nzen das in die Jahre gekommene HTML um Attribute f\u00fcr dynamische Elemente wie Schieberegler. Bereits eingesetzt werden Attribute, welche die Funktion von Bl\u00f6cken beschreiben k\u00f6nnen. Einem semantisch nicht besonders aussagekr\u00e4ftigen DIV-Container kann etwa das Attribut Navigation verpasst werden. Diese Orientierungspunkte \u00fcbernehmen die Funktion der oben beschriebenen \u00dcberschriften f\u00fcr Bereichsbl\u00f6cke. <\/p>\n<p>Wer sich schon ein wenig mit HTML5 besch\u00e4ftigt hat, dem wird das bekannt vorkommen. In HTML5 sollen die Bereiche der Webseite ebenfalls aussagekr\u00e4ftige HTML-Tags wie Navigation, Inhalt, Kopf und so weiter bekommen. Diese Tags werden bereits eingesetzt, ebenso wie die Orientierungspunkte in ARIA.<br \/>\nLeider wird es eine ganze Weile dauern, bis HTML5 oder ARIA als offizielle Standards verabschiedet werden \u2013 und noch l\u00e4nger, bis die Hilfstechnik der Behinderten damit umgehen kann.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Lektuere-Empfehlungen\"><\/span>Lekt\u00fcre-Empfehlungen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<\/ul>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/semantik\/\">Semantik im Web &#8211; eine kleine Einf\u00fchrung<\/a><\/li>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/aria-accessible-rich-internet-applications-und-barrierefreiheit\/\">ARIA und Barrierefreiheit<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Die Basis-Sprache f\u00fcr das Web ist die Hypertext Markup Language (HTML). Die Trennung von Struktur und Gestaltung Ein wichtiges Prinzip von Zug\u00e4nglichkeit ist die Trennung&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/hypertext-markup-language-html\/\">Weiterlesen<span class=\"screen-reader-text\">Hypertext Markup Language (HTML) und Barrierefreiheit<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":611,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-613","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/613","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"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=613"}],"version-history":[{"count":10,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/613\/revisions"}],"predecessor-version":[{"id":6778,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/613\/revisions\/6778"}],"up":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/611"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}