10 Möglichkeiten, Ihre Website barrierefrei zu gestalten

Veröffentlicht: 2022-02-16

Ich bin frustriert von modernem Webdesign. Und ich bin sicherlich frustriert über die meisten Design- und Vorlagendesigner, die ihre Arbeit verkaufen, ohne auf globale Zugänglichkeit zu prüfen.

Viele Designer nehmen tatsächlich gute, zugängliche CMS und erstellen dann Designs mit großen Zugänglichkeitsproblemen.

Ich bin Anwalt, Website-Designer und Berater für Barrierefreiheit/Vielfalt in Australien. Nachdem ich den Unternehmens-, Regierungs- und Bildungssektor beraten habe, finde ich, dass viele Websites nicht zugänglich sind und vielen Benutzern eine schlechte Erfahrung bieten.

Warum ist Barrierefreiheit wichtig?

2010 hatten 10 % der Menschen in den Industrieländern eine Leseschwäche. In den nicht entwickelten Ländern waren es 15 %.

In Australien wird Barrierefreiheit als wichtig genug angesehen, dass ich Sie vor Gericht bringen könnte, wenn Ihre Website nicht barrierefrei ist. Schockiert?

Nein, ich würde niemals einen Kundenfokus auf „Sites für Blinde“ empfehlen, sondern auf Sites, die für alle zugänglich sind. Dazu gehören Menschen mit einer Lesebehinderung, einer körperlichen Behinderung, einer Hörbehinderung – sogar die älteren Generationen. Kurz gesagt, ein großer Prozentsatz Ihres gesamten Publikums kann einfach nicht so auf Ihre Website zugreifen, wie Sie es tun.

Teuer? Nein, tatsächlich geht es um Designstandards, denn das ist echtes Basic-Zeug.

Hier sind zehn Schritte, die Sie unternehmen können, um sicherzustellen, dass Ihre Website barrierefrei ist.

#1. Machen Sie Ihre Website benutzerfreundlich

Ich brauche euch nicht zu sagen, wie man designt. Aber diese drei Schlüsselprinzipien werden Benutzern mit Behinderungen helfen:

Machen Sie Websites leicht lesbar und verständlich
Erleichtern Sie die Navigation auf Websites
Erleichtern Sie die Verwendung von Websites auf Mobilgeräten

Dies bringt Sie der Barrierefreiheit nahe und hilft auch Suchmaschinen, Ihre Website zu lieben!

Die Screenreader, mit denen ich meine Websites teste, sind genau wie die Google-Roboter (außer dass Blind Tech zuerst da war).

#2. Testen Sie mit Barrierefreiheitssoftware

Wussten Sie, dass PCs über eine Eingabehilfen-Software verfügen, die beim Navigieren und Lesen des Bildschirms hilft? Wahrscheinlich hast du das schon, aber wusstest du auch, dass bei mobilen Geräten eine im Kern integrierte Barrierefreiheitssoftware vorhanden ist? Diese Software kann Personen vorlesen, einschließlich Personen mit Sehbehinderung:

Apple (iOS) verwendet VoiceOver;
Android verwendet Talkback;
Windows verwendet die Sprachausgabe.

Nahezu alle Website-Designer fügen ein Menü in die Vorlage ein, aber 95 % können mit keiner der oben genannten Technologien gelesen werden! Die meisten dieser Barrierefreiheitsdienste können ein vorhandenes Menü nicht erkennen, da es falsch codiert ist. Meistens besteht das Problem darin, dass das Menü schlecht codiert oder nicht eindeutig gekennzeichnet ist.

Es lohnt sich, einige Websites auf Ihr Telefon zu laden und die Barrierefreiheitsfunktionen zu aktivieren. Prüfen Sie, ob das Menü Ihrer Website funktioniert.

#3. Schreiben Sie nicht alles in Großbuchstaben

Dies ist wahrscheinlich die grundlegendste Änderung, die jeder an seiner Website vornehmen kann: Schreiben Sie nicht in Großbuchstaben.

Dies ist wissenschaftlich getestet und bewiesen, WEIL GROSSBUCHSTABEN FÜR JEDEN SCHWER ZU LESEN SIND!

Die am häufigsten verwendete Großschreibung findet sich in Menüpunkten und Schaltflächen. Sie helfen, Ihre Botschaft zu verbreiten, wenn Sie normal mit normaler Großschreibung schreiben, es sei denn, Sie haben einen bestimmten Designzweck – wie eine Marke oder ein Logo.

#4. Erklären Sie Ihre Links klar

Die Schaltflächen „Weiterlesen“ oder „Hier klicken“ sagen Google (oder denjenigen, die Screenreader verwenden) nicht, was sich hinter dem Link verbirgt. Nehmen Sie einfach Ihren Link aus dem Kontext, um zu sehen, ob er Sinn macht. Macht "Weiterlesen" in der Mitte einer Seite für Sie Sinn? Weiterlesen was?

#5. Verwenden Sie gute kontrastierende Stile

Das bedeutet nicht, dass Sie Ihre Inhalte töten – es bedeutet, es für Sehbehinderte einfach zu machen. Hier ist ein Tipp ... schalten Sie Ihren mobilen Bildschirm auf halbe Leistung und versuchen Sie, eine Website zu lesen. Wie sieht es im Hellen und im Dunkeln aus?

#6. Verwenden Sie „Zum Inhalt springen“-Links

