Barrierefreies und inklusives Webdesign im Fokus

Eine Webseite oder Website ist nutzlos, wenn die Besucher nicht richtig darauf zugreifen können. Mit Zugriff meinen wir die angemessene Navigation durch die Website und andere damit verbundene Aktionen. Dies kann aufgrund ihrer Unfähigkeit, die Website zu verstehen, nicht möglich sein, was eine Webseite für solche Benutzer zwecklos macht. 

Die Statistiken der Weltbank zeigen, dass es weltweit 1 Milliarde Menschen mit Behinderungen gibt, was 15 % der Weltbevölkerung ausmacht. Außerdem wurden schwere Behinderungen bei 110 bis 190 Millionen Menschen weltweit festgestellt. Gesellschaftlich wird der Grundsatz der Nichtdiskriminierung praktiziert, um diese Menschen in die Gesellschaft einzubeziehen. Dasselbe kann auch in einem Web-Netzwerk geschehen.

Was wären also die Konsequenzen, wenn die Website für diese 1 Milliarde Menschen unzugänglich wäre? Warum ist Web-Accessibility so wichtig? Oder was können Sie tun, um Ihre Website oder Webseite für solche Nutzer mit besonderen Fähigkeiten zugänglich zu machen? Wird sich Web-Inklusivität als Hilfe erweisen?

Dieser Artikel wird all diese Fragen beantworten. Beginnen wir zunächst mit der Definition von Inclusive Web Design.

Was ist Inclusive Web Design?

„Ein Ansatz zur Validierung von Produkten oder Dienstleistungen für die gesamte menschliche Vielfalt“ 

Inklusivität hat sich zu einem der angesagtesten Konzepte für 2019 entwickelt. Es hat sich auf alles ausgewirkt, von Geschäftspraktiken über politische Richtlinien bis hin zu digitalen Designs. Im Grunde kann Inclusive Design als eine Methodik zur Gestaltung von Produkten und Dienstleistungen definiert werden, sodass sie für eine Vielzahl von Menschen leicht zugänglich und diskret verfügbar sind.

Das Microsoft Inclusive Toolkit Manual definiert Inclusive Design als eine Designstrategie, die eine Reihe von Menschen berücksichtigt, um ein besseres Verständnis der verschiedenen Benutzerperspektiven zu erhalten.  So dass als Ergebnis ein vollständig ausgereiftes Produkt oder eine Dienstleistung für jeden Benutzertyp entworfen wird. Ein solches Design wird unter Berücksichtigung von Menschen mit unterschiedlichen Fähigkeiten erstellt. Unabhängig davon, ob die Funktionsstörung situativ oder anderweitig bedingt ist, umfasst der Prozess des Inclusive Design als grundlegende Schritte Ideation, Planung, Aufbau und Fertigstellung. 

Komponenten von Inclusive Web Design

Drei Dinge müssen berücksichtigt werden, wenn man den Schritt zum Inclusive Design wagt. 

• Fähigkeit zur Ausführung allgemeiner Webaufgaben: Kognitive und körperliche Behinderungen werden berücksichtigt, um zu prüfen, ob der Benutzer in der Lage ist, grundlegende Webaufgaben auszuführen oder nicht. Beispielsweise sind Menschen mit Hör- und Sehbehinderungen nicht in der Lage, die visuellen und akustischen Aufgaben auf einer Website auszuführen.
   
• Die Einstellung sagt alles: Dies erfasst die Wahrnehmung des Benutzers beim Zugriff auf eine Webseite. Beispielsweise neigen ältere Menschen aus Drittweltländern aufgrund des Mangels an Web-Exposure und Informationen dazu, wichtige sensible Informationen im Web preiszugeben. 
   
• Eignung, um vorwärts zu stürmen: Dies verfolgt, wie gut ein Benutzer mit dem Web vertraut ist oder wie viel Erfahrung ein Benutzer beim Zugriff auf eine Website oder eine Webseite hat. Sind sie ein Neuling oder ein häufiger Web-Assessor. 

Die zuvor genannten Komponenten quantifizieren verschiedene Merkmale und Personas des Benutzers, die ein fruchtbares Design eines Systems oder eines Webs ermöglichen, das für jede andere Person auf der Welt zugänglich und nutzbar ist. 

