Barrierefreiheit

Indem Sie zulassen, dass Ihre Seiten an unterschiedliche Bildschirmgrößen angepasst werden, ist dies nur eine Möglichkeit, um sicherzustellen, dass Ihre Website für möglichst viele Personen zugänglich ist. Berücksichtigen Sie auch einige dieser Faktoren.

Farbblindheit

Menschen nehmen Farben unterschiedlich wahr. Menschen mit Protanopie nehmen Rot nicht als eigene Farbe wahr. Bei Deuteranopie fehlt Grün. Für Menschen mit Tritanopie ist es blau.

Einige Tools können Ihnen eine allgemeine Vorstellung davon geben, wie Ihre Farbschemata Menschen mit unterschiedlichem Farbsehen sehen.

Der Firefox-Tab „Bedienungshilfen“ enthält ein Drop-down-Menü mit der Bezeichnung Simulate (Simulieren) mit einer Liste von Optionen.

</ph> <ph type="x-smartling-placeholder">

In den Chrome-Entwicklertools können Sie über den Rendering-Tab Sehschwäche emulieren.

Dies sind browserspezifische Tools. Es ist auch möglich, verschiedene visuelle Typen auf Betriebssystemebene zu emulieren.

Gehen Sie auf dem Mac zu:

1. Systemeinstellungen
2. Bedienungshilfen
3. Display
4. Farbfilter
5. Farbfilter aktivieren

Wählen Sie eine der Optionen aus.

Im Allgemeinen ist es keine gute Idee, sich bei der Unterscheidung zwischen verschiedenen Elementen ausschließlich auf Farbe zu verlassen. Sie können und sollten Ihren Links beispielsweise eine andere Farbe als den umgebenden Text verleihen. Sie sollten jedoch auch andere Stilindikatoren verwenden, z. B. die Links unterstreichen oder fett formatieren.

a {
  color: red;
}

a {
  color: red;
  font-weight: bold;
}

Farbkontrast

Einige Farbkombinationen können Probleme verursachen. Wenn der Kontrast zwischen der Vorder- und der Hintergrundfarbe nicht ausreicht, ist der Text schwer zu lesen. Schlechter Farbkontrast ist eines der häufigsten Probleme mit der Barrierefreiheit im Internet, aber glücklicherweise können Sie das schon früh im Designprozess erkennen.

Hier sind einige Tools, mit denen Sie das Kontrastverhältnis Ihrer Text- und Hintergrundfarben testen können:

• tota11y ist ein Bookmarklet, das Sie der Symbolleiste Ihres Browsers hinzufügen können.
• VisBug ist eine Browsererweiterung für alle gängigen Desktop-Browser.
• Der Accessibility Inspector von Firefox kann Probleme mit dem visuellen Kontrast erkennen.
• Außerdem können Sie Text mit geringem Kontrast mit den Chrome-Entwicklertools finden und korrigieren.
• Im Microsoft Edge-Browser können Sie den Textfarbkontrast mit der Farbauswahl testen.

Es empfiehlt sich, color und background-color immer zusammen in Ihrem Preisvergleichsportal zu deklarieren. Sie können nicht davon ausgehen, dass die Hintergrundfarbe die Standardeinstellung des Browsers ist. Nutzer können die in ihrem Browser verwendeten Farben ändern.

body {
  color: black;
}

body {
  color: black;
  background-color: white;
}

Hoher Kontrast

Einige Nutzer haben in ihrem Betriebssystem einen Modus mit hohem Kontrast festgelegt. Das kannst du mit deinem Betriebssystem ausprobieren.

Gehen Sie auf dem Mac zu:

1. Systemeinstellungen
2. Bedienungshilfen
3. Display

Wählen Sie die Option zum Erhöhen des Kontrasts aus.

Es gibt eine Medienfunktion, die erkennt, ob jemand den Modus mit hohem Kontrast aktiviert hat. Die Medienfunktion prefers-contrast kann nach drei Werten abgefragt werden: no-preference, less und more. Anhand dieser Informationen können Sie die Farbpalette Ihrer Website anpassen.

Nutzer können in ihrem Betriebssystem auch festlegen, dass umgekehrte Farben verwendet werden sollen.

Gehen Sie auf dem Mac zu:

1. Systemeinstellungen
2. Bedienungshilfen
3. Display

Wählen Sie die Option zum Umkehren der Farben aus.

Achten Sie darauf, dass Ihre Website auch für Nutzer sinnvoll ist, die umgekehrte Farben verwenden. Achte auf kastenförmige Schatten. Diese müssen möglicherweise angepasst werden, wenn die Farben umgekehrt sind.

