{"id":685,"date":"2018-03-22T16:10:12","date_gmt":"2018-03-22T14:10:12","guid":{"rendered":"http:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=685"},"modified":"2023-08-26T17:06:50","modified_gmt":"2023-08-26T15:06:50","slug":"kontrast-modi-styleswitcher-und-text-versionen","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/kontrast-modi-styleswitcher-und-text-versionen\/","title":{"rendered":"Kontrast-Modi, Styleswitcher und Text-Versionen"},"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\/11-barrierefreiheits-erweiterungen\/embed?context=external\"><\/script><br \/>\nText-Versionen, Styleswitcher und Vergr\u00f6\u00dferung sind fast so alt wie das Web. Wie so fot im Leben kommen l\u00e4ngst vergessene Funktionen durch die Hintert\u00fcr zur\u00fcck, heute als Barrierefreiheits-Overlays. Schauen wir uns einmal an, warum sie \u00fcberfl\u00fcssig sind und sogar schaden k\u00f6nnen. <\/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\/kontrast-modi-styleswitcher-und-text-versionen\/#Textversion\" >Textversion<\/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\/kontrast-modi-styleswitcher-und-text-versionen\/#Styleswitcher\" >Styleswitcher<\/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\/kontrast-modi-styleswitcher-und-text-versionen\/#Integrierte_Schriftvergroesserung\" >Integrierte Schriftvergr\u00f6\u00dferung<\/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\/kontrast-modi-styleswitcher-und-text-versionen\/#Weg_mit_den_Sonderloesungen\" >Weg mit den Sonderl\u00f6sungen<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Textversion\"><\/span>Textversion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Die Textversion von Websites ist aus guten Gr\u00fcnden fast ausgestorben. Sie bringt mehr Probleme als L\u00f6sungen mit sich. Obwohl es zum Beispiel kein Problem ist, unterschiedliche Versionen einer Website dank der Trennung von Gestaltung, Inhalt und Struktur zu pflegen, ist die Textversion sozusagen die Schmuddelecke der Website. Mit Broken Links, unvollst\u00e4ndigen oder schlampig formatierten Texten und total veralteten Inhalten wird sie schlicht vernachl\u00e4ssigt und vergessen. Im Vergleich: Kein Website-Betreiber w\u00fcrde seine f\u00fcr mobile Ger\u00e4te optimierten Webseiten derma\u00dfen verkommen lassen und wenn, g\u00e4be es gewaltigen \u00c4rger.<br \/>\nDas muss auch gar nicht sein, denn die Inhalte liegen schlie\u00dflich in Datenbanken und m\u00fcssen einmal ordentlich angebunden werden, damit alle Siteversionen auf dem gleichen Stand sind. Das Styling geschieht \u00fcber CSs.<br \/>\nAber das ist wohl noch ein geringes Problem. Meine Bank &#8211; die Sparkasse K\u00f6lnBonn pflegt eine &#8222;barrierefreie&#8220; Version des Internet-Banking, die leider \u00f6fter mal ausfiel. Netterweise merkte man das erst, bevor man eine \u00dcberweisung abschicken wollte, also nachdem man die Daten schon m\u00fchsam eingegeben hatte. Bl\u00f6d nur, dass die Seite dann hartn\u00e4ckig behauptet, man selber h\u00e4tte einen Eingabefehler gemacht, was definitiv falsch war. Und muss ich als Kunde dieser Bank eigentlich hinnehmen, dass mir nur einige Funktionen des barriereunfreien Bankings zur Verf\u00fcgung gestellt werden und ich meine Dauerauftr\u00e4ge zum Beispiel in der Textversion nicht einsehen, bearbeiten oder einrichten kann?<br \/>\nTextversionen sind \u00fcberfl\u00fcssig, denn jeder gute Browser mit Ausnahme des Google Chrome auf dem Desktop verf\u00fcgt \u00fcber eine integrierte Lese-Ansicht.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Styleswitcher\"><\/span>Styleswitcher<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Der bekannte Styleswitcher scheint ebenfalls ein baldiges Ende zu finden. Wir erinnern uns: es werden mehrere Farbschemata via CSS erstellt, die sich \u00fcber JavaScript umschalten lassen. Beliebt ist vor allem die Farbumkehrung, von Schwarz auf Wei\u00df zu Wei\u00df auf Schwarz oder andere stark kontrastierende Farbschemata.<br \/>\nIch glaube auch beobachtet zu haben, dass sich die Webseiten st\u00e4rker zu sparsamer Farbgebung hin entwickeln: bei sehr vielen Webseiten ist der Hintergrund wei\u00df oder sehr hell und Farben werden sparsam f\u00fcr das Corporate Design und f\u00fcr Orientierungselemente eingesetzt. Ein meiner Ansicht nach sehr positiver Trend. Ich habe schon die seltsamsten Farbkombinationen gesehen, wo sich die Macher offensichtlich mit solch belanglosen Fragen wie Seriosit\u00e4t, Farbwirkungen und Lesbarkeit nicht besch\u00e4ftigt haben. Frei nach dem Motto, es gibt 256 Farben im Netz und wir setzen sie alle auf unserer Startseite ein. Eine bekannte B\u00fccherverkaufsseite setzt tats\u00e4chlich eine Kombination aus Rosa und hellem Gr\u00fcn ein, so dass man sich auf einer Website f\u00fcr Kinder w\u00e4hnt.<br \/>\nWir gehen aber heute davon aus, dass die Nutzer sich \u00fcber das Betriebssystem ihre Farbschemata einstellen. In Windows gibt es einen Kontrastmodus, der sich \u00fcber die Tastenkombination Shift + Alt + Druck aktivieren und deaktivieren l\u00e4\u00dft. Daneben l\u00e4\u00dft sich etwa <span class=\"removed_link\" title=\"http:\/\/www.oliveira-online.net\/wordpress\/index.php\/2010\/03\/13\/was-nicht-barrierefrei-ist-wird-barrierefrei-gemacht\/\">im Browser einstellen<\/span>, welche Farben man f\u00fcr Hintergrund und Schrift bevorzugt.<br \/>\nTot geglaubt erlebt der Styleswitcher \u00fcber den Dark Mode sein Revival.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Integrierte_Schriftvergroesserung\"><\/span>Integrierte Schriftvergr\u00f6\u00dferung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Das gilt auch f\u00fcr die Schriftgr\u00f6\u00dfe. Alle aktuellen Browser erlauben die Schriftskalierung \u00fcber die Tastenkombination STRG und dem +-Zeichen auf dem Nummernblock bzw. STRG + Mausr\u00e4dchen. Au\u00dferdem l\u00e4\u00dft sich die bevorzugte Schriftgr\u00f6\u00dfe ebenfalls im Browser einstellen. Sogar die Lieblings-Schriftart l\u00e4\u00dft sich hier festlegen.<br \/>\n\u00dcberhaupt ist es merkw\u00fcrdig, wie dominant kleine Schriftgrade auf Webseiten sind. Verr\u00fcckt ist die Mischung aus einer riesengro\u00dfen \u00dcberschrift und winzigem Text. Vielleicht sollten sich Designer:Innen \u00fcberlegen, ob es sinnvoll ist, die Nutzer:innen zum Zoomen zu zwingen.<br \/>\nNat\u00fcrlich gibt es auch den Browser-Zoom, der bei responsiven Seiten eigentlich auch gut funktioniert. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Weg_mit_den_Sonderloesungen\"><\/span>Weg mit den Sonderl\u00f6sungen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Der Weg f\u00fchrt also generell weg von solchen Sonderl\u00f6sungen, die manchmal nicht funktionieren, die oft nicht gepflegt werden und die nur wenigen Leuten etwas n\u00fctzen. Schade, dass das nicht generell f\u00fcr technische Produkte gilt. Der goldene Weg hei\u00dft heute universelles Design, Kompatibilit\u00e4t und Ger\u00e4te-Unabh\u00e4ngigkeit. Das hei\u00dft, die Website muss mir vor allem erlauben, meine eigenen Einstellungen vorzunehmen, weil es einfach nicht m\u00f6glich ist, jede m\u00f6gliche Barriere f\u00fcr den Nutzer voraus zu sehen.<br \/>\nBei solchen Funktionen besteht generell die Gefahr, dass die Basis-Barrierefreiheit vernachl\u00e4ssigt wird. Wozu Mindest-Kontrast oder gut lesbare Schriftgr\u00f6\u00dfen, wenn die Nutzer:Innen das einfach aktivieren k\u00f6nnen?<br \/>\nUnser Ziel muss sein, m\u00f6glichst viele Anwender:Innen dar\u00fcber zu informieren, welche M\u00f6glichkeiten die Betriebssysteme heute bieten. Das macht sie unabh\u00e4ngig vom Good Will schlechter Web-Entwicklerinnen. <\/p>\n<ul>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/hilfstechnik-und-mensch-maschine-interaktion\/assistive-technologien-und-barrierefreiheit\/brauche-ich-eine-vorlese-funktion-fuer-meine-webseite\/\">Warum Vorlese-Funktionen f\u00fcr die Website \u00fcberfl\u00fcssig sind<\/a><\/li>\n<li><a href=\"https:\/\/netz-barrierefrei.de\/en\/styleswitcher.html\">Integrated Text versions, style switchers and magnification <\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Text-Versionen, Styleswitcher und Vergr\u00f6\u00dferung sind fast so alt wie das Web. Wie so fot im Leben kommen l\u00e4ngst vergessene Funktionen durch die Hintert\u00fcr zur\u00fcck, heute&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/kontrast-modi-styleswitcher-und-text-versionen\/\">Weiterlesen<span class=\"screen-reader-text\">Kontrast-Modi, Styleswitcher und Text-Versionen<\/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-685","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/685","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=685"}],"version-history":[{"count":6,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/685\/revisions"}],"predecessor-version":[{"id":8353,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/685\/revisions\/8353"}],"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=685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}