10 Grundprinzipien für integratives Webdesign

Studien haben gezeigt, dass etwa 70 % der Websites mit assistiver Technologie zumindest teilweise unlesbar sind.

Diese Statistik klingt und ist schockierend. Wie kommt es, dass so viele Marken für Millionen von behinderten Internetnutzern auf offensichtliche Überlegungen verzichten?

Wenn wir bedenken, wie oft behinderte Menschen in der Gesellschaft und in der Wirtschaft unsichtbar gemacht werden, macht das leider mehr Sinn.

Die Web Content Accessibility Guidelines (WCAG) definieren, wie Websites ihre Zugänglichkeit und damit ihre Inklusivität verbessern können.

Viele dieser Richtlinien werden gesetzlich verankert, sodass Ihr Unternehmen möglicherweise gefährdet ist, wenn Ihre Website nicht zugänglich ist.

Die Vorteile der Inklusivität für Ihr Unternehmen und Ihre Kunden sind enorm.

Barrierefreiheit wird Ihnen einen größeren Publikumsanteil verschaffen, aber sie ist auch der Schlüssel zum Aufbau von Kundenvertrauen.

Alle Kunden, ob deaktiviert oder nicht, profitieren von einer reibungsloseren Website-Erfahrung. Sie werden ein Unternehmen zu schätzen wissen, das sich um diese Erfahrung kümmert.

Inklusivität bedeutet, die unterschiedlichen Bedürfnisse Ihrer Kunden zu berücksichtigen und wie ihr Zugang zu Ihrem Service eingeschränkt werden könnte. Die erfolgreiche Implementierung von Barrierefreiheitsfunktionen hilft Ihnen, diese Grenzen zu überwinden.

Obwohl sich dieser Artikel auf das Design von Websites konzentriert, denken Sie daran, dass ein Hauptproblem der Barrierefreiheit der fehlende Internetzugang ist. Sie sollten also darauf achten, die Verfügbarkeit in allen Bereichen zu verbessern.

Telefontechnologien, wie z. B. Einwahlkonferenzoptionen, können Ihnen dabei helfen, den Fernkontakt mit all Ihren Kunden aufrechtzuerhalten.

Kommen wir nun zu diesen zehn Kernprinzipien, um integratives Webdesign zu leiten.

Inklusive Designrichtlinien

1. Seien Sie flexibel

Der Begriff „Behinderung“ umfasst ein breites Spektrum menschlicher Erfahrungen und Bedürfnisse. Dies kann einschüchternd sein, wenn Sie überlegen, wie Sie Ihre Website barrierefrei und integrativ gestalten können.

Bedenken Sie jedoch, dass alle Ihre Kunden, ob behindert oder nicht, mit sehr unterschiedlichen Bedürfnissen und Vorlieben in Ihr Geschäft kommen.

Es ist wahr, dass Sie es nicht jedem recht machen können, aber Sie können ein flexibles Erlebnis bieten, um so viele Kunden wie möglich zu erreichen.

Berücksichtigen Sie den Kontext, in dem Benutzer auf Ihre Site zugreifen. Welche Geräte verwenden sie zum Beispiel? Nutzen sie Ihre Dienste eher bei der Arbeit oder zu Hause?

Erstellen Sie ein Profil Ihrer Kunden, um deren demografische Merkmale wie Alter und Geschlecht zu ermitteln. Dies ist einer der Schlüssel zum Verständnis der besten E-Commerce-Plattform oder des besten Seitendesigns für Ihr Unternehmen.

Ihre beste Option, um sowohl Ihre bestehenden Kunden zufrieden zu stellen als auch neue zu erreichen, ist Flexibilität.

Bieten Sie eine Vielzahl von Kontaktmöglichkeiten on- und offline an. Die Kontaktaufnahme mit Ihrem Unternehmen und die Nutzung Ihrer Dienste sollte reibungslos und schmerzlos sein. Davon profitieren alle Ihre Kunden, nicht nur diejenigen mit zusätzlichem Bedarf.