Schriftgröße

Nutzer können in ihrem Browser nicht nur die Farbe anpassen, sondern auch die Standardschriftgröße. Wenn ihre Sehkraft rückläufig ist, kann es vorkommen, dass sie die Standardschriftgröße in ihren Browsern oder Betriebssystemen anpassen und so im Laufe der Jahre die Zahlen erhöhen.

Sie können auf diese Einstellungen reagieren, indem Sie relative Schriftgrößen verwenden. Verwenden Sie keine Einheiten wie px. Verwenden Sie stattdessen relative Einheiten wie rem oder ch.

Versuchen Sie, die Standardeinstellung für die Textgröße in Ihrem Browser zu ändern. Das kannst du in den Browsereinstellungen tun. Sie können die Ansicht auch vergrößern, während Sie eine Webseite besuchen. Funktioniert Ihre Website noch, wenn die Standardschriftgröße um 200%erhöht wird? Wie wäre es mit 400%?

Ein Besucher Ihrer Website auf einem Desktop-Computer, dessen Schriftgröße auf bis zu 400% erhöht ist, sollte dasselbe Layout wie ein Besucher Ihrer Website auf einem kleinen Bildschirm verwenden.

</ph> <ph type="x-smartling-placeholder">

Tastaturnavigation

Nicht jeder Nutzer verwendet zum Navigieren auf Webseiten eine Maus oder ein Touchpad. Eine weitere Möglichkeit zur Navigation auf einer Seite ist die Tastatur. Dabei ist die tab-Taste besonders nützlich. Nutzer können schnell von einem Link oder Formularfeld zum nächsten wechseln.

Links, die mit den Pseudoklassen :hover und :focus formatiert wurden, zeigen diese Stile unabhängig davon an, ob jemand eine Maus, ein Touchpad oder eine Tastatur verwendet. Mit der Pseudoklasse :focus-visible können Sie Ihre Links nur für die Tastaturnavigation gestalten. Sie können diese Stile besonders auffällig gestalten.

a:focus,
a:hover {
  outline: 1px dotted;
}
a:focus-visible {
  outline: 3px solid;
}

Während die Nutzenden von Link zu Link oder Formularfeld zu Formularfeld wechseln, werden diese Elemente in der Reihenfolge hervorgehoben, in der sie in der Dokumentstruktur erscheinen. Dies sollte auch der visuellen Reihenfolge entsprechen.

Gehen Sie mit der CSS-Eigenschaft order vorsichtig um. Sie können dies in Kombination mit der Flexbox und dem Raster verwenden, um Elemente in einer anderen visuellen Reihenfolge zu platzieren, die sie in der HTML-Datei anordnen. Das ist eine leistungsstarke Funktion, die aber Nutzer verwirren könnte, wenn sie mit einer Tastatur navigieren.

Testen Sie Ihre Webseiten mit der Taste tab auf Ihrer Tastatur, um zu prüfen, ob die Reihenfolge der Tabulatortaste sinnvoll ist.

In den Entwicklertools des Firefox-Browsers finden Sie im Bereich Bedienungshilfen die Option Reihenfolge der Tabulatortaste anzeigen. Wenn Sie diese Option aktivieren, werden Zahlen über jedes fokussierbare Element eingeblendet.

Reduzierte Bewegungsfreiheit

Animation und Bewegung sind wunderbare Möglichkeiten, Webdesigns zum Leben zu erwecken. Bei manchen Menschen können solche Bewegungen jedoch verwirrend sein und sogar Übelkeit verursachen.

Es gibt eine Funktionsabfrage, die angibt, ob die Nutzenden sich weniger bewegen möchten. Sie heißt prefers-reduced-motion. Fügen Sie sie überall dort ein, wo Sie CSS-Übergänge oder -Animationen verwenden.

a:hover {
  transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
}

Die Medienabfrage prefers-reduced-motion ist speziell für die Bewegung auf dem Bildschirm vorgesehen. Wenn Sie Übergänge für die Farbe eines Elements verwenden, die von prefers-reduced-motion nicht beeinflusst werden sollen. Sie können auch die Deckkraft des Übergangs und die Überblendung auswählen. Reduzierte Bewegung muss nicht bedeuten, dass keine Animation vorhanden ist.

Sprache

Menschen erleben das Web anders. Nicht alle Nutzer sehen Ihre Website auf einem Bildschirm. Hilfstechnologien wie Screenreader konvertieren die ausgegebenen Informationen auf einen Bildschirm in gesprochene Wörter.

