Textinhalte

Allgemeines zu Texten

Folgende Kriterien stammen aus der Checkliste:
  • Textabschnitte in einer anderen Sprache sind entsprechend ausgezeichnet.
  • Texte sind auf 200 % vergrößerbar, ohne dass Inhalte und Funktionen verloren gehen.
  • Der Textabstand ist anpassbar, ohne dass Inhalte und Funktionen verloren gehen.
Anderssprachige Textabschnitte müssen ausgezeichnet werden, damit Screenreader den Text korrekt aussprechen. Menschen mit Sehbehinderungen können außerdem die Lesbarkeit von Texten verbessern, indem sie mithilfe von Werkzeugen die Abstände zwischen Zeilen, Absätzen, Zeichen und Worten anpassen können. Obwohl der Text dadurch mehr Platz braucht, sollte er vollständig angezeigt werden.

Umsetzung der Kriterien

Auszeichnung von Textinhalten: Zeichnen Sie Ihre Inhalte mit entsprechenden HTML-Strukturelementen aus oder nutzen Sie die Formatvorlagen Ihres Editors. Weitere Informationen zur Auszeichnung von Textinhalten erhalten Sie in den nachfolgenden Einträgen.
Vermeiden Sie Text in Bildern: Wenn möglich, vermeiden Sie die Verwendung von Bildern zur Darstellung von Text. Text in Bildern kann von Bildschirmlesegeräten nicht gelesen werden und lässt sich bei Zoom oder responsivem Design nicht gut skalieren. Falls es sich nicht vermeiden lässt, geben Sie den Bildinhalt im Alternativtext wieder.
Einfache und klare Sprache: Versuchen Sie, eine einfache und klare Sprache zu verwenden. Vermeiden Sie komplexe Sätze und Jargon, es sei denn, es ist unbedingt notwendig. Dies ist besonders wichtig für Menschen mit kognitiven Einschränkungen und Nicht-Muttersprachler.

Auszeichnung von Inhalten

OPAL-Editor: Auszeichnung anderssprachiger Textabschnitte mithilfe des Quellcode-Werkzeugs
Auszeichnung anderssprachiger Textabschnitte
  1. Wo vorhanden folgendes auswählen: Menüleiste: Werkzeuge > Quellcode
  2. Ergänzen Sie lang='Sprachkürzel' in dem <p> HTML-Strukturelement des Textabschnitts, der nicht in der Hauptsprache des Dokuments verfasst ist.
                          
                        <p lang="de">Das ist ein deutscher Absatz.</p>
                        <p lang="en">This is an English paragraph.</p>
HTML-Tags: Sprache angeben über lang-Attribut innerhalb eines HTML-Strukturelements
                  
                    <p lang="de">Das ist ein deutscher Absatz.</p>
                    <p lang="en">This is an English paragraph.</p>

BITV-Anforderungen:

Überschriften

Folgende Kriterien stammen aus der Checkliste:
  • Die Überschriften werden mit entsprechenden Tags ausgezeichnet, gemäß der Überschriftebenen korrekt verschachtelt und beschreiben den nachfolgenden Inhalt.
Durch Überschriften werden Inhalte strukturiert: zusammenhängende Absätze werden gruppiert und der Inhalt leicht überschaubar. Nutzende, die eine rein visuelle Unterscheidung von Überschriften und sonstige Text nicht wahrnehmen können, sind darauf angewiesen, dass die Struktur unabhängig von der Darstellung zugänglich ist. Durch die Verwendung von Überschrift-Elementen können diese nicht nur durch Assistenzsysteme (bspw. Screenreader) als solche interpretiert werden, es sind auch Inhaltsverzeichnisse generierbar und die Darstellung an besondere Bedürfnisse anpassbar.

Verschachtelung

korrekte Verschachtelung zur Gliederung des Inhalts
  • Überschrift 1
    • Überschrift 2
      • Überschrift 3
      • ...
    • Überschrift 2
Das heißt: kein Überspringen einer Ebene (z.B. h3 direkt nach h1)

Auszeichnung von Inhalten

OPAL-Editor: Menüleiste: Format > Formate > Überschriften > Auswahl Überschrift
Tastenkombinationen
Windows: Shift + Alt + gewünschte Überschriftsebene (1-6)
macOS: Ctrl + + Überschriftsebene (1-6)
HTML-Tags: der Ebene entsprechend <h1> bis <h6>

BITV-Anforderungen:

Absätze

Folgende Kriterien stammen aus der Checkliste:
  • Absätze und Hervorhebungen sind als solche ausgezeichnet.
  • Text wird direkt verwendet, um Informationen zu vermitteln, anstatt Bilder von diesem.