2. Vermeiden Sie es, Kunden zu überfordern

Während ein gewisses Maß an bewegten Inhalten dazu beitragen kann, dass Ihre Website bekannt wird, kann zu viel Angst auslösen und unter Druck setzen. Für Benutzer mit psychischen Problemen wie Angstzuständen, Autismus oder ADHS sind diese Probleme besonders relevant.

Die WCAG hat klare Richtlinien zum Verschieben von Inhalten. Verschieben von Inhalten (d. h. GIFs, scrollende und automatisch aktualisierte Newsfeeds usw.) muss einen Pausenmechanismus haben, wenn sie automatisch gestartet werden, länger als fünf Sekunden dauern und parallel zu anderen Inhalten verlaufen.

Abhängig von Ihrem Publikum möchten Sie möglicherweise ganz auf Autoplay-Inhalte verzichten. Denken Sie an Ihre älteren Kunden, die möglicherweise nicht an Webdienste gewöhnt sind.

Zu viele bewegte, zeitkritische Informationen sind abschreckend und überwältigend.

Viele Websites haben heutzutage ein Live-Chat-Popup, sobald Sie die Website betreten. Dies hat seine Vorteile als leicht zugängliches Kontaktwerkzeug. Es kann jedoch irritierend sein, wenn bei jeder Nutzung der Website sofort eine Meldung erscheint.

Anstelle eines Pop-ups könnten Sie stattdessen eine zusammenklappbare, beschilderte Live-Chat-Option an einer unauffälligen Position haben. Den Kontakt mit Ihren Kunden zu erzwingen, sobald sie ankommen, kann sehr unter Druck geraten.

Dies sollte auch für die Nutzung von SMS-Apps durch Ihr Unternehmen gelten. Überfluten Sie Ihre Kunden nicht mit Benachrichtigungen.

3. Verwenden Sie klare Typografie

Die WCAG macht sich über die Anforderungen an die Typografie klar:

• Text links- oder rechtsbündig halten (nicht ausgerichtet)
• Der Zeilen- und Absatzabstand sollte mindestens 1,5 x Zoll betragen
• Die maximale Absatzbreite beträgt 80 Zeichen

Sie sollten sich immer an diese Richtlinien halten, aber Sie können noch weiter gehen, um mehr von Ihren Kunden zu profitieren.

Verwenden Sie eine klare, serifenlose Schrift mit guter Größe und Kontrast zu Ihrer Hintergrundfarbe. Die Sprache sollte einfach und direkt sein, ohne Ihre Kunden zu bevormunden.

Nutzen Sie Ihre Kundenrecherche, um herauszufinden, was Kunden von Ihrer Website erwarten.

Ein weiteres wichtiges Anliegen ist der Text in Bildern. Dies sollte nach Möglichkeit vermieden werden.

Blinde und sehbehinderte Benutzer verwenden häufig Screenreader-Software. Diese Programme lesen Bildschirmtext laut vor, können aber keine Bilder dekodieren.

Ihre Kunden können daher wichtige Informationen verpassen, wenn der Text in einem Bild „versteckt“ ist. Es ist wichtig, dass Ihre sehbehinderten Kunden nicht das Gefühl haben, dass ihr Zugriff auf Ihre Website eingeschränkt ist.

4. Bilder zugänglich machen

Natürlich sind Bilder für gutes Webdesign nach wie vor unverzichtbar. Und umgekehrt können sie die Erreichbarkeit für andere Kunden erhöhen.

Für Menschen mit Lesebehinderungen wie Legasthenie können relevante Bilder das Textverständnis verbessern. Bilder werden mit ziemlicher Sicherheit für einige Bereiche Ihrer Website benötigt, z. B. für Produktseiten.

Sie können weiterhin Bilder für Benutzer von Bildschirmleseprogrammen zugänglich machen. Alt-Text sollte für jedes Bild auf Ihrer Website enthalten sein. Dies ist der Text, der angezeigt wird, wenn Sie mit dem Cursor über ein Bild fahren.

