Beliebte Fehler im universellen Webdesign

Mit der heutigen schicken und wettbewerbsfähigen „Web 2.0“ und Social Media World, Universal Design ist oft vergessen. Es ist verwirrend, warum es viele soziale, technische, finanzielle und rechtliche Gründe gibt, die universelle Designpraktiken unterstützen. Lassen Sie uns einige der vorherrschenden Themen auf Websites heute und in der Art und Weise, wie sie sich auf die wichtigsten universellen Designprinzipien beziehen, diskutieren.

Key Takeaways

• universelles Webdesign wird trotz der sozialen, technischen, finanziellen und rechtlichen Vorteile oft übersehen. Häufige Fehler sind schwer zu lesende Text, unklare Textlinks, übermäßiges visuelles Rauschen, mangelnde Tastaturzugriff und fehlende alternative Text für Bilder.
• Textlesbarkeit ist für das universelle Design von entscheidender Bedeutung. Kleinprodukte Text und geringe Farbkontrast können die Web-Typografie erschweren, die zu lesen ist. Die Verwendung der relativen Größe in CSS anstelle fester Größen kann dazu beitragen, sicherzustellen, dass der Benutzer den Text nach Bedarf ändern kann.
• Tastaturzugriff ist für das universelle Design von wesentlicher Bedeutung. Viele Websites bieten dies nicht an und erstellen Hindernisse für Benutzer. Zu den guten Praktiken gehört die Bereitstellung eines: Focus -Status in CSS, wenn die: Hover -Pseudo -Klasse verwendet wird, und sicherzustellen
Alternativen Text für Bilder bereitstellen, ist ein weiterer wichtiger Aspekt des universellen Designs. Wenn ein Bild relevante Inhalte liefert, muss es mit alternativem Text begleitet werden, um die Zugänglichkeit für alle Benutzer zu gewährleisten, einschließlich derjenigen mit Sehbehinderungen oder langsamen Internetverbindungen.

Die Prinzipien

Überprüfen Sie zunächst die sieben universellen Designprinzipien, einschließlich einiger Web-bezogener Beispiele. Beachten Sie, dass diese Prinzipien natürlich auf viele Branchen außerhalb von Computer und Web angewendet werden, wie z. B. Bauingenieurwesen (Gebäude, Gehwege), Unterhaltung (Filmkinos, Themenparks) und Transport (Busse, Züge).

1. Gerechte Verwendung: nützlich und marktfähig für Menschen mit vielfältigen Fähigkeiten.
   Beispiel: Die Website einer lokalen Regierung ist so konzipiert, dass sie für diejenigen zugänglich ist, die assistive Technologien wie einen Bildschirmleser verwenden.
2. Nutzungsflexibilität: Genehmigt eine breite Palette individueller Vorlieben und Fähigkeiten.
   Beispiel: Das Design einer Airline -Website hält die visuelle Ästhetik in verschiedenen Computeranzeigengrößen.
3. Einfach und intuitiv: leicht zu verstehen, unabhängig von der Erfahrung des Benutzers, dem Wissen, der Sprachkenntnisse oder der aktuellen Konzentrationsniveau.
   Beispiel: Primäre Steuerelemente einer Webanwendung sind sowohl mit Text als auch mit Symbolen gekennzeichnet.
4. wahrnehmbare Informationen: Vermittelt den Benutzern die erforderlichen Informationen effektiv, unabhängig von den Umgebungsbedingungen oder den sensorischen Fähigkeiten des Benutzers.
   Beispiel: Ein Anweisungsvideo mit Bildunterschriften bietet die Möglichkeit, den Dialog zusätzlich zum Hören zu lesen.
5. Fehlertoleranz: Minimiert Gefahren und die nachteiligen Folgen zufälliger oder unbeabsichtigter Aktionen.
   Beispiel: Ein technischer Fehler beim Senden eines Formulars liefert eine klare Erklärung und Optionen für die Fortsetzung.
6. geringer körperlicher Anstrengung: Kann effizient und bequem und mit einem Minimum an Müdigkeit eingesetzt werden.
   Beispiel: Website -Design hat einen ausreichenden Farbkontrast und die Textgröße, die die Augenbelastung minimiert.
7. Größe und Raum für Annäherung und Nutzung: Angemessene Größe und Platz für Annäherung, Reichweite, Manipulation und Verwendung, unabhängig von der Körpergröße, der Körperhaltung oder der Mobilität des Benutzers.
   Beispiel: Eine Website ist so gestaltet, dass ein physikalisch beeinträchtigter Benutzer, der keine Maus verwenden kann

