10 Tipps zur Website-Benutzerfreundlichkeit, die jeder kennen sollte
|
Lassen Sie uns keine weitere Zeit verschwenden und direkt zur Sache kommen. 1. Fügen Sie Ihrem Logo alternativen Text hinzu Code kopieren Der Code lautet wie folgt:<img src="logo.png" alt="Frontend"> Wenn Sie zur Implementierung des Logos ein Hintergrundbild verwenden, können Sie alternativ dazu auch ein Titelattribut hinzufügen: <span title="Front-End-Welt"></span> </code> Natürlich ist die Methode „Link + Hintergrundbild“ die beste, aber es ist auch besser, ein Titelattribut hinzuzufügen: Code kopieren Der Code lautet wie folgt:<a title="Front-End-Welt">Front-End-Welt</a> 2. Grundlegende Orientierungspunkte hinzufügen ARIA Landmark ist eine Reihe von Regeln zur Benutzerfreundlichkeit von Websites, die vom W3C definiert wurden. Durch das Hinzufügen beschreibender Landmarks, oder einfach Rollen genannt, zu verschiedenen Modulen einer Website können Screenreader Ihre Webseiten besser verstehen, sodass sehbehinderte Benutzer Ihre Website besser nutzen können. Code kopieren Der Code lautet wie folgt:<nav role="navigation"> <div id="Hauptinhalt" Rolle="Haupt"> <form action="search.php" role="search"> Warten Sie, spezifische Regeln finden Sie in den Empfehlungen des W3C. 3. Fokusdefinition verbessern Tatsächlich versuchen viele Websites ihr Bestes, um den :focus-Stil des Browsers zu entfernen, insbesondere beim IE-Browser. Tatsächlich ist es sinnvoll, dass der Browser standardmäßig den :focus-Stil hat, der dem Benutzer anzeigen kann, wo sich der aktuelle Mausfokus befindet. Dies ist insbesondere für den Tastaturfluss wichtig. Entfernen Sie also bitte nicht den :focus-Stil. Selbst wenn Sie denken, dass der Standardstil hässlich oder inkonsistent ist (IE ist ein gepunktetes Kästchen, Webkit ist ein hervorgehobenes ausgefülltes Kästchen und Safari ist blau und Chrome ist orange), können Sie selbst eine Hervorhebungsfarbe definieren: Code kopieren Der Code lautet wie folgt:a:Fokus{ Umriss: 1px durchgehend rot; Hintergrund: gelb; } Wenn Ihr Produktmanager oder visueller Designer darauf besteht, den Fokuszustand zu entfernen, nehmen Sie ihnen einfach für einen Tag die Maus weg und sagen Sie ihnen, sie sollen zum Wechseln von Links nur die Tabulatortaste verwenden. 4. Erforderliche Formularelemente definieren Mit dem Attribut „aria-required“ können erforderliche Felder in einem Formular definiert werden. Es teilt Bildschirmlesegeräten hauptsächlich Folgendes mit: Code kopieren Der Code lautet wie folgt:<input type="text" name="Benutzername" aria-required="true"> 5. Fügen Sie der Seite ein h1 hinzu Der Grund ist einfach. Es ist nicht nur gut für SEO, sondern verbessert auch die allgemeine Benutzerfreundlichkeit und Lesbarkeit der Website. Und haben Sie nicht auch eine Code-Obsession? 6. Tabellenkopf definieren Normalerweise sind viele Leute daran gewöhnt, td-Tags für alle Tabellen zu verwenden. Tatsächlich haben Tabellen mehr als nur hd-Tags, es gibt auch th-, col-, scope-Tags usw. Um es einfach auszudrücken: Ersetzen Sie den Header durch das th-Tag: Code kopieren Der Code lautet wie folgt:<th scope="col">Datum</th> 7. Tabellenbeschreibung definieren Setzen Sie nicht einfach ein „p“ vor oder nach einer Tabelle. Tabellen haben, genau wie Bilder, eigene Beschriftungs-Tags. Code kopieren Der Code lautet wie folgt:<Tabelle> <caption>Stundenplan</caption> <tr> … Was Tabellen betrifft, empfehle ich dringend, HTML-Tabellen neu zu entdecken 8. Vermeiden Sie „Hier klicken“ Obwohl solche Linkbeschreibungen für normale Menschen keine Rolle spielen, sind sie für Screenreader-Software recht schädlich und stellen für sehbehinderte Benutzer tatsächlich eine Art Störung dar. Nutzen Sie also einfach den Link an der richtigen Stelle. 9. Tabindex entfernen In der Vergangenheit haben viele Leute Tabindex verwendet, um das Benutzererlebnis zu „verbessern“, aber dieses Attribut störte die normale Lesereihenfolge der Seite, was für sehbehinderte Benutzer katastrophal ist und für normale Benutzer möglicherweise unbenutzerfreundlich ist. Missbrauchen Sie also nicht das Tabindex-Attribut. 10. Überprüfen Sie es online Äh, mir ist klar geworden, dass es eigentlich eine Werbung ist. Aber es ist auch eine gute Sache, wenn es Probleme mit der Benutzerfreundlichkeit von Websites erkennen kann. WebAIM ist ein Webtool, das durch Eingabe einer URL automatisch Probleme mit der Benutzerfreundlichkeit von Websites erkennt. Der obige Inhalt enthält 10 Tipps zur Benutzerfreundlichkeit von Websites, die jeder über die Plattform 123WORDPRESS.COM kennen sollte. Ich hoffe, es gefällt Ihnen. |
<<: So zentrieren Sie Ihre HTML-Schaltfläche
>>: Führen Sie die Schritte zum Aktivieren der GZIP-Komprimierung in Nginx aus.
Artikel empfehlen
So schreiben Sie hochwertigen JavaScript-Code
Inhaltsverzeichnis 1. Einfach zu lesender Code 1....
So implementieren Sie Seitensprünge in einem Vue-Projekt
Inhaltsverzeichnis 1. Erstellen Sie ein Vue-CLI-S...
So optimieren Sie die MySQL-Abfragegeschwindigkeit
In den vorherigen Kapiteln haben wir die Auswahl ...
Javascript-Grundlagen: Detaillierte Erklärung der Operatoren und der Flusskontrolle
Inhaltsverzeichnis 1. Betreiber 1.1 Arithmetische...
HTML setzt Fett-, Kursiv-, Unterstrichen-, Durchstreich- und andere Schrifteffekte
<p><b>Dies ist eine fette Schriftart&l...
Nach der Installation von MySQL wird beim Anmelden die Eingabeaufforderung für das Root-Konto angezeigt. mysql ERROR 1045 (28000): Zugriff zur Verwendung verweigert Lösung
Nach der Installation von MySQL werden Sie festst...
Anmeldung zur Token-Verifizierung im Vue-Projekt (Front-End-Teil)
In diesem Artikelbeispiel wird der spezifische Co...
Lösung zum Vergessen des MySQL-Datenbankkennworts
Möglicherweise haben Sie gerade ein MySQL-Passwor...
Einführung in das Layout des HTML-Seitenquellcodes_Powernode Java Academy
Einführung in das Layout des HTML-Seitenquellcode...
Implementierung der Nginx-Konfiguration für den Multi-Port- und Multi-Domain-Name-Zugriff
Um mehrere Sites auf einem Server bereitzustellen...
Tutorial zur Installation von Pycharm und Ipython unter Ubuntu 16.04/18.04
Unter Ubuntu 18.04 1. sudo apt install python ins...
Analysieren Sie den Unterschied zwischen berechnet und beobachtet in Vue
Inhaltsverzeichnis 1. Einführung in die Computert...
Beispielcode zum Bereitstellen eines Spring-Boot-Projekts mit Docker
1. Grundlegender Spring-Boot-Schnellstart 1.1 Sch...
Der Unterschied zwischen this.$router und this.$route in Vue und der push()-Methode
Im offiziellen Dokument heißt es: Durch Einfügen ...
Detaillierter Prozess zum Aktualisieren der dynamischen Glibc-Bibliothek in CentOS 6.9
glibc ist die von GNU veröffentlichte libc-Biblio...