Alter, Geschlecht, Schwachstellen, Kultur, Sprache, Computerkenntnisse, Internetverbindung, Ziele und Motivationen sind die Faktoren, die bei der Weiterentwicklung der zuvor genannten Inclusive-Design-Komponenten, auch Benutzer-Personas genannt, berücksichtigt werden müssen. 

Inclusive Design konzentriert sich hauptsächlich auf den Erwerb von Web-Accessibility. Der nächste Abschnitt gibt einen Überblick über Web-Accessibility. 

Was ist Web-Accessibility? 

Die Web Accessibility Initiative (WAI)  definiert Web-Accessibility als die Gestaltung und Entwicklung einer Website in einer Weise, dass sie für die Benutzer leicht zugänglich, nutzbar und verständlich ist. Und in Bezug auf die Navigation für Benutzer mit körperlichen und geistigen Behinderungen oder Beeinträchtigungen jeglicher Art nahtlos ist.

Beispielsweise sind beim Ansehen eines Videos die Untertitel im Video eine Hilfe für Menschen mit dauerhaften Hörbehinderungen.  Eine Website für alle zugänglich zu machen, wird Einzelpersonen, der Gesellschaft und Unternehmen als Ganzes zugute kommen. 

Wie macht man Websites für alle zugänglich?

Zum Zwecke der Umsetzung der Web-Accessibility-Richtlinien und -Prinzipien wurde eine breite Palette von Empfehlungen von den Web Content Accessibility Guidelines (WCAG) 2.0 für Menschen mit Sehschwäche, Hörverlust, Lernschwierigkeiten, kognitiven Einschränkungen, eingeschränkter Bewegung, Sprachbehinderungen, Lichtempfindlichkeit und Kombinationen davon ausgesprochen. Im Folgenden sind die drei Ebenen in Übereinstimmung mit den WCAG-Richtlinien aufgeführt:

• Level A - Erfüllung der grundlegenden Accessibility-Anforderungen
• Level AA - Sicherstellung der mittelgroßen Accessibility-Anforderungen
• Level AAA- Der Bedarf für den Zugriff auf das hohe Volumen ist gewährleistet

Das folgende Diagramm zeigt das Vokabular für Web-Accessibility.

Inclusive Web Design Prinzipien

Im Folgenden sind die 10 Inclusive Web Design Prinzipien aufgeführt, die berücksichtigt werden sollten, um die Verschmelzung von Innovation und Vorstellungskraft zum Erblühen zu bringen. 

1. Nicht diskriminieren: Seien Sie fair und unparteiisch: Gleichberechtigung liegt den Wurzeln des Inclusive Web Design zugrunde. Anstatt eine Website gleich aussehen und auf jedem Gerät funktionieren zu lassen, sollte der Fokus darauf liegen, unterschiedliche Benutzererlebnisse mit gleichwertigen Ergebnissen zu bieten. Um dies vollständig zu erreichen, sollten es realen Benutzern, ob mit besonderen Fähigkeiten oder nicht, gestattet sein, in der Forschungs- und Testphase zu arbeiten. 
    
2. Die Flexibilität intakt halten: Bauen Sie mit wem, wie, warum, was, wo und wann die Leute die Website nutzen werden. Eine Größe passt nie für alle, und deshalb sollte die Entwicklung für verschiedene Ergebnisse erfolgen. 
    
3. Nein zu Mehrdeutigkeit: Dem Design einen Mehrwert zu verleihen, anstatt die Komplexität zu erhöhen, sollte der Hauptfokus sein. Die Website sollte einfach im Design und spontan sein, sodass sie alle Antworten für ihre Benutzer bietet. 
    
4. Verschiedene Menschen, verschiedene Wahrnehmungen: Keine zwei Menschen haben die gleiche Wahrnehmung für eine einzige Sache. Einige verstehen es durch Lesen, andere bevorzugen visuelles Lernen, Kontextualisierung und einige benötigen die Kombination aus allen dreien.
    
5. Die richtige Zustellung von Anweisungen sollte oberste Priorität haben: Der Satz von Anweisungen, die zu einem Ziel führen, ist es wert, Tausende von Dollar zu sparen. Informativ im Inclusive Web Design zu sein, bedeutet, den Benutzern eine Art Selbstverwaltung anzubieten. Dies ermöglicht es ihnen, angemessen mit der Website zu interagieren.
    