Nachdem wir mit den Prinzipien vertraut sind, untersuchen wir mehrere verwandte Webdesignfragen.

schwer zu lesen

Der erste beliebte Fehler im universellen Design ist Textinhalte, der aufgrund seines Designs für viele schwer zu lesen ist. Dies bezieht sich auf Prinzipien 1, gerechte Verwendung; und 6, geringe physische Anstrengung, insbesondere die Augenbelastung. Beachten Sie, dass kognitive Schwierigkeitsgrad ein separates Problem ist, das nicht im Rahmen dieses Artikels ist. Eine gute Lesbarkeit macht eine Website nutzbarer und ästhetisch ansprechender. Schauen Sie sich übrigens die Webanwendung von Readability.com an, um super einfach zu lesen. Was sind die Probleme? Kleinprobleme Text und geringer Farbkontrast sind zwei wichtige Probleme, die die Webypografie erschweren. Im folgenden Beispiel ist der Haupttextinhalt über einem schwarzen Hintergrund grau, was den Unterschied in der Helligkeit und in den Farbdifferenzen in der Helligkeit fehlschlägt. Die Textgröße ist auf 12 Pixel eingestellt, was für viele Benutzer, einschließlich mir, ziemlich klein ist. Wenn Sie die Textgröße aus dem CSS entfernen, zeigt der Browser die Standardgröße an, die etwas größer und viel lesbarer ist! Anstatt den Standardtext auf 12px oder .75EM festzulegen, versuchen Sie es etwas höher wie 16px oder .95EM. Ein weiterer Best Practice in Bezug auf Text besteht darin, die relative Größe im CSS zu verwenden (EMS oder Prozentsätze) und nicht feste Größen (Pixel oder Punkte), um sicherzustellen, dass der Benutzer den Text nach Bedarf ändern kann, und die Layoutskala mit dem Text zu haben. Weitere gute Richtlinien, einschließlich benutzerfreundlicher Überschriften und ausreichender Linienabstand.

schwer zu bestimmen Textlinks

Standardmäßig wird der hyperlinke Text mit einer Unterstreichung gerendert. Dies ist eine langjährige Konvention im Web-Surfen. Durch das Entfernen dieser Konvention wird die Benutzererwartungen nicht nur ausgebaut, sondern kann den Link auch für diejenigen mit Farbblindheit oder Sehbehinderung nicht zugänglich machen. Oft ist es, dieses Problem zu verschärfen, wenn Links mit einer dunklen Farbe unter schwarzem Text definiert werden. Ähnlich wie oben bezieht sich dies auf die Prinzipien 1 und 6. Mein Optiker erzählt mir, dass das Sehvermögen der Männer ab dem 40. Lebensjahr seine Fähigkeit, zwischen Farben zu unterscheiden, verliert. Und Junge, hat sie recht! Viele Websites haben dunkelblaue Links ohne Unterstreichung, und ich muss meine Augen sicher belasten, um die Textlinks zu bestimmen. Das folgende Beispiel stammt aus einer Nachrichtengeschichte. Können Sie den Textlink sehen? Es ist ziemlich schwierig für mich.

Nachrichten -Websites scheinen dafür bekannt zu sein, blaue Links mit entfernten Untersteinen zu verwenden, selbst von der angesehenen UK -Stelegraph. Um zu lösen, entfernen Sie einfach die Barriere, indem Sie die Untersteuerung zurückgeben. Der Nomena -Blog ist ein gutes Beispiel. Verwenden Sie optional einen mutigen Text oder eine andere visuelle Bezeichnung für einen Textlink wie einen farbigen Hintergrund.

visuelles Rauschen

Verstreute Layouts und Inhaltsüberladung sind nicht nur visuell unattraktiv, sondern nicht sehr nutzbar oder zugänglich. Dies bezieht sich direkt auf Prinzip 3, einfach und intuitiv. Auf einer kalifornischen Webseite der lokalen Regierung, die unten gezeigt ist, gibt es zahlreiche Navigationsbereiche, zwei große Unterabschnittsbannerbilder und nur ein unorganisiertes, verstreutes Erscheinungsbild. Infolgedessen beginnt der Hauptinhalt erst, wenn die „Falten“ der Seite, was offensichtlich nicht ideal ist. Außerdem gibt es keinen Schwerpunkt, keine visuelle Hierarchie, was dazu führt, dass ein Benutzer die Seite noch häufiger nach dem suchen, was der Benutzer benötigt.

