Barrierefreiheit auf Websites: Tipps für Farbmodi und Schriftgrößen

Barrierefreiheit ist ein wichtiger Aspekt bei der Gestaltung von Websites. Insbesondere für Menschen mit Sehbehinderungen können bestimmte Farbkombinationen und Schriftgrößen eine große Herausforderung darstellen. Zum Glück gibt es erprobte Techniken, um dem Benutzer verschiedene Farbmodi auf Webseiten anzubieten, sowie Best Practices für die Schriftgrößen, um die Zugänglichkeit zu erhöhen. In diesem Artikel erfährst du, wie du deine Website barrierefreier gestalten kannst, um sicherzustellen, dass sie für alle Benutzer zugänglich ist.

Farbfächer und Schablonen aus dem Print-Bereich.
Bild von Stefan Schweihofer über die Plattform Pixabay

Es gibt erprobte Techniken, um dem Benutzer verschiedene Farbmodi auf Webseiten anzubieten, um die Barrierefreiheit zu verbessern. Es gibt auch Best Practices für die Schriftgrößen, um die Zugänglichkeit zu erhöhen.

Farbmodi

Menschen mit Sehbehinderungen können Schwierigkeiten haben, bestimmte Farben oder Farbkombinationen zu erkennen. Ein hoher Kontrast und die Möglichkeit, die Farben in Graustufen zu ändern, können helfen, die Website zugänglicher zu machen. Hier sind einige bewährte Techniken, um verschiedene Farbmodi auf Websites anzubieten:

  • CSS-Stylesheets

    CSS-Stylesheets können verwendet werden, um verschiedene Farbmodi auf Websites anzubieten. Zum Beispiel kann ein Stylesheet mit hoher Kontrastfarbe erstellt werden, das eine hohe Farbkontrastierung zwischen Text und Hintergrund aufweist. Benutzer können dann zwischen den verschiedenen Stylesheets wählen, indem sie eine Schaltfläche oder einen Link auf der Website verwenden.

    Ein einfaches Beispiel inkl. HTML-Code zur Umsetzung eine Wechsels der CSS-Datei findest Du weiter unten bei JavaScript-basierten Lösungen.

  • Browser-Plugins

    Es gibt verschiedene Browser-Plugins, die Benutzern die Möglichkeit bieten, Farbmodi auf Websites anzupassen. Diese Plugins können auch Funktionen wie hoher Kontrast und Graustufen enthalten. Benutzer können dann das Plugin verwenden, um den Farbmodus zu ändern.

    1. UserStyles.org - UserStyles ist eine Browser-Erweiterung, die es Benutzern ermöglicht, das Aussehen von Websites durch Anpassung von CSS-Stylesheets zu ändern. Benutzer können ihre eigenen Stylesheets erstellen oder vorhandene Stylesheets von der UserStyles-Website herunterladen und anpassen.
    2. High Contrast - High Contrast ist eine Erweiterung für den Chrome-Browser, mit der Benutzer die Farbpalette von Websites ändern und eine hohe Kontrastansicht aktivieren können. Die Erweiterung enthält auch Funktionen zur Anpassung von Schriftgröße und Textstilen.
    3. Dark Reader - Dark Reader ist eine Erweiterung für verschiedene Browser, einschließlich Chrome, Firefox und Safari, die es Benutzern ermöglicht, das Farbschema von Websites umzukehren, um eine dunklere Ansicht zu erzeugen. Die Erweiterung kann auch die Helligkeit von Websites automatisch anpassen, um Augenbelastung zu reduzieren.

    Es gibt noch viele weitere Browser-Plugins, die Benutzern die Möglichkeit bieten, Farbmodi auf Websites anzupassen, und es ist ratsam, verschiedene Optionen auszuprobieren, um herauszufinden, welche am besten für Deine Bedürfnisse geeignet ist.

  • JavaScript-basierte Lösungen

    JavaScript kann verwendet werden, um die Farbpalette der Website zu ändern oder bestimmte Elemente zu entfernen, um die Website barrierefreier zu gestalten. Benutzer können dann zwischen den verschiedenen Farbmodi wählen, indem sie auf eine Schaltfläche klicken.

    • Code-Beispiel

    <!DOCTYPE html>
<html>
<head>
	<title>Farbmodi Beispiel</title>
	<link rel="stylesheet" href="standard.css">
	<link rel="alternate stylesheet" href="highcontrast.css" title="High Contrast">
</head>
<body>
	<h1>Farbmodi Beispiel</h1>
	<p>Dies ist ein Beispieltext.</p>
	<p>Um den Farbmodus zu ändern, verwenden Sie die folgenden Links:</p>
	<ul>
		<li><a href="#" onclick="setActiveStyleSheet('standard'); return false;">Standard</a></li>
		<li><a href="#" onclick="setActiveStyleSheet('highcontrast'); return false;">High Contrast</a></li>
	</ul>
	<script type="text/javascript">
		function setActiveStyleSheet(title) {
			var i, a, main;
			for (i=0; (a = document.getElementsByTagName("link")[i]); i++) {
				if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
					a.disabled = true;
					if (a.getAttribute("title") == title) a.disabled = false;
				}
			}
		}
	</script>
</body>
</html>

Schriftgrößen