Absätze teilen Texte in kleinere Einheiten auf und erleichtern so das Verständnis. Diese müssen strukturell gekennzeichnet sein, damit Assistenzsysteme Inhalte Absatzweise durchlaufen oder eine andere Präsentation wählen können. Ebenso sind visuelle Hervorhebungen nur für Assistenzsysteme erfassbar, wenn diese mit den entsprechenden Strukturelementen oder Formatvorlagen erstellt wurden.

Auszeichnung von Inhalten

OPAL-Editor:
Absatz: Menüleiste: Format > Formate > Blöcke > Absatz
Fett: Menüleiste: Format > Fett
Kursiv: Menüleiste: Format > Kursiv
Tastenkombinationen
Windows: Absatz: Shift + Alt + 7, Fett: Ctrl + B, Kursiv: Ctrl + I
macOS: Absatz: Ctrl + + 7; Fett: + B; Kursiv: + I
HTML-Tags: Absatz: <p>, Fett: <strong>, Kursiv: <em>
Codebeispiel Absatz
                        
                            <p>This is an <strong>important</strong> paragraph.</p>

BITV-Anforderungen:

Zitate

Folgende Kriterien stammen aus der Checkliste:
  • Zitate sind als solche ausgezeichnet.
Zitate müssen mit entsprechenden Strukturelementen gekennzeichnet sein, damit Assistenzsysteme diese anders (farblich oder stimmlich) hervorheben können. Es ermöglicht Tastaturbenutzern ebenfalls ein Überspringen des gesamten Abschnitts.

Auszeichnung von Inhalten

OPAL-Editor: Menüleiste: Format > Formate > Blöcke > Blockzitat
HTML-Tags: lange Zitate: <blockquote>, Quelle des Zitats: <cite>; Zitate innerhalb einer Zeile: <q>
Codebeispiel Blockzitat
                        
                        <blockquote>
                            <p>This is an example of a long quote. It might contain multiple sentences, or even multiple paragraphs.</p>
                            <cite>Source of the Quote</cite>
                        </blockquote>

BITV-Anforderungen:

Listen

Folgende Kriterien stammen aus der Checkliste:
  • Aufzählungen und Nummerierungen sind als solche ausgezeichnet.
Listen stellen häufig hierarchische Strukturen dar. Damit diese nicht nur visuell angemessen dargestellt werden, müssen zur Erstellung Strukturelemente oder Formatvorlagen verwendet werden. Damit könne Nutzer von Assistenzsystemen Listen oder einzelne Einträge überspringen, sowie eine andere für sie passendere Präsentation einstellen.

Auszeichnung von Inhalten

OPAL-Editor: Menüleiste: Listen-Icon in der dritten Zeile
HTML-Tags: nummerierte Liste: <ol>, Aufzählung: <ul>, Listenelemente: <li>
Codebeispiel einer verschachtelten Liste
                        
                            <ol>
                                <li>This is the first item of the ordered list</li>
                                    <ul>
                                        <li>This is the first item of the nested unordered list</li>
                                    </ul>
                            </ol>
Definitionslisten nutzen zur Strukturierung keine Listenpunkte sonder Begriffe. Mit <dl> wird eine Definitionsliste erstellt. Als Listenelemente gibt es statt <li> jeweils einen Begriff <dt> und dessen Definition <dd>.
                      
                          <dl>
                            <dt>Date</dt>
                            <dd>Calendar entry 1</dd>
                            <dd>Calendar entry 2</dd>
                          </dl>

BITV-Anforderungen:

Tabellen

Folgende Kriterien stammen aus der Checkliste:
  • Die Tabellen haben eine logische Struktur, klare Überschriften und Kontextinformationen.
  • Die Zuordnung von Überschriften und Inhalten (über 'scope' oder über 'id' und 'headers') ist korrekt.
  • Es wird auf Layouttabellen, die lediglich Text formatieren, verzichtet oder sie besitzen kein Struktur-Markup.
Sehbehinderte und blinde Nutzende entwickeln ausgehend von den Überschriften und anderen im Kontext verfügbaren Informationen eine Vorstellung vom Aufbau einer Tabelle. Damit dies funktioniert, müssen Tabellen eine klare Struktur und eindeutige Überschriften haben. Wenn Überschriften in Kopfzeilen oder -spalten mit Strukturelementen gekennzeichnet sind, können Screenreader diese bei einem Zeilen- bzw. Spaltenwechsel vorlesen.

Umsetzung der Kriterien

