Digitale Barrierefreiheit Website Checkliste

Interaktive Beispiele, die zeigen, wie barrierefreie Elemente richtig umgesetzt werden – von Formularen über Navigation und vielem mehr. Best Practices inklusive hilfreichen Code Elementen zum Weiterverwenden.

Headlines & Seitenstruktur

Eine klare Seitenstruktur mit korrekt verschachtelten Überschriften (<h1> bis <h6>) verbessert die Navigation, Lesbarkeit und Screenreader-Nutzung. Jede Seite benötigt eine eindeutige <h1>-Überschrift, gefolgt von logisch strukturierten Unterüberschriften. Semantische HTML-Tags (<section>, <article>, <aside>) und ARIA-Landmarks (role="main", role="banner") helfen assistiven Technologien, Inhalte korrekt zu interpretieren.

Checkliste
0 / 0

Korrekte Überschriften-Hierarchie

Jede Seite braucht eine eindeutige <h1>-Überschrift, gefolgt von logisch gestaffelten <h2> bis <h6>

Keine Sprünge in der Reihenfolge

z. B. nicht direkt von <h1> zu <h3> wechseln

Inhalt sinnvoll gliedern

Absätze (<p>) und Listen (<ul>, <ol>) für eine klare Struktur

Navigation und Skip-Links einbauen

