{"id":134,"date":"2023-11-15T07:52:41","date_gmt":"2023-11-15T07:52:41","guid":{"rendered":"https:\/\/immocado.com\/barrierefrei\/?page_id=134"},"modified":"2023-11-15T08:59:48","modified_gmt":"2023-11-15T08:59:48","slug":"barrierefreies-css","status":"publish","type":"page","link":"https:\/\/immocado.com\/barrierefrei\/barrierefreies-css\/","title":{"rendered":"Barrierefreies CSS"},"content":{"rendered":"<p>[ Dies ist eine \u00dcbersetzung des englischsprachigen Artikels \u201e<a href=\"http:\/\/webaim.org\/techniques\/css\/\">Accessible CSS<\/a>\u201e. Copyright \u00a9 by www.Webaim.org ]<\/p>\n<nav role=\"navigation\">\n<h2>Inhalt<\/h2>\n<ol>\n<li><a href=\"#intro\">Einleitung<\/a><\/li>\n<li><a href=\"#sep\">Inhalt und Pr\u00e4sentation trennen<\/a><\/li>\n<li><a href=\"#layout\">Steuern Sie das visuelle Layout<\/a><\/li>\n<li><a href=\"#hiding\">Inhalte mit CSS verstecken<\/a><\/li>\n<li><a href=\"#presenting\">Inhalte und Bedeutungen mit CSS darstellen<\/a><\/li>\n<\/ol>\n<\/nav>\n<div id=\"intro\" class=\"section\">\n<h2>Einleitung<\/h2>\n<p>Cascading Style Sheets oder CSS erlauben es, die Eigenschaften von bestehenden HTML-Elementen zu \u00e4ndern. Alle Web-Browser haben eine integrierte Stilvorlage, die den Standardstil f\u00fcr alle Elemente definiert. Zum Beispiel, wenn der Browser den <code>&lt;p&gt;<\/code>-Tag sieht, wei\u00df dieser, dass eine Zeile \u00fcberspringen und einen neuer Abschnitt gestartet werden muss, da das in der integrierten Stilvorlage vorgeschrieben ist. Der <code>&lt;strong&gt;<\/code>, <code>&lt;table&gt;<\/code>, und jeder andere HTML-Tag, hat in der Stilvorlage Gr\u00f6\u00dfe, Farbe, Position und andere Eigenschaften definiert. Wenn der Autor der Seite f\u00fcr die Elemente einen eigenen Style definiert, kann die integrierte Stilvorlage \u00fcberschrieben werden und dem Browser angeben, die Elemente in einer anderen Art und Weise anzuzeigen.<\/p>\n<p>CSS wird \u201eKaskadisierung\u201c genannt, weil es eine Hierarche oder Rangordnung gibt, die bestimmt, wie die Styles angewendet werden.<\/p>\n<div class=\"center\"><img decoding=\"async\" class=\"border\" src=\"http:\/\/webaim.org\/techniques\/css\/media\/cascading.png\" alt=\"illustration of the cascading effect of style sheets\" \/><\/div>\n<p>Styles, die in einer externen Stilvorlage (in der Regel eine .css-Datei) definiert sind, \u00fcberschreiben die Standardeinstellungen des Browsers. Interne Styles (normalerweise auffindbar in dem <code>&lt;head&gt;<\/code>-Abschnitt einer Seite) \u00fcberschreiben externe Styles und Element-Styles (werden direkt auf ein Element angewendet) \u00fcberschreiben interne Styles. Es ist etwas komplizierter als hier beschrieben, aber dies sind die Grundregeln. Dennoch liegt die oberste Schicht der Kontrolle immer beim Endverbraucher. Diese k\u00f6nnen benutzerdefinierte Styles festlegen, die alle anderen Styles \u00fcberschreiben oder deaktivieren.<\/p>\n<div class=\"important\">\n<div class=\"title\">Wichtig<\/div>\n<p>Der Endverbraucher hat <strong>immer<\/strong> die ultimative Kontrolle \u00fcber den Style einer Seite, die er sieht. F\u00fcr die Barrierefreiheit m\u00fcssen wir nicht nur zug\u00e4ngliche Styles entwickeln, sondern auch Flexibilit\u00e4t in unseren Designs erlauben, damit der Endverbraucher diese anpassen kann. Die Idee, dass Web-Entwickler und Designer Kontrolle \u00fcber die Anzeige der Inhalte haben, ist eine Illusion.<\/p>\n<\/div>\n<p>Also warum sollte ein Endbenutzer seinen eigenen Style definieren? Ein Nutzer mit einer <a href=\"http:\/\/www.webaim.org\/articles\/visual\/lowvision\">Sehschw\u00e4che<\/a> kann eine deutlich gr\u00f6\u00dfere Textgr\u00f6\u00dfe festlegen, die es ihm erlaubt, den Textinhalt zu lesen. Ein Nutzer mit einer <a href=\"http:\/\/www.webaim.org\/articles\/visual\/colorblind\">Farbschw\u00e4che<\/a> oder Sehschw\u00e4che k\u00f6nnte Seitenfarben \u00fcberschreiben, damit er die Seiteninhalte in bestimmten Farben mit hohem Kontrast wahrnehmen kann. Ein Nutzer mit <a href=\"http:\/\/www.webaim.org\/articles\/cognitive\/\">kognitiven Schwierigkeiten oder mit Lernschwierigkeiten<\/a> k\u00f6nnte die Positionierung, Schriftbilder, Bilder usw. \u00dcberschreiben, um eine elementarere Darstellung zu gew\u00e4hrleisten. Kurz gesagt, gibt es viele Gr\u00fcnde aus denen Nutzer die standardm\u00e4\u00dfigen, oder die von einem Autor definierten Styles, \u00fcberschreiben. Dar\u00fcber hinaus ignorieren fast alle Bildschirmleseger\u00e4te CSS.<\/p>\n<\/div>\n<div id=\"sep\" class=\"section\">\n<h2>Inhalt und Pr\u00e4sentation trennen<\/h2>\n<p>Eines der wichtigsten Vorteile von CSS ist, dass es den Autoren erlaubt, Inhalte von der Pr\u00e4sentation zu trennen. Zum <em>Inhalt<\/em> geh\u00f6rt der Text, die Bilder und andere Elemente, die den Kern des Dokuments ausmachen. Die <em>Pr\u00e4sentation<\/em> umfasst die Darstellungsweise des Inhaltes. Der Inhalt sollte in einem Markup definiert werden, in dem HTML-Code der Seite. Die Pr\u00e4sentation sollte in CSS definiert werden. Auf diese Weise sollte der Inhalt noch voll zug\u00e4nglich sein, wenn jemand CSS \u00fcberschreibt oder au\u00dfer Kraft setzt.<\/p>\n<p>Betrachten Sie den folgenden Screenshot von dieser Seite, auf der CSS deaktiviert wurde.<\/p>\n<div class=\"center\"><img decoding=\"async\" class=\"border\" src=\"http:\/\/webaim.org\/techniques\/css\/media\/withoutstyles.jpg\" alt=\"Screenshot of this page with styles disabled. Plain text with only one image is visible\" \/><\/div>\n<p>Obwohl die Seite, bei welcher der Style deaktiviert wurde, kaum aussieht, wie die Seite, die Sie sehen, ist dennoch der gesamte Inhalt vorhanden. Da diese Seite die richtige Semantik der Header und Listen in Markups anstelle von Styles benutzt, bleiben diese sichtbar, obwohl die die Styles deaktiviert sind. Alle Styles, die der Nutzer ver\u00e4ndert oder \u00fcberschreibt, gelten f\u00fcr den darunter liegenden Inhalt, welcher unabh\u00e4ngig von den Benutzer\u00e4nderungen zug\u00e4nglich bleiben sollte.<\/p>\n<\/div>\n<div id=\"layout\" class=\"section\">\n<h2>Steuern Sie das visuelle Layout<\/h2>\n<p>CSS bietet eine gro\u00dfe Kontrolle \u00fcber die Positionierung von Elementen innerhalb einer Seite. Das bedeutet, dass der zugrunde liegende Quellcode (welcher dem Bildschirmleseger\u00e4t die Leserichtung angibt und die Navigationsreihenfolge der Tastatur bestimmt) nicht mit dem visuellen Layout und der Pr\u00e4sentationsreihenfolge \u00fcbereinstimmt. Wie oben erw\u00e4hnt, wird der zugrunde liegende Inhalt\/ das Markup sehr wichtig, wenn Sie den Inhalt von der Pr\u00e4sentation trennen. Es sollte logisch und intuitiv sein und sollte im Normalfall mit der visuellen Pr\u00e4sentation \u00fcbereinstimmen, oder zumindest \u00e4hnlich zu dieser sein \u2013 grob gesagt links nach rechts, oben nach unten.<\/p>\n<\/div>\n<div id=\"hiding\" class=\"section\">\n<h2>Inhalte mit CSS verstecken<\/h2>\n<p>In nahezu allen F\u00e4llen sollte der gesamte Inhalt zug\u00e4nglich f\u00fcr die Nutzer von Bildschirmleseger\u00e4ten sein, der visuell in einer Seite pr\u00e4sentiert ist. Ebenso ist es sehr selten, dass Nutzern von Bildschirmleseger\u00e4ten Inhalte angezeigt bekommen, die nicht visuell in einer Seite pr\u00e4sentiert werden. Es gibt jedoch Ausnahmen, f\u00fcr allem f\u00fcr Dinge, die visuell verst\u00e4ndlich sind, aber f\u00fcr die eine kurze Erl\u00e4uterung oder Anweisung f\u00fcr Nutzer von Bildschirmleseger\u00e4ten n\u00fctzlich sein k\u00f6nnte.<\/p>\n<p>Wenn Sie sich den vorherigen Screenshot von dieser Seite ohne Style ansehen, werden Sie feststellen, dass einige Textelemente f\u00fcr Nutzer von Bildschirmleseger\u00e4ten angezeigt werden, welche visuell nicht angezeigt werden \u2013 ein Textlabel f\u00fcr das Suchfeld, die \u00dcberschrift \u201eMain Navigation\u201c \u00fcber der Navigation der Seite und die \u201eYou are here:\u201c-Anzeige vor dem Pfad. Diese Bereiche sind versteckt f\u00fcr die visuelle Anzeige, bieten aber n\u00fctzliche Informationen f\u00fcr die Nutzer von Bildschirmleseger\u00e4ten.<\/p>\n<div class=\"note\">\n<div class=\"title\">Anmerkung<\/div>\n<p>Die Techniken zum Verstecken von zug\u00e4nglichen Inhalten, f\u00fcr CSS, finden Sie in <a href=\"http:\/\/www.webaim.org\/techniques\/css\/invisiblecontent\/\">CSS in Action: Invisible Content Just for Screen Reader Users<\/a><\/p>\n<\/div>\n<\/div>\n<div id=\"presenting\" class=\"section\">\n<h2>Inhalte und Bedeutungen mit CSS darstellen<\/h2>\n<p>Gegens\u00e4tzlich zum Verstecken von Inhalten mit CSS, werden Inhalt oder Bedeutung manchmal ausschlie\u00dflich mit CSS dargestellt. Mit Hilfe von CSS k\u00f6nnte man folgendes tun:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Definieren Sie Hintergrundbilder, die Inhalt pr\u00e4sentieren<\/li>\n<li>Managen Sie ihr Layout oder die Pr\u00e4sentation so, dass die Bedeutung beeinflusst wird<\/li>\n<li>Verwenden Sie Farben allein, um eine Bedeutung zu vermitteln<\/li>\n<li>Generieren Sie Inhalte mit CSS<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>Diese Techniken sollten im Allgemeinen vermieden werden. Aber in Situationen, in denen CSS Informationen, Inhalte, oder Bedeutungen pr\u00e4sentiert, muss eine barrierefreie Alternative bereitgestellt werden..<\/p>\n<p>Zum Beispiel k\u00f6nnen CSS Hintergrundbilder nicht direkt einen Alternativtext erhalten. Darum muss ein Bild, welches Inhalte \u00fcbermittelt, mit dem <code>img<\/code>-Element mit einem entsprechenden <code>alt<\/code>-Attributwert in den Inhalt platziert werden. Wenn das nicht m\u00f6glich ist, k\u00f6nnen Sie einen versteckten, Off-Screen-Text verwenden, der den Inhalt der Bilder an die Nutzer vermittelt, die die Bilder nicht sehen k\u00f6nnen.<\/p>\n<p>Mit CSS k\u00f6nnen Texte so ver\u00e4ndert werden, dass sie wie \u00dcberschriften aussehen. Worte k\u00f6nnen hervorgehoben erscheinen (so als ob <code>&lt;strong&gt;<\/code> oder <code>&lt;em&gt;<\/code>-Tags verwendet w\u00e4ren), auch wenn sie nur in einer anderen Farbe dargestellt werden, oder fett, oder kursiv erscheinen (ohne das begleitende semantische Markup). Benutzen Sie immer das grundlegende HTML Markup um den notwendigen semantischen Inhalt und die Bedeutung bereitzustellen, dann verwenden Sie CSS um die Standardstyles zu verbessern und zu \u00e4ndern.<\/p>\n<div class=\"example\">\n<div class=\"title\">Header Beispiel<\/div>\n<p>Der unten stehende Satz erweckt den Anschein einer \u00dcberschrift, aber es ist nur ein normaler Text, der so ver\u00e4ndert wurde, dass er aussieht wie eine \u00dcberschrift.<\/p>\n<p style=\"font-weight: bold; font-size: 200%; font-family: Arial;\">Dies Ist Keine \u00dcberschrift. Es Sieht Nur Aus Wie Eine.<\/p>\n<p>Das falsche Markup, welches das Beispiel zur Folge hat, ist dieses:<\/p>\n<p><code>&lt;p style=\"font-weight:bold;font-size: 200%;font-family: Arial;\"&gt;Dies Ist KEINE \u00dcberschrift. Es Sieht Nur Aus Wie Eine.&lt;\/p&gt;<\/code><\/p>\n<p>Das richtige Markup ist:<\/p>\n<p><code>&lt;h1&gt;Dies IST Eine \u00dcberschrift Und Es Sieht Auch So Aus Wie Eine.&lt;\/h1&gt;<\/code><\/p>\n<\/div>\n<div class=\"example\">\n<div class=\"title\">Beispiel f\u00fcr Betonung<\/div>\n<p>Das Wort \u201ebetont\u201c in dem unteren Satz ist im Markup nicht betont. Es ist nur so entworfen, dass es fett erscheint.<\/p>\n<p>\u201eErinnern Sie sich bitte daran, den Text, der wichtig ist, zu <span style=\"font-weight: bold;\">betonen<\/span>.\u201c<\/p>\n<p>Das falsche Markup, welches das Beispiel zur Folge hat, ist dieses:<\/p>\n<p><code>&lt;p&gt;Erinnern Sie sich bitte daran, den Text, der wichtig ist, zu &lt;span style=\"font-weight:bold;\"&gt;betonen&lt;\/span&gt;&lt;\/p&gt;<\/code><\/p>\n<p>Das richtige Markup ist:<\/p>\n<p><code>&lt;p&gt;Erinnern Sie sich bitte daran, den Text, der wichtig ist, zu &lt;strong&gt;betonen&lt;\/strong&gt;&lt;\/p&gt;<\/code><\/p>\n<\/div>\n<\/div>\n<div id=\"related\">\n<h2>Verwandte Ressourcen<\/h2>\n<ul>\n<li><a href=\"http:\/\/www.webaim.org\/techniques\/css\/invisiblecontent\/\">CSS in Aktion: Unsichtbare Inhalte nur f\u00fcr ScreenReader-Users<\/a><\/li>\n<li><a href=\"http:\/\/www.webaim.org\/articles\/design\/\">Design-\u00dcberlegungen<\/a><\/li>\n<li><a href=\"http:\/\/www.webaim.org\/techniques\/semanticstructure\/\">Semantische Struktur<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>[ Dies ist eine \u00dcbersetzung des englischsprachigen Artikels \u201eAccessible CSS\u201e. Copyright \u00a9 by www.Webaim.org ] Inhalt Einleitung Inhalt und Pr\u00e4sentation trennen Steuern Sie das visuelle Layout Inhalte mit CSS verstecken Inhalte und Bedeutungen mit CSS darstellen Einleitung Cascading Style Sheets oder CSS erlauben es, die Eigenschaften von bestehenden HTML-Elementen zu \u00e4ndern. Alle Web-Browser haben eine [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/pages\/134"}],"collection":[{"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/comments?post=134"}],"version-history":[{"count":4,"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/pages\/134\/revisions"}],"predecessor-version":[{"id":138,"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/pages\/134\/revisions\/138"}],"wp:attachment":[{"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/media?parent=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}