{"id":560,"date":"2025-06-30T08:48:02","date_gmt":"2025-06-30T06:48:02","guid":{"rendered":"https:\/\/www.servicepraxis.com\/members\/?p=560"},"modified":"2025-06-30T14:21:22","modified_gmt":"2025-06-30T12:21:22","slug":"barrierefreiheit","status":"publish","type":"post","link":"https:\/\/www.servicepraxis.com\/members\/blog\/barrierefreiheit\/","title":{"rendered":"Barrierefreiheit"},"content":{"rendered":"\n<p>Jetzt ist es da, also seit 28. Juni 2025, das <strong>Barrierefreiheitsst\u00e4rkungsgesetz<\/strong> <sup><a href=\"#fussnote\" data-type=\"internal\" data-id=\"#fussnote\">1<\/a><\/sup>. Das Geschrei war zum Teil erst mal gro\u00df, in Social Media wurden gar <em>Freiheitserkl\u00e4rungen<\/em> statt <em>Barrierefreiheitserkl\u00e4rungen<\/em> f\u00fcr kleinere und mittlere Unternehmen gefordert. Dabei ist das Thema eigentlich ein alter Hut! Unser erster Artikel erschien hierzu in unseren Frequently Asked Questions <sup><a href=\"#fussnote\" data-type=\"internal\" data-id=\"#fussnote\">2<\/a><\/sup> bereits im Dezember 2022 anl\u00e4sslich der Umsetzung <sup><a href=\"#fussnote\" data-type=\"internal\" data-id=\"#fussnote\">3<\/a><\/sup> des Referentenentwurfs.<\/p>\n\n\n    <div>\r\n        <div class=\"toc accordion mt-3 mb-4\" id=\"tocAccordion\">\r\n            <div class=\"accordion-item\">\r\n                <div class=\"accordion-header\" id=\"tocHeading\">\r\n                    <button class=\"accordion-button collapsed text-uppercase\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#tocCollapse\" aria-expanded=\"false\" aria-controls=\"tocCollapse\" id=\"tocToggleButton\">\r\n                        <span class=\"d-none d-sm-block\">Darum gehts im Artikel&nbsp;<\/span> Barrierefreiheit:\r\n                    <\/button>\r\n                <\/div>\r\n                <div id=\"tocCollapse\" class=\"accordion-collapse collapse\" aria-labelledby=\"tocHeading\" data-bs-parent=\"#tocAccordion\">\r\n                    <div class=\"accordion-body\">\r\n                        <ul id=\"dynamic-toc\"><\/ul>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    \n\n\n\n<p>Das sperrige Wort setzt letztlich nur den European Accessibility Act aus dem Jahr 2019 um und hat zum Ziel bestimmte Produkte und Dienstleistungen, wie eben auch <strong>Websites<\/strong>, aber auch <strong>E-Mails<\/strong> und Apps, <strong>barrierefrei<\/strong> anzubieten. Ziel ist es, die Teilhabe aller am Wirtschaftsleben zu verbessern und den digitalen Raum barrierefreier zu gestalten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Was hei\u00dft Barrierefreiheit f\u00fcr Website und E-Mail<\/h3>\n\n\n\n<p>Im Kern geht es darum, Zugangsbarrieren abzubauen. Deine Website muss so gestaltet sein, dass sie zum Beispiel auch von Screenreadern erfasst werden kann, Farben kontrastreich genug sind und Texte leicht lesbar bleiben. Gleiches gilt f\u00fcr E-Mails: Sie m\u00fcssen nicht nur gut aussehen, sondern auch so aufbereitet sein, dass sie von unterst\u00fctzenden Technologien richtig verarbeitet werden k\u00f6nnen. Denk an klare Strukturen, aussagekr\u00e4ftige alternative Texte f\u00fcr Bilder und eine gute Lesbarkeit.<\/p>\n\n\n\n<p style=\"font-size:1.4rem\">F\u00fcr Unternehmen, die mit Produkten befasst sind, die unter die gesetzlichen Regelungen fallen, gib es keine Ausnahmen. Im Fall von Dienstleistungen, also z.&nbsp;B. Websites gelten die Vorschriften nicht bei weniger als zehn Besch\u00e4ftigten oder einem Jahresumsatz bzw. einer Bilanzsumme von unter zwei Millionen Euro (Angaben ohne Gew\u00e4hr).<\/p>\n\n\n    <section class=\"cta-container d-print-none\">\r\n      <!-- Badge -->\r\n      <div class=\"badge\">\r\n        <i class=\"fa-solid fa-lightbulb pe-1\"><\/i> 2026 \r\n      <\/div>\r\n      <!-- Text -->\r\n      <div style=\"flex: 1 1 400px; padding: 1rem;\">\r\n        <p class=\"text-start mt-5 mb-4\" style=\"font-size: 2.2rem;\">\r\n          Deine Website verdient mehr: <br>Barrierefrei. Aktuell. Beeindruckend.\r\n        <\/p>\r\n        <p class=\"text-start\" style=\"font-size: 1.2rem; line-height: 1.6;\">\r\n                            \r\n                Wartung ist nicht nur Technik. Es ist F\u00fcrsorge. <br>\r\n                Wir machen Websites zug\u00e4nglich, sicher und sichtbar.<br>\r\n                F\u00fcr alle Menschen.\r\n                    <\/p>\r\n        <a class=\"link\" \r\n           title=\"Kostenlose Erstberatung anfordern\" \r\n           href=\"\/kontakt\/\" \r\n           onmouseover=\"this.style.backgroundColor='#e09f00'\" \r\n           onmouseout=\"this.style.backgroundColor='#ffb100'\">\r\n                      <i class=\"fa-regular fa-envelope me-1\"><\/i> Jetzt kostenlos beraten lassen\r\n                  <\/a>\r\n      <\/div>\r\n      <!-- Bild -->\r\n      <div style=\"flex: 1 1 400px; padding: 1rem; text-align: center;\">\r\n        <img decoding=\"async\" src=\"\/members\/wp-content\/uploads\/sites\/9\/blg9_bg_cta_001.png\"\r\n             loading=\"lazy\" \r\n             alt=\"Illustration einer barrierefreien Website\"\r\n             style=\"max-width: 66.666%; height: auto; border-radius: 0.5rem;\">\r\n      <\/div>\r\n    <\/section>\r\n    \n\n\n\n<p>Das Barrierefreiheitsst\u00e4rkungsgesetz (BFSG) ist kein Hexenwerk, sondern eine Chance, deine Reichweite zu vergr\u00f6\u00dfern und wirklich alle Menschen zu erreichen. Es ist ein Investment in die Zug\u00e4nglichkeit und letztendlich in den Erfolg deines digitalen Auftritts.<\/p>\n\n\n    <section aria-labelledby=\"accessibility-checklist\" class=\"mt-4 mb-4\">\r\n      <h3 id=\"accessibility-checklist\">Checkliste zur Barrierefreiheit<\/h3>\r\n      <p>\r\n        Barrierefreiheit ist keine l\u00e4stige \u00dcbung, sondern kann letztendlich auch ein Wettbewerbsvorteil sein. Die Standards erfordern eine saubere Programmierung, klare Gliederung bzw. Strukturierung und eine deutliche Markierung interaktiver Elemente inklusive Call-to-Action. Dies macht die Site auch f\u00fcr Suchdienste noch interessanter. Typische Herausforderungen bei der Umsetzung der Gesetzesvorlage und der Durchf\u00fchrungsverordnungen hin zu einer barrierefreien Website sind u.a.\r\n      <\/p>\r\n      <div class=\"row row-cols-1 row-cols-md-2 pt-md-2 g-4\">\r\n                <div class=\"col\">\r\n          <div class=\"card h-100\">\r\n            <div class=\"card-header fw-bold text-start\">Struktur und Semantik<\/div>\r\n            <div class=\"card-body\">\r\n              <ul class=\"mb-0\">\r\n                                  <li class=\"text-start\">Dokument mit eindeutigem Titel im Header<\/li>\r\n                                  <li class=\"text-start\">Sinnvolle \u00dcberschriftenstruktur (H1\u2013H6), keine Spr\u00fcnge<\/li>\r\n                                  <li class=\"text-start\">Klare Regionen wie Navigation, Hauptbereich, Footer<\/li>\r\n                                  <li class=\"text-start\">Semantisch korrekte Tags bzw. HTML<\/li>\r\n                              <\/ul>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n                <div class=\"col\">\r\n          <div class=\"card h-100\">\r\n            <div class=\"card-header fw-bold text-start\">Tastaturbedienung<\/div>\r\n            <div class=\"card-body\">\r\n              <ul class=\"mb-0\">\r\n                                  <li class=\"text-start\">Navigation ohne Maus (Tab, Enter)<\/li>\r\n                                  <li class=\"text-start\">Logische Reihenfolge analog visueller Darstellung<\/li>\r\n                                  <li class=\"text-start\">Sichtbarer Fokus f\u00fcr aktive Elemente<\/li>\r\n                                  <li class=\"text-start\">Keine Sackgassen<\/li>\r\n                              <\/ul>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n                <div class=\"col\">\r\n          <div class=\"card h-100\">\r\n            <div class=\"card-header fw-bold text-start\">Screenreader<\/div>\r\n            <div class=\"card-body\">\r\n              <ul class=\"mb-0\">\r\n                                  <li class=\"text-start\">Alternativtexte f\u00fcr dekorative oder informative Bilder<\/li>\r\n                                  <li class=\"text-start\">Nur relevante Inhalte h\u00f6rbar<\/li>\r\n                                  <li class=\"text-start\">Rollen (z.\u202fB. role=region, role=dialog) korrekt eingesetzt<\/li>\r\n                                  <li class=\"text-start\">Labels wo n\u00f6tig (z.\u202fB. f\u00fcr beschriftungslose Buttons oder Slider)<\/li>\r\n                              <\/ul>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n                <div class=\"col\">\r\n          <div class=\"card h-100\">\r\n            <div class=\"card-header fw-bold text-start\">Farben und Kontrast<\/div>\r\n            <div class=\"card-body\">\r\n              <ul class=\"mb-0\">\r\n                                  <li class=\"text-start\">Gute Lesbarkeit der Schriftgr\u00f6\u00dfen<\/li>\r\n                                  <li class=\"text-start\">Kontrast \u2265 4.5:1 f\u00fcr normale Text<\/li>\r\n                                  <li class=\"text-start\">Gro\u00dfe Text bzw. Ui-Elemente \u2265 3:1<\/li>\r\n                                  <li class=\"text-start\">Farben nie als einziges Unterscheidungsmerkmal<\/li>\r\n                              <\/ul>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n                <div class=\"col\">\r\n          <div class=\"card h-100\">\r\n            <div class=\"card-header fw-bold text-start\">Formulare<\/div>\r\n            <div class=\"card-body\">\r\n              <ul class=\"mb-0\">\r\n                                  <li class=\"text-start\">Alle Felder sind beschriftet<\/li>\r\n                                  <li class=\"text-start\">Fehlermeldungen sind verst\u00e4ndlich und maschinenlesbar<\/li>\r\n                                  <li class=\"text-start\">Pflichtfelder sind klar erkennbar<\/li>\r\n                                  <li class=\"text-start\">Eingabefelder unterst\u00fctzen Autocomplete<\/li>\r\n                              <\/ul>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n                <div class=\"col\">\r\n          <div class=\"card h-100\">\r\n            <div class=\"card-header fw-bold text-start\">Medien und Bewegung<\/div>\r\n            <div class=\"card-body\">\r\n              <ul class=\"mb-0\">\r\n                                  <li class=\"text-start\">Untertitel oder Alternativen bei Videos<\/li>\r\n                                  <li class=\"text-start\">Dokumente wie PDF sind vorlesbar<\/li>\r\n                                  <li class=\"text-start\">Animationen zur\u00fcckhaltend und abschaltbar<\/li>\r\n                                  <li class=\"text-start\">Bewegung wird sparsam und nicht ablenkend eingesetzt<\/li>\r\n                              <\/ul>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n                <div class=\"col\">\r\n          <div class=\"card h-100\">\r\n            <div class=\"card-header fw-bold text-start\">Komponenten (z.\u202fB. Slider)<\/div>\r\n            <div class=\"card-body\">\r\n              <ul class=\"mb-0\">\r\n                                  <li class=\"text-start\">Nur aktiver Slide ist f\u00fcr Screenreader sichtbar<\/li>\r\n                                  <li class=\"text-start\">Buttons haben verst\u00e4ndliche Labels<\/li>\r\n                                  <li class=\"text-start\">Dialoge setzen Fokus korrekt auf das Modal und zur\u00fcck<\/li>\r\n                              <\/ul>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n                <div class=\"col\">\r\n          <div class=\"card h-100\">\r\n            <div class=\"card-header fw-bold text-start\">Technisches Verhalten<\/div>\r\n            <div class=\"card-body\">\r\n              <ul class=\"mb-0\">\r\n                                  <li class=\"text-start\">JavaScript blockiert nicht Tastaturnutzer<\/li>\r\n                                  <li class=\"text-start\">Nachgeladene Inhalte sind kompatibel mit Screenreader<\/li>\r\n                                  <li class=\"text-start\">Responsives Layout f\u00fcr alle Viewports zug\u00e4nglich<\/li>\r\n                              <\/ul>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n              <\/div>\r\n    <\/section>\r\n    \n\n\n\n<p>Nicht nur bei einer barrierefreien Website bietet es sich an, Kommunikationswege nicht einseitig zu beschr\u00e4nken, sondern Besucher:innen die M\u00f6glichkeit der Nutzung eigener Pr\u00e4ferenz (E-Mail, Telefon etc.) zu erlauben. Neben den heute schon \u00fcblichen Informationen zu Impressum, Datenschutz etc. muss ggf. auch eine Erkl\u00e4rung zur Barrierefreiheit online verf\u00fcgbar sein.<\/p>\n\n\n\n<p class=\"fs-4 fw-bold mb-4\">Bist du schon bereit f\u00fcr ein Web f\u00fcr alle?<br>Lass uns gemeinsam Websites <a href=\"\/members\/thema\/wartung-und-optimierung\/\">barrierefrei und sicher<\/a> machen.<\/p>\n\n\n\n<p class=\"fs-6 text-start\" id=\"fussnote\"><sup>1 <\/sup>Vergleiche hierzu das Gesetz zur Umsetzung der Richtlinie (EU) 2019\/882 des Europ\u00e4ischen Parlaments und des Rates \u00fcber die Barrierefreiheitsanforderungen f\u00fcr Produkte und Dienstleistungen <a href=\"\/\/www.gesetze-im-internet.de\/bfsg\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">gesetze-im-internet.de\/bfsg\/<\/a>.<br><sup>2<\/sup> Neue Anforderungen an Barrierefreiheit. Was hei\u00dft das f\u00fcr Websites <a href=\"https:\/\/www.servicepraxis.com\/faq\/how-to\/barrierefreiheitsstarkungsgesetz\/\">www.servicepraxis.com\/faq\/<\/a>.<br><sup>3<\/sup> Mehr Informationen zum Ablauf <a href=\"https:\/\/www.bmas.de\/DE\/Service\/Gesetze-und-Gesetzesvorhaben\/barrierefreiheitsstaerkungsgesetz.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">www.bmas.de<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nun ist es da, das Barrierefreiheitsst\u00e4rkungsgesetz. Das sperrige Wort setzt letztlich nur eine europ\u00e4ische Richtlinie um und hat ein klares Ziel: Digitale Angebote m\u00fcssen barrierefrei werden. Das bedeutet konkret, dass Menschen mit Behinderungen Websites und E-Mails genauso gut nutzen k\u00f6nnen m\u00fcssen wie alle anderen. <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":true,"footnotes":""},"categories":[6],"tags":[16],"class_list":["post-560","post","type-post","status-publish","format-standard","hentry","category-blog","tag-wartung-und-optimierung"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.servicepraxis.com\/members\/wp-json\/wp\/v2\/posts\/560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.servicepraxis.com\/members\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.servicepraxis.com\/members\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/members\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/members\/wp-json\/wp\/v2\/comments?post=560"}],"version-history":[{"count":0,"href":"https:\/\/www.servicepraxis.com\/members\/wp-json\/wp\/v2\/posts\/560\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.servicepraxis.com\/members\/wp-json\/wp\/v2\/media?parent=560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.servicepraxis.com\/members\/wp-json\/wp\/v2\/categories?post=560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.servicepraxis.com\/members\/wp-json\/wp\/v2\/tags?post=560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}