“Zum Inhalt springen“-Link (<a href=“#main-content“>), um Unsern das Überspringen von Menüs zu ermöglichen

Hello

Das ist ein Text in einfacher Sprache.

Hello

Das ist ein Text in einfacher Sprache.

Listen-Punkt 1
Listen-Punkt 2
Listen-Punkt 3
Listen-Punkt 4

HTML Code

<h1>Hello</h1>
<p>Das ist ein Text in einfacher Sprache.</p>

<h2>Hello</h2>
<p>Das ist ein Text in einfacher Sprache.</p>

<ul>
    <li>Listen-Punkt 1</li>
    <li>Listen-Punkt 2</li>
    <li>Listen-Punkt 3</li>
    <li>Listen-Punkt 4</li>
</ul>

CSS Code

h1 {
    font-family: Verdana;
    font-size: 3rem;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    color: black;
    margin-top: 0;
}

h2 {
    font-family: Verdana;
    font-size: 2.25;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    color: black;
    margin-top: 1rem;
}


p {
    font-family: Verdana;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    color: black;
}

ul {
    margin-top: 1.25rem;
    display: flex
    flex-direction: column;
}

ul li {
    position: relative;
    font-family: Verdana;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    color: black;
    margin-top: 0.75rem;
}

ul li:before {
    position: absolute;
    left: -0.75rem;
    display: inline-block;
    border-radius: 9999px;
    background-color: #000;
    content: "";
    height: 0.25rem;
    width: 0.25rem;
    margin-top: 0.625rem;
}

Text & Schriften

Barrierefreier Text ist so gestaltet, dass er für alle Menschen leicht lesbar und verständlich ist. Dazu gehören klare Schriftarten, ausreichende Kontraste, sinnvolle Strukturierung und unter Umständen einfache Sprache, damit Inhalte unabhängig von individuellen Einschränkungen zugänglich sind.

Checkliste
0 / 0

Klare Schriftarten

Serifenlose, gut lesbare Schriftarten wie Arial oder Roboto und eine Mindestgröße von 16px

Ausreichender Kontrast

Kontrastverhältnis zwischen Text und Hintergrund von mindestens 4.5:1 (für großen Text 3:1)

Struktur durch HTML-Tags

Semantische Tags wie <h1> bis <h6> für Überschriften und <p> für Absätze, damit Screenreader Inhalte korrekt interpretieren können

Skalierbarer Text

Inhalte müssen ohne Verlust an Funktionalität oder Lesbarkeit auf 200 % vergrößert werden können. Kein horizontaler Scrollbalken sollte entstehen, wenn der Text vergrößert wird

Einfache Sprache und klare Inhalte

Kurze, prägnante und leicht verständliche Texte. Fachbegriffe sollten vermieden oder erklärt werden, klare Navigations- und Beschriftungstexte

Ich bin eine serifenlose Schrift.

Ich bin eine Serifenschrift.

HTML Code

<h1>Ich bin eine serifenlose Schrift.</h1>
<p>Ich bin eine Serifenschrift.</p>

CSS Code

h1 {
  font-family: Verdana;
  font-size: 3rem;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  color: black;
}

p {
  font-family: "Times New Roman";
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  color: black;
}

Bilder

Bilder sollten mit einem aussagekräftigen Alternativtext (alt-Attribut) versehen werden, der ihren Inhalt oder ihre Funktion beschreibt. Dekorative Bilder erhalten ein leeres alt="", damit sie von Screenreadern ignoriert werden. Enthält ein Bild wichtige Informationen, muss auf ausreichend Kontrast geachtet werden, und interaktive Bilder sollten mit ARIA-Attributen ergänzt werden.

Checkliste
0 / 0

Aussagekräftige Alt-Texte

Kurze und präzise Beschreibung des Inhalts oder der Funktion des Bildes

Dekorative Bilder

Falls ein Bild keine inhaltliche Bedeutung hat, setze alt=““, damit Screenreader es überspringen

Text in Bildern

Wo möglich, auf eingebetteten Text in Bildern verzichten und stattdessen echten HTML-Text nutzen

Skalierbare Bilder

Responsive Formate wie SVG oder CSS-basierte Grafiken, damit Bilder bei unterschiedlichen Bildschirmgrößen gut sichtbar bleiben

Informative Bilder

Bilder mit wichtigen Informationen (z. B. Karten oder Diagramme) sollten leicht interpretierbar sein und eine alternative Textbeschreibung oder eine ausführliche Erklärung im Fließtext haben

Informativ

Dekorativ

HTML Code

<!-- Informativ -->
<img src="http://placecats.com/neo/300/300" alt="Beschreibung des Bildes" width="300" height="300">

<!-- Dekorativ -->
<img src="http://placecats.com/neo/300/300" alt="" width="300" height="300">

Icons

Icons müssen so gestaltet sein, dass ihre Funktion für alle User klar erkennbar ist. Sie benötigen eine eindeutige Beschreibung, die ihre Bedeutung erklärt, z. B. durch ein aria-label oder einen ergänzenden Text. Dekorative Icons sollten mit aria-hidden="true" für Screenreader ausgeblendet werden, um Verwirrung zu vermeiden. Klare Gestaltung, hoher Kontrast und eine sinnvolle Platzierung erhöhen die Zugänglichkeit.

Checkliste
0 / 0

Aussagekräftige Icons

Icons sollten ihre Bedeutung intuitiv vermitteln (z. B. ein Lupensymbol für die Suche)

Ausreichender Kontrast

Icons müssen sich mit einem Kontrastverhältnis von mindestens 3:1 von ihrem Hintergrund abheben

Icons & Text

Um Missverständnisse zu vermeiden, sollten wichtige Icons von erklärendem Text begleitet werden (z. B. „Einstellungen“ neben einem Zahnradsymbol)

Größe

Icons sollten mindestens 24×24 Pixel groß sein, um gut sichtbar und verständlich zu sein.

Abstand zwischen Icons

Zwischen Icons sollte ein Mindestabstand von 8px bestehen, um Fehlklicks zu vermeiden

Alternative Beschreibungen

Icons müssen für Screenreader verständlich sein: Interaktive Icons (z. B. ein Papierkorb zum Löschen) benötigen ein aria-label, während dekorative Icons mit aria-hidden=“true“ ausgeblendet werden sollten.

Mehr über Icons erfahren

HTML Code

<a href="http://google.de" class="button icon" aria-label="E-Mail Postfach öffnen">
    <span class="icon icon-mail" aria-hidden="true"></span>
</a>

<a href="http://google.de" class="button primary">
    Mehr über Icons erfahren
    <span class="icon icon-arrow-right" aria-hidden="true"></span>
</a>

CSS Code

a.button {
  font-family: Verdana;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-style: solid;
  border-radius: 9999px;
  border-width: 0;
  border-color: rgb(255, 255, 255);
  padding: .75rem 1.25rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 120%;
  text-decoration-line: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: all .12s ease-in-out;
  background-color: rgb(124, 93, 236);
  color: rgb(255, 255, 255);
  box-shadow: inset 0 0 0 .125rem rgb(0, 0, 0), .125rem .25rem rgb(0, 0, 0);
  box-sizing: border-box;
}

a.button:hover {
  background-color: rgb(89, 68, 165);
}

a.button:not(:disabled):active {
  background-color: rgb(124, 93, 236);
  box-shadow: inset 0 0 0 .125rem rgb(0, 0, 0);
}

a.button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

a.button:focus-visible {
  border-width: .125rem;
  box-shadow: inset 0 0 0 .125rem rgb(0, 0, 0), 0 0 0 .125rem rgb(0, 0, 0);
}

a.button.icon {
  display: flex;
  height: 3rem;
  width: 3rem;
  background-color: #d4c9fa;
  border-radius: 9999px;
  border-width: 0.125rem;
  border-color: #000;
  color: #000;
  padding: 0;
  box-shadow: none;
}

a.button.icon:hover {
  background-color: rgb(89, 68, 165);
}

a.button.icon:not(:disabled):active {
  background-color: rgb(124, 93, 236);
  box-shadow: inset 0 0 0 .125rem rgb(0, 0, 0);
}

a.button.icon:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

a.button.icon:focus-visible {
  border-color: rgb(255, 255, 255);
  border-width: .125rem;
  box-shadow: inset 0 0 0 .125rem rgb(0, 0, 0), 0 0 0 .125rem rgb(0, 0, 0);
}


a.button.icon span.icon {
  margin-left: 0;
  --size: 1.75rem
}

a.button span.icon {
  margin-left: .25rem;
  display: inline-flex;
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  background-size: contain;
  --size: 1.5rem;
  width: var(--size)
}

a.button span.icon:after {
  display: inline-flex;
  height: 100%;
  width: 100%;
  content: "";
  color: inherit;
  background-color: currentColor;
  mask-position: center;
  mask-size: var(--size);
  mask-repeat: no-repeat
}

a.button span.icon.icon-arrow-right:after {
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEzLjAzIDUuNDdhLjc1Ljc1IDAgMCAwLTEuMDYxIDEuMDZsNC43MiA0LjcySDZhLjc1Ljc1IDAgMCAwLS43NDMuNjQ4TDUuMjUgMTJjMCAuNDE0LjMzNi43NS43NS43NWgxMC42OWwtNC43MiA0LjcyYS43NS43NSAwIDAgMC0uMDczLjk3NmwuMDczLjA4NGEuNzUuNzUgMCAwIDAgMS4wNiAwbDUuOTg4LTUuOTg2YS43NTQuNzU0IDAgMCAwIC4xMTQtLjEzOGwuMDQzLS4wNzguMDMxLS4wNzlhLjczNC43MzQgMCAwIDAtLjEwNy0uNzAybC0uMDY4LS4wNzctNi02WiIvPjwvc3ZnPg==")
}

a.button span.icon.icon-mail:after {
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Im1haWwiPgo8cGF0aCBpZD0iSWNvbiIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMCA0LjI1QzIxLjUxODggNC4yNSAyMi43NSA1LjQ4MTIyIDIyLjc1IDdWMTdDMjIuNzUgMTguNTE4OCAyMS41MTg4IDE5Ljc1IDIwIDE5Ljc1SDRDMi40ODEyMiAxOS43NSAxLjI1IDE4LjUxODggMS4yNSAxN1Y3QzEuMjUgNS40ODEyMiAyLjQ4MTIyIDQuMjUgNCA0LjI1SDIwWk0yMCA1Ljc1SDRDMy4zMDk2NCA1Ljc1IDIuNzUgNi4zMDk2NCAyLjc1IDdWMTdDMi43NSAxNy42OTA0IDMuMzA5NjQgMTguMjUgNCAxOC4yNUgyMEMyMC42OTA0IDE4LjI1IDIxLjI1IDE3LjY5MDQgMjEuMjUgMTdWN0MyMS4yNSA2LjMwOTY0IDIwLjY5MDQgNS43NSAyMCA1Ljc1Wk0xNy40MzAxIDkuNjE0NDJDMTcuNzY5NCA5LjM3Njg5IDE3Ljg1MiA4LjkwOTI0IDE3LjYxNDQgOC41Njk5QzE3LjM3NjkgOC4yMzA1NyAxNi45MDkyIDguMTQ4MDQgMTYuNTY5OSA4LjM4NTU4TDExLjk5OTUgMTEuNTg0NUw3LjQzMDEgOC4zODU1OEM3LjA5MDc2IDguMTQ4MDQgNi42MjMxMSA4LjIzMDU3IDYuMzg1NTggOC41Njk5QzYuMTQ4MDQgOC45MDkyNCA2LjIzMDU3IDkuMzc2ODkgNi41Njk5IDkuNjE0NDJMMTEuNTY5OSAxMy4xMTQ0QzExLjgyODEgMTMuMjk1MiAxMi4xNzE5IDEzLjI5NTIgMTIuNDMwMSAxMy4xMTQ0TDE3LjQzMDEgOS42MTQ0MloiIGZpbGw9ImJsYWNrIi8+CjwvZz4KPC9zdmc+Cg==")
}

Links

Ein barrierefreier Link muss klar und verständlich gestaltet sein, damit User sofort wissen, wohin er führt. Der Linktext sollte aussagekräftig sein, z. B. „Mehr über unser Team erfahren“ statt „Hier klicken“, und gut sichtbar sowie per Tastatur erreichbar sein. Ein deutlicher Fokuszustand erleichtert die Navigation, und bei Bedarf können zusätzliche Hinweise wie aria-label für Screenreader ergänzt werden.

Checkliste
0 / 0

Aussagekräftige Linktexte

Der Text des Links sollte klar beschreiben, wohin er führt oder welche Aktion er ausführt

Gute Sichtbarkeit

Links sollten sic optisch deutlich vom Fließtext abheben z.B. durch eine Unterstreichung oder eine andere Farbe mit einem Kontrast on mind. 4,5:1

Tastaturbedienbarkeit

Links müssen über die Tab-Taste erreichbar sein und einen sichtbaren Fokuszustand haben

Leere und redundante Links

Jeder Link sollte einen klaren Zweck haben. Es sollten nicht mehrere Links denselben Text haben, aber zu unterschiedlichen Zielen führen

Katzen – Meister der Überraschung

Katzen sind die wahren Herrscher des Internets – flauschig, unabhängig und immer auf der Suche nach dem besten Platz zum Schlafen. Mehr über das Schlafverhalten von Katzen: Katzen und ihr Schlafplatz.

Viele denken, Katzen seien egoistisch, aber wer jemals eine schnurrende Katze auf dem Schoß hatte, weiß, dass sie auch echte Kuschelexperten sind. Wer mehr über Katzenverhalten wissen will, kann hier klicken.

HTML Code

<h1>Katzen – Meister der Überraschung</h1>
<p>Katzen sind die wahren Herrscher des Internets – flauschig, unabhängig und immer auf der Suche nach dem besten Platz zum Schlafen. Mehr über das Schlafverhalten von Katzen: <a href="#" target="_blank">Katzen und ihr Schlafplatz.</a></p>
<p>Viele denken, Katzen seien egoistisch, aber wer jemals eine <a href="#" target="_blank">schnurrende Katze auf dem Schoß</a> hatte, weiß, dass sie auch echte Kuschelexperten sind. Wer mehr über Katzenverhalten wissen will, <a href="#" target="_blank">kann hier klicken</a>.</p>

CSS Code

h1 {
    font-family: Verdana;
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    color: #000;
    margin-top: 0;
}

p {
    font-family: Verdana;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    color: #000;
}

p a {
    border-radius: 0.125rem;
    font-weight: 700;
    color: #7657E2;
    outline: 2px solid transparent;
    outline-offset: 2px;
    text-decoration-line: underline;
    text-decoration-color: #7c5dec;
    text-decoration-thickness: 0.125rem;
    text-underline-offset: 0.125rem;
    text-decoration-skip-ink: auto;
    transition: all .15s ease-in-out;
}

p a:hover {
    opacity: 0.75;
}

p a:active {
    color: #7657E2;
}

p a:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

p a:focus-visible {
    outline-width: 2px;
    outline-offset: 0.1875rem;
    outline-color: #000;
}

Buttons

Barrierefreie Buttons sind klar beschriftet, gut lesbar und bieten ausreichend Farbkontrast. Sie sind per Tastatur und Screenreader bedienbar und geben visuelles Feedback bei Interaktion. Zudem sind sie groß genug für einfache Bedienung, auch bei motorischen Einschränkungen.

Checkliste
0 / 0

Eindeutige Beschriftungen

Buttons wie „Absenden“ statt „Hier klicken“

Text auf Buttons

mind. 4.5:1 für Texte bis 18px (oder 14px fett), mind. 3:1 für große Schrift (ab 18px oder 14px fett)

Nicht-textuelle Buttons

(z. B. Icons ohne Text) die Farbe des Icons sollte mindestens ein 3:1 Kontrastverhältnis zum Hintergrund haben

Button-Hintergrund vs. Umgebung

Buttons sollten sich mit mindestens 3:1 vom Hintergrund abheben, um gut sichtbar zu sein

Tastaturbedienung

Buttons müssen mit der Tab-Taste erreichbar und aktivierbar sein

Feedback bei Interaktion

Farbänderungen oder Animationen bei Hover, Fokus und Klick

Genügende Größe

Buttons sollten groß genug sein, um sie leicht anzuklicken

HTML Code

<button> Klick mich </button>
<button disabled> Klick mich </button>

CSS Code

button {
  font-family: Verdana;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-style: solid;
  border-radius: 9999px;
  border-width: 0;
  border-color: rgb(255, 255, 255);
  padding: .75rem 1.25rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 120%;
  text-decoration-line: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: all .12s ease-in-out;
  background-color: rgb(124, 93, 236);
  color: rgb(255, 255, 255);
  box-shadow: inset 0 0 0 .125rem rgb(0, 0, 0), .125rem .25rem rgb(0, 0, 0);
  box-sizing: border-box;
}

button:hover {
  background-color: rgb(89, 68, 165);
}

button:not(:disabled):active {
  background-color: rgb(124, 93, 236);
  box-shadow: inset 0 0 0 .125rem rgb(0, 0, 0);
}

button:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

button:focus-visible {
  border-width: .125rem;
  box-shadow: inset 0 0 0 .125rem rgb(0, 0, 0), 0 0 0 .125rem rgb(0, 0, 0);
}

button.icon {
  display: flex;
  height: 3rem;
  width: 3rem;
  background-color: #d4c9fa;
  border-radius: 9999px;
  border-width: 0.125rem;
  border-color: #000;
  color: #000;
  padding: 0;
  box-shadow: none;
}

button.icon:hover {
  background-color: rgb(89, 68, 165);
}

button.icon:not(:disabled):active {
  background-color: rgb(124, 93, 236);
  box-shadow: inset 0 0 0 .125rem rgb(0, 0, 0);
}

button.icon:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

button.icon:focus-visible {
  border-color: rgb(255, 255, 255);
  border-width: .125rem;
  box-shadow: inset 0 0 0 .125rem rgb(0, 0, 0), 0 0 0 .125rem rgb(0, 0, 0);
}


button.icon span.icon {
  margin-left: 0;
  --size: 1.75rem
}

button span.icon {
  margin-left: .25rem;
  display: inline-flex;
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  background-size: contain;
  --size: 1.5rem;
  width: var(--size)
}

button span.icon:after {
  display: inline-flex;
  height: 100%;
  width: 100%;
  content: "";
  color: inherit;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: var(--size);
  mask-size: var(--size);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat
}

button span.icon.icon-arrow-right:after {
  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M13.03%205.47a.75.75%200%200%200-1.061%201.06l4.72%204.72H6a.75.75%200%200%200-.743.648L5.25%2012c0%20.414.336.75.75.75h10.69l-4.72%204.72a.75.75%200%200%200-.073.976l.073.084a.75.75%200%200%200%201.06%200l5.988-5.986a.754.754%200%200%200%20.114-.138l.043-.078.031-.079a.734.734%200%200%200-.107-.702l-.068-.077-6-6Z'/%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M13.03%205.47a.75.75%200%200%200-1.061%201.06l4.72%204.72H6a.75.75%200%200%200-.743.648L5.25%2012c0%20.414.336.75.75.75h10.69l-4.72%204.72a.75.75%200%200%200-.073.976l.073.084a.75.75%200%200%200%201.06%200l5.988-5.986a.754.754%200%200%200%20.114-.138l.043-.078.031-.079a.734.734%200%200%200-.107-.702l-.068-.077-6-6Z'/%3e%3c/svg%3e")
}

button span.icon.icon-mail:after {
  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='mail'%3e%3cpath%20id='Icon'%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M20%204.25C21.5188%204.25%2022.75%205.48122%2022.75%207V17C22.75%2018.5188%2021.5188%2019.75%2020%2019.75H4C2.48122%2019.75%201.25%2018.5188%201.25%2017V7C1.25%205.48122%202.48122%204.25%204%204.25H20ZM20%205.75H4C3.30964%205.75%202.75%206.30964%202.75%207V17C2.75%2017.6904%203.30964%2018.25%204%2018.25H20C20.6904%2018.25%2021.25%2017.6904%2021.25%2017V7C21.25%206.30964%2020.6904%205.75%2020%205.75ZM17.4301%209.61442C17.7694%209.37689%2017.852%208.90924%2017.6144%208.5699C17.3769%208.23057%2016.9092%208.14804%2016.5699%208.38558L11.9995%2011.5845L7.4301%208.38558C7.09076%208.14804%206.62311%208.23057%206.38558%208.5699C6.14804%208.90924%206.23057%209.37689%206.5699%209.61442L11.5699%2013.1144C11.8281%2013.2952%2012.1719%2013.2952%2012.4301%2013.1144L17.4301%209.61442Z'%20fill='black'/%3e%3c/g%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='mail'%3e%3cpath%20id='Icon'%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M20%204.25C21.5188%204.25%2022.75%205.48122%2022.75%207V17C22.75%2018.5188%2021.5188%2019.75%2020%2019.75H4C2.48122%2019.75%201.25%2018.5188%201.25%2017V7C1.25%205.48122%202.48122%204.25%204%204.25H20ZM20%205.75H4C3.30964%205.75%202.75%206.30964%202.75%207V17C2.75%2017.6904%203.30964%2018.25%204%2018.25H20C20.6904%2018.25%2021.25%2017.6904%2021.25%2017V7C21.25%206.30964%2020.6904%205.75%2020%205.75ZM17.4301%209.61442C17.7694%209.37689%2017.852%208.90924%2017.6144%208.5699C17.3769%208.23057%2016.9092%208.14804%2016.5699%208.38558L11.9995%2011.5845L7.4301%208.38558C7.09076%208.14804%206.62311%208.23057%206.38558%208.5699C6.14804%208.90924%206.23057%209.37689%206.5699%209.61442L11.5699%2013.1144C11.8281%2013.2952%2012.1719%2013.2952%2012.4301%2013.1144L17.4301%209.61442Z'%20fill='black'/%3e%3c/g%3e%3c/svg%3e")
}

Navigation

Eine barrierefreie Navigation nutzt semantisches HTML (<nav>, <ul>, <li>), sichtbare Fokusmarkierungen und ARIA-Attribute (aria-label, aria-expanded), um Screenreader- und Tastaturnutzern eine optimale Orientierung zu bieten. Ein gut gestaltetes Navigationskonzept verbessert die Usability, Zugänglichkeit und Nutzerführung für alle.

Checkliste
0 / 0

Klare Struktur & Hierarchie

Semantisches HTML (<nav>, <ul>, <li>) für eine logische Gliederung

Aussagekräftige Überschriften & Links

„Startseite“ statt „Hier klicken“

Tastaturzugänglichkeit

Alle Menüpunkte müssen per Tab-Taste erreichbar sein, mit klarer Fokus-Markierung (:focus)

Screenreader-Kompatibilität

„Skip to Content“-Links (<a href=“#main“>) erleichtern die Navigation, und Dropdown-Menüs sollten aria-expanded nutzen

Vermeidung von Barrieren

Mobile Menüs müssen ohne Maus und bei starker Vergrößerung nutzbarsein. Kein ausschließlich visuelles Feedback (z.B. nur Farbcodierung für aktive Menüpunkte. Keine Hover-Menüs, die nur per Maus bedienbar sind

Zum Hauptinhalt springen

HTML Code

<!-- Navigation (Desktop only) -->
<header>
    <nav>
        <ul id="menu" role="menu">
            <li class="menu-item menu-item--current" role="presentation">
              <a role="menuitem" class="menu-link" href="#">
                Playground
              </a>
            </li>
            <li class="menu-item" role="presentation">
              <a role="menuitem" class="menu-link" href="#">
                Wissen
              </a>
            </li>
            <li class="menu-item" role="presentation">
              <a role="menuitem" class="menu-link" href="#">
                Über uns
              </a>
            </li>
      </ul>
    </nav>
</header>

<!-- Skip to Content -->
<div id="skip">
  <a href="#main-content">Zum Hauptinhalt springen</a>
</div>

CSS Code

/* Navigation (Desktop only) */

header {
  display: flex;
}

header nav {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    border-style: solid;
    border-radius: 9999px;
    border-width: 0.125rem;
    border-color: #000;
    background-color: #fff;
    padding: 0.625rem 0.75rem;
}

header nav ul {
    margin: 0;
    display: flex;
    flex-direction: row;
    column-gap: 0.5rem;
    list-style: none;
    padding: 0;
}

header nav ul li {
    margin: 0;
}

header nav ul li:before {
    display: none;
}

header nav ul li a {
    font-family: Verdana;
    display: flex;
    border-radius: 9999px;
    border-width: 0.125rem;
    border-color: #fff;
    background-color: #fff;
    padding: 0.75rem 1.25rem;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 120%;
    text-decoration: none;
    color: #000;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition-property: all;
    transition-duration: 0.15s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 #000;
}

header nav ul li a:hover {
    background-color: #d4c9fa;
}

header nav ul li a:active {
    background-color: #7c5dec;
    color: #fff;
}

header nav ul li a:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

header nav ul li a:focus-visible {
    box-shadow: 0 0 0 0.125rem #000;
}

header nav ul li.menu-item--current a {
    background-color: #7c5dec;
    color: #fff;
    box-shadow: inset 0 0 0 0.125rem #000;
}

header nav ul li.menu-item--current a:hover {
    background-color: #5944a5;
}

header nav ul li.menu-item--current a:active {
    background-color: #7c5dec;
}

header nav ul li.menu-item--current a:focus-visible {
    box-shadow: inset 0 0 0 0.125rem #000,0 0 0 0.125rem #000;
}


/* Skip to Content */

#skip-example {
    display: block;
}

#skip-example a {
    font-family: Verdana;
    position: relative;
    display: block;
    height: auto;
    width: auto;
    border-radius: 9999px;
    border-width: 0.125rem;
    border-color: #000;
    background-color: #5551fe;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    color: #fff;
    text-decoration-line: none;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: all 0.12s ease-in-out;
    box-shadow: 2px 4px #000;
}

#skip-example a:focus {
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
    outline-color: #000;
    box-shadow: 0 0 #000;
}