Die Verwendung von Tabellen für das Layout einer Seite soll vermieden werden. Screenreader lesen dadurch die Seite so vor, dass sie die Tabellenstruktur und nicht das visuelle Layout widerspiegelt.

Auszeichnung von Inhalten

Tabelle erstellen

OPAL-Editor: Menüleiste: Tabelle > Tabelle > Auswahl der Zeilen- und Spaltenanzahl

Tabelle formatieren

Beschreibung angeben
  1. In Menüleiste Tabelle und danach Tabelleneigenschaften auswählen.
  2. 'Beschriftung anzeigen' auswählen.
  3. 'Caption' passend zum Tabelleninhalt ändern.
Kopfzeile kennzeichnen
  1. Zuerst gewünschte Zeile oder Spalte markieren.
  2. Anschließend in Menüleiste: Tabelle > Zelle > Zelleneigenschaften auswählen.
  3. Als Zelltyp 'Kopfzelle' auswählen.
  4. Als Bereich für Spaltenüberschriften 'Spalte' und für Zeilenüberschriften 'Zeile' auswählen.
komplexe Tabelle: Zellen verbinden
  1. zu verbindende Zellen markieren
  2. Menüleiste: Tabelle > Zelle > Zellen verbinden
HTML-Tags:
Tabelle anlegen: <table>, Zusammenfassung: <caption>, Tabellenkopf: <thead>, Tabellenkörper: <tbody>, Fußnote: <tfoot>
Tabelleninhalt: Tabellenzeilen: <tr>, Tabellenüberschriften: <th>, Tabellendaten: <td>

Tabelle mit HTML-Code formatieren

  • Geben Sie eine Beschreibung an: Verwenden Sie das <caption>-Element, um einen kurzen Überblick über die Tabelle zu geben. Dies hilft den Benutzern zu verstehen, welche Art von Informationen in der Tabelle zu erwarten sind. 
                                
                                <table>
                                <caption>This is a caption for this table.</caption>
                                  ...
                                </table>
    This is a caption for this table.
    Heading 1 Heading 2
    value 1 value 2
  • Erstellen Sie den Tabelleninhalt: Nutzen Sie thead und tbody, um ihre Tabelle zu gliedern. 
                                
                                <table>
                                <caption>This is a caption for this table.</caption>
                                  <thead>  
                                    <tr>  
                                      <th >Heading 1</th>
                                      <th >Heading 2</th>
                                    </tr>
                                  </thead>  
                                  <tbody>  
                                    <tr>
                                      <td>value 1</td>
                                      <td>value 2</td>
                                    </tr>
                                    ...
                                  </tbody>  
                                </table>
    This is a caption for this table.
    Heading 1 Heading 2
    value 1 value 2
  • Legen Sie den Bereich für Überschriften fest: Verwenden Sie das Attribut scope für <th>-Elemente, um anzugeben, ob es sich um Überschriften für eine Spalte (scope="col") oder eine Zeile (scope="row") handelt. Dies ist bei Tabellen mit Zeilen- und Spaltenüberschriften besonders wichtig und hilft assistiven Technologien, die Überschriften korrekt den Datenezellen zuzordnen. 
                                      
                                      <table>
                                        <tr>  
                                          <td> </td>
                                          <th scope="col">Monday</th>
                                          <th scope="col">Tuesday</th>
                                        </tr>
                                        <tr>
                                          <th scope="row"> 09:00 – 11:00</th>
                                          <td>Closed</td>
                                          <td>Open</td>
                                        </tr>
                                        ...
                                      </table>
    Monday Tuesday
    09:00 – 11:00 Closed Open
  • Erstellen von verbundenen Zellen: Um Tabellenzellen zu verbinden, können die Attribute rowspan und colspan verwendet werden. Rowspan verbindet die angegebene Anzahl an Zellen innerhalb einer Zeile, colspan in einer Spalte. Nutzen Sie außerdem id- und headers-Attribute, um Datenzellen explizit mit den richtigen Überschriften zu verknüpfen. 
                                  
                                  <table>
                                    <tr>
                                      <th id="name">First Name</th>
                                      <th id="job">Job role</th>
                                    </tr>
                                    <tr>
                                      <td headers="name">Lisa</td>
                                      <td headers="job" rowspan="2">Marketing Coordinator</td>
                                    </tr>
                                    <tr>
                                      <td headers="name">John</td>
                                    </tr>
                                    <tr>
                                      <td colspan="2">Welcome to the company</td>
                                    </tr>
                                  ...
                                  </table>
    First Name Job role
    Lisa Marketing Coordinator
    John
    Welcome to the company

BITV-Anforderungen:

Verweise