Schauen Sie sich im Gegensatz dazu die Websites der australischen Regierung und den USA.gov an. Viel geräumiger und organisierter, was eine nutzbarere Erfahrung schafft. Weitere Beispiele, die „visuelles Rauschen“ erzeugen, sind:

• Navigation: Zu viele Navigationsabschnitte auf einer Seite (wie in Beispiel oben) und zu viele Navigationsebenen können sowohl verwirrend als auch ein Design -Albtraum sein.
• redundante Tooltips: Titelattribute für Textlinks, die den gleichen Inhalt wie der Link selbst haben, erstellt einen Tooltip, der aufdringlich und nicht benötigt wird.
• bedeutungslose Bilder: Verwenden Sie nur ein Bild im Inhalt, wenn es Wert hat. Es sollte die Bedeutung für den Textinhalt wichtig vermitteln.

Keine Tastaturzugriff

Der Zugriff auf Tastatur, die Möglichkeit, einen Bildschirm zu navigieren und mit fokussierbaren Objekten allein mithilfe der Tastatur zu interagieren, ist unerlässlich. Leider bieten viele Websites dies nicht. Genauer gesagt, viele Websites erstellen Hindernisse für Tastaturbenutzer, da HTML von Natur aus Tastatur zugänglich ist. Wenn Sie für ein Mausereignis entwerfen, sollten Sie den gleichen Zugriff für die Tastatur bieten. Dies schafft Geräteunabhängigkeit; Das ist eine gute Sache! Diese Frage bezieht sich auf die Grundsätze 1, gerechte Verwendung; und 2, Flexibilität im Gebrauch. Bei der Codierung einer Website sind mehrere gute Praktiken zu berücksichtigen. Wenn in CSS die: Hover -Pseudo -Klasse verwendet wird, stellen Sie sicher, dass ein: Fokuszustand ebenfalls bereitgestellt wird. Außerdem sollte man den Umriss auf dem Ankerelement niemals entfernen, d. H. A {Umriss: 0} (Seien Sie vorsichtig: Die meisten CSS Stylesheets Reset Stylesheets entfernen Sie Ankerumrisse - achten Sie später wieder in Ihrem eigenen CSS hinzu!). Wenn es unbedingt erforderlich ist, muss eine Art visueller Effekt ersetzen. Verwenden Sie in JavaScript den Doppelklick-Handler (ONDBLCLICK) nicht, da Tastaturen dieses Verhalten nicht ausführen können. Wenn die OnmouseOver- und Onmouseout -JavaScript -Handler verwendet werden, müssen auch die Onfocus- und Onblur -Ereignisse implementiert werden, um den Tastaturzugriff zu ermöglichen.

Fehlender alternativer Text für Bilder

Wenn ein Bild relevante Inhalte liefert, muss es mit alternativem Text begleitet werden. Wenn das Bild nicht zu sehen ist-wie bei blinden Benutzern, Nutzern mit niedrigem Band und kaputten Bildverbindungen-, muss der „Inhalt“ des Bildes noch zugegriffen werden. Diese Ausgabe bezieht sich, wie oben, die Prinzipien 1 und 2.. Die beliebteste Methode, um alternativen Text bereitzustellen, ist, den Text in das Alt -Attribut des Bildelements einzugeben. Viele Bilder wie grafische Diagramme, Comics und Infografiken im Web liefern keine „lange Beschreibung“ im ALT -Text und blockieren daher viele Benutzer seiner Inhalte. Das Web AX -Blog korrigiert einige Beispiele dafür in seiner Serie „Fixing Alt“. Weitere Informationen zu langen Beschreibungen finden Sie in meinem zweiteiligen Artikel LongDesc und anderen Long-Bildbeschreibungslösungen.

Hier sind einige Richtlinien für alternativen Text:

• Wenn der Text in das Bild eingebettet ist, fügen Sie es dem Alt -Attribut hinzu.
• Wenn ein Bild nur dekorativ ist, sollte es ein leeres Alt -Attribut enthalten. (z. B. ).
• Für einige Bilder wie Diagramme und Kunstwerke sind längere Beschreibungen erforderlich.
• Wenn ein Bild mit einem Link Inhalt enthält, sollte der alternative Text die Funktion des Links beschreiben, nicht das Bild selbst.

das Mitnehmen