Inputfield

Ein barrierefreies Inputfeld muss klar beschriftet, gut sichtbar und leicht bedienbar sein. Dafür sollte jedes Feld ein sichtbares <label> haben, das mit for="id" direkt mit dem Eingabefeld verknüpft ist, so erkennen auch Screenreader worum es geht. Wichtige Faktoren sind außerdem ausreichender Kontrast, eine gut lesbare Schriftgröße (mind. 16px) und eine Tastaturbedienung. Fehlerhinweise sollten verständlich und per aria-describedby mit dem Feld verbunden sein.

Checkliste
0 / 0

Sichtbares Label mit for=id

Jedes Eingabefeld braucht eine eindeutige, sichtbare Beschriftung, die mit for=“id“ mit dem Feld verknüpft ist

Kontrast & Lesbarkeit

Schriftgröße mindestens 16px, Kontrastverhältnis von mindestens 4.5:1 zwischen Text und Hintergrund.

Tastaturbedienbarkeit

Inputfelder müssen per Tabulator-Taste erreichbar und mit Enter oder Leertaste aktivierbar sein

Klare Fehlermeldungen

visuell (z. B. durch Farbe und Symbole) sowie für Screenreader zugänglich sein, indem sie mit aria-describedby direkt mit dem betroffenen Feld verknüpft werden. Fehlermeldung beschreiben in einfacher Sprache, was falsch ist und wie der User das Problem beheben kann

