Screenreader

Der Screenreader ist in der Lage, den Inhalt der Website per Sprachsynthese vorzulesen. Durch Klicken auf den Inhalt beginnt das Vorlesen. Der vorgelesene Text wird von Guidebot hervorgehoben.
Die Screenreader-Funktion scannt die HTML-Seite und macht die erkannten Inhalte vorlesbar. Es kann vorkommen, dass einige Elemente für den Screenreader nicht definierbar sind - wie z. B. Text, der direkt in ein div geschrieben wurde - daher müssen wir in diesem Fall definieren, dass der Inhalt vorlesbar ist. Dies können wir durch Einfügen eines data-gb-speech HTML-Tags tun. Wenn wir das HTML-Tag ohne Wert angeben, nimmt der Screenreader seinen Inhalt als Grundlage. Wenn wir dies ändern möchten oder wenn der Inhalt so beschaffen ist, dass nichts daraus vorgelesen werden kann (z. B. ein Bild), können wir den vorzulesenden Inhalt als Wert des Tags angeben. Bei Schaltflächen und Links (solange der Screenreader aktiv ist) wird beim ersten Klick der Inhalt vorgelesen, beim zweiten Klick navigiert die Seite.
Beispiele für die richtige Einstellung:

    
<!-- Ohne Wert: -->
<p>Dieser Inhalt wird automatisch erkannt und vorgelesen.</p>
<div data-gb-speech>
    Dieser Inhalt kann nicht automatisch erkannt werden,
    daher ist das data-gb-speech-Tag erforderlich.
</div>
<a href="#">Dies ist ein Link</a>
<button type="button">Schaltflächentitel</button>

<!-- Mit Wert: -->
<div data-gb-speech="Dieser Inhalt wird vorgelesen">
    Dieser Inhalt wird nur angezeigt
</div>
<img src="bild.jpg" data-gb-speech="Durch Klicken auf das Bild kann der Bildinhalt vorgelesen werden"/>
    

---

Lesemodus

Der Lesemodus sammelt die Textinhalte auf der Seite und zeigt sie in einem leicht lesbaren Format ohne störende Elemente an.
Damit der Lesemodus ordnungsgemäß funktioniert, müssen wir das Element, das den Seiteninhalt enthält, durch Einfügen eines data-gb-content HTML-Tags definieren.

Beispiel für die richtige Einstellung:

    
<header>...</header>
<main data-gb-content>
    <div id="content-block-1">
        ...
    </div>
    <div id="content-block-2">
        ...
    </div>
</main>
<footer>...</footer>