Es wird auch von Screenreadern vorgelesen, die das Bild selbst nicht anzeigen können. Der gute Alt-Text beschreibt das angezeigte Bild klar und genau.

Es ist ganz einfach, Alt-Text mit HTML in Ihre Website einzufügen. Die Einbeziehung von Alt-Text stört andere Benutzer nicht und wird denjenigen, die Bildschirmlesegeräte verwenden, enorm zugute kommen. Alternativtext und barrierefreie Bilder können auch für Ihr Suchmaschinenranking von Vorteil sein.

Abgesehen von Alt-Text ist es wichtig, dass die Bilder selbst zugänglich dargestellt werden. Für die Zwecke der WCAG wird der Farbkontrast als Verhältnis gemessen. Es gibt viele Apps und Browsererweiterungen, mit denen dieses Verhältnis gemessen werden kann.

Während beiläufige Bilder zur Dekoration keine Kontrastanforderungen haben, sollte Text über Hintergrund ein Kontrastverhältnis von 4,5:1 haben. Grafische Elemente wie Diagramme und UI-Elemente wie anklickbare Symbole haben eine Anforderung von 3:1.

Schließlich ist fast 1 von 20 Menschen farbenblind. Überlegen Sie, welche Farbkombinationen für diese Benutzer problematisch sein könnten.

Es gibt viele verschiedene Arten von Farbenblindheit. Apps können verwendet werden, um zu simulieren, wie Ihre Website für farbenblinde Benutzer erscheint. Noch besser, wenden Sie sich an Menschen mit Farbenblindheit oder anderen Sehbehinderungen, um herauszufinden, wie nützlich Ihre Website ist.

5. Stellen Sie die Barrierefreiheit des Touchscreens sicher

Es ist leicht, in die Falle zu tappen, zu glauben, dass Ihre Desktop-Site die „Standard“-Site ist. Die Nutzung von Smartphones und Tablets nimmt aufgrund seiner Bequemlichkeit bei allen Benutzern weiter zu. Diese Geräte sind im Allgemeinen auch günstiger als Laptops oder Desktops.

Berücksichtigen Sie die Zugänglichkeit Ihrer Website für Nutzer mit geringem Einkommen und achten Sie auf Ihre mobile Website.

Das Tippen und Wischen sollte einfach und intuitiv sein. Der Zweck Ihrer Links sollte klar sein und Sie sollten darauf abzielen, Tippfehler zu minimieren.

Denken Sie daran, dass ein Finger viel größer als ein Cursor ist und die Sicht des Benutzers auf den Bildschirm verdeckt. Sie können dies mit großen, gut angeordneten Tasten tun. Die WCAG schreibt eine Schaltflächengröße von 44 x 44 Pixel vor.

Berücksichtigen Sie bei Ihrer Touchscreen-Optimierung die physischen Bedürfnisse der Kunden. Behinderungen können bedeuten, dass Kunden über eine eingeschränkte körperliche Geschicklichkeit oder Ausdauer verfügen, vermeiden Sie daher erweiterte oder überkomplizierte Berührungsanforderungen.

Die häufig zum Zoomen oder Drehen erforderliche „Kneifen“-Geste kann selbst für behinderte Benutzer anstrengend sein. Vielleicht möchten Sie stattdessen eine tippbare Zoomtaste haben, ein großartiges Zeichen dafür, dass Ihnen der Komfort Ihrer Kunden am Herzen liegt.

6. Sorgen Sie für eine einfache Benutzereingabe

Dies ist eng mit dem Bereich der Touchscreen-Erreichbarkeit verbunden.

Formulare auf Ihrer Website (für Bestellungen, Kontaktaufnahme, Einrichtung eines Kontos usw.) sollten für Ihre Kunden mühelos sein. Stellen Sie sicher, dass alle Felder deutlich mit der erforderlichen Eingabe beschriftet sind.

Sie können auch Platzhalter in Felder einfügen, um zu veranschaulichen, was Kunden eingeben sollen. Beispiel: eine Platzhalter-E-Mail-Adresse wie [email protected]

