Screendesign Barrierefreiheit: Was Designer vorbereiten müssen
Design
Warum Designer für Barrierefreiheit entscheidend sind Designer denken in Nutzererlebnissen - genau das braucht Barrierefreiheit.…
Premium
Digitale Barrierefreiheit Lernartikel
Lernbereich
Bleib auf dem Laufenden über aktuelle Erkenntnisse, Techniken und Best Practices für barrierefreie Web-Erlebnisse.
Alle Lernartikel
Link oder Button? Der einfache Unterschied
EntwicklungDie einfache Regel Links führen woanders hin. Buttons machen etwas. Das ist alles was du…
PremiumHTML-Formatierungen richtig verwenden für Inhalte
Entwicklung, RedaktionFormatierungen haben zwei Ebenen: das Aussehen und die Bedeutung. Im CMS-Editor oder im Code sehen…
PremiumScreenreader verstehen und testen: Dein Leitfaden zur auditiven Website-Navigation
TestingWas ist ein Screenreader? Ein Screenreader ist Software, die Bildschirminhalte in Sprache oder Braille umwandelt.…
PremiumManuelles Barrierefreiheit-Testing: Die anderen 70% finden
TestingWarum manuelles Testing unverzichtbar ist Automatisierte Tools sind blind für den menschlichen Faktor. Sie können…
PremiumAutomatisierte Barrierefreiheit-Tests: Deine ersten 30% der Barrierefreiheit
TestingWarum automatisierte Tests unverzichtbar sind Automatisierte Tests sind dein erster Qualitätscheck. Sie finden Probleme schnell…
PremiumBarrierefreie Formulare im Web: Der ultimative Leitfaden
EntwicklungWarum barrierefreie Formulare wichtig sind Ein einfacher Test: Schließe die Augen und versuche, dich auf…
PremiumHTML Landmarks: Semantische Navigation für alle Nutzer
EntwicklungWas sind HTML Landmarks? Landmarks sind semantische HTML-Elemente, die verschiedene Bereiche einer Website strukturieren und…
PremiumBarrierefreie Typografie: Lesbare Schrift für alle
Design, EntwicklungWarum Typografie über Erfolg oder Misserfolg entscheidet Schlechte Typografie lenkt ab und frustriert. Gute Typografie…
PremiumUX und digitale Barrierefreiheit: Warum sie Hand in Hand gehen
DesignDer große Design-Mythos Viele Designer fürchten: "Wenn ich barrierefrei designe, wird meine Website langweilig und…
Premiumaria-controls: Verknüpfe Steuerelemente mit dem passenden Inhalt
ARIA, EntwicklungWas macht aria-controls genau? aria-controls ist ganz simpel: Es verweist auf die ID des Elements,…
PremiumWeniger ist mehr: Wenn zu viel ARIA die Barrierefreiheit zerstört
ARIA, EntwicklungDer große ARIA-Irrtum Hier ist ein weit verbreiteter Denkfehler: "Wenn ich überall ARIA-Attribute hinzufüge, wird…
Premiumaria-live: Dynamische Inhalte für Screen Reader zugänglich machen
ARIA, EntwicklungWas ist aria-live und warum brauchst du es? Stell dir vor, du füllst ein Formular…
Premiumaria-labelledby: Flexible Beschriftungen für bessere Barrierefreiheit
ARIA, EntwicklungWas ist aria-labelledby? Stell dir vor, du hast eine Tabelle mit der Überschrift "Quartalszahlen 2024"…
Premiumaria-expanded: Der Schlüssel für verständliche interaktive Elemente
ARIA, EntwicklungWas ist aria-expanded und warum brauchst du es? Stell dir vor, du bist blind und…
PremiumWas ist aria-current=“page“?
ARIA, EntwicklungWas ist aria-current="page"? aria-current wird bei Links verwendet, um zu markieren, auf welcher Seite du…
Premiumaria-haspopup: Popup-Elemente richtig ankündigen für Screen Reader
ARIA, EntwicklungWas ist aria-haspopup? aria-haspopup warnt Screenreader Nutzer vor, dass ein Element ein Popup öffnet. Es…
Premiumsr-only vs. aria-label: Wann welche Methode verwenden?
ARIA, EntwicklungDie zwei Methoden kurz erklärt Zweck: Grundlegender Unterschied Was ist sr-only? Sr-only (screenreader only) ist…
Premiumaria-label: Der ultimative Guide
ARIA, EntwicklungWas ist aria-label und warum ist es so mächtig? Aria-label gibt HTML-Elementen einen "accessible name"…
Premiumaria-hidden: Inhalte vor Screen Readern verstecken
ARIA, EntwicklungWas ist aria-hidden und wie funktioniert es? Das aria-hidden-Attribut entfernt Elemente aus dem Accessibility Tree…
PremiumDisabled-Buttons: Warum du sie vermeiden solltest und bessere Alternativen
EntwicklungWas sind disabled buttons und warum werden sie verwendet? Ein disabled button ist ein Button…
PremiumBeschreibende Seitentitel: Das Aushängeschild deiner Website
Entwicklung, RedaktionWas sind Seitentitel und warum sind sie so wichtig? Der Seitentitel steht im <title>-Tag im…
PremiumListen richtig verwenden: ul und ol für barrierefreie Websites
Entwicklung, RedaktionWas sind Listen und warum sind sie wichtig? Listen strukturieren Inhalte und zeigen Beziehungen zwischen…
PremiumMehrsprachige Websites barrierefrei machen: Was du beachten musst
Allgemein, Entwicklung, RedaktionDie häufigsten Fallen bei mehrsprachigen Websites Selbst große Unternehmen machen diese Fehler: Sie übersetzen die…
PremiumBarrierefreie CAPTCHAs: Sicherheit für alle zugänglich machen
EntwicklungWas sind CAPTCHAs und warum sind sie problematisch? CAPTCHA steht für "Completely Automated Public Turing…
PremiumBarrierefreie Website umsetzen: Der komplette Workflow
Allgemein, Design, Entwicklung, RedaktionWarum Barrierefreiheit von Anfang an planen? Nachträgliche Barrierefreiheits-Fixes sind teuer und oft nur oberflächlich. Wenn…
PremiumInhalte sind bei 320px Breite lesbar: Reflow für kleinste Bildschirme
Allgemein, Design, EntwicklungWarum 320px Breite so wichtig ist 320px ist die Mindestbreite, die Websites unterstützen müssen. Diese…
PremiumMehrere Navigationsmöglichkeiten: Verschiedene Wege zum Ziel
Design, EntwicklungWarum mehrere Navigationswege wichtig sind Nicht alle Menschen denken und navigieren gleich. Während manche gerne…
PremiumText ist skalierbar: Vergrößerung bis 200% ohne Funktionsverlust
Design, EntwicklungWarum 200% Vergrößerung wichtig ist Menschen mit Sehbehinderungen sind oft auf Zoom angewiesen, um Inhalte…
PremiumText als echter Text: Warum Textbilder ein Problem sind
Design, Entwicklung, RedaktionDas Problem mit Text als Bild Textbilder sehen gut aus, sind aber für viele Nutzer…
PremiumSprache der Seite definieren: Ein wichtiger Schritt für Barrierefreiheit
Entwicklung, RedaktionWarum die Sprachdefinition wichtig ist Screen Reader nutzen die Sprachinformation, um Text korrekt auszusprechen. Ohne…
Premium„Mehr lesen“ Links: Das versteckte Barrierefreiheits-Problem
Entwicklung, RedaktionDas Problem mit "Mehr lesen" Links Stell dir vor, du hörst eine Liste von Links…
PremiumAlt Texte schreiben mit KI: Effizienter und trotzdem barrierefrei
KI, RedaktionWarum KI für Alt Texte nutzen? Die manuelle Erstellung von Alt Texten ist zeitaufwändig, besonders…
PremiumBarrierefreie Videoplayer nutzen: So machst du deine Videos wirklich zugänglich
Allgemein, EntwicklungWarum ein barrierefreier Player wichtig ist Selbst wenn dein Video optimal aufbereitet ist, kann ein…
PremiumTranskripte für Audioinhalte bereitstellen: So machst du Podcasts & Co. barrierefrei
Allgemein, EntwicklungWarum Transkripte wichtig sind Audioinhalte wie Podcasts, Interviews oder Vorlesungen sind beliebt – aber nicht…
PremiumLive-Inhalte haben Untertitel: Echtzeit-Barrierefreiheit für alle
Allgemein, Entwicklung, RedaktionWann sind Live-Untertitel notwendig? In manchen Fällen sind Live-Untertitel gesetzlich vorgeschrieben, z. B. bei politischen Veranstaltungen,…
PremiumVideos mit Audiodeskriptionen: Wenn Bilder zu Sprache werden
Allgemein, EntwicklungWas sind Audiodeskriptionen? Audiodeskriptionen sind gesprochene Beschreibungen wichtiger visueller Inhalte. Sie werden zusätzlich zur Originaltonspur…
PremiumVideos mit Untertiteln: Warum sie unverzichtbar sind
Allgemein, EntwicklungWann braucht man Untertitel? Rechtlich verpflichtend sind Untertitel in vielen Kontexten, z. B. im öffentlich-rechtlichen Rundfunk…
KostenlosKomplexe Bilder barrierefrei gestalten: Diagramme, Charts und Infografiken
Design, Entwicklung, RedaktionKomplexe Bilder wie Diagramme, Infografiken und Charts stellen eine besondere Herausforderung für Barrierefreiheit dar. Ein…
PremiumAlt Texte schreiben: Barrierefreie Bildbeschreibungen für alle
RedaktionWarum Alt Text Barrierefreiheit so wichtig ist Alt Text ist nicht nur eine nette Ergänzung…
KostenlosPrefers-reduced-motion einfach erklärt
EntwicklungWas ist prefers-reduced-motion? prefers-reduced-motion ist eine CSS Media Query, die erkennt, ob Nutzer "Bewegung reduzieren"…
KostenlosWas sind ARIA-Attribute überhaupt?
ARIA, EntwicklungARIA steht für "Accessible Rich Internet Applications" - klingt kompliziert, ist es aber nicht. ARIA-Attribute…
PremiumAnimationen und die 5-Sekunden-Regel: Warum Stop-Buttons wichtig sind
EntwicklungDie 5-Sekunden-Regel verstehen Die Web Content Accessibility Guidelines (WCAG) besagen in Kriterium 2.2.2: Animationen, Videos…
PremiumMobile Websites mit der Tastatur bedienen
EntwicklungWer nutzt Tastaturen auf mobilen Geräten? Die Vorstellung, dass mobile Geräte nur per Touch bedient…
PremiumWas ist Leichte Sprache und braucht deine Website das?
Allgemein, Gesetze & StandardsWas ist Leichte Sprache? Leichte Sprache ist eine sehr einfache Art zu schreiben und zu…
KostenlosWCAG einfach erklärt
Gesetze & StandardsWas sind die WCAG? Die WCAG sind Richtlinien, die vom World Wide Web Consortium (W3C)…
KostenlosBin ich vom BFSG betroffen?
Gesetze & StandardsWas ist das BFSG? Das Barrierefreiheitsstärkungsgesetz wurde 2021 beschlossen und tritt für viele digitale Produkte…
KostenlosBehindertengleichstellungsgesetz (BGG) – kurz & verständlich
Gesetze & StandardsWas ist das BGG? Das BGG trat erstmals 2002 in Kraft und wurde seither mehrfach…
PremiumWas ist die BITV 2.0?
Gesetze & StandardsWas ist die BITV 2.0? Die „Barrierefreie-Informationstechnik-Verordnung 2.0“ (BITV 2.0) regelt die Umsetzung des Behindertengleichstellungsgesetzes…
KostenlosEN 301 549 – EU-Norm für digitale Barrierefreiheit
Gesetze & StandardsWas ist die EN 301 549? Die EN 301 549 ist eine europäische Norm für…
KostenlosWCAG-Konformitätsstufen: A, AA, AAA
Gesetze & StandardsWas sind Konformitätsstufen? Die Konformitätsstufen beschreiben, wie umfassend die Anforderungen der WCAG erfüllt werden. Je…
PremiumSkip to Content: Sprungmarken für bessere Navigation
Allgemein, Design, EntwicklungWas sind Skip to Content Links? Skip to Content Links (auch Sprungmarken genannt) sind Navigationshilfen,…
PremiumBarrierefreie HTML-Überschriften: Die richtige Strukturierung von Inhalten
Entwicklung, RedaktionMit der richtigen HTML-Überschriften-Struktur wird eine Website barrierefrei – und das SEO profitiert ebenfalls.
PremiumBarrierefreie Farben: Kontraste, die für alle funktionieren
DesignFarben sind eines der stärksten Gestaltungsmittel im Webdesign.
KostenlosBarrierefreie Icons: Symbole für alle verständlich machen
Design, EntwicklungIcons sind fester Bestandteil moderner Benutzeroberflächen – sie sind schnell erfassbar, platzsparend und oft intuitiv.
PremiumBarrierefreie Akkordeons mit HTML, CSS und JS
EntwicklungAkkordeons sind eine bewährte Methode, um Inhalte auf Webseiten kompakt und übersichtlich darzustellen.
KostenlosBarrierefreie Tabs mit HTML, CSS und JS
EntwicklungSo entwickelst du Tabs, die zugänglich, ARIA-konform und per Tastatur steuerbar sind.
Kostenlos
