Schreiben Sie Ihr HTML so, um Ihren Code kompatibler zu machen

Beispielsweise Benutzer, die eine Bildschirmlesesoftware benötigen. Wie könnten wir das als Front-End-Entwickler ertragen? Ich wollte schon immer einen Artikel wie diesen schreiben, um mitzuteilen, wie man eine barrierefreiere Seite erstellt. Einer der heutigen Pläne besteht darin, HTML-Tags mit WCAG-Standards zu kombinieren. Ich empfehle Ihnen, Ihr HTML auf diese Weise zu schreiben, um jemandem das Leben leichter zu machen.

Ich möchte Ihnen heute zeigen, wie Sie mithilfe unserer HTML-Tags die WCAG-Standards und die Ziele des semantischen Webs in Code umsetzen können:

1. Dokumentdeklaration: <!Doctype>

Tatsächlich hat dies nichts mit WCAG zu tun, aber für eine kompatiblere Seite, insbesondere abwärtskompatible Seiten, empfehle ich, es wie folgt zu schreiben:

 <!Doctype html>

2. Verknüpfung: <a>

Die Internetverbindung wird quasi über <a>, dem am häufigsten verwendeten Tag für eine Seite, hergestellt. Wie sollen wir damit umgehen?

Accesskey für Schlüssellinks hinzufügen
Wenn es nicht unbedingt nötig ist, entfernen Sie das gepunktete Kästchen nicht während der Fokussierung

 <a href="" title="" accesskey="M" rel="" Fokus ausblenden >Link</a>

3. Abkürzung: <abbr>

Auch die korrekte Verwendung von HTML-Tags ist sehr wichtig, da sie Screenreader-Benutzern hilft, die Seitenstruktur zu verstehen. Gerade bei der Verwendung von Tags wie H1, H2, H3 usw. kann es durch Fehlanwendung leicht zu verwirrenden Strukturen kommen. Natürlich ist es auch für normale Menschen erkennbar, wenn man allgemeine Tags verwendet und dann CSS einsetzt, um einen visuellen Kontrast zu erzeugen. Aber was ist mit den Benutzern von Bildschirmleseprogrammen? Natürlich habe ich hier gerade erwähnt, dass Sie auf die Verwendung von Seiten-Tags achten müssen, und das Wichtigste bei abbr ist, dass Sie ein Titelattribut hinzufügen sollten, um die Abkürzung zu beschreiben. Zum Beispiel:

 <abbr title="Webentwickler" >WD</abbr>

4. Blockzitat: <blockquote>, allgemeines Zitat: <cite>

Verwenden Sie bei langen Zitaten <blockquote> und <cite> für Inline-Zitate, um die Lesbarkeit Ihrer Struktur zu verbessern:

 <blockquote>
    Ich wollte schon immer einen Artikel wie diesen schreiben, um mitzuteilen, wie man eine barrierefreiere Seite erstellt. Einer der heutigen Pläne besteht darin, HTML-Tags mit WCAG-Standards zu kombinieren. Ich empfehle Ihnen, Ihr HTML auf diese Weise zu schreiben, um jemandem das Leben leichter zu machen.
</blockquote>
<p>Der Satz, der mich am meisten beeindruckt hat, war: <cite>„Frontend-Entwickler zu sein erfordert Liebe. Verwenden Sie nicht den brüllenden Stil, um alle möglichen Leute auf Schritt und Tritt anzugreifen.“</cite> </p>

5. Löschen: <del>

Das Schreiben auf Papier ist nicht mit dem Schreiben am Computer vergleichbar, wo Sie die Rückgängig-Taste verwenden können. Was aber, wenn wir hervorheben möchten, dass etwas gelöscht wurde? Dazu wird das Tag <del> verwendet. Zum Beispiel:

 <del>Verwenden Sie zur Hervorhebung in HTML das Tag &lt;b&gt;.</del>
Verwenden Sie zur Hervorhebung in HTML das Tag &lt;strong&gt;.

Der Effekt ist dieser:

~~Verwenden Sie zur Hervorhebung in HTML das Tag <b>.~~
Verwenden Sie zur Hervorhebung in HTML das Tag <strong>.

6. Definitionsliste: <dl>

Als ich letztes Jahr neue Leute anleitete, die am Alipay-Frontend-Blog arbeiten sollten, beeindruckte mich am meisten, wie gern sie <dl> verwendeten. Damals dachte ich, dass diese Studenten ziemlich gut waren und ein gutes Verständnis von Semantik hatten. Wir verwenden Definitionslisten immer noch selten. Verwenden Sie stattdessen die normalen Tags <ul> <ol>. <dl> sollte ebenfalls mit Vorsicht verwendet werden. Am besten verwenden Sie es nur in einigen Einträgen, die eine „Definitions“-Bedeutung haben, wie in diesem Beispiel von w3school, das Kaffee und Milch definiert:

 <dl>
  <dt>Kaffee</dt>
    <dd>- schwarzes Heißgetränk</dd>
  <dt>Milch</dt>
    <dd>- weißes Kaltgetränk</dd>
