WCAG 3.1 Readability Cheatsheet
- Prof. Dr. Simon Nestler Lecturer
- Marcel Team member
- Hayrettin Team member
Table of Contents
Welcome to our cheatsheet on WCAG 3.1 Readability. In this cheatsheet, we cover the different readability aspects addressed in the WCAG 3.1 guidelines.
“Make text content readable and understandable.”
3.1.1 Language of Page (A)
Further informationThe default human language of each Web page can be programmatically determined .
Goal
Assistive technologies should be able to identify the language used on the website.
Why
- Screen readers and other assistive technologies use language information to pronounce content correctly.
- Improves accessibility for multilingual users.
- Search engines can classify content more accurately.
Implementation
Choosing the correct language code is important.
[lang="en"] # English
[lang="de"] # GermanAll additional language codes are defined and documented under ISO 639:
List of ISO 639 language codesTechniques
Use the lang attribute on the HTML element to define the primary language of the entire page.
Set the default language via the settings in a PDF editor.
Specify the language for a specific section using accessibility options or tags inside a PDF editor.
Webflow
Code
Important: This lang attribute must be set again on every subpage. It is not enough to set it only on the index page or homepage.
<html lang="en">
...
</html><html lang="de">
...
</html>3.1.2 Language of Parts (AA)
Further informationThe human language of each passage or phrase in the content can be programmatically determined , except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the jargon of the immediately surrounding text.
Goal
All text passages that differ in language from the primary website language should also be identifiable by assistive technologies.
Why
- Foreign-language terms, sentences, quotes
- Websites with multilingual content
- Proper names, brands, or technical terms from other languages
Implementation
Techniques
Use the lang language attribute for individual text passages to mark language changes.
Define the language for a section or expression using accessibility options in PDF editors.
Webflow
Code
A paragraph of running text on your website:
<html lang="de">
<p>
Hello, my name is Marcel and I study
<span lang="en">User Experience Design</span>
at Technische Hochschule Ingolstadt.
</p>
</html>A list of different language options written in their native names:
<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 Unusual Words (AAA)
Further informationA mechanism is available for identifying specific definitions of words or phrases used in an unusual or restricted way , including idioms and jargon .
Goal
Users should be able to understand unusual, technical, or figurative terms by providing a definition or explanation.
Why
- People with cognitive, language, or learning disabilities understand content better when unusual terms are explained.
- People with visual impairments who work with strong zoom levels often lose context and benefit from embedded explanations.
- Improves overall comprehensibility, especially for technical or specialized content.
Implementation
Techniques & Code
Situation A: The term has different meanings on the same page
Option 1 - Explain only at the first occurrence:
Variant 1: Link to a definition on the same page (e.g. glossary at the bottom)
<p>
This article discusses <a href="#modulo">modulo</a> operations.
</p>
<!-- Later on the same page -->
<h2 id="modulo">Definition: Modulo</h2>
<p>
Modulo is a mathematical operation
that calculates the remainder of a division.
</p>Variant 2: Link to a definition on another page (e.g. Wikipedia)
<p>
Many people are not familiar with the term
<a href="https://de.wikipedia.org/wiki/Modulo"
target="_blank">
Modulo
</a>.
</p><dl title="Nautical Terms"> <!-- HTML tag for a description list -->
<dt>Knot</dt> <!-- defines the term -->
<dd> <!-- explains it -->
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> <!-- Multiple <dt> can belong to one <dd> (e.g. synonyms) -->
<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>Use the <dfn> element to mark the first definition
<p>
<dfn>Sustainability</dfn>
(that is, acting in a way that conserves resources and keeps them
available for future generations)
is becoming increasingly important in business.
</p>Situation B: The term has one clear meaning on the page
Option 1 - Explain only at the first occurrence
Stays the same
Option 2 - Explain at every occurrence
Variant 1: Link to a definition on the same page (e.g. glossary at the bottom)
<p>
This article discusses <a href="#modulo">modulo</a> operations.
</p>
<!-- Later on the same page -->
<h2 id="modulo">Definition: Modulo</h2>
<p>
Modulo is a mathematical operation
that calculates the remainder of a division.
</p>Variant 2: Link to a definition on another page (e.g. Wikipedia)
<p>
Many people are not familiar with the term
<a href="https://de.wikipedia.org/wiki/Modulo"
target="_blank">
Modulo
</a>.
</p>Use a description list (<dl>)
<dl title="Nautical Terms"> <!-- HTML tag for a description list -->
<dt>Knot</dt> <!-- defines the term -->
<dd> <!-- explains it -->
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> <!-- Multiple <dt> can belong to one <dd> (e.g. synonyms) -->
<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 searchDuden(event) {
event.preventDefault(); // Prevent default form behavior
const term = document.getElementById("searchterm").value.trim();
if (term) {
const url = "https://www.duden.de/suchen/dudenonline/" + encodeURIComponent(term);
window.open(url, "_blank");
}
}<h1>Search for a term in an online dictionary</h1>
<!-- Enter a word here to view its meaning in Duden. -->
<p>Enter a word to view its meaning in Duden:</p>
<form onsubmit="searchDuden(event)">
<label for="searchterm">Term:</label>
<input type="text" id="searchterm" required>
<button type="submit">Search</button>
</form>
<p><small>The definition opens in a new tab.</small></p>Webflow
3.1.4 Abbreviations (AAA)
Further informationA mechanism is available for identifying the expanded form or meaning of abbreviations .
Goal
Users should have access to the expanded form of abbreviations.
Why
Especially helpful for people with:
- Cognitive impairments
- Visual impairments (e.g. when using screen magnification)
- Limited language comprehension or poor memory
Implementation
Techniques
Provide the expanded form at the first occurrence of an abbreviation, immediately before or after it - example: The Road Traffic Regulations (StVO)…
Variant 1: Link to a definition on the same page (e.g. glossary at the bottom)
<p>
This article discusses <a href="#modulo">modulo</a> operations.
</p>
<!-- Later on the same page -->
<h2 id="modulo">Definition: Modulo</h2>
<p>
Modulo is a mathematical operation
that calculates the remainder of a division.
</p>Variant 2: Link to a definition on another page (e.g. Wikipedia)
<p>
Many people are not familiar with the term
<a href="https://de.wikipedia.org/wiki/Modulo"
target="_blank">
Modulo
</a>.
</p>Provide a function to search in an online dictionary.
Provide definitions for abbreviations via an E entry for a structure element (in PDFs).
See 3.1.3 “Unusual Words” (G55/G62/G70 - same implementation in HTML & Webflow)
3.1.5 Reading Level (AAA)
Further informationWhen text requires reading ability more advanced than the lower secondary education level after removal of proper names and titles, supplemental content is available, or a version is provided that does not require reading ability more advanced than the lower secondary education level.
Goal
- Ensure that additional content is available to support understanding of difficult or complex text.
- Establish a measurable standard that indicates when such additional content is required.
Why?
Make text accessible for people with:
- Cognitive impairments
- Reading difficulties/dyslexia
- Limited language comprehension
- Short attention span
Techniques
Additional information sources and examples (not part of WCAG)
Netzwerk Leichte Sprache rules Lebenshilfe in plain language3.1.6 Pronunciation (AAA)
Further informationA mechanism is available for identifying specific pronunciation of words where meaning, in context, is ambiguous without knowing the pronunciation.
Goal
Improve understanding of words and reduce misunderstandings for words that are spelled the same but have different meanings.
Why
- Foreign words
- Homographs (same spelling, different pronunciation)
- Poetry, lyrical texts, technical language
Implementation
First, find the correct phonetic transcription for the relevant word. You can find it here:
Techniques
<p>
<ruby>Band<rt>bænd</rt></ruby>
and
<ruby>Band<rt>bant</rt></ruby>
are two different words.
</p>Webflow
Code
Simple text with a phonetic hint displayed above the text.
<html lang="de">
<p class="ruby-text">
Never forget that
<ruby>Band<rt>bænd</rt></ruby>
and
<ruby>Band<rt>bant</rt></ruby>
have different meanings.
</p>
</html>
An additional toggle button can show and hide pronunciation for all text elements with class class="ruby-text", as long as pronunciation is defined with the ruby tag.
(CSS style ruby rt can change the size of the pronunciation text)
<html>
<!-- Put this CSS either in your global stylesheet or in Webflow under Dashboard/Settings/Custom Code/ -->
<!-- You can also change color, size, and position of pronunciation here (currently blue and above the word) -->
<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>
<!-- Either copy the script directly into your HTML code, or for Webflow add it under Dashboard/Settings/Custom Code/ -->
<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 ? "Hide pronunciation" : "Show pronunciation";
}
});
});
</script>
<!-- Any HTML element can use the ID "toggleRuby", whether button, link, div, etc. -->
<!-- The element with ID "toggleRuby" acts as the switch for showing pronunciation -->
<button id="toggleRuby">Show pronunciation</button>
<!-- If your text contains pronunciation, give it class "ruby-text" so the script detects it -->
<!-- You can also rename the class to "ruby-text hidden-rt". Then pronunciation is hidden first and can be shown using the "toggleRuby" button -->
<p class="ruby-text">
Never forget that
<ruby>Band<rt>bænd</rt></ruby>
and
<ruby>Band<rt>bant</rt></ruby>
have different meanings.
</p>
</html>Summary for the portfolio website
To meet Level A and AA:
- Use
langattributes for HTML elements and for individual elements in a different language
To meet Level AAA:
- Define unusual words
- Provide abbreviations in expanded form or with explanations
- Ensure text is understandable for everyone
- Clarify pronunciation of ambiguous words
RGB-Licht Fernbedienungs Designkonzept
Gestaltung einer minimalistischen und modernen benutzerfreundlichen RGB-Lichtsteuerfernbedienung
WCAG 3.1 Lesbarkeit Cheatsheet
Cheatsheet zu der WCAG 3.1: Lesbarkeit als Teil eines Vortrags zu dem Thema Barrierefreiheit