Menschen mit Sehbehinderungen können Schwierigkeiten haben, Text auf Websites zu lesen. Best Practices für die Schriftgrößen können helfen, die Zugänglichkeit für diese Benutzer zu erhöhen. Hier sind einige Best Practices für die Schriftgrößen:

  • Verwendung von relativen Schriftgrößen

    Stellen Sie sicher, dass die Schriftgröße in relativem Verhältnis zur Basisgröße des Textes auf der Website steht. Dadurch wird sichergestellt, dass die Schriftgröße automatisch angepasst wird, wenn der Benutzer die Größe des Textes auf der Website ändert.

    Code-Beispiel

    <!DOCTYPE html>
<html>
<head>
	<title>Verwendung von relativen Schriftgrößen</title>
	<style type="text/css">
		body {
			font-size: 16px;
		}

		h1 {
			font-size: 2em;
		}

		p {
			font-size: 1.2em;
		}
	</style>
</head>
<body>
	<h1>Überschrift</h1>
	<p>Dies ist ein Beispieltext.</p>
	<p>Die Schriftgröße dieses Absatzes ist 20% größer als die Basisgröße des Textes auf der Website.</p>
</body>
</html>

    In diesem Beispiel wird die Schriftgröße in Bezug zur Basisgröße des Textes auf der Website definiert. Die Basisgröße des Textes wird auf 16 Pixel festgelegt, was die Standardgröße für die meisten Browser ist.

    Die Schriftgrößen für den Titel und den Text werden als Verhältnis zur Basisgröße definiert. Die Überschrift wird auf 2em gesetzt, was bedeutet, dass sie doppelt so groß wie die Basisgröße ist. Der Text wird auf 1.2em gesetzt, was bedeutet, dass er 20% größer als die Basisgröße ist.

    Durch Verwendung von relativen Schriftgrößen wird sichergestellt, dass die Schriftgröße automatisch angepasst wird, wenn der Benutzer die Größe des Textes auf der Website ändert.

  • Verwendung von größeren Schriftarten

    Stelle sicher, dass die Schriftgröße groß genug ist, damit Benutzer sie leicht lesen können. Die meisten Webdesigner empfehlen für Fliesstext (Body Text) eine Schriftgröße von mindestens 16 Pixeln. Die optimale Schriftgröße an dieser Stelle hängt aber auch immer vom verwendeten Font ab - Stichwort X-height aus der Typographie.

    X-height

    Die x-Höhe (engl. x-height) bezieht sich auf die Höhe des Buchstabens "x" in einer Schriftart und wird oft als Referenzpunkt für die Größe anderer Buchstaben in derselben Schriftart verwendet. Die x-Höhe ist ein wichtiger Faktor bei der Gestaltung von Schriftarten, da sie bestimmt, wie gut lesbar eine Schriftart in kleinen Größen ist.

    In der Typografie ist die x-Höhe oft in Bezug auf die Schriftgröße definiert. Zum Beispiel bezieht sich eine x-Höhe von 12pt auf die Höhe des Buchstabens "x" in einer 12-Punkt-Schriftart. Eine Schriftart mit einer größeren x-Höhe wird in der Regel als lesbarer in kleinen Größen angesehen, da die Buchstaben in der Schrift insgesamt größer sind.

    Bei Webfonts bezieht sich die x-Höhe auf die Höhe des Buchstabens "x" in Pixeln. Wenn Du also eine Schriftart für Deine Website auswählen, solltest Du die x-Höhe der Schriftart berücksichtigen, um sicherzustellen, dass sie in verschiedenen Größen und auf verschiedenen Geräten lesbar ist.

  • Verwendung von klaren Schriftarten

    Verwende Schriftarten, die gut lesbar sind und eine klare Lesbarkeit haben. Serifenlose Schriftarten wie Arial und Verdana sind gute Optionen für Websites.

    Serifenlose Schriften

    Es gibt viele Schriftarten, die gute Alternativen zu Arial und Verdana sein können. Einige beliebte Optionen sind:

    • Helvetica
    • Roboto
    • Open Sans
    • Lato
    • Source Sans Pro

    Serifen Schriften

    In Bezug auf Serifen-Schriftarten sind einige der häufig verwendeten Schriftarten:

    • Times New Roman
    • Georgia
    • Baskerville
    • Garamond
    • Serif

    Google Webfonts

    Google Webfonts bietet eine große Auswahl an Schriftarten zur Auswahl. Einige der derzeit beliebten Schriftarten auf Google Webfonts sind:

    • Montserrat
    • Poppins
    • Open Sans
    • Roboto
    • Noto Sans

    Es ist jedoch wichtig zu beachten, dass die Wahl der Schriftart von verschiedenen Faktoren abhängt, wie z.B. dem Zweck der Website, dem Inhalt und der Zielgruppe. Es ist auch wichtig, sicherzustellen, dass die ausgewählte Schriftart gut lesbar und zugänglich ist.

  • Verwendung von ausreichendem Zeilenabstand

    Stellen Sie sicher, dass der Zeilenabstand groß genug ist, damit Benutzer den Text leichter lesen können. Eine allgemeine Faustregel ist, einen Zeilenabstand von mindestens 1,5 zu verwenden.

  • Verwendung von ausreichendem Abstand zwischen Wörtern und Buchstaben

    Stellen Sie sicher, dass der Abstand zwischen den Wörtern und Buchstaben groß genug ist, damit Benutzer den Text leichter lesen können. Ein ausreichender Abstand zwischen den Wörtern und Buchstaben

Blog-Übersicht

Die auf dieser Seite verwendeten Fotos & Bilder sind von Pixabay.

Weitere Artikel