Barrierefreiheit und Webflow: So sorgst du für eine zugängliche Website

Eine barrierefrei Website stellt sicher, dass jeder Mensch unabhängig von seinen Einschränkungen diese problemlos nutzen und verstehen kann. Die Zahl der seheingeschränkten Menschen liegt bei knapp 1,2 Millionen allein in Deutschland. Eine nicht barrierefreie Website würde diesen Bevölkerungsteil ausschließen und man würde diesen eventuell auch als Kunde verlieren. Auch vorübergehende Einschränkungen wie Verletzungen oder Operationen können die Sehfähigkeit beeinträchtigen. Somit ist es potentiell für jeden Menschen von Vorteil, wenn man seine Website barrierefrei gestaltet.

In diesem Beitrag werden wir dir zeigen, wie du deine Website barrierefrei machst und welche Funktionen das Content Management System Webflow hierfür bereitstellt.

Große und deutliche Texte

Achte auf eine passende und gut lesbare Schriftgröße. So hebt sich die Schrift deutlich vom Hintergrund ab und ist für den Nutzer gut lesbar. Der Zeilenabstand sollte ebenso angemessen sein, so dass sich längere Textpassagen gut und einfach lesen lassen.

Dynamische Größen

Verwende keine Pixel als Größeneinheit, stattdessen mach von REM gebrauch. REM steht für Root EM und wird anhand der Schriftgröße des Wurzelelements definiert. REM ist somit eine relative Größe, während Pixel eine absolute Größe ist.

Das ist wichtig, wenn ein seheingeschränkter Nutzer im Browser eine größere Standardschriftart auswählt. Bei der Verwendung von REM-Einheiten auf einer Website passen sich die Größen der Elemente automatisch an. Die Größen bei einer pixelbasierten Website bleiben jedoch gleich.

Mit dem von Webflow eingebauten “Text zoom preview” kannst du prüfen, wie deine Seite reagiert, wenn eine andere Textgröße verwendet wird.

Farbliche Kontraste

Um sicher zu stellen, dass alle Inhalte gut erkannt werden, achte auf einen passenden Farbkontrast. Webflow selbst empfiehlt einen Kontrast von mindestens 4.5:1.

Der “color contrast analyzer” von Webflow bietet dir die Möglichkeit den Kontrast von einzelnen Elementen zu überprüfen. Farbkontraste werden direkt analysiert. Falls deine ausgewählten Farben nicht genügend Kontrast für einen Nutzer darstellen, zeigt dir Webflow eine alternative und barrierefreie Farbauswahl für dein Element.

Du solltest ebenso Farben nicht als alleiniges Merkmal verwenden. Verwende zusätzlich Textelemente oder Icons, um ein Element eindeutig identifizierbar zu machen.

Pro Tip: Mit der “Vision preview” in Webflow kannst du verschiedene Seheinschränkungen simulieren und dir selbst das Gefühl eines Betroffenen geben. So lassen sich eventuelle Schwachstellen auf deiner Seite identifizieren und beheben.

Klares Layout

Screenreader sind Softwareprogramme, welche deine Website in eine Sprachausgabe für seheingeschränkte Menschen konvertieren. Um dem Nutzer deine Inhalte in richtiger Reihenfolge vorzulesen, muss deine Website klar strukturiert sein.

Eingeschränkte Menschen, die keinen Screenreader benötigen, profitieren aber ebenso von einer klaren Struktur, da sie so den Aufbau der Seite besser nachvollziehen können und Inhalte besser verstehen können.

Aussagekräftige Alt-Texte

Bilder sind für Menschen mit einer Seheinschränkung besonders schwierig zu erkennen. Es müssen alternative Textbeschreibungen (Alt-Texte) für diese bereitgestellt werden, um sicherzustellen, dass der Inhalt der Seite richtig verstanden wird.

Eingeschränkte Menschen bekommen von Screenreadern diesen Alt-Text vorgelesen. Mit aussagekräftigen Alt-Texten kannst du gewährleisten, dass der Inhalt des Bildes optimal vermittelt wird und es zu keinen Missverständnissen kommt.

Wähle als Alt-Text eine passende Beschreibung des Bildes, die alle wichtigen Informationen enthält.

Wenn du wissen wissen willst, wie du einen Alt-Text am besten schreibst besuche diesen Website: Alt-Text schreiben

Einfache Sprache

Verwende einfache Sprache, um zu garantieren, dass alle Nutzer deiner Website den Inhalt verstehen. Versuche Abkürzungen zu vermeiden. Falls du aber doch eine Abkürzung benötigst versehe diese mit dem HTML-Element <abbr>. Wie du das <abbr> Element richtig verwendest, findest du hier: <abbr> - The Abbreviation Element

HTML Sprachcode richtig gesetzt für Screenreader

Die Identifizierung der Sprache der Seite oder der Seitenelemente ermöglicht es Screenreadern, den Inhalt in der entsprechenden Sprache zu lesen. Dies ist notwendig, um die Zugänglichkeit deiner Website zu gewährleisten. Außerdem wird so die automatische Übersetzung von Inhalten erleichtert.

In Webflow kannst du in den “Project Settings” unter dem Punkt “General”, einfach den Sprachcode für dein Land setzen. In der Liste aller Sprachcodes, mache von den 639-1 Codes gebrauch.

Überprüfe die Barrierefreiheit deiner Seite

Du solltest deine Seite auf Barrierefreiheit testen, um eventuelle Probleme und Fehler auf deiner Seite zu identifizieren und entsprechend zu handeln. Hierfür eignet sich das Web Accessibility Evaluation Tool (WAVE).

Das Tool ermöglicht eine gründliche Analyse der Zugänglichkeit deiner Website und liefert detaillierte Informationen zur Verbesserung der Seite. Mögliche Fehler werden angezeigt und das Tool liefert Verbesserungsvorschläge, um diese zu beheben. WAVE ist kostenlos und auch für Einsteiger im Thema Barrierefreiheit einfach zu verstehen.

Ich würde dir empfehlen nach diesem Beitrag deine aktuelle Seite auf jeden Fall von WAVE prüfen zu lassen, um gezielte Optimierungen vornehmen zu können.

Fazit

Die Zugänglichkeit ist ein essentieller Faktor für ein erfolgreiches Webprojekt. Denn nur wenn deine Website von allen Nutzern, unabhängig von ihren körperlichen oder geistigen Einschränkungen, problemlos genutzt werden kann, kann sie ihr volles Potenzial entfalten.

In den PageSpeed Insights von Google wird deine Seite auch auf die Barrierefreiheit geprüft und bewertet. Google möchte sicherstellen, dass seine Nutzer eine optimale Erfahrung auf der Suchmaschine haben. Somit leitet Google im besten Fall nur auf Seiten weiter, die von allen Menschen uneingeschränkt genutzt werden können. Ein weiterer Grund seine Website barrierefrei zu gestalten.

Webflow bietet bereits zahlreiche Funktionen und Möglichkeiten, um eine barrierefreie Website zu gestalten. Insbesondere die Vision Preview und die Farbkontrast-Analyse hebt Webflow von den Konkurrenten ab.

Daher bietet Webflow eine gute Basis für das Erstellen von barrierefreien Websites. Die integrierten Funktionen sind somit einzigartig auf dem Markt. Nutze die Möglichkeiten von Webflow aus, um für alle Besucher deiner Seite ein positives Erlebnis zu schaffen.