Stellen Sie sich vor, Sie nicken 30 Mal mit dem Kopf, bevor Sie den Hauptinhalt gelesen haben! Menschen mit einer Lesebehinderung müssen dies tun, wenn Sie ihnen nicht erlauben, das Menü zu überspringen. Eigentlich ist das dasselbe für die Verwendung von Überschriften-Tags, H1 bis H4 helfen Suchmaschinen und Menschen mit einer Lesebehinderung, auf Ihrer Website zu navigieren.

Oh, und verstecken Sie den Link nicht außerhalb des Bildschirms! Sehbehinderte Menschen verwenden oft Lupen und suchen diese Links manuell (nicht über die Tastatur).

#7. Verwenden Sie keine Popups mehr

Hören Sie zumindest auf, diejenigen zu verwenden, die wir nicht mit „esc“ entfernen können. Wussten Sie, dass unsere Software grundsätzlich nicht in diese Popup-Boxen gelangen kann? Und normalerweise lesen wir am Ende, was sich hinter der Box verbirgt - es sieht für Sie ausgegraut aus, aber nicht für uns.

Wenn Sie Pop-ups verwenden:

Machen Sie sie so, dass sie mit der „Esc“-Taste geschlossen werden können.
Machen Sie sie so, dass unsere Software die Box lesen kann, nicht den Text dahinter.
Geben Sie Einzelheiten zu einer alternativen Möglichkeit an, den Inhalt zu finden, oder füllen Sie das Formular aus – „oder besuchen Sie unsere xxxx-Seite für weitere Einzelheiten“.

#8. Textgrößenanpassungen können in manchen Situationen nützlich sein

Persönlich sind Textgrößenanpassungen weitaus weniger wichtig als das Springen zu Inhaltslinks. Dies liegt daran, dass eine Person mit einer Lesebehinderung (einschließlich der älteren Generation) entweder die Windows-Lupe oder ein spezielles Produkt verwendet – wie Zoom Text, Magic Eyes oder andere kostenlose Software. Meiner Erfahrung nach zerstören Text-Resizer im Allgemeinen mobile Inhalte - und reagieren sogar noch weniger als das Kneifen oder Verwenden von Kernfunktionen für die mobile Zugänglichkeit.

Außerdem kann der Benutzer mit der adaptiven Technologie, die den Text in der Größe ändert, ihn aus- und einschalten, damit er sich auf dem Bildschirm wiederfindet (einige zoomen, sodass er jeweils nur 1/8 des Bildschirms sehen kann). Nichtsdestotrotz können Textanpassungen immer noch relevant sein und es wert sein, für Regierungsseiten eingesetzt zu werden - nur keine Top-10-Priorität für mich.

#9. Verwenden Sie Schriftsymbole anstelle von Bildsymbolen

Diejenigen, die die Vergrößerung verwenden, können jeweils nur etwa 1/8 einer Website sehen, und diejenigen, die Mobiltelefone verwenden, laden normalerweise die bildfreien Versionen – indem sie auf die Schaltfläche „Reader“ klicken. Ich könnte einen Beitrag über die Tatsache schreiben, dass die meisten „Bildsymbole“ bei maximalem Zoom extrem verpixeln, Schriftsymbole jedoch nicht (na ja, jedenfalls nicht so sehr).

#10. Fügen Sie Videotranskripte hinzu

Es hat keinen Sinn, ein YouTube-Video auf eine Website zu stellen, wenn es völlig stumm ist, und es hat auch keinen Sinn, eines zu veröffentlichen, das kein Transkript oder eine Möglichkeit für Hörgeschädigte hat, ihm zu folgen. Das wäre so, als hätte man ein globales Publikum oder einen globalen Kundenstamm, aber nur Informationen auf Japanisch.

Holen Sie sich einfach zum Spaß ein technisches YouTube-Video ohne Sprache und schließen Sie dann die Augen. Hinweis: Das Schließen der Augen repliziert keine Blindheit, da Sie sie einfach wieder öffnen können, aber es macht Spaß.

Ressourcen zur Barrierefreiheit

Diese Websites bieten Richtlinien und Tools zum Überprüfen Ihrer Website:

Web Aim Barrierefreiheitsprüfer
Richtlinien für die Zugänglichkeit von Webinhalten der australischen Regierung
W3C-Validator. Beachten Sie, dass der W3C-Validator viele unnötige Fehler zurückgibt. Sie müssen entscheiden, ob jeder Fehler die Mühe wert ist oder nicht.

Diese Websites bieten Screenreader, mit denen Sie Ihre Desktop-Website testen können:

Job-Zugriff mit Sprache (JAWS)
Ai Squared bietet kostenlose Testversionen an
Window Eyes - Bildschirmleser
NV Access bietet einen völlig kostenlosen Non Visual Desktop Aid (NVDA) Bildschirmleser

Hinweis: Ich empfehle Sitecues nicht: Es ist nicht das, was ich als einfach zu installieren oder effektiv für Menschen mit einer Lesebehinderung bezeichnen würde.

Fazit

Wie bei allem gibt es eine Balance zwischen funktionaler und strikter Einhaltung der Regeln. Keine der Websites meiner Kunden ist nicht 100 % barrierefrei / W3C-konform. Sie sind barrierefrei – und suchmaschinenfreundlich. Sie sind logisch und kontrastreich, haben aber auch Stil und Funktionen für Wirkung.

Wie viele Millionen Menschen auf der Welt haben eine Lesebehinderung? Wie viele potenzielle Kunden?

Egal, ob Sie Websites in Joomla, Drupal, WordPress, reinem HTML oder einer anderen Plattform erstellen, ich hoffe, ich habe Sie davon überzeugt, dass dieses Problem ernst genommen werden sollte, für Ihr Unternehmen und Ihre Kunden.