{"id":29742,"date":"2026-02-10T13:05:00","date_gmt":"2026-02-10T12:05:00","guid":{"rendered":"https:\/\/www.web-systems.pl\/digitale-barrierefreiheit-firmenwebsite-wcag\/"},"modified":"2026-02-10T13:05:00","modified_gmt":"2026-02-10T12:05:00","slug":"digitale-barrierefreiheit-firmenwebsite-wcag","status":"publish","type":"post","link":"https:\/\/www.web-systems.pl\/de\/digitale-barrierefreiheit-firmenwebsite-wcag\/","title":{"rendered":"Digitale Barrierefreiheit in der Praxis: was sich auf der Firmenwebsite wirklich \u00e4ndern muss"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Die Meldung sieht meistens gleich aus. Jemand von au\u00dfen schreibt, dass sich das Kontaktformular nicht mit der Tastatur ausf\u00fcllen l\u00e4sst, oder die Rechtsabteilung schickt eine E-Mail \u00fcber die Pflicht zur Barrierefreiheit. Der erste Reflex des Unternehmens? Ein Plugin finden, das die Sache am Wochenende erledigt. Dabei ist <strong>WCAG f\u00fcr Unternehmen<\/strong> eine Ingenieursfrage und keine juristische &#8211; die Kriterien beschreiben konkrete Verhaltensweisen der Oberfl\u00e4che, die entweder im Code stehen oder eben nicht.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In Audits von Firmenwebsites, die ohne Gedanken an Barrierefreiheit gebaut wurden, sehe ich immer wieder dasselbe Bild: ein h\u00fcbsches Layout, visuell tadellos, und darunter Divs, die Schaltfl\u00e4chen vort\u00e4uschen, ein Formular ohne Beschriftungen und ein Modal, aus dem der Screenreader nicht herausfindet. Die Reparatur besteht nicht darin, eine gesonderte &#8220;Version f\u00fcr Menschen mit Behinderung&#8221; danebenzustellen. Sie betrifft Templates, gemeinsam genutzte Komponenten und die Art, wie die Redaktion Inhalte ver\u00f6ffentlicht.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhaltsverzeichnis<\/p>\n<span class=\"ez-toc-title-toggle\"><\/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.web-systems.pl\/de\/digitale-barrierefreiheit-firmenwebsite-wcag\/#Womit_anfangen_ein_Audit_das_sagt_was_zu_reparieren_ist\" >Womit anfangen: ein Audit, das sagt, was zu reparieren ist<\/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.web-systems.pl\/de\/digitale-barrierefreiheit-firmenwebsite-wcag\/#Overlays_und_Barrierefreiheits-Widgets_warum_das_nicht_funktioniert\" >Overlays und Barrierefreiheits-Widgets: warum das nicht funktioniert<\/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.web-systems.pl\/de\/digitale-barrierefreiheit-firmenwebsite-wcag\/#Die_technische_Schicht_was_wir_konkret_im_Code_aendern\" >Die technische Schicht: was wir konkret im Code \u00e4ndern<\/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.web-systems.pl\/de\/digitale-barrierefreiheit-firmenwebsite-wcag\/#Inhalt_und_Redaktion_hier_geht_Barrierefreiheit_nach_dem_Launch_kaputt\" >Inhalt und Redaktion: hier geht Barrierefreiheit nach dem Launch kaputt<\/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.web-systems.pl\/de\/digitale-barrierefreiheit-firmenwebsite-wcag\/#Betrieb_Barrierefreiheit_als_Teil_des_Prozesses\" >Betrieb: Barrierefreiheit als Teil des Prozesses<\/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.web-systems.pl\/de\/digitale-barrierefreiheit-firmenwebsite-wcag\/#Kosten_und_Reihenfolge_der_Arbeiten_was_das_Budget_treibt\" >Kosten und Reihenfolge der Arbeiten: was das Budget treibt<\/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.web-systems.pl\/de\/digitale-barrierefreiheit-firmenwebsite-wcag\/#Fazit_was_zuerst_zu_tun_ist\" >Fazit: was zuerst zu tun ist<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Womit_anfangen_ein_Audit_das_sagt_was_zu_reparieren_ist\"><\/span>Womit anfangen: ein Audit, das sagt, was zu reparieren ist<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ein sinnvolles Audit trennt zwei Schichten. Automatische Tests fangen einen Teil der technischen Probleme ab: fehlende Attribute, zu geringen Kontrast, Felder ohne zugeordnete Beschriftung, Fehler in der Struktur des Dokuments. Eine billige und schnelle Schicht, die ich als Erstes starte. Sie schlie\u00dft aber nur einen Ausschnitt der Liste.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Der Rest verlangt die Beurteilung durch einen Menschen. Kein Scanner sagt Ihnen, ob der Alternativtext das Diagramm tats\u00e4chlich beschreibt. Auch nicht, ob die Fokusreihenfolge der visuellen Logik der Seite entspricht. Auch nicht, ob die Beschriftung \u201eAusw\u00e4hlen&#8221; f\u00fcr jemanden etwas bedeutet, der die Anordnung daneben nicht sieht. Und die Kriterien zur Verst\u00e4ndlichkeit und zur Vermeidung wiederholter Eingaben haben \u00fcberhaupt keine automatischen Regeln.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein typischer Fehler ist es, den Bericht aus einem Werkzeug als Aufgabenliste zu behandeln, sortiert nach der Zahl der Vorkommen. Besser geht es anders: ein <a href=\"https:\/\/www.web-systems.pl\/de\/webseiten-audits\/\">Audit der wichtigsten Website-Templates<\/a>, beschr\u00e4nkt auf Startseite, \u00dcbersichtsseite, Leistungsseite und Kontaktformular, also auf die Wege, die ein Nutzer tats\u00e4chlich geht. Statt alle Unterseiten durchzumahlen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Overlays_und_Barrierefreiheits-Widgets_warum_das_nicht_funktioniert\"><\/span>Overlays und Barrierefreiheits-Widgets: warum das nicht funktioniert<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Overlay ist ein Skript, das nach dem Laden der Seite ihr Aussehen im Browser ver\u00e4ndert: es vergr\u00f6\u00dfert die Schrift, kehrt Farben um, legt ein Panel mit Reglern dazu. Das Quell-HTML bleibt unber\u00fchrt. Alles, was aus einer schlechten Dokumentstruktur folgt, ist also weiterhin kaputt: falsche Semantik, fehlende Beschriftungen in Formularen, Fokusfallen, Modale, die sich mit der Escape-Taste nicht schlie\u00dfen lassen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dazu kommt das Betriebsrisiko, von dem beim Kauf niemand spricht. Das Skript \u00fcberschreibt Stile und f\u00e4ngt Ereignisse ab, deshalb verhalten sich weitere Frontend-Releases unvorhersehbar, und die Diagnose eines solchen Konflikts kostet mitunter mehr als die Korrektur selbst. Vergleichen Sie das mit der Alternative: dasselbe Geld, in Komponenten investiert, bleibt dauerhaft im Projekt und arbeitet auf jeder weiteren Unterseite. \u00c4hnlich gehe ich bei der Modernisierung \u00e4lterer Webanwendungen vor, wo das Flicken von Symptomen meist nach einigen Monaten zur\u00fcckkommt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Die_technische_Schicht_was_wir_konkret_im_Code_aendern\"><\/span>Die technische Schicht: was wir konkret im Code \u00e4ndern<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Das Fundament ist die HTML-Semantik. \u00dcberschriften bilden eine Hierarchie, die das Dokument beschreibt, Listen sind Listen, eine Schaltfl\u00e4che ist ein <em>button<\/em>-Element und ein Verweis ein <em>a<\/em>-Tag mit einer sinnvollen Adresse. Langweilig? Vielleicht. Aber diese eine Entscheidung r\u00e4umt mehr Barrieren aus dem Weg als eine beliebige Zahl sp\u00e4ter angeklebter ARIA-Attribute.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Der zweite Bereich sind Formulare, also die Stelle, an der ein Unternehmen Kontakte verliert. Die Beschriftung muss programmatisch mit dem Feld verkn\u00fcpft sein, die Fehlermeldung muss beim Feld erscheinen und vom Screenreader angesagt werden, und der Status eines Feldes darf nicht allein von der Rahmenfarbe abh\u00e4ngen. Der dritte Bereich ist die Tastatur: sichtbarer Fokus, vorhersehbare Tab-Reihenfolge, ein Skip-Link, korrektes \u00d6ffnen und Schlie\u00dfen von Modalen und Men\u00fcs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Reihe von Korrekturen, mit denen ich in einem typischen WordPress-Projekt oder in einer Frontend-Anwendung beginne:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ordnung in der \u00dcberschriftenhierarchie in den Templates des Themes und in den Bl\u00f6cken des Editors,<\/li>\n<li>Ersetzen klickbarer Divs und Spans durch native Schaltfl\u00e4chen und Links,<\/li>\n<li>Beschriftungen, Beschreibungen und Fehlermeldungen in jedem Formular, einschlie\u00dflich Newsletter und Suche,<\/li>\n<li>Wiederherstellung des sichtbaren Fokus-Stils, den ein CSS-Reset entfernt hat,<\/li>\n<li>Tastaturbedienung in Men\u00fcs, Karussells, Reitern und Modalen,<\/li>\n<li>Kontrast von Text und Bedienelementen, einschlie\u00dflich der Zust\u00e4nde Hover und Disabled,<\/li>\n<li>Pr\u00fcfung des Layouts bei einer Vergr\u00f6\u00dferung auf 200 Prozent und beim Umbruch der Inhalte auf schmalem Bildschirm.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Inhalt_und_Redaktion_hier_geht_Barrierefreiheit_nach_dem_Launch_kaputt\"><\/span>Inhalt und Redaktion: hier geht Barrierefreiheit nach dem Launch kaputt<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Der Dienstleister \u00fcbergibt ein sauberes Template, und nach einem halben Jahr hat die Seite wieder Hunderte Fehler. Der Grund ist banal: Alternativtexte schreibt die Redaktion, nicht der Programmierer. Ein dekoratives Foto sollte ein leeres alt-Attribut haben, damit der Screenreader es \u00fcbergeht. Eine Infografik mit Daten braucht eine Beschreibung, die dieselbe Information vermittelt wie die Grafik. Zwei verschiedene Situationen, zwei verschiedene Entscheidungen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die zweite typische Regression sind \u00dcberschriften, die als Formatierungswerkzeug benutzt werden. Die Redakteurin w\u00e4hlt H3, weil die Gr\u00f6\u00dfe passt, und die Struktur des Dokuments bedeutet f\u00fcr die Navigation \u00fcber \u00dcberschriften nichts mehr. Dauerhafte Schulden sind oft auch Videomaterialien ohne Untertitel, gescannte PDFs und Grafiken mit eingebettetem Text, die \u00fcber Jahre ver\u00f6ffentlicht werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die L\u00f6sung liegt im Prozess, nicht in der Technik. Eine Validierung im CMS, die das Ver\u00f6ffentlichen eines Bildes ohne Entscheidung \u00fcber die Beschreibung blockiert, eine kurze Checkliste beim Publizieren, eine Schulung des Redaktionsteams. Das wirkt dauerhafter als ein einmaliges Audit, das mit einem PDF-Bericht endet.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Betrieb_Barrierefreiheit_als_Teil_des_Prozesses\"><\/span>Betrieb: Barrierefreiheit als Teil des Prozesses<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Regression ist die Regel, kein Unfall. Jede neue Landingpage f\u00fcr eine Kampagne, jedes Plugin und jede Integration kann fr\u00fchere Korrekturen zur\u00fccknehmen, meist unbemerkt. Deshalb lohnen sich automatische Barrierefreiheitstests in der CI selbst bei bescheidenem Umfang. Sie fangen die h\u00e4ufigsten Fehler ab, bevor sie in die Produktion gelangen, und kosten einen Bruchteil einer manuellen Durchsicht.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die zweite Sache ist eine Definition of Done, erweitert um Tastaturbedienung und Semantik, gepr\u00fcft bei der Abnahme und nicht beim n\u00e4chsten Audit. Und dazu eine eigene Kategorie: Elemente, die der Ersteller der Seite nicht vollst\u00e4ndig kontrolliert. Chat-Widgets, Karten, Buchungssysteme, Zahlungs-Gateways. Meist das schw\u00e4chste Glied im gesamten Konversionspfad, deshalb pr\u00fcfe ich bei Integrationen von APIs und externen Diensten die Barrierefreiheit des Anbieters vor der Auswahl und nicht nach der Umsetzung.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Kosten_und_Reihenfolge_der_Arbeiten_was_das_Budget_treibt\"><\/span>Kosten und Reihenfolge der Arbeiten: was das Budget treibt<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Die Kosten verteilen sich auf vier Teile: Audit, Korrekturen in gemeinsam genutzten Komponenten, Korrekturen im Inhalt sowie Tests samt Regressionskontrolle. Die Verh\u00e4ltnisse dazwischen h\u00e4ngen vor allem davon ab, wie das Frontend gebaut ist. Die Zahl der Unterseiten spielt hier eine kleinere Rolle, als alle annehmen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das Budget treibt das Fehlen eines Komponentensystems, bei dem dieselbe Schaltfl\u00e4che in mehreren Varianten existiert. Weiter: viele Template-Abwandlungen, ad hoc f\u00fcr Kampagnen gebaut, ein altes Theme mit Schichten \u00fcberschriebener Stile, ungew\u00f6hnliche interaktive Elemente, von Grund auf geschrieben. Es senkt die umgekehrte Situation, denn eine Korrektur in der Komponente wirkt sich auf alle Ansichten aus, und architektonische Entscheidungen in der Entwurfsphase kosten ein Vielfaches weniger als eine Korrektur nach dem Launch. Aus demselben Grund kommt <a href=\"https:\/\/www.web-systems.pl\/de\/erstellung-von-websites-und-online-shops\/\">die Erstellung barrierefreier Websites<\/a> mit Barrierefreiheit in den Anforderungen g\u00fcnstiger, als sie sp\u00e4ter zu erg\u00e4nzen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es kommt auch vor, dass sich Korrekturen nicht mehr lohnen. Wenn das Theme nicht mehr unterst\u00fctzt wird und jede \u00c4nderung das Layout an einer anderen Stelle umwirft, ist es vern\u00fcnftiger, einen Umbau des Frontends zu planen und bei der Gelegenheit die Themen Leistung und Sicherheit mit abzuschlie\u00dfen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Fazit_was_zuerst_zu_tun_ist\"><\/span>Fazit: was zuerst zu tun ist<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Die praktische Kurzfassung sieht so aus: ein Audit der wichtigsten Templates statt der gesamten Website, Korrekturen in Komponenten statt auf einzelnen Unterseiten, ein geordneter Prozess f\u00fcr die Ver\u00f6ffentlichung von Inhalten und eine Regressionskontrolle, die in die t\u00e4gliche Arbeit des Teams eingebunden ist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Halten Sie Ihre Erwartungen dabei realistisch. Barrierefreiheit verringert die Zahl der Barrieren und das rechtliche Risiko, ist aber kein einmal f\u00fcr immer ausgestelltes Zertifikat, sondern ein Zustand, der gemeinsam mit der Website gepflegt wird. Wenn Sie ein Audit, Korrekturen am Frontend, Integrationen oder die Modernisierung eines bestehenden Systems planen, schreiben Sie uns und lassen Sie uns den Umfang konkret durchgehen. Wenn Ihnen daran liegt, dass am Ende <a href=\"https:\/\/www.web-systems.pl\/de\/wcag-webseiten\/\">WCAG-konforme Websites<\/a> stehen und nicht nur ein Bericht, beginnen wir mit der Durchsicht der wichtigsten Templates.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Die Meldung sieht meistens gleich aus. Jemand von au\u00dfen schreibt, dass sich das Kontaktformular nicht mit der Tastatur ausf\u00fcllen l\u00e4sst, oder die Rechtsabteilung schickt eine E-Mail \u00fcber die Pflicht zur Barrierefreiheit. Der erste Reflex des Unternehmens? Ein Plugin finden, das die Sache am Wochenende erledigt. Dabei ist WCAG f\u00fcr Unternehmen eine Ingenieursfrage und keine juristische [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":29686,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[825],"tags":[2098,1082,1143,1304,1538,2094],"class_list":["post-29742","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-digitale-barrierefreiheit","tag-ratgeber","tag-unternehmenswebsite","tag-ux-de","tag-wcag-de","tag-webseiten-audit"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/posts\/29742","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/comments?post=29742"}],"version-history":[{"count":0,"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/posts\/29742\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/media\/29686"}],"wp:attachment":[{"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/media?parent=29742"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/categories?post=29742"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.web-systems.pl\/de\/wp-json\/wp\/v2\/tags?post=29742"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}