</dl>

7. Ungeordnete/geordnete Listen <ul>/<ol>

Liste, das ist jedem Frontend-Entwickler bekannt. Da die Struktur sehr flexibel einsetzbar ist, wird sie häufig in Navigationen, Listen, Tabs etc. verwendet. Mehr braucht man hierzu nicht zu sagen. Sie müssen sich jedoch darüber im Klaren sein: Glauben Sie nicht, dass <ul>/<ol> ein Ersatz für <table> ist. Bei den von uns üblicherweise verwendeten HTML-Tags hat jedes Tag seine eigene Funktion und keines davon ist ein Ersatz für das andere.

 <ol>
  <li>Kaffee</li>
  <li>Tee</li>
  <li>Milch</li>
</ol>

8. Tabelle: <table>

Wenn es sich um eine Tabelle handelt, verwenden Sie stattdessen keinen Absatz und schon gar keine Liste. Sofern dies nicht unbedingt erforderlich ist, sind sie umwandelbar. Darüber hinaus sind in der Tabelle einige Hinweise zu beachten:

Fügen Sie <table> ein Summary-Attribut hinzu. Einige Tabellen sind sehr groß und müssen nicht vollständig gelesen werden.
Fügen Sie <tbody> hinzu, wenn ich mich richtig erinnere. Wenn Sie es nicht hinzufügen, fügt der Browser es automatisch für Sie hinzu
Verwenden Sie <col> <colgroup>, um bei Bedarf die angezeigten Spalten zu steuern

 <table summary="sofishs Blog-Status">
    <Kopf>
        <tr>
            <th>DATUM</th>
            <th>IP</th>
            <th>PV</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>11.3.2011</td>
            <td>3000</td>
            <td>8000</td>
        </tr>
    </tbody>
</Tabelle>

9. Formatierungs-Snippets <code>/<pre>

<code> bezieht sich auf Computercodetext und <pre> bezieht sich auf vorformatierten Text. <pre> hat einen umfassenderen Anwendungsbereich und ist ein Blockelement, das zur Formatierung verschiedener Texte, insbesondere Codes, verwendet werden kann. Bei der Verwendung gibt es nichts besonderes zu beachten, Hauptsache es wird semantisch richtig verwendet, also zum Beispiel nicht <pre> anstelle des allgemeinen <p> verwendet.

 <code>Textausrichtung:zentriert</code>
<vor>
{ ( 1 * 10 ² ) + ( 9 * 10 ¹ ) + ( 3 * 10 ⁰ ) }
</pre>

10. Zeilenumbrüche: <br>

Auf modernen Webseiten wird <br> sehr selten verwendet. Der Leerraum auf Webseiten wird im Allgemeinen durch CSS-Füllung und Ränder erreicht. Dies ist präziser und einfacher zu kontrollieren. Derzeit wird empfohlen, es in allgemeinen Absätzen <p> für einfache Zeilenumbrüche zu verwenden und nicht zur Steuerung der Seitenränder.

 <p>Ich bin ein Absatz. <br />
In der Poesie werden Zeilenumbrüche verwendet.
</p>

11. Trennlinie: <hr>

<hr> hat eine sehr gute semantische Wirkung. Aber seine visuellen Effekte sind schwer zu kontrollieren. Ich habe bereits einen Artikel über die Probleme von <hr /> in verschiedenen Browsern geschrieben. Im Allgemeinen wird es selten verwendet. Wenn eine separate Seite speziell für Benutzer von Bildschirmleseprogrammen bereitgestellt würde, wäre <hr> möglicherweise nützlicher.

 <h3>Titel 1</h3>
<p>Lorem Ipsum ist ...</p>
<hr />
<h3>Titel 2</h3>
<p>Dies ist der Eintrag von... </p>

12. Nicht-semantische Tags: <div>/<span>

Tatsächlich sind die beiden Tags <div>/<span> semantisch und definieren beide einen Abschnitt in einem Dokument. Ja, es ist tatsächlich dasselbe wie <section> in HTML5. Der Grund hierfür ist, dass die Suchmaschinen diese Tags für nicht-semantische Tags halten und sie daher zu „nicht-semantischen“ Tags werden. Es wird empfohlen, andere Container als Seitenrahmen (z. B. Layouts) zu verwenden, um zusätzliche visuelle Effekte hinzuzufügen, und nicht als Ersatz für Absätze.

 <div id="Behälter">
    <div id="Inhalt">
    </div>
    <div id="Seitenleiste">
        <ul>
            <li><span>Gott</span>, oh mein Gott</span></li>
        </ul>
    </div>
</div>

13. Absatz/Überschrift: <p>,<h1>/<h2>/<h3>…

Man kann fast sagen, dass diese Tags die wichtigsten Tags in der Tag-Hierarchie einer Seite sind. Wir können die Struktur eines Buches verwenden, um diese Tags zu veranschaulichen, und wenn wir eine Seite erstellen, sollten wir auch Folgendes im Hinterkopf haben:

