WCAG 3.1 Lesbarkeit Cheatsheet
- Prof. Dr. Simon Nestler Dozent
- Marcel Team Mitglied
- Hayrettin Team Mitglied
Inhaltsverzeichnis
Willkommen zu unserem Cheatsheet über die WCAG 3.1 Lesbarkeit. In diesem Cheatsheet werden wir die verschiedenen Aspekte der Lesbarkeit behandeln, die in den WCAG 3.1-Richtlinien behandelt werden.
„Machen Sie Inhalt lesbar und verständlich.“
3.1.1 Sprache der Seite (A)
Weiterführende InformationenDie voreingestellte menschliche Sprache jeder Webseite kann durch Software bestimmt werden.
Ziel
Assistenzprogramme sollen die auf der Website verwendete Sprache identifizieren können.
Warum
- Screenreader und andere Assistenz-Technologien nutzen die Sprachinformation, um Inhalte richtig auszusprechen.
- Verbessert die Zugänglichkeit für mehrsprachige Nutzer.
- Suchmaschinen können Inhalte besser einordnen.
Umsetzung
Das auswählen des richtigen Sprachcodes ist wichtig.
[lang="en"] # English
[lang="de"] # DeutschAlle weiteren Sprach-Codes sind unter der ISO 639 festgelegt und Festgehalten:
List of ISO 639 language codesTechniken
Verwendung des lang Attributs auf dem HTML-Element, um die Hauptsprache der gesamten Seite zu definieren.
Festlegen der Standardsprache über die Einstellungen in einem PDF-Editor.
Angabe der Sprache für einen bestimmten Abschnitt durch Accessibility-Optionen oder Tags innerhalb eines PDF Editors.
Webflow
Code
Wichtig: Dieses lang Attribut muss auf jeder Unterseite neu gesetzt werden. Es reicht nicht aus dies nur auf dem Index oder der Homepage zu tun.
<html lang="en">
...
</html><html lang="de">
...
</html>3.1.2 Sprache von Teilen (AA)
Weiterführende InformationenDie menschliche Sprache jedes Abschnitts oder jedes Satzes im Inhalt kann durch Software bestimmt werden außer bei Eigennamen, technischen Fachbegriffen, Wörtern einer unklaren Sprache und Wörtern oder Wendungen, die Teil des Jargons des direkt umliegenden Textes geworden sind.
Ziel
Alle Textabschnitte, die sich sprachlich von der Hauptsprache der Website unterscheiden, sollen auch von Assistenz-Programmen Identifizierbar sein.
Warum
- Fremdsprachige Begriffe, Sätze, Zitate
- Webseiten mit mehrsprachigen Inhalten
- Eigennamen, Marken oder Fachbegriffe aus anderen Sprachen
Umsetzung
Techniken
Verwenden von lang Sprachattribut für einzelne Textpassagen, um Änderungen der Sprache zu kennzeichnen.
Festlegen der Sprache für einen Abschnitt oder Ausdruck mithilfe der Accessability-Optionen in PDF-Editoren.
Webflow
Code
Ein Fließtext auf eurer Website:
<html lang="de">
<p>
Hallo, mein Name ist Marcel und ich studiere
<span lang="en">User Experience Design</span>
an der Technischen Hochschule Ingolstadt.
</p>
</html>Eine Liste mit den verschiedenen Sprachoptionen die in ihren Eigennamen geschrieben sind:
<html lang="de">
<ul>
<li><a href="example.com/german" lang="de">Deutsch</a></li>
<li><a href="example.com/italian" lang="it">Italiano</a></li>
<li><a href="example.com/french" lang="fr">Français</a></li>
...
</ul>
</html>3.1.3 Ungewöhnliche Wörter (AAA)
Weiterführende InformationenEs gibt einen Mechanismus , um spezielle Definitionen von Wörtern oder Wendungen zu erkennen, die auf ungewöhnliche oder eingeschränkte Weise benutzt werden , Idiome und Jargon eingeschlossen.
Ziel
Nutzer sollen in der Lage sein, ungewöhnliche, technische oder bildhafte Begriffe zu verstehen, indem ihnen eine Definition oder Erklärung zur Verfügung gestellt wird
Warum
- Menschen mit kognitiven, sprachlichen oder Lernbehinderungen verstehen Inhalte besser, wenn ungewöhnliche Begriffe erklärt werden.
- Menschen mit Sehbehinderungen, die stark gezoomt arbeiten, verlieren oft den Zusammenhang und profitieren von eingebetteten Erklärungen.
- Erhöht die Allgemeinverständlichkeit, besonders bei technischen oder spezialisierten Inhalten.
Umsetzung
Techniken & Code
Situation A: Der Begriff hat unterschiedliche Bedeutungen auf der selben Seite
Option 1 - Nur bei der ersten Verwendung erklären:
Variante 1: Link zur Definition auf derselben Seite (z. B. Glossar unten auf der Seite)
<p>
In diesem Artikel geht es um <a href="#modulo">modulo</a>-Operationen.
</p>
<!-- Später auf der Seite -->
<h2 id="modulo">Definition: Modulo</h2>
<p>
Modulo ist eine mathematische Operation,
bei der der Rest einer Division berechnet wird.
</p>Variante 2: Link zur Definition auf einer anderen Seite (z.B. Wikipedia)
<p>
Viele Menschen kennen den Begriff
<a href="https://de.wikipedia.org/wiki/Modulo"
target="_blank">
Modulo
</a>
nicht.
</p><dl title="Nautical Terms"> <!--HTML-Tag, der eine Definitionsliste darstellt -->
<dt>Knot</dt> <!-- definiert den Begriff -->
<dd> <!-- erklärt ihn -->
A <i>knot</i> is a unit of speed equaling 1
nautical mile per hour (1.15 miles per hour or 1.852
kilometers per hour).
</dd>
<dt>Port</dt>
<dt>Portside</dt> <!-- Mehrere <dt>s können zu einem <dd> gehören (z. B. Synonyme) -->
<dd>
<i>Port</i> is the nautical term (used on
boats and ships) that refers to the left side
of a ship, as perceived by a person facing towards
the bow (the front of the vessel).
</dd>
<dt>Starboard</dt>
<dd>
<i>Starboard</i> is the nautical term (used
on boats and ships) that refers to the right
side of a vessel, as perceived by a person
facing towards the bow (the front of the vessel).
</dd>
</dl>Verwendung des <dfn>-Elements zur Kennzeichnung der Erstdefinition
<p>
<dfn>Nachhaltigkeit</dfn>
(also so zu handeln, dass Ressourcen geschont und auch für
zukünftige Generationen erhalten bleiben)
spielt eine immer wichtigere Rolle in der Wirtschaft.
</p>Situation B: Der Begriff hat eine eindeutige Bedeutung auf der Seite
Option 1 - Nur bei der ersten Verwendung erklären
Bleibt gleich
Option 2 - Bei jeder Verwendung erklären
Variante 1: Link zur Definition auf derselben Seite (z. B. Glossar unten auf der Seite)
<p>
In diesem Artikel geht es um <a href="#modulo">modulo</a>-Operationen.
</p>
<!-- Später auf der Seite -->
<h2 id="modulo">Definition: Modulo</h2>
<p>
Modulo ist eine mathematische Operation,
bei der der Rest einer Division berechnet wird.
</p>Variante 2: Link zur Definition auf einer anderen Seite (z.B. Wikipedia)
<p>
Viele Menschen kennen den Begriff
<a href="https://de.wikipedia.org/wiki/Modulo"
target="_blank">
Modulo
</a>
nicht.
</p>Verwendung von Beschreibungsliste (<dl>)
<dl title="Nautical Terms"> <!--HTML-Tag, der eine Definitionsliste darstellt -->
<dt>Knot</dt> <!-- definiert den Begriff -->
<dd> <!-- erklärt ihn -->
A <i>knot</i> is a unit of speed equaling 1
nautical mile per hour (1.15 miles per hour or 1.852
kilometers per hour).
</dd>
<dt>Port</dt>
<dt>Portside</dt> <!-- Mehrere <dt>s können zu einem <dd> gehören (z. B. Synonyme) -->
<dd>
<i>Port</i> is the nautical term (used on
boats and ships) that refers to the left side
of a ship, as perceived by a person facing towards
the bow (the front of the vessel).
</dd>
<dt>Starboard</dt>
<dd>
<i>Starboard</i> is the nautical term (used
on boats and ships) that refers to the right
side of a vessel, as perceived by a person
facing towards the bow (the front of the vessel).
</dd>
</dl>
function dudenSuchen(event) {
event.preventDefault(); // Verhindert Standard-Formular-Verhalten
const begriff = document.getElementById("suchbegriff").value.trim();
if (begriff) {
const url = "https://www.duden.de/suchen/dudenonline/" + encodeURIComponent(begriff);
window.open(url, "_blank");
}
}<h1>Begriff im Online-Wörterbuch suchen</h1>
<!-- Hier kann man ein Wort eingeben, um die Bedeutung im Duden zu sehen. -->
<p>Gib ein Wort ein, um die Bedeutung im Duden zu sehen:</p>
<form onsubmit="dudenSuchen(event)">
<label for="suchbegriff">Begriff:</label>
<input type="text" id="suchbegriff" required>
<button type="submit">Suchen</button>
</form>
<p><small>Die Definition öffnet sich in einem neuen Tab.</small></p>Webflow
3.1.4 Abkürzungen (AAA)
Weiterführende InformationenEs gibt einen Mechanismus , um die ausgeschriebene Form oder Bedeutung von Abkürzungen zu erkennen.
Ziel
Nutzer sollen Zugriff auf die ausgeschriebene Form von Abkürzungen haben
Warum
Hilft besonders Menschen mit:
- Kognitiven Einschränkungen
- Sehbehinderungen (z. B. bei Nutzung von Bildschirmvergrößerungen)
- Geringem Sprachverständnis oder schlechtem Erinnerungsvermögen
Umsetzung
Techniken
Bereitstellung bei der ersten Verwendung einer Abkürzung unmittelbar vor oder nach der ausgeschriebenen Form - Beispiel: Die Straßenverkehrs-Ordnung (StVO)…
Variante 1: Link zur Definition auf derselben Seite (z. B. Glossar unten auf der Seite)
<p>
In diesem Artikel geht es um <a href="#modulo">modulo</a>-Operationen.
</p>
<!-- Später auf der Seite -->
<h2 id="modulo">Definition: Modulo</h2>
<p>
Modulo ist eine mathematische Operation,
bei der der Rest einer Division berechnet wird.
</p>Variante 2: Link zur Definition auf einer anderen Seite (z.B. Wikipedia)
<p>
Viele Menschen kennen den Begriff
<a href="https://de.wikipedia.org/wiki/Modulo"
target="_blank">
Modulo
</a>
nicht.
</p>Bereitstellung einer Funktion zur Suche in einem Online-Wörterbuch
Bereitstellung von Definitionen für Abkürzungen über einen E-Eintrag für ein Strukturelement (in PDFs)
Siehe 3.1.3 “Ungewöhnliche Wörter” (G55/ G62/ G70 - gleiche Umsetzung in HTML & Webflow)
3.1.5 Leseniveau (AAA)
Weiterführende InformationenWenn der Text nach der Entfernung von Eigennamen und Titeln Lesefähigkeiten voraussetzt, die über das Niveau der niedrigen, sekundären Schulbildung hinausgehen, dann gibt es ergänzenden Inhalt oder eine Version, die keine über die niedrige, sekundäre Schulbildung hinausgehenden Lesefähigkeiten verlangt.
Ziel
- Sicherzustellen, dass zusätzliche Inhalte verfügbar sind, um das Verständnis schwieriger oder komplexer Texte zu unterstützen.
- Einen messbaren Standard zu etablieren, der anzeigt, wann solche zusätzlichen Inhalte erforderlich sind
Warum?
Texte zugänglich machen für Menschen mit:
- Kognitive Einschränkungen
- Leseschwierigkeiten/ Dyslexie
- geringem Sprachverständnis
- Menschen mit geringer Aufmerksamkeitsspanne
Techniken
Weitere Informationsquellen und Beispiele (Nicht Teil der WCAG)
Netzwerk leichte Sprache Regelwerk Lebenshilfe in leichter Sprache3.1.6 Aussprache (AAA)
Weiterführende InformationenEs gibt einen Mechanismus , um die bestimmte Aussprache von Wörtern zu erkennen, wenn die Bedeutung der Wörter – im Zusammenhang – mehrdeutig ist, wenn man die Aussprache nicht kennt.
Ziel
Das Verständnis von Wörtern zu verbessern und Missverständnisse bei gleich geschriebenen, aber unterschiedlich bedeutenden Wörtern minimieren.
Warum
- Fremdwörter
- Homographen (gleich geschrieben, unterschiedlich gesprochen)
- Poetische Texte, Lyrik, Fachsprache
Umsetzung
Zuerst sollte man die Korrekte Lautschrift für ein entsprechendes Wort finden. Diese gibt es unter:
Techniken
<p>
<ruby>Band<rt>bænd</rt></ruby>
und
<ruby>Band<rt>bant</rt></ruby>
sind zwei verschiedene Wörter.
</p>Webflow
Code
Einfacher Text mit Lautschrift Tipp wird über dem Text angezeigt.
<html lang="de">
<p class="ruby-text">
Vergiss nie, dass
<ruby>Band<rt>bænd</rt></ruby>
und
<ruby>Band<rt>bant</rt></ruby>
eine unterschiedliche Bedeutung haben.
</p>
</html>
Ein zusätzlicher Toggle Button welcher Lautschrift für alle Textelemente mit der Klasse class="ruby-text" anzeigen und verbergen kann solange die Lautschrift per ruby-Tag festgelegt wurde.
(CSS Style ruby rt kann die Größe des Lautschrift-Textes verändern)
<html>
<!-- Den CSS Style entweder ins globale Stylesheet machen oder in Webflow unter Dashboard/Settings/Custom Code/ einfügen-->
<!-- Hier kannst du auch die Farbe, Größe und Position deiner Lautschrift ändern (Gerade ist es Blau und Darüber) -->
<style>
.hidden-rt rt {
display: none;
}
.ruby-text ruby {
ruby-position: over;
font-size: 1em;
}
.ruby-text rt {
font-size: 0.75em;
color: #0082fc;
font-weight: 500;
}
</style>
<!-- Das Script entweder einfach in den HTML code kopieren oder für Webflow unter Dashboard/Settings/Custom Code/ einfügen -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggleElement = document.getElementById('toggleRuby');
const elements = document.querySelectorAll('.ruby-text');
toggleElement.addEventListener('click', function(event) {
event.preventDefault(); // prevent jump if it’s a link
let isHidden = elements[0].classList.contains('hidden-rt');
elements.forEach(el => el.classList.toggle('hidden-rt'));
// Update text if the element has textContent
if (toggleElement.textContent) {
toggleElement.textContent = isHidden ? "Aussprache verbergen" : "Aussprache anzeigen";
}
});
});
</script>
<!-- Jedes html Element kann mit der ID "toggleRuby" versehen, sei es Button, Link, Div etc... -->
<!-- Das Element mit der ID "toggleRuby" dient dann als Schalter für das Anzeigen der Lautschriften -->
<button id="toggleRuby">Aussprache anzeigen</button>
<!-- Wenn dein Text Lautschrift enthält musst du ihm die Klasse "ruby-text" geben damit er von dem Script erkannt wird -->
<!-- Du kannst die Klasse auch zu "ruby-text hidden-rt" umbennen. Dann ist die Lautschrift zunächst versteckt und kann anschließend durch den "toggleRuby" Button angezeigt werden -->
<p class="ruby-text">
Vergiss nie, dass
<ruby>Band<rt>bænd</rt></ruby>
und
<ruby>Band<rt>bant</rt></ruby>
eine unterschiedliche Bedeutung haben.
</p>
</html>Zusammenfassung für die Portfoliowebsite
Um Level A und AA zu erfüllen:
-
langAttribute für html Elemente und einzelne anderssprachige Elemente verwenden
Um Level AAA zu erfüllen:
- Ungewöhnliche Wörter definieren
- Abkürzungen ausgeschrieben oder erklärt zur Verfügung stellen
- Sicherstellen, dass Texte für alle Verständlich sind
- Aussprache von mehrdeutigen Wörtern klarstellen