Selbst bei den zugänglichsten Designs gibt es immer Raum für menschliche Fehler. Es ist wichtig, dass Ihre Website tolerant gegenüber Eingabefehlern ist. Geben Sie Ihren Kunden nicht das Gefühl, sich wegen Fehlern dumm zu fühlen, und machen Sie diese leicht zu beheben.

Der beste Weg ist, Fehler in Echtzeit hervorzuheben, damit Kunden nicht durch lange Formulare zurückscrollen müssen. Verlassen Sie sich nicht nur auf die Farbe, um Fehler anzuzeigen; dies ist für sehbehinderte Benutzer möglicherweise nicht zugänglich.

Machen Sie Fehlermeldungen klar, nicht kryptisch, und geben Sie Kunden die Möglichkeit, eine letzte Überprüfung vorzunehmen, bevor Sie sie senden.

Fehlertoleranz verbessert nicht nur die Barrierefreiheit Ihrer Website. Darüber hinaus fühlen sich die Kunden bei jedem Schritt ihres Umgangs mit Ihnen unterstützt.

Die intuitive und integrative Gestaltung von Formularen ist eine der vielen Möglichkeiten, wie Sie Vertrauen bei Ihren Kunden aufbauen können, indem Sie zeigen, dass Ihnen deren Erfahrung am Herzen liegt.

7. Streben Sie nach informativer Einfachheit

Die Übermittlung von Informationen kommt eindeutig allen zugute, die Ihre Website nutzen. Es hilft Menschen mit Lern- oder Lesebehinderungen, sehbehinderten Benutzern, nicht behinderten Benutzern und Ihren eigenen Mitarbeitern.

Klare Informationen auf Ihrer Website verringern den Druck auf Ihre Kundendienstteams, indem die Anzahl der Klärungsanfragen reduziert wird.

Absätze sollten kurz gehalten werden und das Vokabular sollte nicht komplizierter sein als nötig. Scheuen Sie sich nicht, branchenspezifische Begriffe zu verwenden, die Ihre Kunden verstehen werden, aber Ihre Website ist nicht der Ort, um dieses SAT-Vokabular zu verwenden.

Eliminieren Sie Unklarheiten, wo immer es möglich ist. Ihre genaue Bedeutung sollte immer klar sein und die Funktionen von Links auf Ihrer Website sollten genau beschriftet sein.

Streben Sie ein minimalistisches Design an, das das Wichtigste für Ihre Kunden hervorhebt.

8. Konsistenz bewahren

Für einige behinderte Kunden kann die Änderung erschütternd sein. Es ist zwar in Ordnung, Ihre Website mit der Entwicklung Ihrer Marke zu aktualisieren, aber häufige unnötige Änderungen können Kunden abschrecken.

Wenn sich herausstellt, dass sich Ihre Markenidentität ständig verändert, ist es weniger wahrscheinlich, dass Ihre Kunden Ihnen vertrauen.

Auch auf der Seite des Kundenservice sollte die Konsistenz gewahrt werden.

Lösungen wie Software-Defined Networking können Ihnen dabei helfen, einen zusammenhängenden Service aufrechtzuerhalten. Bewahren Sie einen freundlichen, offenen Ton, um sicherzustellen, dass sich alle Ihre Kunden unterstützt fühlen.

Einige Kunden benötigen möglicherweise häufiger wiederholte Informationen. Darauf sollte Ihr CS-Team vorbereitet sein, aber es lohnt sich auch, die Informationen leichter zugänglich zu machen.

Barrierefreiheitsfunktionen wie Farbkontrast und Alternativtext sollten in allen Bereichen Ihrer Website einheitlich sein.

Es mag verlockend sein, behinderten Benutzern eine völlig andere Version Ihrer Website anzubieten. Dies kann jedoch anders sein und diesen Kunden das Gefühl geben, dass sie eine Last sind. Integrieren Sie stattdessen die Barrierefreiheit von Grund auf in Ihre Website, zum Nutzen aller Ihrer Kunden.