Buchname: H1
Kapiteltitel des Buches: H2
Artikeltitel im Abschnitt: H3
Kapitelabsatz: P
Untertitel/Untertitel: H4/H5/H6

Ja, natürlich gibt es auch Zitate <blockquotte>, Code aus technischen Büchern <pre class="code">, Listen mit einigen zu beachtenden Punkten <ul>, einige Tabellen zum bequemen Vergleich <table> usw.

 <h1>LOGO</h1>
<h2>Titel</h2>
<div Klasse="Eintrag">
    <h3>Zusammenfassung:</h3>
    <p>Lorem ipsum ist ...<em>betonen</em></p>
</div>

14. Betonung: <em>/<strong>

Abkürzung für <em>emphasize. Und <strong> ist stark betont. Viele Studierende, die gerade mit der Front-End-Entwicklung begonnen haben, sind sich möglicherweise nicht sicher, ob Tags wie <em>, <strong>, <cite>, <i> und <b> verwendet werden sollen. <i> und <b> sind im Grunde veraltet und entsprechen den aktuellen <em> und <strong>. Generell gilt für sie folgende inhaltliche Wichtigkeitsreihenfolge: strong > em ≈ cite.

 <strong>Hinweis:</strong> Verwenden Sie keine altmodischen Tags wie <cite>FONT, CENTER</cite> usw., insbesondere <em>FONT</em>.

15. Formularelemente: <input>/<textarea>/<select>

Formularelemente sind relativ komplexe Tags in HTML und es gibt viele Punkte, auf die Sie achten müssen:

Sie müssen jedem Formularelement ein <label> hinzufügen, um es zu beschreiben. Wenn kein Label verwendet werden kann, fügen Sie dem Formularelement ein Titelattribut hinzu.
Wenn ein Formularfeld erforderlich ist, markieren Sie es mit dem Symbol „ * “.
Flash generiert normalerweise kein <label> für Formularelemente. Bitte aktivieren Sie die Option „Automatisches Label“.

 <form method="post" action="http://sofish.de">
    <fieldset><legend>Mein Formular</legend>
      <label for="firstname">* Vorname:</label> <input type="text" id="firstname" />
      <label for="speech">Sag etwas:</label>
      <textarea id="Rede" />
      </textare>
      <input type="submit" value="submit" title="Senden-Schaltfläche" />
    </Feldsatz>
</form>

16. Bild: <img>

Blinde Menschen können keine Bilder sehen. Geben Sie „alt“ ein, um alternativen Text anzuzeigen. Sagen Sie ihnen, was für ein Bild es ist.

 <img src="http://sofish.de/favicon.ico" alt="Favicon von Happy Favorites" />

17. Rahmen: <iframe>

Vermeiden Sie möglichst die Verwendung von <iframe>-Frames. Wenn Sie jedoch einen verwenden müssen, geben Sie am besten ein Titelattribut zur Beschreibung an.

 <iframe src="http://sofish.de" title="Viele Grüße" /></iframe>

18. Streaming-Medien: <Video>/<Audio>/<Objekt>/<Einbettung>

Darüber hinaus liegen die Medien in einem komplexeren Format vor und sind schwieriger zu handhaben. Normalerweise können wir Folgendes tun:

Liefern Sie für audiovisuelle Medien entsprechende Texte, inklusive entsprechender Szenen. So soll sich beispielsweise Applaus während einer Rede, der den Lesern hilft, die aktuelle Stimmung wahrzunehmen, im Redetext widerspiegeln. Und so weiter für den Rest.
Wenn Sie keine spezifische Beschreibung wie eine Symphonie angeben können, können Sie eine kurze Erklärung geben
Wenn der Text zu lang ist, um auf die aktuelle Seite zu passen, können Sie nach dem Medium einen Link zum entsprechenden Alternativtext bereitstellen.
Sollten die Medien Inhalte enthalten, die epileptische Anfälle auslösen können, ist entsprechend darauf hinzuweisen.

 <audio src="mozart.mp4">Mozart Sinfonie Nr. 39</audio>

19. Seitentitel: <title>

Achten Sie darauf, Ihrer Webseite einen Titel hinzuzufügen. Jeder Tag sollte eindeutig sein. Dies spiegelt sich beispielsweise bei Alipay wider:

Titel der Alipay-Webseite

 <title>Kontaktieren Sie mich - Happy Favorites</title>

20. Fazit

In Ordnung. Ich werde hier jetzt aufhören. Bei WCAG geht es nicht nur um die Verwendung dieser einfachen HTML-Tags, und semantische Webseiten können nicht in nur einem oder zwei Artikeln geschrieben werden. Lassen Sie sich Zeit. Beginnen Sie mit den gängigsten und entwickeln Sie gute Gewohnheiten. Zurück zum vorherigen Satz des Artikels: Können Sie es ertragen, die Seite so schwer nutzbar zu machen?

<<: Benutzer müssen wissen, warum

>>: Vollständige Schritte zum Erstellen eines Hochleistungsindex in MySQL