Fokus-Stile nicht entfernen

Der sichtbare Fokusrahmen hilft Usern, die per Tastatur navigieren, das aktive Feld zu erkennen

Vorname

E-Mail-Adresse Bitte gib eine gültige E-Mail-Adresse an.

HTML Code

<div class="textfield">
  <label for="firstname">Vorname</label>
  <input id="firstname" type="text" />
</div>

<div class="textfield">
  <label for="email">E-Mail-Adresse</label>
  <input id="email" type="email" aria-invalid="true" />
  
  <span id="error-mail">Bitte gib eine gültige E-Mail-Adresse an.</span>
</div>

CSS Code

.textfield {
    display: flex;
    flex-direction: column;
    --error-color: #a72802;
    margin-top: 1rem;
}

.textfield label {
    margin-top: 0;
    font-family: Verdana;
    font-size: 1rem;
    font-weight: 500;
    line-height: 150%;
    color: #000
}

.textfield input {
    margin-top: 0.5rem;
    border-style: solid;
    border-radius: 0.5rem;
    border-width: 0.125rem;
    border-color: #000;
    padding: 1rem 1.25rem;
    font-family: Verdana;
    font-size: 1rem;
    font-weight: 500;
    line-height: 150%;
    color: #000
}

.textfield input:focus {
    caret-color: #7c5dec;
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 4px;
    outline-color: #000
}