6. Vorbeugen ist besser als Heilen: Zum Zwecke der Minimierung der Fehler auf einer Website sollten den Benutzern, die mit der Website interagieren, zusätzliche, aber relevante Informationen angeboten werden. Beispielsweise sollten klare Richtlinien für die Registrierung und das Anmeldeverfahren auf der Website platziert werden. Diese Arten von interaktiven Nachrichten helfen bei der einfachen Navigation und sind Maßnahmen zum Aufbau des Vertrauens der Benutzer. 
    
7. Bauen Sie Benutzervertrauen mit Toleranz auf: Sie können die Fehler nicht unterbrechen, sie werden irgendwann passieren und die Benutzer werden es immer wieder tun. Das Hauptziel der Toleranz ist es, das Vertrauen der Benutzer aufzubauen. 
    
8. Seien Sie mühelos: Weniger Aufwand ist der Funke für Usability. Weniger Einschränkungen, unnötige Anforderungen werden den Besuch des Benutzers auf der Website erleichtern. Es wird auch einen Weg für sie ebnen, ihr Hauptziel des Besuchs der Website zu erreichen, wodurch der Benutzer effektiver und effizienter wird. 
    
9. Anpassungsfähigkeit gewährleisten: Eine ordnungsgemäß formatierte Website mit einer klar geschriebenen Informationsstruktur, Navigation und Interaktionen wird den Benutzern einen einfachen Aufenthalt ermöglichen und auch ein großer Anreiz für wiederholte Website-Besuche sein. Beispielsweise wird das Stopfen von Inhalten auf der Webseite dazu führen, dass eine Website überfüllter aussieht, was letztendlich unbequem zu bedienen ist.
    
10. Seien Sie konsistent: Mit den aktuellen Branchentrends, Richtlinien und Best Practices für die Gestaltung einer Website übereinzustimmen, wird sowohl einem Unternehmen als auch einem Benutzer einen Gefallen tun.  Es wird jedoch immer empfohlen, eine klare Vorstellung davon zu haben, wann eine konventionelle Regel angewendet werden soll und wann nicht. 

Überlegungen zur Erreichung von Inclusive Web Design

Zum Zwecke der erfolgreichen Gestaltung eines Inclusive Web Design werden folgende Dinge empfohlen: 

#1 Nein zu unordentlichem Design und Ja zu klarer visueller Hierarchie

Kein Benutzer mag einen überfüllten Bildschirm oder ein Layout, das voll von vielen nicht-logischen Navigationszeichen ist. Eine klare visuelle Hierarchie ermöglicht es dem Benutzer, einfach durch den Website-Inhalt zu navigieren. Eine vorherige Planung wird für die Organisation und Präsentation des Website-Inhalts empfohlen, sodass das Design für alle zugänglich ist. Gestalt Prinzipien für das UI-Design bieten eine Reihe von Richtlinien für dasselbe. 

#2 Testen Sie die Tastaturnavigation

Die Bewegung der Tastaturtasten in Bezug auf die Webseite muss beim Erstellen eines Webdesign-Prototyps überprüft werden. Beispielsweise die Bewegung der Tasten von links nach rechts,  auf und ab, die Funktion der Tab- und Eingabetasten. Außerdem sollte die vollständige Navigation der Website über die Tastatur überprüft werden. 

#3 Machen Sie die Web-Elemente verständlich und interaktiv

Wenn wir die Benutzerinteraktion auf einer Website berücksichtigen, sind klickfähige Schaltflächen und Links die Hauptquelle für die Verbindung des Benutzers mit der Website. Sie müssen auf einen Ankertext gestoßen sein, der sich auf die Textlinks wie „hier lesen“, „hier klicken“, „von hier aus navigieren“ usw. bezieht. Es wird empfohlen, einen klaren, prägnanten und verständlichen Ankertext für die Screenreader bereitzustellen. 

Darüber hinaus sollte die Gestaltung der Web-Elemente mit größter Sorgfalt erfolgen. Den auf dem Bildschirm vorhandenen Elementen (Tabellen, Call-to-Action-Schaltflächen, Bilder) sollte eine standardisierte Auffüllung und ein standardisierter Abstand gegeben werden. Zusammen mit dieser Größe sollte so gehalten werden, dass diese für die Benutzer der kleinen Bildschirme leicht zugänglich sind. 

