WCAG 2.0, 3.1.2, AA

Sprache von Teilen

  • WCAG: 2.0
  • Stufe: AA
  • Thema: Verständlichkeit

Sprachwechsel (etwa ein englisches Zitat auf einer ansonsten deutschsprachigen Seite) müssen über eine korrekte Sprachdeklaration (lang-Attribut) verfügen. Dies ermöglicht es assistierenden Geräten (z.B. Screenreadern), diese Inhalte ebenfalls mit korrekter Aussprache vorzulesen.

Verstehen

In längeren Textpassagen müssen Sprachwechsel angegeben sein. Ansonsten lesen Screenreader Wörter in anderer Sprache als der Seitensprache mit falscher Betonung vor, was dazu führt, dass die Inhalte unverständlich werden. Ist die Seitensprache z.B. Deutsch (<html lang="de">) und es existiert ein Zitat in englischer Sprache, so muss dieses Zitat entsprechend ausgezeichnet sein (lang="en").

Hinweis: Vermeiden Sie einen Sprachwechsel bei einzelnen wenigen Wörtern oder z.B. Anglizismen, da Screenreader jeweils mit etwas Verzögerung reagieren, und entsprechend die schnellere, wenn auch falsche Aussprache einzelner Wörter oft bevorzugt wird.

Verantwortlichkeiten

  • Das Entwicklungsteam schafft die notwendigen technischen Voraussetzungen, etwa eine Funktion zum Deklarieren einer fremdsprachigen Textpassage in einem WYSIWYG-Editor.
  • Die Inhaltsverantwortlichen erstellen und warten die entsprechenden Inhalte anforderungsgemäss.

WCAG-Text

Die menschliche Sprache jedes Abschnitts oder jedes Satzes im Inhalt kann durch Software bestimmt werden ausser bei Eigennamen, technischen Fachbegriffen, Wörtern einer unklaren Sprache und Wörtern oder Wendungen, die Teil des Jargons des direkt umliegenden Textes geworden sind.

Code-Beispiel

<html lang="de"><!-- Deutsch ist Hauptsprache -->
  <body>
    <h1>Meine liebsten Songs</h1><!-- Song ist ein Anglizismus -->

    <p>
      <!-- "All time Favourites" ist zu kurz, damit ein Sprachwechseln angebracht wäre -->
      Im folgenden einige meiner all time Favourites:
    </p>
    
    <ul>
      <li>Griechischer Wein (Udo Jürgens)</li>
      <li lang="en">Yellow submarine (The Beates)</li><!-- Sprachwechsel zu Englisch -->
      <li lang="fr">Nathalie (Gilbert Bécaud)</li><!-- Sprachwechsel zu Französisch -->
      <li lang="de-ch">S Zundhölzli (Mani Matter)</li><!-- Sprachwechsel zu Schweizerdeutsch -->
    </ul>
  </body>
</html>