07. Juni 2009

Die Semantik. Definition, Nutzen und Einsatz.

Im ersten Teil dieser Artikelreihe habe ich etwas zur Geschichte der Webstandards erzählt, im zweiten Teil ging ich etwas näher auf die Vorteile für Webentwickler bei der Beachtung der Webstandards ein. In diesem Teil schauen wir uns mal die Semantik etwas näher an.

Warum die strikte Trennung von Markup und Präsentation vorteilhaft ist, haben wir nun bereits gemeinsam herausgefunden. Doch eine Frage bleibt:

What the F*** is Semantik?

Nun, vereinfacht gesagt nichts anderes als die Grammatik eines Webdokumentes. In der Schule brachte man uns bei, wie wir anständige und allgemeinverständliche Sätze formulieren können. Genau das müssen wir auch beim Schreiben eines Webdokuments berücksichtigen.

Genau das ist fast unfassbar einfach, - wir müssen nur die Tags nehmen, die auch für das, was wir vorhaben vorgesehen sind. Desweiteren macht es absolut Sinn, mit dem Markup anzufangen und uns erst anschliessend Gedanken über das Layout zu machen. Benutzen wir also für eine Überschrift eine Überschrift und für einen Absatz einen Absatz, egal welche Farbe oder Schriftart die Überschrift haben soll.

Mal ganz abgesehen davon, dass das Markup so einfacher wird, es verschafft uns auch den nicht zu übersehenden Vorteil, dass Elemente logisch markiert sind und somit auch für Maschinen wie Google besser interpretierbar sind. Zudem ist logisch markiertes Markup auch besser erkennbar für Menschen, die sich die Inhalte einer Webseite vorlesen lassen.

Beispiele eines logisch markierten Markups:

Fangen wir mal oben an. Eine Überschrift kann ich semantisch logisch oder völlig beschissen auszeichnen. Bescheiden wäre diese Variante:

<div class="headline">Diese Überschrift ist keine Überschrift</div>

Ohne unser Layout können Mensch und Maschine keinen Unterschied zu einem normalen Textabsatz erkennen. Ganz schlecht.

Logisch und korrekt wäre diese Variante:

<h1>Diese Überschrift ist eine Überschrift</h1>

Der Vorteil ist offensichtlich: Mensch und Maschine erkennen sofort, was es sein soll, nämlich eine Überschrift der ersten Ordnung. Jeder Webbrowser - heute, gestern und in der Zukunft, jeder Screenreader und jeder Mensch versteht sofort die Bedeutung.

Überschriften sollten abhängig von der Wichtigkeit und Strukturebene ausgezeichnet werden. Hierfür stehen uns zu Verfügung: <h1>, <h2>, <h3>, <h4>, <h5> und <h6>.

Als Beispiel schauen wir uns mal die natürlichen Größenunterschiede der Überschriften an:

Genauso verfahren wir mit allen anderen Elementen des Quelltextes.

Einen Absatz erzeugen wir mit dem <p> Element und bitte nicht per <br />. Dann haben wir jederzeit die Möglichkeit, die Abstände per CSS (margin) sauber zu kontrollieren. Als Beispiel nehme man die Absätze diese Seite hier.

Korrekte Auszeichnung von Listen

Um Auflistungen auszuzeichnen bietet uns XHTML gleich drei Möglichkeiten. Ungeordnete Listen, geordnete Listen mit Nummerierung der einzelnen Listenpunkte und sogenannte Definitionslisten, die benutzt werden, um Begriffe mit ihren Definitionen auszuzeichnen.

Beispiel einer ungeordneten Liste:

<ul>
<li>Ein Listenpunkt</li>
<li>Noch ein Listenpunkt</li>
</ul>

Beispiel einer geordneten Liste:

<ol>
<li>Ein Listenpunkt</li>
<li>Noch ein Listenpunkt</li>
</ol>

Beispiel einer Definitionsliste:

<dl>
<dt>Fahrrad</dt>
<dd>Ein zweirädriges und einspuriges Fahrzeug, das mit Muskelkraft durch das Treten von Pedalen angetrieben wird</dd>
<dt>Auto</dt>
<dd>Ein meist geschlossenes Fahrzeug, das gewöhnlich vier Räder hat, von einem Motor angetrieben wird und besonders zur Beförderung von Personen dient</dd>
</dl>