#4 Verwenden Sie große Schriftarten und eine kontrastreiche Farbkombination

Ein guter Kontrast und eine gute Schriftgröße helfen bei der ordnungsgemäßen Organisation des Designs und der Etablierung einer klaren Hierarchie zwischen Benutzern und den Website-Designern.  Beispielsweise wird ein hellgrauer Inhalt auf einem weißen Hintergrund es den Benutzern ziemlich schwer machen, den Inhalt zu lesen. Eine kontrastreiche Farbkombination unterscheidet ein Website-Element von einem anderen und ist auch hilfreich für das Design für Benutzer mit Farbenblindheit und anderen visuellen Beeinträchtigungen. 

Die W3-Accessibility-Richtlinien können für Standardkontrastwerte herangezogen werden, die ein Minimum von 4:5:1  Kontrast in größeren Elementen und 7:1 in regulären Elementen empfehlen. Es wird empfohlen, eine Schriftgröße von mindestens 16px und idealerweise 20px für den Fließtext festzulegen. Viele Online-Tools sind verfügbar, um den Kontrast zu überprüfen. In unseren weiteren Abschnitten werden wir weitere solcher Tools besprechen. 

#5 Verwenden Sie Standard-HTML- und ARIA-Tags 

Wenn Sie eine Webseite für jeden Benutzer zugänglich machen möchten, spielen Sie nicht mit HTML-Tags. Es ist ziemlich stumm, ein zusätzliches Javascript-Ereignis zu verwenden, um Anker-Tags dazu zu bringen, genauso wie Schaltflächen zu funktionieren. Es wird empfohlen, Schaltflächen für Schaltflächen, Anker für Links, „table, tbody, td, th“ für Tabellen, „h1, h2, h3, …“ für Titel usw. zu verwenden. 

ARIA (Accessible Rich Internet Applications) bietet andererseits spezielle Accessibility-HTML-Attribute, die zu jedem Markup hinzugefügt werden können, aber für HTML bevorzugter sind. ARIA erleichtert Zustände (aktiv oder deaktiviert) für die Objekte, eine Beschreibung für ein Formular oder die Breite einer Fortschrittsanzeige usw. 

#6 Stellen Sie Videountertitel und Audio-Transkripte bereit

Untertitel oder Bildunterschriften sind eine große Hilfe für die Benutzer, die auf die Website in einer Fremdsprache zugreifen. Untertitel zu haben, ist ein Segen für die Benutzer mit einer Hörbehinderung.  Darüber hinaus wird empfohlen, das Video nicht im Autoplay-Modus zu belassen. 

Wenn Sie über Audioinhalte sprechen, stellen Sie sicher, dass Sie Transkripte für jeden vorab aufgezeichneten Audioinhalt bereitstellen. Eine ordnungsgemäß ausgerichtete Vollversion oder eine kurze Zusammenfassung wird für dasselbe empfohlen. Es macht den Inhalt für hörgeschädigte Benutzer zugänglicher.

Inclusive Web Design Tools 

Viele Online-Tools sind verfügbar, um die Web-Accessibility für jeden Benutzer zu validieren. Im Folgenden finden Sie eine Liste einiger solcher Tools, die helfen, die Einhaltung der Accessibility der Website zu überprüfen:

• A11Y Compliance Platform von Bureau of Internet Accessibility
• Accessibility Checklist von Elsevier
• Accessibility Developer Tools von Google Accessibility
• ColorTester von Alfasado Inc
• Contrast-Finder von Tanaguru
• DYNO Mapper von Indigo Design Company LLC
• WAVE von WebAIM

Sehen Sie sich hier die vollständige Liste der wichtigen Accessibility-Tools an

Mitnehmen

Spezielle Taktiken und Prinzipien müssen befolgt werden, um die Web-Accessibility für alle Arten von Benutzern zu gewährleisten. Viele strategische Initiativen und kreative Implementierungen haben eine Basis für eine bessere Website-Benutzerinteraktion geschaffen. 

Was halten Sie von Inclusive Web Design oder Web-Accessibility? Teilen Sie Ihre Ansichten auf unseren Social-Media-Kanälen: Facebook, LinkedIn und Twitter.

Nehmen Sie Kontakt mit uns unter [email protected] auf, um die Welt zu einem besseren Ort für die Menschen mit besonderen Fähigkeiten zu machen.