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. 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. 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">
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. Code kopieren Der Code lautet wie folgt:<th scope="col">Datum</th>
Code kopieren Der Code lautet wie folgt: <Tabelle> <caption>Stundenplan</caption> <tr> … 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. 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. |
>>: HTML-Grundlagen - Pflichtlektüre - Umfassendes Verständnis von CSS-Stylesheets
Inhaltsverzeichnis 1. Subunternehmer für Miniprog...
Inhaltsverzeichnis 1. Der Unterschied zwischen me...
Inhaltsverzeichnis 1. innodb_buffer_pool_size 2. ...
1. Einführung in verteilte Speichersysteme Die ko...
Dieser Artikel veranschaulicht anhand eines Beisp...
Mehrere Konzepte Zeilenbox: Eine Box, die eine In...
Offizielle Dokumentation: JSON-Funktionen Name Be...
Die MySQL-Transaktionsunterstützung ist nicht an ...
Wenn href zum Übergeben von Parametern benötigt w...
1. Festplattenpartition: 2. fdisk-Partition Wenn ...
In diesem Artikel werden hauptsächlich drei Metho...
Inhaltsverzeichnis 1 Die allgemeinen Regeln zum E...
Viele Websites verfügen oben über eine feste Navi...
Vorne geschrieben Nginx ist nicht nur ein Reverse...
Bei täglichen Betriebs- und Wartungsarbeiten ist ...