Translated and extended from: How to Use CSS to Improve Web Accessibility (freeCodeCamp)
CSS spielt eine entscheidende Rolle bei der Verbesserung der Webzugänglichkeit. Dieser Leitfaden bietet einen umfassenden Überblick über verschiedene CSS-Techniken und Best Practices zur Steigerung der Barrierefreiheit.
- Voraussetzungen
- Semantisches HTML mit CSS unterstützen
- Fokus-Stile aktualisieren
- Inhaltsverschiebungen vermeiden
- Bewegung reduzieren
- Fokus innerhalb für verschachtelte Elemente
- Kontrastoptionen anpassen
- Dunkelmodus aktivieren
- Typografie und Zugänglichkeit
- Animationen zur Verbesserung der UX
- Inhalte je nach Lesegerät ein- und ausblenden
aria-*-Attribute und CSS- Farben und Kontrast
- Flexibles Layout und Responsive Design
- Formular-Styling für bessere Zugänglichkeit
- Barrierefreie Tabellen
- Unterstützung für Bildschirmlupen
- Einsatz von
clip-pathundshape-outsidemit Bedacht - Layout-Flexibilität mit
gridundflexboxvertiefen - Einsatz von
z-indexmit Vorsicht - CSS-basierte Tooltips und Overlays
- Zugänglichkeit bei der Implementierung von SVG
- Einheitliche Stile
- Ladezeit & Performance
- Testen der Zugänglichkeit
- Priorisierung
- Updates
- Ausnahme- und Sonderfälle
- Fazit
- Ressourcen
Um diesem Tutorial zu folgen, sollten Sie über grundlegende Kenntnisse in HTML, CSS und etwas JavaScript verfügen.
Semantisches HTML ist die Grundlage für Barrierefreiheit. CSS unterstützt diese Strukturen, indem es das visuelle Erscheinungsbild von Elementen wie <nav>, <article>, <aside>, <section> anpasst und hervorhebt. CSS sollte semantische Elemente nicht ersetzen, sondern sie visuell verstärken, um die Bedeutung des Inhalts zu kommunizieren.
Der Browser bietet standardmäßige Fokus-Stile für interaktive Elemente. Diese können jedoch manchmal nicht ideal für Ihr Designsystem sein oder schwer zu erkennen sein.
input:focus, button:focus {
outline: 2px solid #007BFF;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25);
}Inhaltsverschiebungen können für Benutzer frustrierend sein, insbesondere für solche mit kognitiven Einschränkungen oder die Bildschirmvergrößerungen verwenden.
.content-container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
img {
max-width: 100%;
height: auto;
aspect-ratio: 16/9;
object-fit: cover;
}Für dynamisch geladene Inhalte:
.new-content {
transition: margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}Schnelle Animationen können für Benutzer mit Bewegungsempfindlichkeit störend sein. Verwenden Sie prefers-reduced-motion, um Animationen anzupassen.
@media (prefers-reduced-motion: no-preference) {
.animated {
transition: transform 0.3s ease-in-out;
}
}
@media (prefers-reduced-motion: reduce) {
.animated {
transition: none;
}
}Hier ist ein Beispiel für die Reduzierung von Bewegung:
CodePen: Reduced Motion Example
Verwenden Sie :focus-within, um übergeordnete Elemente hervorzuheben, wenn ein untergeordnetes Element fokussiert wird.
form:focus-within {
box-shadow: 0 0 0 2px #007BFF;
}Passen Sie den Kontrast basierend auf den Benutzereinstellungen an.
@media (prefers-contrast: more) {
body {
background-color: #000;
color: #fff;
}
a {
color: #ff0;
}
}
@media (prefers-contrast: less) {
body {
background-color: #f0f0f0;
color: #333;
}
}Hier ist ein Beispiel für Kontrastanpassungen:
CodePen: Contrast Preferences Example
Implementieren Sie einen Dunkelmodus mit CSS-Variablen und prefers-color-scheme.
:root {
--bg-color: #fff;
--text-color: #000;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #000;
--text-color: #fff;
}
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}Zusätzlich zu den bereits erwähnten rem und Viewport-basierten Einheiten (vw, vh, etc.) gibt es weitere Aspekte der Typografie, die die Zugänglichkeit verbessern können:
Mit clamp() kann eine Schriftgröße definiert werden, die zwischen einem minimalen und einem maximalen Wert liegt, wobei die aktuelle Viewportgröße die tatsächliche Größe bestimmt. Mit min() und max() kann die kleinere bzw. die größere Schriftgröße angegeben werden. Diese Funktionen verbessern die Lesbarkeit, besonders auf verschiedenen Bildschirmgrößen.
h1 {
font-size: clamp(1.5rem, 4vw, 3rem); /* Schriftgröße zwischen 1.5rem und 3rem, skaliert mit 4vw */
}
p {
font-size: min(max(1rem, 3vw), 2rem); /* Schriftgröße zwischen 1rem (mindestens 3vw) und 2rem. */
}Eine ausreichende Zeilenhöhe (line-height) ist wichtig für eine gute Lesbarkeit. Es wird empfohlen, einen Wert von mindestens 1.5 für line-height zu verwenden, um genügend Raum zwischen den Textzeilen zu schaffen.
p {
font-size: 1rem;
line-height: 1.6; /* Erhöhte Zeilenhöhe für bessere Lesbarkeit */
}letter-spacing und word-spacing können einen Einfluss auf die Lesbarkeit haben und sollten sinnvoll eingesetzt werden. Bei großen Texten ist es oft sinnvoll, die letter-spacing leicht zu erhöhen.
p {
letter-spacing: 0.02em;
}Lange Wörter oder URLs können mit word-break: break-word; umbrochen werden, um ein Überlaufen des Containers zu verhindern. overflow-wrap: anywhere; erzielt ein ähnliches Ergebnis. Die Silbentrennung mit hyphens: auto; strukturiert den Text besser.
p {
word-break: break-word; /* Umbruch von langen Wörtern */
overflow-wrap: anywhere; /* Alternativer Umbruch für lange Wörter */
hyphens: auto; /* Aktiviert automatische Silbentrennung */
}Eine klare Hierarchie der Überschriften (h1 bis h6) ist wichtig, um Inhalte übersichtlich zu strukturieren und die semantische Bedeutung der Elemente zu verdeutlichen.
Einige barrierefreie Schriftarten, die sich durch ihre gute Lesbarkeit auszeichnen:
- Sans-Serif-Schriften: Open Sans, Lato, Roboto, Montserrat, Helvetica, Arial. Diese Schriften sind in der Regel besser lesbar als Serifenschriften.
- Monospace-Schriften (für Code): Fira Code, Source Code Pro. Diese Schriften eignen sich gut für Codebeispiele und sorgen für eine klare Darstellung der Zeichen. Gut lesbare Schriften haben oft klare, einfache Formen und ausreichend große Abstände zwischen Buchstaben. Es ist empfehlenswert, verschiedene Schriftarten mit den Benutzern zu testen, um die optimale Wahl für die jeweilige Zielgruppe zu finden.
Die Problematik von Font-Loading (FOIT, FOUT) kann durch das font-display-Attribut behoben werden. font-display: swap; lädt den Text mit einer Fallback-Font und tauscht es erst aus, wenn die gewünschte Schriftart verfügbar ist.
@font-face {
font-family: 'MeinFont';
src: url('mein-font.woff2') format('woff2'),
url('mein-font.woff') format('woff');
font-display: swap;
}
p {
font-family: 'MeinFont', sans-serif;
}Variable Fonts sind eine flexible Alternative zu traditionellen Font-Dateien, welche über den font-variation-settings-Eigenschaft an verschiedenste Anforderungen angepasst werden kann.
CSS-Animationen können die Zugänglichkeit verbessern, wenn sie sinnvoll eingesetzt werden:
.button {
transition: transform 0.3s ease, background-color 0.3s ease;
}
.button:hover, .button:focus {
transform: scale(1.05);
background-color: #0056b3;
}.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}@media screen and (max-width: 600px) {
.desktop-only {
display: none;
}
}
@media print {
.no-print {
display: none;
}
}aria-*-Attribute werden oft parallel zu CSS verwendet, um die Zugänglichkeit weiter zu verbessern (z.B. aria-hidden, aria-label, aria-expanded). Sie ermöglichen es, interaktive Elemente wie Buttons, die Menüs öffnen/schließen, besser zu gestalten und ihren Status an Screenreader zu kommunizieren.
Beispiel: Ein Button zum Öffnen/Schließen eines Menüs:
<button aria-expanded="false" aria-label="Menü öffnen" class="menu-button">Menü</button>.menu-button {
/* CSS für das Menü-Button-Design */
}
/* Wenn der Button geklickt wurde */
.menu-button[aria-expanded="true"]{
/* Angepasste Styles hier*/
}Stellen Sie sicher, dass Ihre Farbkombinationen ausreichend Kontrast bieten:
.high-contrast {
color: #000;
background-color: #fff;
}
.link {
color: #0000EE;
text-decoration: underline;
}
.link:hover, .link:focus {
text-decoration: none;
outline: 2px solid currentColor;
}Verwenden Sie flexible Layouts für bessere Anpassung an verschiedene Bildschirmgrößen:
.container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.item {
flex: 1 1 300px;
}
@media (max-width: 600px) {
.item {
flex-basis: 100%;
}
}Verbessern Sie die Zugänglichkeit von Formularen:
label {
display: block;
margin-bottom: 0.5rem;
}
input, textarea, select {
width: 100%;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
}
input:focus, textarea:focus, select:focus {
outline: 2px solid #007BFF;
outline-offset: 2px;
}
.error-message {
color: #d00;
font-size: 0.9rem;
margin-top: 0.25rem;
}Verbessern Sie die Lesbarkeit von Tabellen:
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 0.5rem;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
margin-bottom: 1rem;
}
td {
border: none;
position: relative;
padding-left: 50%;
}
td:before {
content: attr(data-label);
position: absolute;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-weight: bold;
}
}Optimieren Sie Ihr Layout für Benutzer von Bildschirmlupen:
.zoomable-content {
max-width: 100%;
overflow-x: auto;
}
.zoomable-image {
max-width: none;
cursor: zoom-in;
}clip-path und shape-outside können zwar visuelle Effekte erzeugen, sollten aber so eingesetzt werden, dass der Inhalt weiterhin zugänglich ist. Texte dürfen nicht abgeschnitten oder unsichtbar werden. Achten Sie darauf Alternativen für Textüberblendungen anzubieten.
Neben grundlegenden Beispielen sollten komplexere Layouts mit grid und flexbox gezeigt werden, um deren Beitrag zur Barrierefreiheit zu veranschaulichen. Diese Technologien helfen, das Layout für verschiedene Bildschirmgrößen anzupassen, z.B. responsive Navigationen.
z-index kann dazu führen, dass wichtige Inhalte überlagert und damit unsichtbar werden. Es ist wichtig, es richtig einzusetzen und unnötige z-index Werte zu vermeiden, um die Wartbarkeit zu gewährleisten.
Zugängliche Tooltips und Overlays können mit reinem CSS erstellt werden, ohne JavaScript zu benötigen. Es ist wichtig, die Tastaturzugänglichkeit für diese Elemente zu berücksichtigen.
Wenn SVGs verwendet werden, sollten aria-label und aria-labelledby genutzt werden, um den SVGs eine semantische Bedeutung zu geben. Bei dekorativen SVGs sollte role="img" und focusable="false" gesetzt werden.
Ein einheitliches Styling erhöht die Usability, da sich Nutzer auf vertraute Muster verlassen können. Es ist wichtig, nicht zu viele verschiedene Stile zu verwenden und einen Styleguide zu verwenden.
CSS-Code sollte optimiert werden, um eine schnelle Ladezeit zu gewährleisten. Dazu gehört das Minifizieren von CSS, das Zusammenfassen von CSS-Dateien usw.
Es ist wichtig die Zugänglichkeit der Webseite mit verschiedenen Tools und Techniken zu testen, wie z.B. mit Screenreadern, Tastaturbedienung, Kontrastprüfung und Browsererweiterungen.
Es sollte klar sein, welche Aspekte der Zugänglichkeit besonders wichtig sind (z.B. Kontrast, Fokus, Reduzierung von Bewegung) und wo man anfangen sollte.
Es ist wichtig zu erwähnen, dass dieser Leitfaden regelmäßig aktualisiert werden muss, da sich Webstandards und Technologien ständig weiterentwickeln.
Sonderfälle wie komplexe Tabellen, Karten oder Diagramme erfordern oft spezielle CSS-Techniken. Darauf sollte eingegangen werden.
CSS spielt eine entscheidende Rolle bei der Verbesserung der Webzugänglichkeit. Durch die Anwendung dieser Techniken auf einer soliden HTML-Grundlage können Sie eine inklusivere und ansprechendere Erfahrung für Benutzer aller Fähigkeiten schaffen. Denken Sie daran, dass Barrierefreiheit ein fortlaufender Prozess ist. Regelmäßige Tests und Anpassungen sind wichtig, um sicherzustellen, dass Ihre Website für alle Benutzer zugänglich bleibt.
- How to Use CSS to Improve Web Accessibility (freeCodeCamp)
- WebAIM Contrast Checker
- WAVE Web Accessibility Evaluation Tool
- Axe DevTools - Web Accessibility Testing
- A11Y Project Checklist
- MDN Web Docs: CSS and Accessibility
- W3C Web Accessibility Initiative (WAI)
- Inclusive Components by Heydon Pickering
- [Konkrete Beispiele von "best practice" Seiten (hier Links einfügen)]
- [Spezielle Web Accessibility Tutorials (z.B. zum Thema Tabellen, Formulare, etc.) (hier Links einfügen)]