aria-label + Sprachsteuerung: Diese Regel musst du kennen
Entwicklung
Was ist WCAG 2.5.3 "Label in Name"? Alt-Text: Screenshot der AccessAcademy Checkliste mit hervorgehobenem Punkt…
Premium
Alle Lernartikel über Entwicklung
Breakpoints barrierefrei: em vs rem vs px
EntwicklungWas sind Breakpoints? Breakpoints sind die Punkte, an denen sich das Layout deiner Website ändert…
PremiumSitemap für Barrierefreiheit: Was du wissen musst
Design, EntwicklungWas ist eine Sitemap? Eine Sitemap ist eine Übersichtsseite, die alle Seiten deiner Website strukturiert…
PremiumLink 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…
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…
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 Screenreader 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 Screenreadern 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…
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,…
KostenlosVideos mit Audiodeskriptionen: Wenn Bilder zu Sprache werden
Allgemein, EntwicklungWas sind Audiodeskriptionen? Audiodeskriptionen sind gesprochene Beschreibungen wichtiger visueller Inhalte. Sie werden zusätzlich zur Originaltonspur…
KostenlosVideos 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, RedaktionWas sind komplexe Bilder? Komplexe Bilder sind visuelle Darstellungen, die mehr Informationen enthalten, als ein…
PremiumPrefers-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…
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 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
