Bedienungshilfen

Wenn Sie dafür sorgen, dass Ihre Seiten auf unterschiedliche Bildschirmgrößen reagieren, ist das nur eine Möglichkeit, Ihre Website für möglichst viele Nutzer zugänglich zu machen. Hier sind einige weitere Faktoren, die Sie berücksichtigen sollten.

Farbsehschwäche

Farben werden von verschiedenen Menschen unterschiedlich wahrgenommen. Menschen mit Protanopie nehmen Rot nicht als eigenständige Farbe wahr. Bei Deuteranopie fehlt die Farbe Grün. Für Menschen mit Tritanopie ist es blau.

Mit einigen Tools können Sie sich einen allgemeinen Eindruck davon verschaffen, wie Ihre Farbschemas für Menschen mit unterschiedlichen Arten von Farbsehschwäche aussehen.

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

In den Chrome-Entwicklertools können Sie auf dem Rendering-Tab Sehbeeinträchtigungen simulieren.

Das sind browserspezifische Tools. Es ist auch möglich, verschiedene Arten von Sehvermögen auf Betriebssystemebene zu emulieren.

Gehe 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 nur auf die Farbe zu verlassen, um zwischen verschiedenen Elementen zu unterscheiden. Sie können und sollten Ihre Links beispielsweise in einer anderen Farbe als den umgebenden Text darstellen. Sie sollten aber auch andere Formatierungsmerkmale wie Unterstreichungen oder Fettdruck verwenden.

a {
  color: red;
}

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

Farbkontrast

Einige Farbkombinationen können Probleme verursachen. Wenn der Kontrast zwischen der Vordergrund- und der Hintergrundfarbe nicht ausreicht, ist der Text schwer lesbar. Ein schlechter Farbkontrast ist eines der häufigsten Barrierefreiheitsprobleme im Web. Glücklicherweise lässt sich dieses Problem jedoch früh im Designprozess erkennen.

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

• VisBug ist eine Browsererweiterung, die für alle gängigen Desktopbrowser verfügbar ist.
• Mit dem Accessibility Inspector von Firefox können Sie Probleme mit dem visuellen Kontrast prüfen.
• Sie können auch mit den Chrome-Entwicklertools Text mit niedrigem Kontrast erkennen und beheben.
• Im Edge-Browser von Microsoft können Sie den Kontrast von Textfarben mit der Farbauswahl testen.

Es empfiehlt sich, color und background-color immer zusammen in Ihrem CSS zu deklarieren. Gehen Sie nicht davon aus, dass die Hintergrundfarbe die Standardeinstellung des Browsers ist. Nutzer können die Farben ihres Browsers ändern.

body {
  color: black;
}

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

Hoher Kontrast

Einige Nutzer stellen ihr Betriebssystem auf einen Modus mit hohem Kontrast ein. Sie können dies auf Ihrem Betriebssystem ausprobieren.

Gehe auf dem Mac zu:

1. Systemeinstellungen
2. Bedienungshilfen
3. Display

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

Es gibt eine Media-Funktion, mit der erkannt werden kann, ob jemand den Modus mit hohem Kontrast aktiviert hat. Das Media-Feature prefers-contrast kann für drei Werte abgefragt werden: no-preference, less und more. Anhand dieser Informationen können Sie die Farbpalette Ihrer Website anpassen.

Nutzer können auch in ihrem Betriebssystem eine Einstellung für die Verwendung umgekehrter Farben festlegen.

Gehe auf dem Mac zu:

1. Systemeinstellungen
2. Bedienungshilfen
3. Display

Wählen Sie die Option zum Invertieren von Farben aus.

Achten Sie darauf, dass Ihre Website auch für Nutzer, die mit umgekehrten Farben surfen, sinnvoll ist. Achten Sie auf Schlagschatten. Diese müssen möglicherweise angepasst werden, wenn Farben invertiert werden.

Schriftgröße

Nutzer können in ihrem Browser nicht nur die Farbe, sondern auch die Standardschriftgröße anpassen. Wenn ihr Sehvermögen nachlässt, passen sie möglicherweise die Standardschriftgröße in ihren Browsern oder Betriebssystemen an und erhöhen die Zahlen im Laufe der Jahre.

Sie können auf diese Einstellungen mit relativen Schriftgrößen reagieren. Vermeiden Sie die Verwendung von Einheiten wie px. Verwenden Sie stattdessen relative Einheiten wie rem oder ch.

Ändern Sie die Standardeinstellung für die Textgröße in Ihrem Browser. Das kannst du in den Browsereinstellungen tun. Oder Sie können die Schriftgröße beim Aufrufen einer Webseite durch Heranzoomen ändern. Funktioniert Ihre Website noch, wenn die Standardschriftgröße um 200%erhöht wird? Wie wäre es mit 400%?

Nutzer, die Ihre Website auf einem Computer mit einer Schriftgröße von 400% aufrufen, sollten dasselbe Layout sehen wie Nutzer, die Ihre Website auf einem Gerät mit kleinem Bildschirm aufrufen.

Tastaturnavigation

Nicht jeder verwendet eine Maus oder ein Touchpad, um auf Webseiten zu navigieren. Eine Tastatur ist eine weitere Möglichkeit, sich auf einer Seite zu bewegen. Die tab-Taste ist dabei besonders nützlich. Nutzer können schnell von einem Link oder Formularfeld zum nächsten wechseln.

