{"id":689,"date":"2018-03-22T16:11:53","date_gmt":"2018-03-22T14:11:53","guid":{"rendered":"http:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=689"},"modified":"2023-08-26T17:07:37","modified_gmt":"2023-08-26T15:07:37","slug":"semantik","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/semantik\/","title":{"rendered":"Semantik und Maschinenlesbarkeit &#8211; eine S\u00e4ule der digitalen 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 \/>\nTim Berners-Lee beschrieb schon sehr fr\u00fch die Idee eines semantischen Webs. Dabei sollten Informationen so ausgezeichnet werden, dass sie von Maschinen bzw. Programmen ausgelesen und neu zusammengesetzt werden k\u00f6nnten. Das geht ein wenig in Richtung K\u00fcnstliche Intelligenz,<br \/>\nallerdings basiert das semantische Web auf Metainformationen, die Programme &#8222;verstehen&#8220; also nicht, worum es geht. Sie werden durch die Metainformationen in die Lage versetzt, selbst\u00e4ndig Schl\u00fcsse zu ziehen, nicht mehr, aber auch nicht weniger. Das Stichwort dazu ist Information Retrieval. <\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 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\/entwicklung-und-design\/semantik\/#Metadaten_und_semantisches_Markup\" >Metadaten und semantisches Markup<\/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\/entwicklung-und-design\/semantik\/#Hierarchie_und_Zusammenhaenge\" >Hierarchie und Zusammenh\u00e4nge<\/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\/entwicklung-und-design\/semantik\/#Microdata_und_XFN\" >Microdata und XFN<\/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\/entwicklung-und-design\/semantik\/#Das_semantische_Web\" >Das semantische Web<\/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\/entwicklung-und-design\/semantik\/#Schemaorg\" >Schema.org<\/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\/entwicklung-und-design\/semantik\/#Die_Chancen_fuer_die_Barrierefreiheit\" >Die Chancen f\u00fcr die Barrierefreiheit<\/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\/entwicklung-und-design\/semantik\/#Weiterlesen\" >Weiterlesen<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Metadaten_und_semantisches_Markup\"><\/span>Metadaten und semantisches Markup<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Metadaten enthalten informationen \u00fcber Informationen. Die einfachste Form sind die HTML-Tags selbst. Der Tag h1 zum Beispiel sagt \u00fcber ein St\u00fcck Text aus, das es eine \u00dcberschrift Ebene 1 ist. Der Tag span=&#8220;h1&#8243; sagt, dass es sich um ein span mit der Klasse h1 handelt &#8211; mit anderen Worten, nichts von Belang. Die Tags, die auf reine Gestaltung ausgelegt sind wie bold, italic und so weiter werden zwar noch eingesetzt, gelten aber als verp\u00f6nt. Stattdessen wird z.B. strong eingesetzt, das via einer CSS-Klasse formatiert werden kann. Strong zeigt also an, dass dieser Text besonders wichtig ist, sagt aber nicht, wie er angezeigt werden soll.<br \/>\nDaneben gibt es die Metadaten im Head der HTML-Datei: Description, keywords, lang &#8211; um nur einige der bekannteren zu nennen. Bei diesen Metadaten hat es fr\u00fcher einen ziemlichen Wildwuchs gegeben, so dass sie auch dank Spamming kaum zu gebrauchen waren. Da Webseiten heute haupts\u00e4chlich \u00fcber Redaktionssysteme erstellt werden, k\u00fcmmert sich kaum noch ein Mensch um die Infos im Head. Der <a href=\"https:\/\/www.dublincore.org\/\">Bublin-Core-Standard ist der Versuch<\/a>, Ordnung in das Chaos zu bringen. Die meisten aktuellen Dokumentenformate wie Doc, ODF oder PDF verf\u00fcgen ebenfalls \u00fcber die M\u00f6glichkeit, Informationen wie Stichworte, Autor, und Titel einzutragen. Wirklich durchgesetzt hat sich das aber lediglich bei MP3 in Form der ID3-Tags.<br \/>\nDie Meta Deskription wird bei Google und anderen Suchmaschinen gelegentlich in den Suchergebnissseiten als Snippet angezeigt, ansonsten spielt nur der Title-Tag f\u00fcr fast alle Nutzer eine wichtige Rolle, er wird in der Kopfzeile des Browsers oder in der Tab-Leiste angezeigt. Erw\u00e4hnenswert ist noch die M\u00f6glichkeit, Geodaten in den Meta-Tags unterzubringen, damit wird eine geografische Verortung des Seitenbetreibers vereinfacht. Das k\u00f6nnte beim Location based Services und dem mobilen Internet eine Rolle spielen &#8211; oder auch nicht.<br \/>\nW\u00e4hrend HTML 4.01 und XHTML 1.0 eine eher schwache Semantik hatten, soll das mit HTML5 und WAI ARIA anders werden. In ARIA gibt es die sogenannten Orientierungspunkte wie Navigation, Inhalt und so weiter. \u00c4hnliches wird es in HTML5 geben. Die Orientierungspunkte von ARIA werden bereits auf vielen Seiten unterst\u00fctzt, z.B. in WordPress-Installationen, auf Yahoo und google und sogar teilweise auf Facebook. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Hierarchie_und_Zusammenhaenge\"><\/span>Hierarchie und Zusammenh\u00e4nge<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Im visuellen Design werden Hierarchien wesentlich \u00fcber Gr\u00f6\u00dfen-Unterschiede, N\u00e4he von Elementen und visuelle Anordnung kommuniziert. Diese Elemente funktionieren nur, wenn die Website genau so betrachtet wird, wie es vom Gestaltenden gedacht war. Arbeitet jemand mit starkem Zoom, einem anderen Design oder einer anderen Darstellung, etwa mit Screenreadern, funktioniert das nicht mehr.<br \/>\nNeben der visuellen Struktur ist deshalb auch eine technische Struktur notwendig. Es gibt \u00fcber HTML5 eine Makrostruktur, um die Webseite zu strukturieren und eine Mikrostruktur, um Texte zu strukturieren.<br \/>\nDie Makrostruktur sorgt im Prinzip daf\u00fcr, dass wir an den HTML-Tags bereits erkennen k\u00f6nnen, in welchem Bereich der Seite wir uns befinden. Nav, Content, Section und Footer liefern die n\u00f6tigen Informationen.<br \/>\nInnerhalb von Texten gibt es Abs\u00e4tze = p, Headings = h1-h6, Listen und Zitatbl\u00f6cke. Gerade be langen Texten erleichtern sie die Orientierung, ein Beispiel daf\u00fcr sind Artikel bei der Wikipedia.<br \/>\nZus\u00e4tzlich werden ungeordnete, verschachtelte Listen verwendet, um die Struktur verschachtelter Navigationen an Blinde zu kommunizieren. Blinde bekommen ansonsten nur die Links an sich vorgelesen, wissen aber nicht, ob sie in der Haupt- oder der Unter-Navigation sind, ob die Navigation 3 oder 10 Punkte hat und so weiter. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Microdata_und_XFN\"><\/span>Microdata und XFN<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>XFN oder FOAF hat sich mehr oder weniger etabliert, weil es in den installierbaren WordPress-Versionen seit langem verankert ist. Wer eine Blogroll bzw. eine Linkliste \u00fcber das System anlegt, kann auch Informationen dar\u00fcber vermitteln, in welcher Beziehung man zu diesem Link steht. Ich kann z.B. sagen, das ist eine meiner Webseiten, das ist eine Webseite meines Freundes und so weiter. FOAF ist im Prinzip eine erweiterte Form von XFN, \u00fcber FOAF k\u00f6nnen soziale Beziehungen maschinenlesbar dargestellt werden.<br \/>\nEin weiterer Standard sind micro data. Dabei werden den Informationen \u00fcber Attribute Eigenschaften zugewiesen. Praktisch wird das vor allem bei Kalender- und Kontaktdaten verwendet: also VCard oder HCard. Das ist ein ganz netter Service, weil dadurch Daten leichter ins Adressbuch oder den Kalender aufgenommen werden k\u00f6nnen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Das_semantische_Web\"><\/span>Das semantische Web<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die Idee des Semantic Web ist schon betagt. Tim Berners-Lee beschrieb sie schon 1999 in seinem &#8222;Web-Reportt&#8220;. Es geht darum, Inhalte auf Webseiten maschinenlesbar zu machen. Ein Programm soll anhand der Metadaten in der Lage seinInformationen zu extrahieren.<br \/>\nEin Beispiel: jede Veranstaltung hat bestimmte Informationsbestandteile: Veranstaltungsdatum und -zeit, Veranstaltungsort, Titel der Veranstaltung, Veranstaltungsbeschreibung und Stichworte. Diese Informationen stehen meist irgendwo auf der webseite verteilt. Suchmaschinen arbeiten bisher aber nur auf Stichwortbasis. Es ist heute also praktisch unm\u00f6glich, im Internet nach allen Veranstaltungen zum Thema &#8222;Digitale Demokratie&#8220; zu suchen. Stattdessen m\u00fcsste man das Stichwort &#8222;Digitale Demokratie&#8220; in Verbindung mit Messe, Kongress, Barcamp oder etwas \u00e4hnlichem kombiniert suchen. Zudem m\u00fcsste man die Phrase &#8222;Digitale Demokratie&#8220; in verschiedenen Varianten ausprobieren. Und dennoch ist es so gut wie sicher, dass wir viele Veranstaltungen \u00fcbersehen w\u00fcrden. Einer semantischen Suchmaschine hingegen k\u00f6nnte man sagen: &#8222;Suche mir alle Veranstaltungen zur digitalen Demokratie im Jahr 2012&#8220; und die Suchmaschine w\u00fcrde eine entsprechende Liste auswerfen.<br \/>\nDas bis heute nicht gel\u00f6ste Problem ist der technische Aufwand und die Standardisierung. Jemand m\u00fcsste hingehen und einen Standard entwickeln, das W3C stellt daf\u00fcr die technische Basis mit RDF(s), OWL und SparQL. Diese Standards m\u00fcssten in die g\u00e4ngigen Redaktionssysteme integriert werden, um schlie\u00dflich von den Redakteuren eingesetzt zu werden. Das m\u00fcsste so einfach sein wie einen Text zu schreiben und zu formatieren. Jenseits von Vorzeigeprojekten wie <span class=\"removed_link\" title=\"http:\/\/www.theseus-programm.de\/\">Teseus<\/span> oder der semantischen Wikipedia spielt das semantische Web bisher keine gro\u00dfe Rolle. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Schemaorg\"><\/span>Schema.org<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u00c4hnliches gilt f\u00fcr das von Google, Yahoo und Microsoft initiierte <span class=\"removed_link\" title=\"http:\/\/schema.org\/\">schema.org<\/span>, das vergleichbar mit Microdata ist. Seltsamerweise haben sich die SEOs noch nicht in Massen darauf gest\u00fcrzt, es gibt kein Plugin, um das in WordPress zu integrieren, was schon einiges \u00fcber die Relevanz von schema.org zeigt. Allerdings gibt es schon einige Schemata auf der Portalseite zu finden, die Chancen f\u00fcr schema.org d\u00fcrften also aktuell besser sein als jene von RDFs. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Die_Chancen_fuer_die_Barrierefreiheit\"><\/span>Die Chancen f\u00fcr die Barrierefreiheit <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Es ist schon absehbar, dass bis auf HTML5 und ARIA mangels Interesse der Webmaster sich mittelfristig keines der oben genannten Systeme durchsetzen wird. Ob man tats\u00e4chlich eine Semantisierung auf dieser Ebene ben\u00f6tigt ist eine andere Frage. Aktuell scheinen schema.org und RDFs eher f\u00fcr Spezialbereiche interessant zu sein, vor allem dort, wo Informationen ohnehin in Datenbanken gespeichert werden und Webseiten dynamisch daraus generiert werden, die Informationen also ohnehin schon strukturiert sind. Wer studiert hat w\u00fcrde eine Bibliothek mit einem semantischen Katalog durchaus sch\u00e4tzen.<br \/>\nBisher werden <a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/semantik\/\">semantische Informationen<\/a> in HTML oder ARIA vor allem von Screenreadern genutzt. Eine st\u00e4rkere Semantisierung w\u00fcrde es Blinden wesentlich erleichtern, zum Beispiel gezielt einzelene Bereiche  einer Webseite wie die Navigation, den Inhalt oder die Infospalte anzuspringen. Es hat sich zwar etabliert, Sprunganker und \u00dcberschriften als Hilfsmittel einzusetzen, aber Sprunganker funktionieren nicht in allen Screenreader-Browser-Kombinationen und bei den \u00dcberschriften hat sich kein echter Standard herausgebildet, wie sie korrekt eingesetzt werden sollen.<br \/>\nEin weiterer Vorteil semantischer Inhalte ist, dass sie einfacher \u00fcbersetzt werden k\u00f6nnen. So w\u00e4re es leichter, Programme zu entwickeln, die Texte aus Alltagssprache in Leichte Sprache oder Geb\u00e4rdensprache \u00fcbersetzen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Weiterlesen\"><\/span>Weiterlesen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>Tim Berners-Lee. Der Web-Report. Econ 1999<\/li>\n<li><a href=\"http:\/\/www.gironimo.org\/webentwicklung\/semantischer-code-barrierefrei.html\">Warum semantischer Code wichtig ist &#8211; gironimo.or<g \/a><\/g><\/a><\/li>\n<li>Dirk Lewandowski. Web Information Retrieval &#8211; komplettes Buch als PDF<\/li>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/texte\/informationsarchitektur-von-texten\/\">Informationsarchitektur von Texten<\/a><\/li>\n<li><a href=\"https:\/\/netz-barrierefrei.de\/en\/semantic.html\">Semantic and Machine Readibility<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Tim Berners-Lee beschrieb schon sehr fr\u00fch die Idee eines semantischen Webs. Dabei sollten Informationen so ausgezeichnet werden, dass sie von Maschinen bzw. Programmen ausgelesen und&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/semantik\/\">Weiterlesen<span class=\"screen-reader-text\">Semantik und Maschinenlesbarkeit &#8211; eine S\u00e4ule der digitalen Barrierefreiheit<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":663,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-689","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/689","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=689"}],"version-history":[{"count":24,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/689\/revisions"}],"predecessor-version":[{"id":8354,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/689\/revisions\/8354"}],"up":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/663"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}