.textfield input[aria-invalid=true] {
    border-width: 0.25rem;
    border-color: var(--error-color)
}

.textfield [id^='error-'] {
    font-family: Verdana;
    font-size: 1rem;
    line-height: 160%;
    margin-top: 0.5rem;
    display: block;
    font-weight: 600;
    color: var(--error-color);
}

Cards

Barrierefreie Cards sollten einen sinnvollen semantischen Aufbau haben, z. B. durch HTML-Elemente wie <article> oder <section>, und für Screenreader leicht verständlich sein. Wichtige Inhalte wie Titel, Beschreibungen oder Links müssen klar gekennzeichnet und per Tastatur sowie Screenreader zugänglich sein. Zudem sollte ausreichend Kontrast zwischen Text, Hintergrund und interaktiven Elementen bestehen, um die Lesbarkeit zu gewährleisten.

Checkliste
0 / 0

Tastaturzugänglichkeit

Alle interaktiven Elemente (z. B. Buttons oder Links) in der Card müssen per Tastatur bedienbar sein und einen sichtbaren Fokuszustand haben

Semantische HTML-Elemente

Container wie <article>, <section> oder <div>, um die Card-Inhalte logisch zu strukturieren

Fokusrahmen

Für Karten, die komplett klickbar sind, nutze das role=“link“-Attribut oder stelle sicher, dass der Fokus auch das gesamte Card-Element einschließt