9. Halten Sie Ihre Website glatt

Ein weiteres Problem der Barrierefreiheit ist die Tatsache, dass nicht jeder Zugang zu schnellem Internet oder leistungsstarker Hardware hat.

Kunden in ländlichen Gebieten, in Entwicklungsländern oder Kunden mit geringem Einkommen können Probleme mit Ihrer Website haben.

Gestalten Sie Ihre Website so, dass Nutzer auswählen können, ob sie datenfressende Inhalte wie Videos anzeigen möchten. Es gibt viele Möglichkeiten, Verzögerungen auf Ihrer Website zu reduzieren, um diese Kunden zu nutzen.

Überlegen Sie noch einmal, wie Kunden auf Ihre Website zugreifen.

Denken Sie darüber nach, welche Geräte sie verwenden und in welchen geografischen Gebieten sie sich befinden. Wie auch immer die Kunden Ihre Website sehen, sie sollten ein müheloses Erlebnis genießen. Sie möchten nicht, dass Ihre Kunden das Gefühl haben, dass die Nutzung Ihrer Website eine umständliche Aufgabe ist.

Stellen Sie eine straffe, qualitativ hochwertige Codierung sicher, um frustrierende Fehler zu vermeiden. Versuchen Sie, die Anzahl der Seiten zu reduzieren, die Ihre Kunden bei der Erledigung von Aufgaben durchklicken müssen.

Halten Sie Formulare auf so wenige Seiten wie möglich. Niemand wartet gerne darauf, dass alle paar Sekunden neue Seiten geladen werden, besonders wenn die Verbindung schlecht ist.

10. Erstellen Sie eine visuelle Hierarchie im Website-Design

Ein roter Faden in vielen der besten Site-Designs ist eine klare visuelle Hierarchie. Dies bedeutet, dass die Navigation einfach ist und es offensichtlich ist, welche Schritte Benutzer für verschiedene Aufgaben unternehmen sollten.

Sie können die Nutzung Ihrer Website durch die Kunden analysieren und die am häufigsten verwendeten Funktionen in den Vordergrund stellen. Vermeiden Sie „Kacheln“, da dies leicht überwältigend und nicht besonders klar ist.

Sie können verwandte Funktionen mit einheitlichen Designoptionen wie Farbe und Form gruppieren. Sie sollten sich jedoch nicht nur auf diese Funktionen verlassen. Wie besprochen, können sie unzugänglich sein. Verwenden Sie auch Text für Screenreader.

Der Zweck der visuellen Hierarchie besteht darin, es Ihren Kunden schneller und einfacher zu machen, Ihre Website zu verwenden und zu durchsuchen.

Nutzen Sie Ihre Designauswahl, um Kunden zu relevanten Abschnitten Ihrer Website zu leiten. Verstehen Sie die Bedürfnisse Ihrer Kunden und betonen Sie, was ihnen am wichtigsten ist

Abschließende Worte zur Inklusivität

Letztendlich ist die Philosophie hinter Zugänglichkeit und Inklusivität, dass behinderte Benutzer genauso wertvoll sind wie jeder andere Benutzer. Dies mag offensichtlich erscheinen, aber überraschend viele Marken setzen dies mit ihren Website-Designs nicht in die Praxis um.

Wenn Sie die Extrameile gehen, um sicherzustellen, dass alle Ihre Kunden eine gute Erfahrung machen, bauen Sie Vertrauen und Loyalität in Ihrer Basis auf. Ihre Kunden werden zufriedener sein und Sie werden sich als ein Unternehmen abheben, das sich wirklich interessiert.

Biografie des Autors

John Allen ist Director, Global SEO bei RingCentral, einem globalen Anbieter von UCaaS-, VoIP- und Auto-Dialer-Software. Er verfügt über mehr als 14 Jahre Erfahrung und einen umfassenden Hintergrund in der Entwicklung und Optimierung von digitalen Marketingprogrammen. Er hat für Websites wie Vault und 3DCart geschrieben.