Zitate

Hier wird es schon etwas kniffliger, denn für kurze Zitate steht uns zwar das <q> Element zu Verfügung, jedoch versursacht es durchaus Probleme z.B. bei der Barrierearmut oder im Internet Explorer, der sich beizeiten weigert, bei Nutzung des Elements die Anführungszeichen einzufügen. Deswegen wird manchmal auch empfohlen, es nicht zu verwenden.

Bei Zitaten, die über einen oder gar mehrere Absätze gehen, sollten wir das <blockquote> Element nutzen. - Was übrigens nicht dafür da ist, einen Texteinzug zu realisieren. Dafür hat uns der liebe Gott oder wer auch immer schliesslich CSS gegeben. Bei dem <blockquote> Element gilt es übrigens zu beachten, dass man nicht direkt Text ins Element einfügen darf, sondern dieser von einem <p> (Absatz) umschlossen sein muss.

Zu guter Letzt bleibt uns noch das Attribut Cite, mit dem man nur im Quelltext sichtbar die Ursprungs URL des Zitates angeben kann. Man darf es sowohl mit <blockquote>, als auch mit <q> benutzen.

Beispiele für Zitate:

Zitat mit dem <q> Element und Cite:

<p>Kurt Tucholsky sagte einst <q cite="http://zitateseite.twoday.net/topics/Weitere+kurze+Zitate/">
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.</q> </p>

Zitat mit dem <blockquote> Element und Cite:

<blockquote cite="http://www.webstandards.org/about/mission/de/">
<p>Das World Wide Web Consortium (W3C) hat; zusammen mit anderen Gruppierungen und Standards-Organisationen; Technologien entwickelt, um Web-basierte Inhalte herzustellen und zu interpretieren.
Diese Technologien, die wir "Webstandards" nennen, wurden sorgfältig entworfen, um für die größtmögliche Zahl von Internet-Nutzern den größtmöglichen Nutzen zu erzielen und gleichzeitig die
Langlebigkeit von im Internet veröffentlichten Dokumenten sicherzustellen</p>
</blockquote>

Das World Wide Web Consortium (W3C) hat; zusammen mit anderen Gruppierungen und Standards-Organisationen; Technologien entwickelt, um Web-basierte Inhalte herzustellen und zu interpretieren. Diese Technologien, die wir "Webstandards" nennen, wurden sorgfältig entworfen, um für die größtmögliche Zahl von Internet-Nutzern den größtmöglichen Nutzen zu erzielen und gleichzeitig die Langlebigkeit von im Internet veröffentlichten Dokumenten sicherzustellen

Tabellen

Das Tabellen um Gottes Willen nicht zum Layouten genutzt werden sollten (und auch dafür niemals vorgesehen waren), sollte nun jedermann klar sein. Tabellen haben ihren Zweck in der tabellarischen Auflistung von Daten. Doch wie muss eigentlich eine semantisch korrekt ausgezeichnete Tabelle aussehen?

Semantisch korrekt ausgezeichnete Tabelle:

<table summary="Poststellennetz heute: Die Tabelle gibt Auskunft über die Entwicklung des Umbaus von 2005 bis 2007.">
<caption>Poststellen in der Schweiz</caption>
<tr>
<th scope="col">Merkmal</th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
</tr>
<tr>
<th scope="row">Poststellen</th>
<td>2'389</td>
<td>2'357</td>
<td>2'312</td>
</tr>
<tr>
<th scope="row">Filialen</th>
<td>657</td>
<td>654</td>
<td>649</td>
</tr>
<tr>
<th scope="row">Agenturen</th>
<td>135</td>
<td>129</td>
<td>150</td>
</tr>
</table>

Für barrierearme / freie Tabellen ist es wichtig, die einzelnen Elemente zu kennen und zu nutzen, aus denen Tabellen aufgebaut sind.