Links, die mit den :hover- und :focus-Pseudoklassen formatiert sind, werden unabhängig davon, ob jemand eine Maus, ein Touchpad oder eine Tastatur verwendet, mit diesen Formatierungen angezeigt. Verwenden Sie die :focus-visible-Pseudoklasse, um Ihre Links nur für die Tastaturnavigation zu formatieren. Sie können diese Stile besonders hervorheben.

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

Wenn der Nutzer mit der Tabulatortaste von Link zu Link oder von Formularfeld zu Formularfeld wechselt, werden diese Elemente in der Reihenfolge fokussiert, in der sie in der Dokumentstruktur erscheinen. Das sollte auch der visuellen Reihenfolge entsprechen.

Seien Sie vorsichtig mit der CSS-Eigenschaft order. Sie können diese Eigenschaft in Kombination mit Flexbox und Grid verwenden, um Elemente in einer anderen visuellen Reihenfolge als in der HTML-Datei zu platzieren. Das ist eine leistungsstarke Funktion, kann aber Nutzer, die mit einer Tastatur navigieren, verwirren.

Testen Sie Ihre Webseiten, indem Sie die tab-Taste auf Ihrer Tastatur verwenden, um sicherzustellen, dass die Tab-Reihenfolge sinnvoll ist.

Im Bereich Bedienungshilfen der Entwicklertools des Firefox-Browsers gibt es die Option Tab-Reihenfolge anzeigen. Wenn Sie diese Option aktivieren, werden Zahlen auf jedes fokussierbare Element gelegt.

Weniger Bewegung

Animationen und Bewegungen sind eine wunderbare Möglichkeit, Webdesigns zum Leben zu erwecken. Bei einigen Menschen können diese Bewegungen jedoch zu Desorientierung und sogar Übelkeit führen.

Es gibt eine Funktionsanfrage, die angibt, ob der Nutzer weniger Bewegung bevorzugt. Sie heißt prefers-reduced-motion. Fügen Sie es überall 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 Media-Anfrage prefers-reduced-motion bezieht sich speziell auf Bewegungen auf dem Bildschirm. Wenn Sie Übergänge für die Farbe eines Elements verwenden, die nicht von prefers-reduced-motion beeinflusst werden sollen. Auch das Überblenden und das Ändern der Deckkraft sind in Ordnung. Der Modus „Weniger Bewegung“ bedeutet nicht, dass keine Animationen verwendet werden.

Sprache

Nutzer erleben das Web unterschiedlich. Nicht jeder sieht Ihre Website auf einem Bildschirm. Assistive Technologien wie Screenreader wandeln die auf einem Bildschirm ausgegebenen Informationen in gesprochene Wörter um.

Screenreader funktionieren mit allen Arten von Anwendungen, einschließlich Webbrowsern. Damit ein Webbrowser sinnvoll mit einem Screenreader kommunizieren kann, müssen auf der aufgerufenen Webseite sinnvolle semantische Informationen vorhanden sein.

Sie haben bereits erfahren, dass Schaltflächen mit Symbolen ein Attribut enthalten müssen, um den Zweck der Schaltfläche für sehbehinderte Nutzer anzugeben. Dies ist nur ein Beispiel dafür, wie wichtig eine solide HTML-Grundlage ist.

Überschriften

Verwenden Sie Überschriften wie <h1>, <h2>, <h3> usw. sinnvoll. Screenreader verwenden diese Überschriften, um eine Gliederung Ihres Dokuments zu erstellen, in der Sie mit Tastenkombinationen navigieren können.

<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 Landmark-Elemente wie <main>, <nav>, <aside>, <header> und <footer>, um die Inhalte Ihrer Seite zu strukturieren. Screenreader-Nutzer 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

Achten Sie darauf, dass jedem Formularfeld ein <label>-Element zugeordnet ist. Sie können einem Formularfeld ein Label zuordnen, indem Sie das Attribut for für das <label>-Element und das entsprechende Attribut id für das 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 dient, sollten Sie trotzdem das Attribut alt angeben, ihm aber einen leeren Wert zuweisen.

<img src="texture.png">

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

Jake Archibald hat einen Artikel zum Verfassen von alt-Text veröffentlicht.

Links

Versuchen Sie, beschreibenden Text in Links einzufügen. 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

Wenn Sie semantisches HTML verwenden, sind Ihre Webseiten für Hilfstechnologien wie Screenreader und andere Audioausgaben wie Sprachassistenten besser zugänglich.

Einige Schnittstellen-Widgets, für die es kein entsprechendes HTML-Element gibt, z. B. Karussells, Tabs und Akkordeons. Sie müssen von Grund auf mit einer Kombination aus HTML, CSS, JavaScript und ARIA erstellt werden.

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

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

Je mehr benutzerdefinierte Funktionen Sie mit JavaScript hinzufügen, desto mehr müssen Sie sich mit ARIA auskennen. Wenn Sie Standard-HTML-Elemente verwenden, benötigen Sie möglicherweise keine ARIA-Attribute.

Wenn möglich, sollten Sie mit echten Screenreader-Nutzern testen. So können Sie nicht nur besser nachvollziehen, wie sie im Web navigieren, sondern auch leichter barrierefreie Designs erstellen.

Tests mit echten Nutzern sind eine gute Möglichkeit, um Annahmen aufzudecken, die Sie möglicherweise treffen. Im nächsten Modul erfahren Sie mehr über die verschiedenen Arten, wie Nutzer mit Ihren Websites interagieren. Auch hier ist es leicht, Annahmen zu treffen.

Dein Wissen wird getestet

Wissen über Barrierefreiheit testen