Das Anpassen Ihrer Seiten an unterschiedliche Bildschirmgrößen ist nur eine Möglichkeit, um sicherzustellen, dass Ihre Website für möglichst viele Menschen zugänglich ist. Berücksichtigen Sie auch einige dieser Faktoren.
Farbsehschwäche
Verschiedene Menschen nehmen Farbe unterschiedlich wahr. Menschen mit Protanopie nehmen Rot nicht als eigenständige Farbe wahr. Bei Deuteranopie fehlt Grün. Für Menschen mit Tritanopie ist es blau.
Einige Tools geben Ihnen eine allgemeine Vorstellung davon, wie Ihr Farbschema Menschen mit unterschiedlichen Farbwahrnehmungen angezeigt wird.
Der Firefox-Tab „Bedienungshilfen“ enthält ein Drop-down-Menü namens Simulieren mit einer Liste von Optionen.
In den Chrome-Entwicklertools können Sie auf dem Tab „Rendering“ Sehschwächen emulieren.
Das sind browserspezifische Tools. Es ist auch möglich, verschiedene Visionstypen auf Betriebssystemebene zu emulieren.
Gehen Sie auf dem Mac zu:
- Systemeinstellungen
- Bedienungshilfen
- Displaynetzwerk
- Farbfilter
- 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 Ihren Links beispielsweise eine andere Farbe für den umgebenden Text geben. Sie sollten jedoch auch einen anderen Stilindikator anwenden, 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 Vordergrund- und Hintergrundfarbe nicht ausreicht, wird der Text schwer lesbar. Ein schlechter Farbkontrast ist eines der häufigsten Probleme im Zusammenhang mit der Barrierefreiheit im Internet. Glücklicherweise kann dies jedoch frühzeitig im Designprozess erkannt werden.
Mit den folgenden Tools können Sie das Kontrastverhältnis Ihrer Text- und Hintergrundfarben testen:
- tota11y ist ein Lesezeichen, das Sie zur Symbolleiste Ihres Browsers hinzufügen können.
- VisBug ist eine Browsererweiterung, die für alle gängigen Desktop-Browser verfügbar ist.
- Mit dem Accessibility Inspector in Firefox können Sie nach Problemen mit dem visuellen Kontrast suchen.
- Sie können auch mit den Entwicklertools von Chrome Text mit geringem Kontrast entdecken und korrigieren.
- Im Edge-Browser von Microsoft können Sie den Text-Farbkontrast mit der Farbauswahl testen.
Es wird empfohlen, color und background-color in Ihrem Preisvergleichsportal immer gemeinsam zu deklarieren. Gehen Sie nicht davon aus, dass die Hintergrundfarbe als Standard des Browsers verwendet wird. Nutzer können die in ihrem Browser verwendeten Farben ändern und tun dies auch.
body {
color: black;
}
body {
color: black;
background-color: white;
}
Hoher Kontrast
Manche Nutzer stellen in ihrem Betriebssystem einen Modus mit hohem Kontrast ein. Du kannst das mit deinem Betriebssystem versuchen.
Gehen Sie auf dem Mac zu:
- Systemeinstellungen
- Bedienungshilfen
- Displaynetzwerk
Wählen Sie die Option zum Erhöhen des Kontrasts aus.
Es gibt eine Medienfunktion, mit der erkannt wird, ob jemand den Modus mit hohem Kontrast aktiviert hat. Das Medienfeature prefers-contrast kann mit 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 vorgeben, invertierte Farben zu verwenden.
Gehen Sie auf dem Mac zu:
- Systemeinstellungen
- Bedienungshilfen
- Displaynetzwerk
Wählen Sie die Option zum Umkehren der Farben aus.
Achten Sie darauf, dass Ihre Website auch für Nutzer mit umgekehrten Farben Sinn ergibt. Achten Sie auf Schatten der Felder. Diese müssen möglicherweise angepasst werden, wenn die Farben invertiert sind.
Schriftgröße
Nutzer können in ihrem Browser nicht nur Farbe anpassen, sondern auch die Standardschriftgröße anpassen. Wenn ihr Sehvermögen sinkt, kann es sein, dass sie die standardmäßige Schriftgröße in ihren Browsern oder Betriebssystemen anpassen und die Zahlen im Laufe der Jahre immer weiter ansteigen lassen.
Sie können auf diese Einstellungen durch Verwendung relativer Schriftgrößen reagieren. Vermeiden Sie Einheiten wie px. Verwenden Sie stattdessen relative Einheiten wie rem oder ch.
Ändern Sie die Standardeinstellung für die Textgröße in Ihrem Browser. Dies kannst du in deinen Browsereinstellungen tun. Oder Sie zoomen einfach auf einer Webseite heran. Funktioniert Ihre Website auch dann, wenn die Standardschriftgröße um 200%erhöht wird? Wie wäre es mit 400%?
Nutzer, die Ihre Website über einen Desktop-Computer aufrufen und die Schriftgröße um bis zu 400% gesteigert werden kann, sollten dasselbe Layout erhalten wie ein Nutzer, der Ihre Website auf einem Gerät mit kleinem Bildschirm aufruft.
Tastaturnavigation
Nicht jeder verwendet zum Navigieren auf Webseiten eine Maus oder ein Touchpad. Eine Tastatur ist eine weitere Möglichkeit, auf einer Seite zu navigieren. Besonders nützlich ist dabei die Taste tab. Nutzer können schnell von einem Link- oder Formularfeld zum nächsten springen.
Bei Links, die mit den Pseudoklassen :hover und :focus formatiert wurden, werden diese Stile angezeigt, unabhängig davon, ob jemand eine Maus, ein Touchpad oder eine Tastatur verwendet. Mit der Pseudoklasse :focus-visible können Sie Links für die Navigation über die Tastatur gestalten. Sie können diese Stile auffälliger gestalten.
a:focus,
a:hover {
outline: 1px dotted;
}
a:focus-visible {
outline: 3px solid;
}
Wenn Nutzende vom Link zum Link oder vom Formularfeld zum Formularfeld wechseln, werden diese Elemente in der Reihenfolge hervorgehoben, in der sie in der Dokumentstruktur erscheinen. Diese sollte auch der visuellen Reihenfolge entsprechen.
Seien Sie mit der CSS-Eigenschaft order vorsichtig. Sie können dies zusammen mit Flexbox und Raster verwenden, um Elemente in einer anderen visuellen Reihenfolge zu platzieren, als sie in der HTML-Datei angeordnet sind. Das ist eine leistungsstarke Funktion, die jedoch die Navigation mit der Tastatur verwirren könnte.
Testen Sie Ihre Webseiten mit der tab-Taste auf Ihrer Tastatur, um sicherzustellen, dass die 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 über jedem fokussierbaren Element Zahlen eingeblendet.
Weniger Bewegung
Animation und Bewegung sind wunderbare Möglichkeiten, Webdesigns zum Leben zu erwecken. Bei manchen Menschen können diese Bewegungen jedoch sehr verwirrend sein und sogar Übelkeit verursachen.
Es gibt eine Funktionsabfrage, die angibt, ob die Nutzenden weniger Bewegung bevorzugen. Er heißt prefers-reduced-motion. Fügen Sie ihn ü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 Medienabfrage prefers-reduced-motion dient speziell zur Bewegung auf dem Bildschirm. Wenn Sie Übergänge für die Farbe eines Elements verwenden, die von prefers-reduced-motion nicht beeinflusst werden soll. Sie können auch die Deckkraft und Überblendung ändern. Weniger Bewegung muss nicht unbedingt eine Animation bedeuten.
Sprache
Menschen erleben das Web anders. Nicht alle Nutzer sehen Ihre Website auf einem Bildschirm. Hilfstechnologien wie Screenreader wandeln die ausgegebenen Informationen in einen Bildschirm in gesprochene Wörter um.
Screenreader funktionieren mit allen Arten von Anwendungen, auch mit Webbrowsern. Damit ein Webbrowser mit einem Screenreader sinnvoll kommunizieren kann, muss die Webseite, auf die gerade zugegriffen wird, nützliche semantische Informationen enthalten.
Sie haben bereits erfahren, dass Schaltflächen nur für Symbole ein Attribut enthalten müssen, um den Zweck der Schaltfläche für Nutzer mit Sehbehinderung anzugeben. Dies ist nur ein Beispiel dafür, wie wichtig ein gutes grundlegendes HTML ist.
Überschriften
Verwende sinnvolle Überschriften wie <h1>, <h2>, <h3> usw. Screenreader erstellen anhand dieser Überschriften eine Gliederung Ihres Dokuments, in der Sie sich mithilfe von Tastenkombinationen bewegen 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
Verwende Orientierungspunkte wie <main>, <nav>, <aside>, <header> und <footer>, um den Inhalt deiner Seite zu strukturieren. Nutzer von Screenreadern 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
Jedem Formularfeld muss ein <label>-Element zugeordnet sein. Labels können über das for-Attribut für das <label>-Element und das entsprechende id-Attribut im Formularfeld mit einem Formularfeld verknüpft werden.
<span class="formlabel">Your name</span> <input type="text">
<label for="name">Your name</label> <input id="name" type="text">
Bilder
Geben Sie Bilder immer mithilfe des Attributs alt in Textform an.
<img src="dog.jpg">
<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">
Wenn das Bild nur ein Präsentationsbild darstellt, sollten Sie trotzdem das Attribut alt verwenden, aber Sie können ihm einen leeren Wert zuweisen.
<img src="texture.png">
<img src="texture.png" alt="">
Jake Archibald hat einen Artikel zum Schreiben von hervorragendem alt-Text veröffentlicht.
Links
Geben Sie in den Links beschreibenden Text an. Vermeiden Sie Formulierungen wie „Klicken Sie hier“ 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 vernünftigem semantischem HTML macht Ihre Webseiten für Hilfstechnologien wie Screenreader und auch für andere Audioausgaben wie Sprachassistenten zugänglicher.
Einige Benutzeroberflächen-Widgets, die kein entsprechendes HTML-Element haben, wie Karussells, Tabs, Akkordeons usw. 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“. Mithilfe des Vokabulars können Sie semantische Informationen bereitstellen, 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 individuelle Funktionen Sie mit JavaScript hinzufügen, desto mehr müssen Sie ARIA verstehen. Wenn Sie bei nativen HTML-Elementen bleiben, benötigen Sie möglicherweise keine ARIA-Datei.
Wenn möglich, führen Sie Tests mit echten Nutzern von Screenreadern durch. Dadurch erhalten Sie nicht nur ein besseres Verständnis dafür, wie sie im Web navigieren, sondern auch die Unsicherheit bei der Designentwicklung unter Berücksichtigung der Barrierefreiheit.
Tests mit echten Personen sind eine großartige Möglichkeit, Ihre Annahmen offenzulegen. Im nächsten Modul erfahren Sie mehr über die verschiedenen Arten, wie Nutzer mit Ihren Websites interagieren. Ein weiterer Bereich, in dem es zu einfach ist, Annahmen zu treffen.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen zur Barrierefreiheit
Mit CSS können Entwickler eine Nutzereinstellung wie die Schriftgröße überschreiben.
body { font-size: 12px; } zu verwenden.Um zu vermeiden, dass die bevorzugte Schriftgröße eines Nutzers überschrieben wird, verwenden Sie?
px.rem.Jeder verwendet eine Maus.
Was macht ein Bild mit einem leeren ALT-Attribut?