• summary: Diese Informationen sollen zusätzlich einen leichteren Überblick über den Inhalt der Tabelle geben.
• scope: Das Scope-Attribut teilt dem Screen Reader mit, wie die einzelnen Spalten verknüpft sind.

Dies lässt sich noch unterteilen in:

• col - Zelle nimmt Bezug auf die ganze Spalte
• row - Zelle nimmt bezug auf die ganze Zeile
• rowgroup - Zelle nimmt Bezug auf eine oder mehrere Zeilengruppe/n
• colgroup - Zelle nimmt Bezug auf eine oder mehrere Spaltengruppe/n

Hochkomplexe, mehrstufige Tabellen

Diese Art Datentabellen kommt zwar äußerst selten vor, sollte aber auch semantisch korrekt ausgezeichnet werden. Hier sollte explizit headers angewendet werden.

Beispiele semantisch korrekter, hochkomplexer Datentabellen:

 <table>
 <thead>
 <tr>
 <th scope="col">Anforderung</th>
 <th scope="col" id="s1"><abbr title="Bedingung">Bed.</abbr></th>
 <th scope="col" id="s2"><abbr title="Priorität">Prio.</abbr></th>
 <th scope="col" id="s3">Prüfschritt</th>
 <th scope="col" id="s4"><i lang="en">›until user agents‹</i></th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th rowspan="5" id="a1">Alternativen</th>
 <th headers="s1" id="b1.1">1. 1.</th>
 <td headers="s2 b1.1">1</td>
 <td headers="s3 b1.1">Alternativtexte für Bedienelemente, Grafiken und Bilder, Layoutgrafiken, Objekte</td>
 <td headers="s4 b1.1" class="unchecked">Nein</td>
 </tr>
 <tr>
 <th headers="s1" id="b1.2">1. 2.</th>
 <td headers="s2 b1.2">1</td>
 <td headers="s3 b1.2">Textlinks für serverseitige Imagemaps</td>
 <td headers="s4 b1.2" class="unchecked">Nein</td>
 </tr>
 <tr>
 <th headers="s1" id="b1.3">1. 3.</th>
 <td headers="s2 b1.3">1</td>
 <td headers="s3 b1.3">Audiodeskription für Multimedia</td>
 <td headers="s4 b1.3" class="checked wcag-until">Ja</td>
 </tr>
 <tr>
 <th headers="s1" id="b1.4">1. 4.</th>
 <td headers="s2 b1.4">1</td>
 <td headers="s3 b1.4">Untertitel für Multimedia</td>
 <td headers="s4 b1.4" class="unchecked">Nein</td>
 </tr>
 <tr>
 <th headers="s1" id="b1.5">1. 5</th>
 <td headers="s2 b1.5">2</td>
 <td headers="s3 b1.5">Textlinks für cllientseitige Imagemaps</td>
 <td headers="s4 b1.5" class="checked wcag-until">Ja</td>
 </tr>
 <tr>
 <th rowspan="3">Farben</th>
 <th headers="s1" id="b2.1">2. 1.</th>
 <td headers="s2 b2.1">1</td>
 <td headers="s3 b2.1">Auch ohne Farbe nutzbar</td>
 <td headers="s4 b2.1" class="unchecked">Nein</td>
 </tr>
 <tr>
 <th headers="s1" id="b2.2">2. 2.</th>
 <td headers="s2 b2.2">1</td>
 <td headers="s3 b2.2">Grafiken vor wechselndem Hintergrund erkennbar, Kontraste von Grafiken ausreichend</td>
 <td headers="s4 b2.2" class="unchecked">Nein</td>
 </tr>
 <tr>
 <th headers="s1" id="b2.3">2. 3</th>
 <td headers="s2 b2.3">2</td>
 <td headers="s3 b2.3">Wahrnehmung mit Farbfehlsichtigkeiten</td>
 <td headers="s4 b2.3" class="unchecked">Nein</td>
 </tr>
 </tbody>
 </table>

Quelle Codebeispiele hochkomplexe Datentabelle: Einfach für Alle

Weiterführende Links:

• Wikipedia / Formale Semantik
• Einfach für Alle
• W3C/Tables
• HTML Techniques for Web Content Accessibility Guidelines 1.0