Responsivität & Flexibilität

Cards sollten auf allen Bildschirmgrößen gut funktionieren und bei Vergrößerung oder Zoom (z. B. 200 %) weiterhin lesbar und benutzbar bleiben. Vermeide, dass Inhalte abgeschnitten oder unleserlich werden

Haustiere

Katzen & Technik

Neben ihrer wilden Seite haben Katzen auch eine Vorliebe für Technik. Viele Besitzer kennen das Problem: Kaum ist der Laptop geöffnet, sitzt die Katze darauf.

Lesezeit: 8 min

HTML Code

<article class="card">
    <div class="topline">Haustiere</div>
    <h2>
        <a href="#">Katzen & Technik</a>
    </h2>
    <p>Neben ihrer wilden Seite haben Katzen auch eine Vorliebe für Technik. Viele Besitzer kennen das Problem: Kaum ist der Laptop geöffnet, sitzt die Katze darauf.</p>
    <div class="reading-time">
        Lesezeit: 8 min
    </div>
    <img src="http://placecats.com/neo/300/300" alt="Bildbeschreibung">
</article>

CSS Code

article.card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 1.875rem;
    border-width: 0.125rem;
    border-style: solid;
    border-color: #000;
    background-color: #fff;
    padding: 2rem;
    transition: all 150ms ease-in-out;
}