Folgende Kriterien stammen aus der Checkliste:
  • Querverweise sind auch ohne bestimmte Sinneswahrnehmungen wie Farbe, Form oder Position verständlich.
Querverweise sind Links oder Verweise in einem Text, die auf andere Abschnitte des selben Textes oder auf externe Quellen verweisen. Sie erleichtern es, relevante Informationen zu finden oder weitere Inhalte zu entdecken.

Umsetzung der Kriterien

Um barrierefreie Querverweise zu erstellen, sollte man sichergehen, dass sie nicht nur auf visuellen Eigenschaften wie Farbe, Form oder Position basieren.

Positive Beispiele: "Wie in Abbildung 3 dargestellt…", "Wie im Kapitel 'Hintergrund' (S.8) ..."

Negative Beispiele (nicht zugänglich): "In der Abbildung zur linken...", "Wie oben beschrieben..."

BITV-Anforderungen:

Links

Folgende Kriterien stammen aus der Checkliste:
  • Linktexte sind aussagekräftig und geben Ziel und Zweck wieder, Download-Links enthalten das Dateiformat.
  • Mausklickeingabe auf Links kann abgebrochen oder rückgängig gemacht werden.
  • Der sichtbare Linktext ist Teil des zugänglichen Namens.
Blinde Nutzer, die sich von Link zu Link bewegen, bekommen deren Linktexte vorgelesen. Diese sollten möglichst aussagekräftig vermitteln, wohin sie führen. Außerdem ist es für die Sprachsteuerung wichtig, dass sichtbare Beschriftungen ebenfalls im zugänglichen Namen von Bedienelementen enthalten sind, damit diese korrekt ausgesprochen werden können.
Links sollten nicht bereits beim Drücken der Maustaste, sondern erst beim Loslassen dieser ausgelöst werden. Dadurch haben Menschen mit motorischen Beeinträchtigungen die Möglichkeit, Fehleingaben durch ein Wegbewegen der Maus zu vermeiden. Ebenso nutzen motorisch beeinträchtigte Menschen vorrangig die Tastatur. Hierfür sollte die Fokusreihenfolge nachvollziehbar sein, um eine einfache Orientierung zu gewährleisten.

Umsetzung der Kriterien

Aussagekräftige Linktexte: Linktexte sollen auch ohne Kontext Sinn ergeben. Vage Formulierungen wie "Klicken Sie hier" oder "Lesen Sie mehr" sollten vermieden werden. Führen Links zu Inhalten in anderen Formaten wie PDF, sollte dies ebenfalls im Namen enthalten sein.

Auszeichnung von Inhalten

BITV-Anforderungen:

Einbindung eigener HTML-Dateien

Die nachfolgenden Inhalte können nicht nur mit dem OPAL Editor erstellt werden. Es wird zusätzlicher HTML-Code benötigt.

Schaltflächen

Folgende Kriterien stammen aus der Checkliste:
  • Funktionen von Bedienelementen sollen nicht bereits durch das Herüberfahren mit einem Zeiger ausgeführt werden. Ansonsten kann die Funktion abgebrochen oder rückgängig gemacht werden.
  • Sichtbare Beschriftungen von Bedienelementen kommen im dazugehörigen zugänglichen Namen vor, der über nicht sichtbare Attribute wie `title` oder `aria-label` festgelegt wird.

Umsetzung der Kriterien


  • Verwenden Sie semantisches HTML: Das HTML-Element <button> verfügt über eingebaute Zugänglichkeitsfunktionen, z. B. wird es von Screenreadern als Schaltfläche erkannt und ist über die Tastatur bedienbar. Vermeiden Sie die Verwendung nicht-semantischer Elemente (wie <div> oder <span>) zur Erstellung von Schaltflächen, es sei denn, Sie sind bereit, zusätzliche Attribute und Ereignishandler hinzuzufügen, um die Zugänglichkeitsfunktionen von <button> zu replizieren. 
                            
                            <button>Click me!</button>
  • Geben Sie klare Beschriftungen an: Die Funktion der Schaltfläche sollte durch ihre Textbeschriftung klar kommuniziert werden. Wenn die Schaltfläche keinen Text hat (z. B. nur ein Symbol), verwenden Sie das Attribut aria-label oder aria-labelledby, um eine für Screenreader geeignete Beschriftung anzugeben. 
                                
                                <button aria-label="Close"><img src="close-icon.png" alt=""></button>
  • Achten Sie auf ausreichenden Kontrast: Die Farbe der Schaltfläche sollte einen ausreichenden Kontrast zum Hintergrund haben, damit auch farbenblinde oder sehbehinderte Benutzer sie deutlich erkennen können.