Screenreader funktionieren mit allen Arten von Anwendungen, auch mit Webbrowsern. Damit ein Webbrowser nützlich mit einem Screenreader kommunizieren kann, muss die Webseite, auf die gerade zugegriffen wird, nützliche semantische Informationen enthalten.

Sie haben bereits gelernt, dass Nur-Symbol-Schaltflächen ein Attribut enthalten müssen, um den Zweck der Schaltfläche für nicht sehende Nutzer anzugeben. Dies ist nur ein Beispiel für die Bedeutung eines soliden Grundlagen-HTML-Codes.

Überschriften

Verwenden Sie Überschriften wie <h1>, <h2>, <h3> usw. mit Bedacht. Screenreader verwenden diese Überschriften, um eine Gliederung Ihres Dokuments zu erstellen, die mithilfe von Tastenkombinationen navigiert werden kann.

<div class="heading-main">Welcome to my page</div>

<div class="heading-secondary">About me</div>

<div class="heading-tertiary">My childhood</div>

<div class="heading-secondary">About this website</div>

<div class="heading-tertiary">How this site was built</div>

<h1>Welcome to my page</h1>
  <h2>About me</h2>
    <h3>My childhood</h3>
  <h2>About this website</h2>
    <h3>How this site was built</h3>

Struktur

Verwenden Sie Orientierungspunkte wie <main>, <nav>, <aside>, <header> und <footer>, um den Inhalt Ihrer Seite zu strukturieren. Nutzer, die Screenreader verwenden, können dann direkt zu diesen Orientierungspunkten springen.

<div class="header">...</div>

<div class="navigation">...</div>

<div class="maincontent">...</div>

<div class="sidebar">...</div>

<div class="footer">...</div>

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

Formulare

Jedes Formularfeld muss mit einem <label>-Element verknüpft sein. Sie können ein Label mit einem Formularfeld verknüpfen, indem Sie das Attribut for im <label>-Element und das entsprechende id-Attribut im Formularfeld verwenden.

<span class="formlabel">Your name</span>
<input type="text">

<label for="name">Your name</label>
<input id="name" type="text">

Bilder

Geben Sie immer eine Textbeschreibung von Bildern mit dem Attribut alt an.

<img src="dog.jpg">

<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">

Wenn das Bild nur zur Präsentation gedacht ist, sollten Sie trotzdem das Attribut alt einfügen. Sie können ihm aber einen leeren Wert geben.

<img src="texture.png">

<img src="texture.png" alt="">

Jake Archibald hat einen Artikel zum Schreiben großartiger alt-Texte veröffentlicht.

Links

Fügen Sie in die Links eine Beschreibung ein. Vermeiden Sie Formulierungen wie „Hier klicken“. oder „Mehr“.

<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>

<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>

ARIA

Die Verwendung von sinnvollem semantischem HTML macht Ihre Webseiten für Hilfstechnologien wie Screenreader und andere Audioausgaben wie Sprachassistenten zugänglicher.

Einige Widgets der Benutzeroberfläche, die kein entsprechendes HTML-Element haben, sind z. B. Karussells, Tabs oder Akkordeons. Diese müssen mit einer Kombination aus HTML, CSS, JavaScript und ARIA von Grund auf neu erstellt werden.

ARIA steht für „Accessible Rich Internet Applications“ (Accessible Rich Internet Applications). Mit seinem Vokabular können Sie semantische Informationen angeben, wenn kein geeignetes HTML-Element verfügbar ist.

Wenn Sie Oberflächenelemente erstellen müssen, die noch nicht als HTML-Elemente verfügbar sind, machen Sie sich mit ARIA vertraut.

Je mehr maßgeschneiderte Funktionen Sie mit JavaScript hinzufügen, desto besser müssen Sie ARIA verstehen. Wenn Sie native HTML-Elemente verwenden, benötigen Sie möglicherweise keine ARIA.

Führen Sie den Test nach Möglichkeit mit echten Nutzenden von Screenreadern durch. So erhalten Sie nicht nur ein besseres Verständnis dafür, wie sie im Web navigieren, sondern ersparen sich außerdem das Spekulationen bei der Entwicklung von Designs unter Berücksichtigung der Barrierefreiheit.

Tests mit echten Personen sind eine gute Möglichkeit, Ihre Annahmen aufzustellen. Im nächsten Modul lernen Sie die verschiedenen Möglichkeiten kennen, wie Nutzer mit Ihren Websites interagieren. Ein weiterer Bereich, in dem Annahmen getroffen werden können, ist allzu leicht.

Wissen testen

Ihr Wissen über Barrierefreiheit testen