Usability ist keine exakte Wissenschaft. Was ein Besucher für hilfreich hält, hält einen anderen für störend. Trotz dieser Unsicherheit und Komplexität sollten Sie stets bemüht sein, Ihre Website für die Personen, die Sie erreichen möchten, so zugänglich wie möglich zu machen. Sie werden feststellen, dass ein bisschen Anpassung an die speziellen Bedürfnisse einer Minderheit von Benutzern die Funktion Ihrer Website für alle Benutzer drastisch verbessern kann. Hier ist unsere Liste von zwölf Hindernissen für die Zugänglichkeit, die zu vermeiden sind, zusammen mit einigen Beispielen, in denen Websites dargestellt werden, die in diesen Bereichen entweder überragend sind oder ein schlechtes Ergebnis zeigen.
Captchas
Webentwickler scheinen Captchas zu lieben, aber die Benutzer können sie nicht leiden. Gewiss, sie sind nicht alle schlecht, aber die meisten von ihnen sind entweder nicht lesbar oder unnötig kompliziert wie die oben genannte. Ein weiteres wichtiges Thema ist, dass Captchas oft eine ernsthafte Straßensperre für Sehbehinderte darstellen. Wenn Sie unbedingt ein Captcha verwenden müssen, stellen Sie sicher, dass die meisten Menschen es lesen / verstehen können und über Optionen für Benutzer verfügen, die es nicht sehen können.
Nicht verwenden? Alt? Attribute auf Bildern
Es ist definitiv eine gute Praxis, immer ein hilfreiches Stück einzufügen alt Text für die Bilder auf Ihrer Website. Auf diese Weise werden Benutzer, die Ihre Bilder nicht anzeigen können, mit einem Textäquivalent dargestellt. Beachten Sie, dass nicht alle Browser das Problem behandeln alt Attribut auf die gleiche Weise. Aus diesem Grund verwechseln viele Entwickler den Zweck von alt und TitelIch denke, diese Bilder mit einem alt Attribut sollte einen Tooltip anzeigen. In Wirklichkeit ist das Titel Attribut ist das, was einen Tipp anzeigen soll, wenn Sie mit der Maus darüber fahren (siehe das Smashing Magazine-Beispiel oben).
Pop-Ups für Inhalte verwenden
Die meisten modernen Browser stellen sicher, dass Ihre Inhalte blockiert werden, wenn sie in Form eines Popup-Fensters angezeigt werden. Dies bedeutet, dass Sie das Risiko eingehen, mehrere mögliche Benutzer zu verlieren, die einfach weitermachen, wenn sie feststellen, dass Ihre Website nicht mit ihrer Einrichtung kompatibel ist. Nur die engagiertesten Besucher untersuchen das Problem auf Ihren Hilfeseiten, um herauszufinden, wie Sie das Problem lösen können.
Falsche Etiketten auf Formularen
Besuchen Sie Mint.com (siehe oben) und überprüfen Sie das Anmeldeformular. Beachten Sie, dass Sie ein bestimmtes Feld auswählen können, egal ob Sie auf das Feld selbst oder auf das angehängte Etikett klicken. Dies liegt daran, dass die Mint-Entwickler die Etikette Element richtig. Die Lektion hier ist, dass das einfache Beschriften Ihrer Formulare mit reinem Text nicht ausreicht. Verwenden Sie stattdessen immer die Etikette Element zur Maximierung der Benutzerfreundlichkeit. Dies bietet nicht nur einfach zu wählende Felder, sondern stellt auch sicher, dass Bildschirmleseprogramme und automatische Ausfüllfunktionen ordnungsgemäß mit Ihren Formularen funktionieren.
Nicht erkennbare Links
Der Screenshot oben zeigt einen Abschnitt der Startseite von Tutorial 9. Beachten Sie, dass Sie sofort zwischen dem Text, der einen Link enthält, und dem Text unterscheiden kann, der keinen Link enthält. Zu den gängigen Methoden zum Erstellen von Link-Differenzierungen gehören Farbkontrast, Unterstriche und Rollover-Effekte. Beachten Sie, dass in Tutorial 9 tatsächlich alle drei Methoden verwendet werden! Dies erhöht die Benutzerfreundlichkeit erheblich, da Benutzer klar erkennen können, wo sie klicken müssen, wenn sie auf weitere Inhalte zugreifen möchten.
Vage Link-Text
Betrachten Sie die folgenden Beispiele:
1. Um unsere CSS-Galerie zu besuchen, klicken Sie hier.
2. Schauen Sie unbedingt in unserer CSS-Galerie vorbei!
Beim Scannen einer Seite konzentrieren sich Ihre Augen wahrscheinlich mehr auf differenzierte Links als auf den restlichen Text, da sie hervorstechen. Das erste Beispiel scheint ein guter Weg zu sein, weil der Aufruf zum Handeln hier klicken. ist das, was dir ins Auge fällt. Ohne jedoch den gesamten Satz richtig zu lesen, klicken Sie hier. Keine Aktion, weil der Benutzer nicht sicher ist, wohin er führt. Im Gegensatz dazu kann der zweite Link sofort als Pfad zu einer CSS-Galerie erkannt und verstanden werden, unabhängig davon, ob der Benutzer den Inhalt zuvor gelesen hat oder nicht.
Überladener Inhalt und unzureichender Abstand
Die Seite oben ist wirklich mehr eine Parodie als ein richtiges Beispiel, aber sie vermittelt den Punkt und war viel zu lustig, um sie nicht aufzunehmen. Vereinfachen Sie Ihren Inhalt nicht zusammen oder fügen Sie eine ausgefallene Menge an Bildern oder Text hinzu (Nachrichtenberichte und Blogbeiträge sind Ausnahmen). Kleinunternehmer, die gerade erst im Web starten, fallen fast immer diesem Fehler zum Opfer und fügen Absatz für Absatz Informationen hinzu, die niemand jemals lesen wird. Das Web ist eine visuelle Bestie. Die Informationen auf Ihrer Seite sollten innerhalb von Sekunden übersichtlich sein und leicht verständlich sein.
Das Ändern der Schriftgröße sollte das Layout nicht beschädigen
Nicht jeder im Web ist ein 19-jähriger mit einer 20/20 Vision. Viele Benutzer, jung und alt, müssen ihre Standardtextgröße erhöhen, um eine Seite lesbarer zu machen. Informieren Sie sich, was mit Fox News (und einigen anderen beliebten News-Sites) passiert, wenn Sie die Schriftgröße erhöhen. Das Layout ist vollständig zerstört: Die Navigationslinks laufen alle zusammen, die Schaltflächen befinden sich weit entfernt von ihrem zugehörigen Text und die Anzeigen, die auf der rechten Seite ausgeführt werden, sind vollständig verschwunden. Diese Art von Versehen kann einen großen Teil der Besucher verunsichern.
Schlechter Kontrast zwischen Text und Hintergrund
Diese Jungs können ihre Designfähigkeiten steigern, aber sie haben ihre Glaubwürdigkeit ruiniert, indem sie eine Grafik verwenden, die fast unmöglich zu lesen ist. Ich verstehe, dass Kunden manchmal verlangen, dass Sie ein Foto mit null Textfreiraum verwenden. Es ist jedoch Ihre Aufgabe als Designer, herauszufinden, wie einfach lesbarer Text in das Bild integriert werden kann. Verwenden Sie Fettdruck, Striche, Schlagschatten, Farbbalken und alles, was Sie sich vorstellen können, um Ihre Nachricht von ihrem Hintergrund zu unterscheiden.
Überbeanspruchung von Flash
Missverstehen Sie das nicht als Flash-Bashing-Mantra. Flash hat das Internet zu einem Reichtum gebracht, durch den wildeste Träume eines Entwicklers wahr werden können. Ich bin genauso anfällig dafür, von einer erstaunlichen und einzigartigen Flash-Site wie der nächste Kerl eingesaugt zu werden.Seien Sie jedoch äußerst vorsichtig, wenn Sie Flash so stark in Ihre Website integrieren, dass es ohne Flash nicht funktioniert.
Stellen Sie sicher, dass Sie den Grund für die Existenz der Website und Ihren Zielmarkt für die Website sorgfältig prüfen. Wenn Sie eine Online-Anwendung oder eine Augenweide für Besucher erstellen möchten, ist Flash möglicherweise der richtige Weg. Wenn Ihr Zielmarkt jedoch die breite Öffentlichkeit ist, kann eine Flash-Site aus verschiedenen Gründen eine schlechte Idee sein. Die erste ist die Benutzerfreundlichkeit. Flash-basierte Website-Entwickler können oft so besessen davon sein, etwas hübsch zu machen, dass man sich keine Gedanken darüber machen muss, ob ein Benutzer tatsächlich herausfinden kann, wie er die Website verwendet oder nicht. Ich habe festgestellt, dass namhafte Werbeagenturen diesem Trend folgen, indem sie schöne Websites erstellen, deren Verwendung einige Minuten in Anspruch nehmen kann. Ein weiterer Grund, Flash zu vermeiden, ist, dass viele Benutzer von Flash so verärgert sind, dass sie es vollständig deaktivieren. Überlegen Sie sich immer, ob es akzeptabel ist, mobile Besucher zu opfern. Viele Smartphones wie das iPhone unterstützen Flash noch nicht und werden daher von vielen Mainstream-Websites ausgeschlossen.
Komplizierte Dropdown-Menüs
Es gibt eine feine Linie zwischen einem hilfreichen Menü und einem überladenen Durcheinander, und die Entwickler bei Microsoft flirten damit. Auf der einen Seite bieten sie Benutzern einen einfachen Zugang zu ihrer gesamten Produktpalette. Auf der anderen Seite werfen sie den Benutzern eine Menge mehr Inhalte zu, als sie es in einem einfachen Dropdown-Menü gewohnt sind. Dies kann akzeptabel sein, wenn Sie auf Alle Produkte klicken. Über die Schaltfläche gelangen Sie zu einer speziellen Seite mit der Liste der Produkte. Dies ist jedoch nicht der Fall (durch Klicken auf nur das Menü geschlossen). Verbringen Sie eine Minute auf ihrer Website und Sie werden feststellen, dass fast alle Navigationsmenüs mit kleinen (wahrscheinlich schwer lesbaren), monotonen Links gefüllt sind.
Der Punkt ist, dass das Überfüllen von Menüs in der Regel aus dem Versuch resultiert, die Benutzerfreundlichkeit zu erhöhen, während dies in der Realität zu einer Verringerung der Benutzerfreundlichkeit aufgrund der übermäßigen Menge an Informationen führt, die durchgespielt werden müssen, um dorthin zu gelangen, wo Sie hin wollen.
Fazit
Es gibt also zwölf einfache Möglichkeiten, Ihre Website für die Massen freundlicher zu machen. Ich hoffe, dieser Artikel hat Ihnen dabei geholfen, ein paar Möglichkeiten zu finden, wie Sie den Zugang zu Ihren Designs verbessern können. Teilen Sie uns mit, was Sie von diesen Tipps halten. Fühlen Sie sich frei, allen oder allen völlig zu widersprechen, und lassen Sie uns wissen, welche kleinen Dinge Sie bezüglich Zugänglichkeit beeinträchtigen.