BITV-Anforderungen:

Formularfelder

  • Verwenden Sie semantisches HTML: Die HTML-Formularelemente (wie <input>, <textarea> und <select>) verfügen über eingebaute Zugänglichkeitsfunktionen, z. B. werden sie von Screenreadern als Formularfelder erkannt und sind über die Tastatur bedienbar. 
                            
                            <input type="text" id="name" name="name">
  • Geben Sie klare Beschriftungen an: Jedes Formularfeld sollte ein zugehöriges <label>-Element haben. Diese Beschriftung hilft nicht nur sehenden Benutzern zu verstehen, wofür das Feld gedacht ist, sondern kann auch von Screenreadern gelesen werden, damit auch blinde oder sehbehinderte Benutzer verstehen, was das Feld bezweckt. 
                            
                            <label for="name">Name:</label>
                            <input type="text" id="name" name="name">
  • Geben Sie Fehler- und Statusmeldungen an: Wenn bei der Eingabe des Benutzers ein Fehler auftritt oder sich der Zustand des Formulars ändert, geben Sie eine für Screenreader geeignete Meldung aus. Dies kann mit dem Attribut aria-live geschehen. 
                            
                            <div id="error" aria-live="polite"></div>

BITV-Anforderungen:

Benutzerdefinierte Elemente

Dieser Abschnitt bezieht sich auf Features oder Funktionalitäten, die mit benutzerdefinierten Elementen erstellt werden können. Diese Funktionen können die Verwendung von benutzerdefinierten HTML-Dateien oder Lernmodulen wie SCORM, CP, etc. erfordern. Hier finden Sie einige Erläuterungen zu diesen Funktionen:

  1. CAPTCHAs: Ein CAPTCHA ist eine Sicherheitsmaßnahme, die Bots oder automatisierte Software daran hindern soll, bestimmte Aktionen auszuführen. In der Regel müssen Benutzer Text in einem Bild oder Ton eingeben oder eine einfache Aufgabe lösen, um zu beweisen, dass sie Menschen sind.
  2. Komplexe Zeigergesten: Dies bezieht sich auf komplexe Gesten, die die Verwendung einer Maus oder anderer Zeigergeräte erfordern, wie z. B. Drag & Drop, Multi-Touch usw.
  3. Tastaturkurzbefehle über einzelne Tasten: Dies bezieht sich auf Funktionalitäten, die durch Tastaturkürzel über einzelne Tasten ausgelöst werden können. Zum Beispiel könnte es einen Shortcut geben, um direkt zu einem bestimmten Teil einer Website zu navigieren oder eine bestimmte Aktion auszulösen.
  4. Bewegte Inhalte: Dies bezieht sich auf Inhalte, die sich auf einer Seite bewegen oder dynamisch verändern, wie z. B. scrollende Nachrichtenticker oder Animationen.
  5. Blinkender Inhalt: Dies bezieht sich auf Inhalte, die blinken, wie z. B. Warnungen oder Aufforderungen. Diese Art von Inhalten sollte sparsam verwendet werden, da sie die Nutzer ablenken oder bei manchen Nutzern, z. B. Menschen mit Epilepsie, Probleme verursachen können.
  6. Hover-Effekte: Dies bezieht sich auf Effekte, die ausgelöst werden, wenn ein Benutzer mit der Maus über ein Element fährt, wie z. B. Popup-Menüs oder Tooltips.
  7. Zeitlich begrenzte Inhalte: Dies bezieht sich auf Inhalte, die nur für einen bestimmten Zeitraum verfügbar oder sichtbar sind, wie z. B. ein Timer für eine Online-Prüfung oder ein zeitlich begrenztes Angebot.
  8. Bewegungsaktivierung: Dies bezieht sich auf Funktionen, die durch die Bewegung eines Geräts oder die physische Bewegung des Benutzers ausgelöst werden, wie z. B. das Schütteln eines mobilen Geräts.
  9. Dynamische Inhalte: Dies bezieht sich auf Inhalte, die dynamisch geladen oder geändert werden, wie z. B. Suchergebnisse auf der Grundlage von Benutzereingaben oder Informationen, die in Echtzeit aktualisiert werden.
  10. Status-Warnungen: Hierbei handelt es sich um Warnungen, die den Benutzer über bestimmte Statusänderungen informieren, wie z. B. eine Benachrichtigung über den Abschluss des Downloads oder Fehlermeldungen.

BITV-Anforderungen:

CP Lerninhalt in OPAL

Hier ist ein Link für eine Einführung in CP Lerninhalt in Opal.