Die sieben universellen Designprinzipien sind eine hervorragende Ressource bei der Gestaltung einer Website sowie anderen Produkten. Menschen verwenden einen Computer unterschiedlich und greifen anders auf das Web zu. Durch die Bewältigung dieses Verstandes wird ein Webdesigner erfolgreicher bei der Erstellung von Websites sein, die für alle attraktiv, benutzerfreundlich und zugänglich sind.

Weiteres Lesen

• Universal Design für Webanwendungen (O’Reilly Media) von Wendy Chisholm, Matt May.
• Universelle Usability, Online -Buch von Sarah Horton.
• Universal Design of Instruction, Universität Washington Do-IT-Programm.
• Grundsätze des Universal Designs, College of Design, North Carolina State University.
• Die universelle Designdatei: Entwerfen für Menschen aller Altersgruppen und Fähigkeiten (Journal) von Molly Story, James Mueller, Ron Mace.

häufig gestellte Fragen zum universellen Webdesign

Was ist universelles Webdesign und warum ist es wichtig? Es ist wichtig, weil es sicherstellt, dass jeder, einschließlich Menschen mit Behinderungen, effektiv auf Webinhalte zugreifen und sie nutzen kann. Es verbessert auch die gesamte Benutzererfahrung und macht Websites benutzerfreundlicher und einfacher zu navigieren. Auf der anderen Seite berücksichtigt Universal Web Design die unterschiedlichen Bedürfnisse aller Benutzer, einschließlich derjenigen mit Behinderungen. Es betont Barrierefreiheit, Benutzerfreundlichkeit und Inklusivität und stellt sicher, dass Webinhalte von allen zugänglich und nutzbar sind, unabhängig von ihren Fähigkeiten oder den von ihnen verwendeten Geräten. Befolgen Sie Richtlinien und Standards der Web -Barrierefreiheit. Diese Fehler können zu einer schlechten Benutzererfahrung führen und die Zugänglichkeit und Verwendbarkeit der Website einschränken.

Wie kann ich meine Website zugänglicher und benutzerfreundlicher gestalten? Dazu gehören die Verwendung einer klaren und einfachen Sprache, die Bereitstellung alternativer Text für Bilder, sicherzustellen, dass die Website mit einer Tastatur navigabel ist, ein logisches und konsistentes Layout verwendet und Bildunterschriften für Videos bereitgestellt werden. Es ist auch wichtig, Ihre Website auf verschiedenen Geräten und Browsern zu testen, um sicherzustellen, dass sie für alle Benutzer gut funktioniert. Es wirkt sich auf das universelle Webdesign aus, da verschiedene Browser Webinhalte unterschiedlich interpretieren und anzeigen können. Daher ist es wichtig, Ihre Website auf verschiedenen Browsern zu testen, um sicherzustellen, dass sie gut funktioniert und in allen gut aussieht. Diese Funktionen machen die Website für alle Benutzer, einschließlich derjenigen mit Behinderungen, zugänglicher und verwendbarer. Indem Unternehmen ihre Websites zugänglicher und benutzerfreundlicher werden, können Unternehmen ein breiteres Publikum erreichen, einschließlich Menschen mit Behinderungen. Dies kann zu erhöhtem Verkehr, höheren Conversion -Raten und einer verbesserten Kundenbindung führen. Dazu gehören Online -Tutorials, Webinare, Bücher und Kurse. Einige seriöse Organisationen, die Ressourcen für das universelle Webdesign zur Verfügung stellen, sind das World Wide Web Consortium (W3C), die Web Accessity Initiative (WAI) und das nationale Zentrum für Behinderung und Zugriff auf Bildung (NCDAE). Dies kann das Hinzufügen alternativer Text für Bilder enthalten, das mit einer Tastatur navigierbare Website, die Verwendung eines logischen und konsistenten Layouts und Bereitstellung von Kapitionen für Videos. Es ist auch wichtig, die Website auf verschiedenen Geräten und Browsern zu testen, um sicherzustellen, dass die Änderungen die Benutzererfahrung verbessert haben.

Was ist die Zukunft des universellen Webdesigns? Fortschritte in der Technologie wie künstliche Intelligenz und maschinelles Lernen können auch eine Rolle bei der Ergänzung zugänglicher und benutzerfreundlicherer Websites spielen. Darüber hinaus kann es mehr Vorschriften und Standards geben, um sicherzustellen, dass Websites für alle zugänglich und nutzbar sind.

Das obige ist der detaillierte Inhalt vonBeliebte Fehler im universellen Webdesign. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!