Info und Beziehungen: Zeichenverwendung

Unterschiedliche Arten von Inhalt müssen semantisch als solche ausgezeichnet werden, etwa als Paragraphen, Zitate, oder Code. Dies ermöglicht es assistierenden Technologien (z.B. Screenreadern), die Elemente sinnvoll anzukündigen sowie Navigation innerhalb derselben anzubieten.

Verstehen

Text wird mit semantisch bedeutsamem Markup formatiert, z.B. mit <cite>, <blockquote>, <code>, <sup> und <address>. Leere solche Elemente sind zu vermeiden.

Generell sind assistierenden Technologien zurückhaltend beim expliziten Benennen von semantischen Elementen, um den Lesefluss nicht zu stören. Gewisse Elemente werden deshalb unter Umständen nicht spezifisch ausgegeben, etwa <del>.

Paragrafen werden mit <p> formatiert. Zum Trennen von mehreren Paragrafen werden weitere <p>-Elemente verwendet, und nicht <br>. Wenn Schriftvariationen eine inhaltliche Bedeutung haben, muss diese für alle erfahrbar sein. Da Screenreader auch semantisch bedeutsame Elemente wie <del> oder <em> nicht spezifisch ansagen, muss oft auf zusätzliche Techniken zurück gegriffen werden (etwa visuell versteckter Text).

Wichtig: Die Trennung zwischen Information mit Struktur (Inhalt und HTML) und Darstellung (CSS) muss gewährleistet sein. Markup ohne Bedeutung (wie etwa <i> und <b>) ist zu vermeiden.

Verantwortlichkeiten

• Das Entwicklungsteam versieht die Seitenbereiche und Funktionalitäten mit semantisch bedeutsamem Markup. Es schafft zudem die notwendigen technischen Voraussetzungen für die Inhaltserstellung, etwa die Möglichkeit zum Definieren von entsprechenden Elementen in einem WYSIWYG-Editor.
• Die Inhaltsverantwortlichen formatieren Inhalte korrekt.

WCAG-Text

Info und Beziehungen: Informationen, Struktur und Beziehungen, die über die Darstellung vermittelt werden, können durch Software bestimmt werden oder stehen in Textform zur Verfügung.

Code-Beispiel

<!-- Zitat -->
<blockquote>
  "Ich bin ein Berliner." (John F. Kennedy)
</blockquote>

<!-- Betonung -->
<p>
  Wir müssen <em>jetzt</em> handeln, sonst ist es zu spät! <!-- Richtig -->
  Wir müssen <b>jetzt</b> handeln, sonst ist es zu spät!   <!-- Falsch -->
</p>

<!-- Falsch formatierte Absatztrennung -->
<p>
  Willkommen auf unserer Website!<br />
  <br />
  Wir freuen uns, Sie hier zu sehen.<br />
  <br />
  Bei Fragen kommen Sie gerne auf uns zu.
</p>

<!-- Kontaktinformation Autor / Inhaber -->
<address>
  Maria Bernasconi<br /><!-- Hier sind Zeilenumbrüche angebracht -->
  Mustergasse 123<br />
  1234 Grünwil<br />
  Schweiz
</address>