Barrierefreies Webdesign ist für Unternehmen langsam in den Vordergrund gerückt - aber es richtig zu machen, erweist sich immer noch als Herausforderung.
Benutzer, die unzählige Communities repräsentieren, äußerten sich lautstark über die mangelnde Zugänglichkeit beim Zugriff auf Online-Ressourcen, was letztendlich zu Änderungen führt.
Unabhängig davon, in welchem Geschäftsbereich man existiert, kann man durch Integration mehr Benutzer erreichen barrierefreies Design ist eine gute Geschäftspraxis.
Nicht jeder greift auf die gleiche Weise auf die Online-Welt zu. Benutzer mit Beeinträchtigungen - kognitiv, hörend, motorisch, sprechend und visuell - interagieren unterschiedlich mit Websites.
Wir teilen einen vollständigen Leitfaden zur Einführung barrierefreier Entwurfspraktiken im Jahr 2020.
Einfachheit im Design ist nicht nur wichtig für die Zugänglichkeit, sondern lehnt sich auch an den Grafikdesign-Trend des Minimalismus an, der 2020 antritt.
Je klarer das visuelle Layout ist, desto besser ist die Benutzererfahrung. Dies liegt daran, dass eine endgültige Hierarchie der Elemente auf der Seite erstellt wird.
Um ein einfaches und zugängliches Design zu erstellen, sollten ähnliche Elemente gruppiert werden, je nachdem, wie sie sich in Bezug auf Größe und Farbe zueinander verhalten.
Aufeinanderfolgende Elemente sollten in unterschiedlichen Hierarchien angeordnet werden, damit Benutzer leicht verstehen können, wie ein Abschnitt zu einem anderen führt.
Das Website-Design sollte auch Wegweiser und Symbole enthalten, damit Benutzer problemlos auf der Website navigieren können.
Der stetige Anstieg in Smartphone- und Tablet-Nutzung hat zu einem stärkeren Fokus auf responsives Design geführt - und dies ist auch wichtig für die Erstellung barrierefreier Designs.
Bildschirme gibt es in verschiedenen Formen und Größen. Designer sollten sich darüber im Klaren sein, welche Informationen und Elemente verloren gehen, wenn sie von verschiedenen Benutzern auf verschiedenen Bildschirmen angezeigt werden.
Es ist am besten, die Ziele jeder Seite zu definieren - implementieren Sie a Projektmanagementplan für die Neugestaltung Ihrer Website mit klaren Zielen für die Websiteseiten.
Sobald diese Ziele festgelegt wurden, können Sie ausgewählte Elemente für kleinere Bildschirme hervorheben und bestimmen, welche sicher ausgeblendet werden können.
Die Implementierung reaktionsschneller Designelemente ist jedoch nur ein Teil des Prozesses. Designer müssen sie auf mehreren Geräten testen, um sicherzustellen, dass die Funktionalität in der Nähe der Webversion bleibt.
Apropos responsives Design: Je kleiner ein Bildschirm wird, desto schwieriger kann es für Benutzer sein, Schaltflächen oder Symbole auf der Seite zu drücken.
Das versehentliche Drücken der falschen Taste kann für alle Benutzer zu Frustration führen. Bei Personen, die ein zugänglicheres Design benötigen, kann die Erfahrung dazu führen, dass sie die Website vollständig verlassen.
Beim Entwerfen CTA-Tasten Stellen Sie für Ihre Website sicher, dass sie groß sind und genügend Platz um sie herum haben, damit sie leicht sichtbar sind.
Laut Google beträgt die beste Größe für Schaltflächen 48 x 48 Pixel. Dies ist die empfohlene Größe für den bequemsten Tippbereich.
Außerdem sollten Schaltflächen nicht zu viel Text enthalten - maximal zwei Wörter sollten ausreichen.
Quelle: Venngage
Lesbare Schriftarten sind erforderlich, um barrierefreie Designs zu erstellen. Wenn die Schrift zu klein ist, kann sie niemand lesen. Für Benutzer mit Sehbehinderungen reicht dies aus, um die Website zu verlassen.
Nach den Richtlinien von Google ist 16px die kleinste zugängliche und lesbare Größe für eine Website. Dies sollte der Standard für Designer sein.
Je schwerer und dunkler eine Schrift ist, desto leichter ist sie zu sehen. Helle Schriften können leicht im Hintergrund verschwinden und das Lesen unmöglich machen.
Die Arten der implementierten Schriftarten müssen für Benutzer angepasst werden. Kursive Schriftarten können eine bestimmte Ästhetik vermitteln, sind jedoch für einige Benutzer und Bildschirmleser zu leicht, um sie zu erkennen.
Stattdessen Verwenden Sie kostenlose Web-Schriftarten wie Roboto, Open Sans oder Alfa Slab One, die lesbar und beliebt sind - Designer müssen also keine neuen Schriftarten in ihr CMS laden.
Aber es ist nicht nur die Art der Schriftart, die man verwendet, die für ein barrierefreies Design von Bedeutung ist - es kommt auch darauf an, wie man sie verwendet.
Mit Hyperlinks verknüpfte Wörter und Ausdrücke müssen deutlich gemacht werden. Stellen Sie sicher, dass sie unterstrichen sind und eine andere Farbe haben, damit Benutzer sie leicht sehen und nicht versehentlich darauf klicken können.
Der Ankertext für Hyperlinks muss beim Erstellen barrierefreier Webdesigns beachtet werden. Es reicht nicht aus, auf Wörter wie "Lesen Sie mehr" oder "Klicken Sie hier" zu verlinken.
Wenn der Ankertext und der Hyperlink für Bildschirmleser nicht übereinstimmen, kann dies zu Verwirrung beim Benutzer führen.
Stattdessen sollte der Ankertext so genau wie möglich mit der URL übereinstimmen - wenn es eine genaue Übereinstimmung sein kann, noch besser.
Dieser Prozess hat einen zusätzlichen Vorteil für Unternehmen: Durch das Anpassen des Ankers an den Link wird die Website nicht nur zugänglicher, sondern auch verbessert die Möglichkeiten zum Linkaufbau.
Neben dem Ankertext müssen Designer auch sicherstellen, dass Alt-Text oder Alt-Tags für die Barrierefreiheit optimiert sind.
Alle visuellen Elemente sollten Alternativtext enthalten, der von Bildschirmlesern aufgenommen werden kann. Je aussagekräftiger, desto besser verbessern sie die Benutzererfahrung für Personen mit Sehbehinderungen.
Wir haben die Bedeutung von Hierarchien für die Anordnung der Elemente auf der Seite erwähnt - aber auch innerhalb des Inhalts muss eine klare hierarchische Struktur vorhanden sein.
Screenreader scannen den Inhalt nach der Position des Texts und der Aufteilung der Überschriften.
Um so zugänglich wie möglich zu sein, muss der Inhalt durch unterschiedliche Überschriften unterteilt werden: Titelüberschriften h1, h2 für Unterüberschriften, h3, h4 usw. für weitere Unterüberschriften.
Diese Überschriften erleichtern es den Lesern nicht nur, den Fluss des Inhalts zu verfolgen, sondern Screenreader können den Inhalt auch entsprechend organisieren.
Eine andere Möglichkeit, die Zugänglichkeit zu verbessern, besteht darin, wo immer möglich Untertitel hinzuzufügen. Videos und Animationen sollten immer beschreibende Untertitel enthalten, ebenso wie Audioinhalte.
Das Strukturieren von Inhalten verbessert die Benutzererfahrung und den Umrechnungstrichter verbessern.
Quelle: Venngage
Farben sind ein massiver Teil von Marketing- Sie werden verwendet, um Emotionen und Verbindungen hervorzurufen, die Markenbeziehungen und Conversion-Raten fördern.
Obwohl Farben mehrere Marketingzwecke haben, werden sie für alle Website-Besucher optimiert? Was ist mit Menschen mit Sehbehinderungen wie Farbenblindheit?
In der obigen Anleitung wird erläutert, welche Farben zusammen verwendet werden sollten, um für alle Leser zugänglich zu sein. Kontrastfarben sind immer besser lesbar.
Ein weiterer Punkt, den Designer beachten sollten, ist, die Farbe nicht als alleinigen Indikator für Aktionen, Anweisungen oder Unterschiede zu verwenden.
Verwenden Sie stattdessen Text für Beschriftungen, Platzhalter und Schaltflächen, damit Benutzer wissen, wie sie sich von anderen Elementen unterscheiden.
Fügen Sie außerdem eindeutige Benachrichtigungen hinzu Formenbauer Wenn ein Feld obligatorisch ist oder ein Fehler vorliegt, verlassen Sie sich nicht auf die Farbe, um diese zu übermitteln, da dies möglicherweise nicht klar ist und zu Frustration führt.
Bei der Erstellung barrierefreier Designs ist es wichtig, den Benutzern eine flexible Steuerung der Website zu ermöglichen.
Fügen Sie Schaltflächen hinzu, um die Schriftgröße zu ändern. Wenn Benutzer eine größere Schriftgröße als die Standardschriftgröße benötigen, sollten sie diese Änderung vornehmen können, um die Navigation auf der Site zu vereinfachen.
Seitenlayouts, auf die über Webbrowser und Mobilgeräte zugegriffen wird, sollten skalierbar sein, damit Benutzer nach Bedarf hinein- und herauszoomen können.
Entfernen Sie immer die Autoplay-Einstellungen für Audio und Video auf der Website. Geben Sie den Benutzern die Möglichkeit, den Ton einzuschalten, wenn sie möchten.
Vermeiden Sie zeitgesteuerte Formulare so weit wie möglich. Wenn ein Timer hinzugefügt werden muss, geben Sie den Benutzern die Möglichkeit, sich mehr Zeit zu nehmen, und geben Sie klar an, wie viel zugewiesen ist.
Die meisten Website-Builder Geben Sie den Designern die Kontrolle über diese Aspekte - nutzen Sie sie, um die Zugänglichkeit zu verbessern.
Barrierefreies Design muss für Unternehmen Priorität haben - es verbessert nicht nur die Benutzererfahrung, sondern ermöglicht es Marken, ein breiteres Publikum zu erreichen.
Mit dem oben genannten Leitfaden können Designer umfassendere Websites erstellen, die mehr Zielgruppen ansprechen und langfristige Conversions verbessern.
Bildnachweis: Foto von Tranmautritam aus Pexels
Quelle: https://datafloq.com/read/accessible-design-a-complete-guide-2020/8846