article.card:hover {
    transform: translate(-0.125rem, -0.125rem);
    box-shadow: 0.1875rem 0.375rem #000;
}

article.card:has(:focus-visible) {
    outline-style: solid;
    outline-width: 0.125rem;
    outline-offset: 0.25rem;
    outline-color: #000;
}

article.card:has(:focus-visible) :focus {
    box-shadow: none;
    outline: none;
    border: none;
}

article.card img {
    order: -1;
    aspect-ratio: 1 / 1;
    height: auto;
    width: 100%;
}

article.card div.topline {
    font-family: Verdana;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    color: #000;
    margin-top: 1rem;
}

article.card h2 {
    font-family: Verdana;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    color: #000;
    margin-top: 0.25rem;
}

article.card h2 a {
    color: #000;
    -webkit-text-decoration-line: none;
    text-decoration-line: none;
}

article.card h2 a:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

article.card p {
    font-family: Verdana;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    color: #000;
}

article.card div.reading-time {
    font-family: Verdana;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    color: #000;
    margin-top: 0.75rem;
}

Digitale Barrierefreiheit Website Checkliste

Headlines & Seitenstruktur

Checkliste
0 / 0

Text & Schriften

Checkliste
0 / 0

Bilder

Checkliste
0 / 0

Icons

Checkliste
0 / 0

Links

Checkliste
0 / 0

Buttons

Checkliste
0 / 0

Navigation

Checkliste
0 / 0

Inputfield

Checkliste
0 / 0

Cards

Checkliste
0 / 0

Funktional Immer Aktiv

Vorlieben

Statistiken

Marketing

Digitale Barrierefreiheit Website Checkliste

Headlines & Seitenstruktur

Checkliste 0 / 0

Text & Schriften

Checkliste 0 / 0

Bilder

Checkliste 0 / 0

Icons

Checkliste 0 / 0

Links

Checkliste 0 / 0

Buttons

Checkliste 0 / 0

Navigation

Checkliste 0 / 0

Inputfield

Checkliste 0 / 0

Cards

Checkliste 0 / 0

Checkliste
0 / 0

Checkliste
0 / 0

Checkliste
0 / 0

Checkliste
0 / 0

Checkliste
0 / 0

Checkliste
0 / 0

Checkliste
0 / 0

Checkliste
0 / 0

Checkliste
0 / 0