9 Tipps zur Codeoptimierung zur Verbesserung der Website-Benutzerfreundlichkeit, auf die Webmaster achten sollten

9 Tipps zur Codeoptimierung zur Verbesserung der Website-Benutzerfreundlichkeit, auf die Webmaster achten sollten

1. Fügen Sie Ihrem Logo alternativen Text hinzu

Dies hat zwei Vorteile: Der Screenreader kann die Bedeutung des Logobildes erkennen und wenn das Bild nicht geladen ist, kann er auch nicht sehbehinderten Benutzern mitteilen, wo sich Ihr Logo befindet.
Mehrere Methoden:

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:

Code kopieren
Der Code lautet wie folgt:
<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>


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.

<<:  Beispiele für die Implementierung von Fortschrittsbalken und Reihenfolge-Fortschrittsbalken mit CSS

>>:  HTML-Grundlagen - Pflichtlektüre - Umfassendes Verständnis von CSS-Stylesheets

Artikel empfehlen

Einführung in TypeScript-Schnittstellen

Inhaltsverzeichnis 1. Schnittstellendefinition 2....

Erläuterung des Beispiels für die automatische Anmeldung unter Linux

Es gibt viele Skripte im Internet, die expect ver...

React tsx generiert einen zufälligen Bestätigungscode

React tsx generiert einen zufälligen Bestätigungs...

Vue3 kapselt die Lupeneffektkomponente der Jingdong-Produktdetailseite

In diesem Artikel wird der spezifische Code der V...

WEB Standard-Webseitenstruktur

Ob es sich nun um das Hintergrundbild oder die Tex...

So verhindern Sie das Flashen von Vue in kleinen Projekten

Zusammenfassung HTML: Element plus V-Umhang CSS: ...

Javascript-Countdown-Eingabeaufforderungsfeld

In diesem Artikelbeispiel wird der spezifische Ja...

Den Linux-Kernel erkunden: Die Geheimnisse von Kconfig

Erhalten Sie ein umfassendes Verständnis der Funk...

Das Raster ist Ihr Layoutplan für die Seite

<br /> Englisches Original: http://desktoppu...

MySQL-Reihe von Erfahrungszusammenfassungen und Analyse-Tutorials zu NULL-Werten

Inhaltsverzeichnis 1. Testdaten 2. Die Unannehmli...