{"id":6162,"date":"2026-10-24T05:00:13","date_gmt":"2026-10-24T05:00:13","guid":{"rendered":"https:\/\/xpertmarketing.pro\/en\/barrierefreiheit-webdesign\/"},"modified":"2026-10-24T05:00:14","modified_gmt":"2026-10-24T05:00:14","slug":"barrierefreiheit-webdesign","status":"publish","type":"post","link":"https:\/\/xpertmarketing.pro\/al\/barrierefreiheit-webdesign\/","title":{"rendered":"Barrierefreies Webdesign: BFSG, WCAG 2.2 und Praxis-Check"},"content":{"rendered":"<\/p>\n<p>Barrierefreies Webdesign bedeutet, dass Menschen Ihre Website ohne fremde Hilfe finden, verstehen und bedienen k\u00f6nnen, ob mit Maus, Tastatur, Screenreader, Vergr\u00f6\u00dferung oder Sprachsteuerung. In Deutschland ist das seit dem 28. Juni 2025 f\u00fcr viele Onlineshops und digitale Dienstleistungen keine K\u00fcr mehr, sondern Pflicht nach dem Barrierefreiheitsst\u00e4rkungsgesetz (BFSG). Dieser Leitfaden zeigt, welche Regeln gelten, welche Designentscheidungen den gr\u00f6\u00dften Effekt haben, wie Sie ARIA-Labels sauber einsetzen und wie Sie Ihre Website Schritt f\u00fcr Schritt pr\u00fcfen.<\/p>\n<div data-blg-cta=\"after_tldr\" data-blg-cta-layout=\"banner\" style=\"margin:28px 0;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;box-sizing:border-box;\">\n<div style=\"border-radius:26px;padding:min(22px,3.2vw);background:radial-gradient(circle at 100% 0%,#ffdad1 0 150px,rgba(255,255,255,0) 151px),radial-gradient(circle at 0% 100%,#ffdad1 0 130px,rgba(255,255,255,0) 131px),linear-gradient(180deg,#ffe7e0 0%,#fff3f0 100%);\">\n<div style=\"background:#ffffff;border-radius:18px;box-shadow:0 12px 34px rgba(0,0,0,0.13);overflow:hidden;\">\n<div style=\"padding:34px 30px;text-align:center;\">\n<div style=\"margin:0 0 18px;\"><span style=\"display:inline-block;max-width:100%;box-sizing:border-box;border-radius:999px;padding:6px 13px;font-size:12px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;line-height:1.3;background:#FF3300;color:#ffffff;\">Xpertmarketing<\/span><\/div>\n<div style=\"font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-0.01em;color:#1f2937;margin:0;\">Barrierefreiheit st\u00e4rkt Ihre Website<\/div>\n<div style=\"width:56px;height:6px;border-radius:3px;background:#FF3300;margin:12px 0 14px;margin-left:auto;margin-right:auto;\"><\/div>\n<div style=\"font-size:15px;line-height:1.55;color:#64748b;margin:0 0 24px;max-width:44em;margin-left:auto;margin-right:auto;\">Xpert Marketing verbindet Strategie, Kreativit\u00e4t und digitale Umsetzung, um Unternehmen bei einer st\u00e4rkeren und wirkungsvolleren Onlinepr\u00e4senz zu unterst\u00fctzen.<\/div>\n<p><a href=\"https:\/\/xpertmarketing.pro\/al\/\" style=\"display:inline-flex;align-items:center;gap:9px;border-radius:10px;font-weight:700;font-size:15px;text-decoration:none;padding:13px 22px 13px 26px;background:#FF3300;color:#ffffff;\">Xpert Marketing besuchen<svg width=\"17\" height=\"17\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"#ffffff\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:block;flex:0 0 auto;\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg><\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<h2 id=\"kurz-gesagt\" tabindex=\"-1\">Kurz gesagt<\/h2>\n<ul>\n<li>Ma\u00dfstab ist die WCAG, Stufe AA: Inhalte m\u00fcssen wahrnehmbar, bedienbar, verst\u00e4ndlich und robust sein.<\/li>\n<li>Das BFSG gilt seit dem 28. Juni 2025 f\u00fcr verbraucherbezogene digitale Dienstleistungen wie Webshops, Kleinstunternehmen mit Dienstleistungen sind ausgenommen.<\/li>\n<li>WCAG 2.2 erg\u00e4nzt unter anderem Vorgaben zu sichtbarem Fokus, Klickfl\u00e4chen und barrierefreiem Login.<\/li>\n<li>Native HTML-Elemente schlagen ARIA: Labels nur dort, wo HTML nicht ausreicht.<\/li>\n<li>Automatische Scans finden nur einen Teil der Probleme. Ein belastbares Audit kombiniert Tools mit manuellen Tests.<\/li>\n<\/ul>\n<h2 id=\"inhaltsverzeichnis\" tabindex=\"-1\">Inhaltsverzeichnis<\/h2>\n<ul>\n<li><a href=\"#was-barrierefreies-webdesign-konkret-bedeutet\">Was barrierefreies Webdesign konkret bedeutet<\/a><\/li>\n<li><a href=\"#die-rechtslage-bfsg-european-accessibility-act-und-internationale-vorgaben\">Die Rechtslage: BFSG, European Accessibility Act und internationale Vorgaben<\/a><\/li>\n<li><a href=\"#wcag-22-was-sich-gegenuber-21-geandert-hat\">WCAG 2.2: Was sich gegen\u00fcber 2.1 ge\u00e4ndert hat<\/a><\/li>\n<li><a href=\"#die-designentscheidungen-mit-der-grossten-wirkung\">Die Designentscheidungen mit der gr\u00f6\u00dften Wirkung<\/a><\/li>\n<li><a href=\"#aria-labels-richtig-einsetzen\">ARIA-Labels richtig einsetzen<\/a><\/li>\n<li><a href=\"#website-auf-barrierefreiheit-prufen-das-audit-in-sechs-schritten\">Website auf Barrierefreiheit pr\u00fcfen: das Audit in sechs Schritten<\/a><\/li>\n<li><a href=\"#unsere-sicht-barrierefreiheit-ist-ein-qualitatsmerkmal-kein-pflichtprogramm\">Unsere Sicht: Barrierefreiheit ist ein Qualit\u00e4tsmerkmal, kein Pflichtprogramm<\/a><\/li>\n<li><a href=\"#barrierefreie-websites-mit-xpert-marketing-umsetzen\">Barrierefreie Websites mit Xpert Marketing umsetzen<\/a><\/li>\n<li><a href=\"#haufige-fragen\">H\u00e4ufige Fragen<\/a><\/li>\n<li><a href=\"#quellen\">Quellen<\/a><\/li>\n<\/ul>\n<h2 id=\"was-barrierefreies-webdesign-konkret-bedeutet\" tabindex=\"-1\">Was barrierefreies Webdesign konkret bedeutet<\/h2>\n<p>Barrierefrei gestaltete Web-Angebote sind laut dem Portal <a href=\"https:\/\/www.barrierefrei.bayern.de\/lebensbereiche\/information-kommunikation\/webdesign-barrierefrei\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Bayern barrierefrei<\/a> f\u00fcr Menschen mit und ohne Behinderung ohne fremde Hilfe erreichbar, verst\u00e4ndlich und nutzbar, und sie unterst\u00fctzen den Einsatz von Hilfsmitteln. Das betrifft weit mehr Menschen, als viele Teams annehmen: Nutzer mit Sehbehinderung oder Farbfehlsichtigkeit, geh\u00f6rlose Menschen, Menschen mit motorischen Einschr\u00e4nkungen, mit kognitiven Beeintr\u00e4chtigungen, \u00e4ltere Nutzer und alle, die gerade in grellem Sonnenlicht aufs Smartphone schauen.<\/p>\n<p>Die internationale Grundlage sind die Web Content Accessibility Guidelines (WCAG) des W3C. Sie ruhen auf <a href=\"https:\/\/www.wcag.com\/resource\/what-is-wcag\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">vier Prinzipien, die oft als die vier S\u00e4ulen der Barrierefreiheit bezeichnet werden<\/a>:<\/p>\n<table>\n<thead>\n<tr>\n<th>Prinzip<\/th>\n<th>Bedeutung<\/th>\n<th>Typisches Beispiel<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Wahrnehmbar<\/td>\n<td>Informationen sind \u00fcber mehr als einen Sinn zug\u00e4nglich<\/td>\n<td>Alternativtexte f\u00fcr Bilder, Untertitel f\u00fcr Videos<\/td>\n<\/tr>\n<tr>\n<td>Bedienbar<\/td>\n<td>Alle Funktionen lassen sich ohne Maus nutzen<\/td>\n<td>Vollst\u00e4ndige Tastaturnavigation, sichtbarer Fokus<\/td>\n<\/tr>\n<tr>\n<td>Verst\u00e4ndlich<\/td>\n<td>Inhalte und Abl\u00e4ufe sind klar und vorhersehbar<\/td>\n<td>Eindeutige Fehlermeldungen in Formularen<\/td>\n<\/tr>\n<tr>\n<td>Robust<\/td>\n<td>Die Seite funktioniert mit verschiedenen Hilfstechnologien<\/td>\n<td>Sauberes, semantisches HTML<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Jedes Erfolgskriterium ist einer von drei Konformit\u00e4tsstufen zugeordnet: A ist das Minimum, AA der in Recht und Praxis \u00fcbliche Standard, AAA die strengste Stufe. Wer von einer barrierefreien Website spricht, meint in aller Regel WCAG-Konformit\u00e4t auf Stufe AA.<\/p>\n<h2 id=\"die-rechtslage-bfsg-european-accessibility-act-und-internationale-vorgaben\" tabindex=\"-1\">Die Rechtslage: BFSG, European Accessibility Act und internationale Vorgaben<\/h2>\n<h3 id=\"das-bfsg-in-deutschland\" tabindex=\"-1\">Das BFSG in Deutschland<\/h3>\n<p>Das BFSG setzt den European Accessibility Act (EU-Richtlinie 2019\/882) in deutsches Recht um. Seit dem <a href=\"https:\/\/www.ihk.de\/stuttgart\/fuer-unternehmen\/recht-und-steuern\/it-recht\/barrierefreie-webseiten-6200594\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">28. Juni 2025 m\u00fcssen elektronische Dienstleistungen, die \u00fcber eine Website angeboten werden<\/a>, barrierefrei sein, etwa ein Webshop oder die Online-Buchung eines Kundengespr\u00e4chs. Technisch verweist das Regelwerk \u00fcber die harmonisierte Norm EN 301 549 auf die AA-Anforderungen der WCAG 2.1.<\/p>\n<p>Bei Verst\u00f6\u00dfen drohen laut <a href=\"https:\/\/www.ihk-muenchen.de\/ratgeber\/recht\/werbung-fairer-wettbewerb\/barrierefreiheitsstaerkungsgesetz\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">IHK M\u00fcnchen Vertriebsverbote, Abmahnungen und Bu\u00dfgelder bis zu 100.000 Euro<\/a>. Zust\u00e4ndig f\u00fcr die Kontrolle ist eine gemeinsame Beh\u00f6rde aller Bundesl\u00e4nder: die <a href=\"https:\/\/www.schleswig-holstein.de\/DE\/fachinhalte\/A\/arbeitsschutz\/mlbf\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Markt\u00fcberwachungsstelle der L\u00e4nder f\u00fcr die Barrierefreiheit von Produkten und Dienstleistungen (MLBF) in Magdeburg<\/a>.<\/p>\n<h3 id=\"fur-wen-das-bfsg-nicht-gilt\" tabindex=\"-1\">F\u00fcr wen das BFSG nicht gilt<\/h3>\n<p>Die wichtigste Ausnahme betrifft Kleinstunternehmen, die Dienstleistungen erbringen: weniger als 10 Besch\u00e4ftigte und h\u00f6chstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme. Die IHK M\u00fcnchen betont allerdings, dass Kleinstunternehmen, die im Gesetz genannte Produkte herstellen, trotzdem betroffen sind. Der <a href=\"https:\/\/www.zdh.de\/ueber-uns\/fachbereich-organisation-und-recht\/praxis-recht-\/-leitfaeden\/praxis-recht-barrierefreiheit-von-webseiten\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Zentralverband des Deutschen Handwerks<\/a> stellt klar, dass es um Firmenwebsites geht, \u00fcber die E-Commerce f\u00fcr Verbraucherinnen und Verbraucher angeboten wird. Eine reine Imagewebsite ohne Vertragsabschluss oder ein ausschlie\u00dflich auf Gesch\u00e4ftskunden ausgerichtetes Angebot f\u00e4llt daher meist nicht unter das BFSG.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/xpertmarketing.pro\/wp-content\/uploads\/2026\/10\/1792679706588_Entscheidungsubersicht-zu-BFSG-Ausnahmen.jpeg\" alt=\"Entscheidungs\u00fcbersicht zu BFSG-Ausnahmen\"><\/p>\n<p>Auch die Richtlinie selbst kennt Ausnahmen. Nach der <a href=\"https:\/\/eur-lex.europa.eu\/EN\/legal-content\/summary\/accessibility-of-products-and-services.html\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Zusammenfassung auf EUR-Lex<\/a> sind unter anderem aufgezeichnete Videos und Office-Dateien ausgenommen, die vor dem 28. Juni 2025 ver\u00f6ffentlicht wurden, ebenso Online-Archive, die nach diesem Datum nicht mehr bearbeitet werden. F\u00fcr bestehende Vertr\u00e4ge gelten \u00dcbergangsfristen bis 2030.<\/p>\n<p>Ob Ihr konkretes Angebot unter das Gesetz f\u00e4llt, h\u00e4ngt an Details wie Zielgruppe, Vertragsabschluss und Unternehmensgr\u00f6\u00dfe. Bei Zweifeln kl\u00e4ren Sie das mit Ihrer IHK oder einer auf IT-Recht spezialisierten Kanzlei, bevor Sie Budget planen oder auf eine Ausnahme setzen.<\/p>\n<h3 id=\"wenn-sie-international-verkaufen\" tabindex=\"-1\">Wenn Sie international verkaufen<\/h3>\n<p>F\u00fcr Unternehmen mit Kunden in den USA gilt ein anderer Rahmen. Nach dem Americans with Disabilities Act m\u00fcssen \u00f6ffentlich zug\u00e4ngliche Unternehmen ihre Websites f\u00fcr Menschen mit Behinderungen zug\u00e4nglich machen. Das US-Justizministerium schreibt laut seiner <a href=\"https:\/\/www.ada.gov\/assets\/pdfs\/web-guidance.pdf\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Leitlinie zur Web-Barrierefreiheit<\/a> keinen festen technischen Standard vor, verweist aber auf die WCAG als Orientierung. In der Praxis ist WCAG AA damit \u00fcber L\u00e4ndergrenzen hinweg die sinnvollste gemeinsame Zielmarke, auch f\u00fcr M\u00e4rkte wie Australien.<\/p>\n<h2 id=\"wcag-22-was-sich-gegenuber-21-geandert-hat\" tabindex=\"-1\">WCAG 2.2: Was sich gegen\u00fcber 2.1 ge\u00e4ndert hat<\/h2>\n<p>WCAG 2.2 beh\u00e4lt den Aufbau aus Prinzipien, Richtlinien, Erfolgskriterien und Techniken bei. Laut dem <a href=\"https:\/\/www.barrierefreiheit-dienstekonsolidierung.bund.de\/Webs\/PB\/DE\/gesetze-und-richtlinien\/wcag\/wcag_2_2\/wcag-2-2-node.html\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Portal Barrierefreiheit des Bundes<\/a> erweitert die Version die Richtlinien vor allem f\u00fcr Menschen mit kognitiven oder visuellen Behinderungen und f\u00fcr Einschr\u00e4nkungen bei der Nutzung mobiler Ger\u00e4te. Insgesamt kommen neun Kriterien hinzu, nach den <a href=\"https:\/\/handreichungen.bfit-bund.de\/bfit-leitfaeden\/1.0\/grundlagen\/wcag-was-ist-neu-version2_2.html\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Leitf\u00e4den der \u00dcberwachungsstelle des Bundes f\u00fcr Barrierefreiheit (BFIT-Bund)<\/a> sind davon sechs auf den Stufen A und AA relevant, ein altes Kriterium wurde gestrichen.<\/p>\n<p>Die sechs neuen A- und AA-Kriterien im \u00dcberblick:<\/p>\n<ul>\n<li><strong>Fokus nicht verdeckt (2.4.11, AA):<\/strong> Ein Sticky Header oder Cookie-Banner darf das gerade fokussierte Element nicht vollst\u00e4ndig verdecken.<\/li>\n<li><strong>Ziehbewegungen (2.5.7, AA):<\/strong> Was per Drag-and-drop funktioniert, braucht eine Alternative mit einfachem Klick oder Tippen, etwa bei Slidern.<\/li>\n<li><strong>Zielgr\u00f6\u00dfe Minimum (2.5.8, AA):<\/strong> Klickfl\u00e4chen m\u00fcssen mindestens 24 \u00d7 24 CSS-Pixel gro\u00df sein oder genug Abstand haben.<\/li>\n<li><strong>Konsistente Hilfe (3.2.6, A):<\/strong> Kontaktwege und Hilfe stehen auf allen Seiten an derselben Stelle.<\/li>\n<li><strong>Redundante Eingaben (3.3.7, A):<\/strong> Bereits eingegebene Daten werden nicht erneut abgefragt, etwa die Lieferadresse im Checkout.<\/li>\n<li><strong>Barrierefreie Authentifizierung (3.3.8, AA):<\/strong> Der Login darf keine Ged\u00e4chtnis- oder R\u00e4tselaufgabe verlangen. Die BFIT-Leitf\u00e4den nennen Alternativen wie Einmal-Links per E-Mail oder unsichtbare Captchas.<\/li>\n<\/ul>\n<p>Da das BFSG derzeit auf WCAG 2.1 AA verweist, ist 2.2 rechtlich noch nicht der Pflichtma\u00dfstab. Wer heute neu baut, plant trotzdem nach 2.2: Die Version ist abw\u00e4rtskompatibel, und die neuen Kriterien treffen genau die Stellen, an denen Nutzer im Checkout und im Login abspringen.<\/p>\n<h2 id=\"die-designentscheidungen-mit-der-grossten-wirkung\" tabindex=\"-1\">Die Designentscheidungen mit der gr\u00f6\u00dften Wirkung<\/h2>\n<p>Barrierefreiheit entsteht nicht im letzten Sprint. Das W3C empfiehlt, <a href=\"https:\/\/www.w3.org\/WAI\/test-evaluate\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Barrierefreiheit fr\u00fch und w\u00e4hrend der gesamten Entwicklung zu pr\u00fcfen<\/a>, weil sich Probleme dann leichter beheben lassen. Diese sieben Punkte geh\u00f6ren deshalb schon ins Wireframe und ins Designsystem:<\/p>\n<ol>\n<li><strong>Kontrast:<\/strong> Flie\u00dftext braucht auf Stufe AA ein Kontrastverh\u00e4ltnis von mindestens 4,5:1 zum Hintergrund. Hellgraue Schrift auf Wei\u00df f\u00e4llt fast immer durch. Legen Sie gepr\u00fcfte Farbpaare direkt im Designsystem fest.<\/li>\n<li><strong>Farbe nie allein:<\/strong> Ein rot umrandetes Feld reicht als Fehlerhinweis nicht. Erg\u00e4nzen Sie ein Symbol und einen Text wie \u201eBitte geben Sie eine g\u00fcltige E-Mail-Adresse ein\u201c.<\/li>\n<li><strong>Logische \u00dcberschriften:<\/strong> Eine H1 pro Seite, darunter H2 und H3 in sinnvoller Reihenfolge. Screenreader-Nutzer springen \u00fcber \u00dcberschriften durch die Seite wie andere \u00fcber das Layout.<\/li>\n<li><strong>Tastatur und Fokus:<\/strong> Jedes interaktive Element ist per Tab erreichbar, in nachvollziehbarer Reihenfolge und mit deutlich sichtbarem Fokusrahmen. Entfernen Sie den Browser-Fokus nie ohne Ersatz.<\/li>\n<li><strong>Formulare:<\/strong> Jedes Feld hat ein sichtbares, dauerhaftes Label. Platzhaltertext, der beim Tippen verschwindet, ersetzt kein Label.<\/li>\n<li><strong>Alternativtexte:<\/strong> Informative Bilder bekommen eine knappe Beschreibung ihres Inhalts, dekorative Bilder ein leeres alt-Attribut, damit Screenreader sie \u00fcberspringen.<\/li>\n<li><strong>Bewegung und Medien:<\/strong> Videos mit Untertiteln, kein Autoplay mit Ton, Animationen respektieren die Systemeinstellung \u201eBewegung reduzieren\u201c.<\/li>\n<\/ol>\n<p>Diese Punkte helfen allen Nutzern. Klare Kontraste, eine logische Struktur und beschreibende Texte verbessern die Bedienbarkeit und machen Inhalte f\u00fcr Suchmaschinen besser lesbar. Wie das im Gesamtprozess aussieht, beschreibt unser Beitrag zu <a href=\"https:\/\/xpertmarketing.pro\/al\/ux-ui-design\" target=\"_blank\" rel=\"noopener\">UX- und UI-Design in der Praxis<\/a>.<\/p>\n<h2 id=\"aria-labels-richtig-einsetzen\" tabindex=\"-1\">ARIA-Labels richtig einsetzen<\/h2>\n<p>ARIA (Accessible Rich Internet Applications) ist eine Sammlung von Attributen, mit denen Sie Hilfstechnologien zus\u00e4tzliche Informationen \u00fcber Elemente geben. Das bekannteste ist <code>aria-label<\/code>. Es <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/Reference\/Attributes\/aria-label\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">definiert einen Text, der ein Element benennt<\/a>, sofern dessen Rolle eine Benennung erlaubt.<\/p>\n<p>Die wichtigste Regel lautet: zuerst natives HTML. Ein echtes <code>&lt;button&gt;<\/code>-Element bringt Tastaturbedienung und die richtige Rolle mit, ein <code>&lt;div&gt;<\/code> mit Klick-Handler nicht. Laut <a href=\"https:\/\/web.dev\/articles\/aria-labels-and-relationships\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">web.dev<\/a> ist ARIA allerdings der einzige Weg, zug\u00e4ngliche Beschreibungstexte zu erg\u00e4nzen. Setzen Sie es gezielt ein, nicht fl\u00e4chendeckend.<\/p>\n<p>Ein typischer, sinnvoller Einsatz ist ein Icon-Button ohne sichtbaren Text:<\/p>\n<pre><code class=\"language-html\">&lt;button type=&quot;button&quot; aria-label=&quot;Warenkorb \u00f6ffnen&quot;&gt;\n  &lt;svg aria-hidden=&quot;true&quot;&gt;\u2026&lt;\/svg&gt;\n&lt;\/button&gt;\n<\/code><\/pre>\n<p>Typische Fehler aus Audits:<\/p>\n<ul>\n<li><strong>Doppelte Benennung:<\/strong> Ein Link mit sichtbarem Text \u201eKontakt\u201c bekommt zus\u00e4tzlich <code>aria-label=&quot;Kontakt Link&quot;<\/code>. Der Screenreader sagt dann Unsinn wie \u201eKontakt Link, Link\u201c.<\/li>\n<li><strong>Widerspruch zum sichtbaren Text:<\/strong> Steht auf dem Button \u201eJetzt kaufen\u201c, das Label lautet aber \u201eBestellen\u201c, finden Sprachsteuerungsnutzer den Button nicht.<\/li>\n<li><strong>Labels auf nicht benennbaren Elementen:<\/strong> Ein <code>aria-label<\/code> auf einem einfachen <code>&lt;span&gt;<\/code> oder <code>&lt;div&gt;<\/code> ohne Rolle wird von vielen Hilfstechnologien ignoriert.<\/li>\n<li><strong>Gleiche Labels f\u00fcr verschiedene Ziele:<\/strong> Zehn Buttons mit \u201eMehr erfahren\u201c sind f\u00fcr Screenreader-Nutzer in der Linkliste wertlos.<\/li>\n<\/ul>\n<p>Der W3C-Leitfaden zu <a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/practices\/names-and-descriptions\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">zug\u00e4nglichen Namen und Beschreibungen<\/a> bezeichnet saubere Benennung als eine der wichtigsten Aufgaben bei der Entwicklung barrierefreier Websites. Bevorzugen Sie sichtbare Texte und <code>aria-labelledby<\/code>, das auf vorhandenen Text verweist. <code>aria-label<\/code> ist die L\u00f6sung, wenn kein sichtbarer Text existiert.<\/p>\n<h2 id=\"website-auf-barrierefreiheit-prufen-das-audit-in-sechs-schritten\" tabindex=\"-1\">Website auf Barrierefreiheit pr\u00fcfen: das Audit in sechs Schritten<\/h2>\n<p>Ein Accessibility Audit zeigt, wo Ihre Website heute steht und was die Behebung kostet. Wichtig: Laut W3C k\u00f6nnen Pr\u00fcfwerkzeuge allein nicht feststellen, ob eine Website die Richtlinien erf\u00fcllt. Viele Kriterien, etwa ob ein Alternativtext den Bildinhalt wirklich beschreibt, verlangen menschliches Urteil.<\/p>\n<ol>\n<li><strong>Umfang festlegen:<\/strong> W\u00e4hlen Sie repr\u00e4sentative Seiten und die kritischen Nutzerwege: Startseite, Kategorieseite, Produktdetail, Warenkorb, Checkout, Kontaktformular, Login.<\/li>\n<li><strong>Automatischer Scan:<\/strong> Browser-Erweiterungen und Pr\u00fcftools finden fehlende Alternativtexte, zu schwache Kontraste und leere Labels schnell. Das ist der Einstieg, nicht das Ergebnis.<\/li>\n<li><strong>Tastaturtest:<\/strong> Legen Sie die Maus weg. Kommen Sie mit Tab, Enter, Leertaste und Escape durch den gesamten Checkout? Ist der Fokus jederzeit sichtbar? Bleiben Sie in einem Modal gefangen?<\/li>\n<li><strong>Screenreader-Test:<\/strong> Pr\u00fcfen Sie mit NVDA unter Windows oder VoiceOver auf Mac und iPhone, ob \u00dcberschriften, Formularfelder, Fehlermeldungen und Buttons verst\u00e4ndlich vorgelesen werden.<\/li>\n<li><strong>Zoom und Mobil:<\/strong> Vergr\u00f6\u00dfern Sie auf 200 und 400 Prozent. Bricht das Layout, \u00fcberlagern sich Elemente, m\u00fcssen Nutzer horizontal scrollen?<\/li>\n<li><strong>Bericht und Priorisierung:<\/strong> Ein professionelles Audit listet nicht nur Fehler. Nach dem <a href=\"https:\/\/www.gov.uk\/service-manual\/helping-people-to-use-your-service\/getting-an-accessibility-audit\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">UK Government Service Manual<\/a> beschreibt es die konkrete Barriere, erkl\u00e4rt den Versto\u00df gegen den Standard und nennt umsetzbare L\u00f6sungen f\u00fcr Design und Entwicklung.<\/li>\n<\/ol>\n<p>F\u00fcr Unternehmen unter dem BFSG geh\u00f6rt zum Ergebnis auch die Information zur Barrierefreiheit, die beschreibt, wie Ihre Dienstleistung die Anforderungen erf\u00fcllt. Planen Sie nach dem Audit wiederkehrende Pr\u00fcfungen ein: Jede neue Kampagnenseite, jedes Plugin und jeder Redaktionsbeitrag kann neue Barrieren erzeugen.<\/p>\n<h2 id=\"unsere-sicht-barrierefreiheit-ist-ein-qualitatsmerkmal-kein-pflichtprogramm\" tabindex=\"-1\">Unsere Sicht: Barrierefreiheit ist ein Qualit\u00e4tsmerkmal, kein Pflichtprogramm<\/h2>\n<p>In unseren Projekten sehen wir Barrierefreiheit als Teil guter Markenf\u00fchrung, nicht als juristische Checkliste am Ende. Eine Website, die sich per Tastatur bedienen l\u00e4sst, klare Kontraste hat und Formulare verst\u00e4ndlich f\u00fchrt, ist schlicht die bessere Website. Sie konvertiert sauberer, l\u00e4sst sich leichter pflegen und wird von Suchmaschinen besser verstanden.<\/p>\n<p>Deshalb verankern wir die Anforderungen dort, wo sie am wenigsten kosten: in der Markenidentit\u00e4t bei der Farbpalette, im UX-Design bei Navigation und Formularen, in der Entwicklung bei semantischem HTML und im Content bei \u00dcberschriften, Alternativtexten und verst\u00e4ndlicher Sprache. Ein nachtr\u00e4glicher Umbau ist fast immer teurer als ein Designsystem, das von Anfang an mitdenkt.<\/p>\n<p>Und wir messen. Wie bei jeder Kampagne definieren wir KPIs: Abbruchraten im Checkout, Formularfehler, Nutzung der Suche. Barrierefreiheit wird so zum Hebel f\u00fcr Wachstum, den Sie in Zahlen sehen.<\/p>\n<blockquote>\n<p><em>\u2014 Xpert<\/em><\/p>\n<\/blockquote>\n<h2 id=\"barrierefreie-websites-mit-xpert-marketing-umsetzen\" tabindex=\"-1\">Barrierefreie Websites mit Xpert Marketing umsetzen<\/h2>\n<p>Sie planen einen Relaunch, ein neues Designsystem oder wollen eine bestehende Website auf Barrierefreiheit pr\u00fcfen lassen? Unser Bereich <a href=\"https:\/\/xpertmarketing.pro\/al\/cms-service\/web-tech-innovation\" target=\"_blank\" rel=\"noopener\">Web, Teknologji &amp; Inovacion<\/a> verbindet UX\/UI-Design, Web- und E-Commerce-Entwicklung mit Branding, Content und SEO aus einer Hand. So entstehen Websites, die f\u00fcr alle Nutzer funktionieren und messbar auf Ihre Ziele einzahlen. Alle Leistungen finden Sie in unserer <a href=\"https:\/\/xpertmarketing.pro\/al\/sherbime\/\" target=\"_blank\" rel=\"noopener\">\u00dcbersicht der Marketing- und Webservices<\/a>.<\/p>\n<h2 id=\"haufige-fragen\" tabindex=\"-1\">H\u00e4ufige Fragen<\/h2>\n<h3 id=\"was-ist-digitale-barrierefreiheit\" tabindex=\"-1\">Was ist digitale Barrierefreiheit?<\/h3>\n<p>Digitale Barrierefreiheit bedeutet, dass Websites, Apps und Dokumente von allen Menschen genutzt werden k\u00f6nnen, auch mit Seh-, H\u00f6r-, motorischen oder kognitiven Einschr\u00e4nkungen. Ma\u00dfstab sind die WCAG mit ihren vier Prinzipien. Davon profitieren auch Nutzer ohne Behinderung, etwa auf kleinen Bildschirmen oder bei schlechtem Licht.<\/p>\n<h3 id=\"was-sind-die-vier-saulen-der-barrierefreiheit\" tabindex=\"-1\">Was sind die vier S\u00e4ulen der Barrierefreiheit?<\/h3>\n<p>Gemeint sind die vier WCAG-Prinzipien: wahrnehmbar, bedienbar, verst\u00e4ndlich und robust. Inhalte m\u00fcssen \u00fcber mehrere Sinne erfassbar sein, ohne Maus bedienbar, klar formuliert und mit unterschiedlichen Hilfstechnologien kompatibel. Jedes einzelne Erfolgskriterium der WCAG l\u00e4sst sich einem dieser Prinzipien zuordnen.<\/p>\n<h3 id=\"fur-wen-gilt-das-bfsg-nicht\" tabindex=\"-1\">F\u00fcr wen gilt das BFSG nicht?<\/h3>\n<p>Ausgenommen sind Kleinstunternehmen, die Dienstleistungen erbringen, also Betriebe mit weniger als 10 Besch\u00e4ftigten und h\u00f6chstens 2 Millionen Euro Jahresumsatz oder Bilanzsumme. Wer gelistete Produkte herstellt, ist dagegen auch als Kleinstunternehmen betroffen. Websites ohne verbraucherbezogene Dienstleistung, etwa reine B2B-Angebote, fallen in der Regel ebenfalls nicht darunter.<\/p>\n<h3 id=\"reicht-ein-accessibility-plugin-oder-overlay-aus\" tabindex=\"-1\">Reicht ein Accessibility-Plugin oder Overlay aus?<\/h3>\n<p>Nein. Ein Overlay \u00e4ndert nichts an fehlerhaftem Code, fehlenden Labels oder einer unlogischen Struktur. Barrierefreiheit entsteht im Design und in der Entwicklung selbst, gepr\u00fcft mit Tools und manuellen Tests.<\/p>\n<h3 id=\"wie-oft-sollte-eine-website-gepruft-werden\" tabindex=\"-1\">Wie oft sollte eine Website gepr\u00fcft werden?<\/h3>\n<p>Nach jedem gr\u00f6\u00dferen Relaunch oder neuen Funktionen wie einem Checkout sollte ein vollst\u00e4ndiges Audit folgen. Dazwischen sind regelm\u00e4\u00dfige Stichproben sinnvoll, etwa viertelj\u00e4hrlich, plus automatische Checks bei jeder Ver\u00f6ffentlichung. So bleiben neue Inhalte und Plugins im Blick.<\/p>\n<h2 id=\"quellen\" tabindex=\"-1\">Quellen<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.barrierefrei.bayern.de\/lebensbereiche\/information-kommunikation\/webdesign-barrierefrei\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Bayern barrierefrei: Barrierefreies Webdesign<\/a><\/li>\n<li><a href=\"https:\/\/www.wcag.com\/resource\/what-is-wcag\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">WCAG.com: A Guide to WCAG<\/a><\/li>\n<li><a href=\"https:\/\/www.ihk.de\/stuttgart\/fuer-unternehmen\/recht-und-steuern\/it-recht\/barrierefreie-webseiten-6200594\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">IHK Region Stuttgart: Barrierefreie Webseiten und Onlineshops<\/a><\/li>\n<li><a href=\"https:\/\/www.ihk-muenchen.de\/ratgeber\/recht\/werbung-fairer-wettbewerb\/barrierefreiheitsstaerkungsgesetz\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">IHK M\u00fcnchen: Barrierefreiheitsst\u00e4rkungsgesetz<\/a><\/li>\n<li><a href=\"https:\/\/www.schleswig-holstein.de\/DE\/fachinhalte\/A\/arbeitsschutz\/mlbf\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Schleswig-Holstein: Markt\u00fcberwachungsstelle der L\u00e4nder (MLBF)<\/a><\/li>\n<li><a href=\"https:\/\/www.zdh.de\/ueber-uns\/fachbereich-organisation-und-recht\/praxis-recht-\/-leitfaeden\/praxis-recht-barrierefreiheit-von-webseiten\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">ZDH: Barrierefreiheit von Webseiten<\/a><\/li>\n<li><a href=\"https:\/\/eur-lex.europa.eu\/EN\/legal-content\/summary\/accessibility-of-products-and-services.html\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">EUR-Lex: Accessibility of products and services<\/a><\/li>\n<li><a href=\"https:\/\/www.ada.gov\/assets\/pdfs\/web-guidance.pdf\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">ADA.gov: Guidance on Web Accessibility<\/a><\/li>\n<li><a href=\"https:\/\/www.barrierefreiheit-dienstekonsolidierung.bund.de\/Webs\/PB\/DE\/gesetze-und-richtlinien\/wcag\/wcag_2_2\/wcag-2-2-node.html\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Portal Barrierefreiheit des Bundes: WCAG 2.2<\/a><\/li>\n<li><a href=\"https:\/\/handreichungen.bfit-bund.de\/bfit-leitfaeden\/1.0\/grundlagen\/wcag-was-ist-neu-version2_2.html\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">BFIT-Bund: Neue Anforderungen der WCAG 2.2<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/test-evaluate\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">W3C WAI: Evaluating Web Accessibility Overview<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/ARIA\/Reference\/Attributes\/aria-label\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">MDN: ARIA aria-label attribute<\/a><\/li>\n<li><a href=\"https:\/\/web.dev\/articles\/aria-labels-and-relationships\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">web.dev: ARIA labels and relationships<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/ARIA\/apg\/practices\/names-and-descriptions\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">W3C WAI: Providing Accessible Names and Descriptions<\/a><\/li>\n<li><a href=\"https:\/\/www.gov.uk\/service-manual\/helping-people-to-use-your-service\/getting-an-accessibility-audit\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">GOV.UK Service Manual: Getting an accessibility audit<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Barrierefreies Webdesign 2026: Was BFSG und WCAG 2.2 verlangen, welche Designregeln z\u00e4hlen, wie Sie ARIA-Labels nutzen und Ihre Website pr\u00fcfen.<\/p>","protected":false},"author":1,"featured_media":6163,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6162","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai"],"_links":{"self":[{"href":"https:\/\/xpertmarketing.pro\/al\/wp-json\/wp\/v2\/posts\/6162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xpertmarketing.pro\/al\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xpertmarketing.pro\/al\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xpertmarketing.pro\/al\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xpertmarketing.pro\/al\/wp-json\/wp\/v2\/comments?post=6162"}],"version-history":[{"count":1,"href":"https:\/\/xpertmarketing.pro\/al\/wp-json\/wp\/v2\/posts\/6162\/revisions"}],"predecessor-version":[{"id":6166,"href":"https:\/\/xpertmarketing.pro\/al\/wp-json\/wp\/v2\/posts\/6162\/revisions\/6166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/xpertmarketing.pro\/al\/wp-json\/wp\/v2\/media\/6163"}],"wp:attachment":[{"href":"https:\/\/xpertmarketing.pro\/al\/wp-json\/wp\/v2\/media?parent=6162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xpertmarketing.pro\/al\/wp-json\/wp\/v2\/categories?post=6162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xpertmarketing.pro\/al\/wp-json\/wp\/v2\/tags?post=6162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}