Barrierefreie Websites: Ein Muss für Usability und User Experience
Digitale Barrierefreiheit (Accessibility) zielt darauf ab, dass alle Menschen eine Website ohne jede Einschränkung und fremde Hilfe nutzen können. Viele User sind auf eine barrierefreie Gestaltung von Websites angewiesen. Doch auch Menschen, die nicht von einer Behinderung betroffen sind, profitieren von einem uneingeschränkten Design. Denn es zahlt auch immer auf die Usability und User Experience ein. Welche weiteren Vorteile Web Accessibility bietet und wie sie sich umsetzen lässt, erfahren Sie hier!
Mit einem Klick zum gewünschten Thema:
Was genau ist mit Barrierefreiheit gemeint?
Eine barrierefreie Website ist für alle Menschen zugänglich. Unabhängig von persönlichen (körperlichen oder geistigen) sowie technischen Einschränkungen – sogenannten Barrieren – können Nutzer:innen alle Inhalte problemlos lesen und jede mögliche Interaktion nutzen. Wichtig dabei ist, dass sie nicht nur Menschen mit physischen oder psychischen Beeinträchtigungen berücksichtigt, sondern eben alle User. Eine Website spricht so beispielsweise Sehende optisch an und ist gleichzeitig für Menschen, die Schwierigkeiten beim Sehen haben, erfassbar.
Vorteile barrierefreier Websites
Gestalten Sie Ihre Webseite barrierefrei und profitieren Sie von vielen Vorteilen – für Sie selbst, vor allem aber für die Besucher:innen Ihres Webauftritts:
Digitale Teilhabe für alle
Digitale Barrierefreiheit bedeutet Teilhabe für alle. Egal ob Nicht-Muttersprachler:innen, Menschen mit Konzentrationsschwäche, motorischen Schwierigkeiten, Einschränkungen des Sehens, Hörens oder schwerer Behinderung – bei einer uneingeschränkten Gestaltung gibt es keine Barrieren. Sie erweitern dadurch automatisch Ihre Zielgruppe und gewinnen mehr potenzielle Kund:innen.
Bessere Benutzerfreundlichkeit
Eine barrierefreie Gestaltung zeichnet sich dadurch aus, dass die Besucher:innen Ihre Website intuitiv und leicht bedienen können. Von klarer Navigation über kontrastreiche Farben bis hin zu relativen Schriftgrößen – Ihre Kund:innen kommen in puncto Usability definitiv auf ihre Kosten.
Positiveres Nutzungserlebnis
Die User Experience verbessert sich durch die Umsetzung von Web Accessibility immer mit. Wenn Sie es den Besucher:innen Ihrer Website ermöglichen, sich spielend leicht durch die Inhalte zu klicken und ganz einfach mit dem Interface zu interagieren, verschaffen Sie den User:innen ein positiveres Nutzungserlebnis und gewinnen sie dadurch für sich.
Mehr Reichweite
Eine barrierefreie Website sorgt für mehr Reichweite. Durch den uneingeschränkten Zugang entsteht eine hohe Nutzerfreundlichkeit. Dafür belohnt Google Sie mit einem höheren Ranking, wodurch wiederum mehr User:innen Ihren Content sehen können.
Einhaltung von gesetzlichen Vorgaben
Für viele Website-Betreiber:innen ist eine barrierefreie Gestaltung bereits Pflicht: Ob Bund, Länder oder Gemeinden – verschiedene Unternehmen, Vereine und Institutionen gehen mit gutem Beispiel voran und setzen die Barrierefreiheit im Internet um. Schließen Sie sich an und tragen Sie mit zur digitalen Inklusion bei. Damit sind Sie gleichzeitig auch auf der sicheren Seite, wenn es um die Einhaltung von gesetzlichen Vorgaben geht.
Assistive Technologien
Die Zugänglichkeit zu digitalen Inhalten kann durch verschiedene technische Hilfsmittel unterstützt werden. Dazu gehören zum Beispiel:
Screenreader: Er liest Texte und andere Elemente wie etwa Grafiken vor. Das Ganze lässt sich über einen Lautsprecher oder Kopfhörer abspielen. Mit dem Screenreader haben die Nutzer:innen außerdem die Möglichkeit, Kontaktformulare auszufüllen und Links zu erkennen, die sie dann entweder anklicken oder überspringen können.
Braille-Zeile: Sie übersetzt den Content einer Website in Blindenschrift (Braille). Das Ausgabegerät besteht aus einer Lochmasken-Schiene, in der sich beim Auslesen der Inhalte kleine Stifte nach oben drücken. Blinde Menschen tasten die Zeile mit ihren Fingern ab und lesen sie auf diese Weise.
Tastatursteuerung: Menschen mit eingeschränkter Motorik stehen spezielle Tastaturen zur Verfügung, die sie entweder manuell – auch mit nur einer Hand – oder über andere Körperteile, zum Beispiel mit dem Ellenbogen, Kopf oder Mund, bedienen können. Von sehr großen über ganz kleine Tastaturen bis hin zu Touchpads oder Joysticks – es gibt verschiedenste Varianten.
Spracheingabe: Mit ihr lässt sich der Computer über die Sprache bedienen. Die Spracherkennungssoftware wandelt Gesprochenes in Textform um, überträgt es und gibt es aus.
Vergrößerungssoftware: User verwenden eine solche Software, um das Computerbild pixelweise zu vergrößern. Sie ermöglicht es ihnen sogar, den vergrößerten Bildschirmausschnitt in Bezug auf Farben und Kontrast ihren Bedürfnissen entsprechend einzustellen.
Barrierefreie Gestaltung von Websites
Wie lässt sich die digitale Barrierefreiheit konkret umsetzen? Folgende Stellschrauben ermöglichen es Ihnen, den Anforderungen einer barrierefreien Gestaltung von Websites gerecht zu werden:
Bilder, Grafiken, Videos und Multimedia
Wenn Sie auf Ihrer Website Bilder, Grafiken, Videos oder eine Kombination aus Bild, Text und Ton einbauen, sollten Sie darauf achten, dass die Inhalte auch für Menschen zugänglich sind, die nicht (gut) sehen oder hören können. Überlegen Sie sich beispielsweise, ob Ihre Seite ohne Grafiken im gleichen Umfang genutzt werden kann wie mit. Oder denken Sie daran, Audio-Inhalte auch in Textform zur Verfügung zu stellen.
Farben und Kontraste
Gerade Menschen mit eingeschränktem Sehvermögen müssen alle nötigen Informationen erfassen können, ohne auf bestimmte Farbschemata angewiesen zu sein. Außerdem sollten Sie sicherstellen, dass alle verwendeten Farben in einem ausreichenden Kontrastverhältnis stehen. Der Text ist dabei links- oder rechtsbündig ausgerichtet, die Zeile ist höchstens 80 Zeichen lang und der Abstand zwischen den Zeilen mindestens 1,5-fach.
Schriftarten und -größen
Viele Nutzer:innen müssen die Schrift auf einer Website vergrößern, um die Inhalte besser lesen zu können. Berücksichtigen Sie dieses Bedürfnis, indem Sie eine problemlose Vergrößerbarkeit Ihrer Webseitentexte auf 200 Prozent gewährleisten, ohne dass die Vergrößerung zu anderen Einschränkungen führt.
Lineare Nutzung
Wenn Website-Besucher:innen beispielsweise eine Software verwenden, mithilfe derer sie die gesamten Seiteninhalte in Form einer Sprachausgabe aufnehmen, bekommen sie den Content linear vermittelt. Ein strukturierter Aufbau der Seite sowie eine schlüssige Reihenfolge der Inhalte sollten demnach gegeben sein.
Geräteunabhängigkeit
Es muss auch immer Ziel einer barrierefreien Website sein, dass sie geräteunabhängig bedienbar ist. Beispielsweise muss die Bedienung mit der Tastatur genauso einfach sein wie mit der Maus.
Verständlichkeit und Navigation
Für alle Nutzer:innen müssen die Inhalte einer Seite allgemein verständlich und in der jeweils benötigten Sprache verfügbar sein. Die Navigation ist so leicht wie möglich zu gestalten, beispielsweise indem Elemente mit der gleichen Funktion innerhalb einer Seite gleich aussehen (etwa hinsichtlich Farbe, Form oder Platzierung). Inhalte sind bestenfalls über verschiedene Möglichkeiten zugänglich – sei es über ein Inhaltsverzeichnis oder über eine Suchfunktion. Bei Formulareingaben helfen Anweisungen zur Fehlerbehebung.
Inhaltliche Strukturierung
Auch strukturierte Inhalte sind ein wichtiger Aspekt der Barrierefreiheit. Dazu gilt es, HTML-Strukturelemente wie Überschriften, Absätze oder Listen richtig einzusetzen. Wichtig in diesem Zusammenhang: Trennen Sie Inhalt (HTML), Darstellung (CSS) und Verhalten (JavaScript) so gut wie möglich voneinander.
h-Struktur in Texten: Das gibt es zu beachten!
Eine saubere Überschriftenstruktur ist essenziell für die Qualität Ihrer Online-Texte. Alle wichtigen Informationen zu den HTML-Tags und wertvolle Tipps für Ihre SEO-optimierten-Texte finden Sie hier!
Tools und Ressourcen zur Überprüfung von Barrierefreiheit
Sie haben Ihre Website nun barrierefrei gestaltet und wollen wissen, ob sie dabei auch den gesetzlichen Anforderungen entspricht? Hierfür gibt es mittlerweile Werkzeuge, die Ihnen helfen, Ihren Webauftritt auf Zugänglichkeit zu prüfen:
- HTML – und CSS-Validatoren: Dazu gehört unter anderem der W3C® Markup Validation Service. Mit dessen Hilfe lässt sich überprüfen, ob ein Dokument in der Beschreibungssprache HTML optimal ausgezeichnet ist.
- BITV- und WCAG-Prüfprogramme: Eines dieser Programme ist der WAVE Web Accessibility Versatile Evaluator, der eventuelle Barrieren auf einer Website anzeigt.
- Browser-Erweiterungen: Es gibt zum Beispiel Extensions (Erweiterungen), die dabei helfen, die Kontraste zwischen Vorder- und Hintergrund auf Barrierefreiheit hin zu analysieren. So etwa den Color Contrast Analyzer für Chrome oder den Colour Contrast Analyser für Firefox.
Fazit
Heutzutage sind immer mehr Informationen online verfügbar. Dadurch steigt auch die Bedeutsamkeit von Barrierefreiheit im Web stetig. Das Thema ist damit für alle relevant, die mit ihrem Webauftritt unterschiedliche Zielgruppen ansprechen, dessen Usability erhöhen und eine bestmögliche User Experience erreichen wollen. Bauen Sie sich also zunächst ein Grundlagenwissen zum Thema Barrierefreiheit auf und gestalten Sie Ihre Website Schritt für Schritt so um, dass sie für alle User zugänglich ist.
Sie möchten eine barrierefreie Website konzipieren und damit sowohl die Usability als auch die User Experience optimieren? Dann kontaktieren Sie uns als X-Pert:innen im Healthcare-Bereich. Schreiben Sie einfach an info@xeomed.de!
