Képernyőolvasó

A képernyő olvasó képes a weboldal tartalmait hangszintézis útján felolvasni. A tartalomra kattintva a felolvasás elkezdődik. A felolvasás alatt álló szöveget a Guidebot kiemeli.
A képernyőolvasó funkció szkenneli a HTML oldalt és felolvashatóvá teszi az általa felismert tartalmakat. Megeshet hogy néhány elem nem definiálható a képernyőolvasó számára - ilyen pl. a közvetlenül div-be írt szöveg - így ebben az esetben nekünk kell definiálni, hogy a tartalom felolvasható. Ezt egy data-gb-speech HTML tag beillesztésével tudjuk megtenni. Amennyiben érték nélkül adjuk meg a HTML tag-et, a felolvasó annak tatartalmát veszi alapul. Ha ezen módosítanánk, vagy ha a tartalom olyan, hogy nincs mit kiolvasni belőle (például egy kép) akkor megadhatjuk a felolvasandó tartalmat a tag értékeként. Gombok és linkek esetén (amíg a képernyőolvasó aktív) első kattintásra a tartalom lesz felolvasva, második kattintásra fog az oldal navigálni.
Példák a megfelelő beállításra:

    
<!-- Érték nélkül: -->
<p>Ez a tartalom automatikusan fel lesz ismerve és fel lesz olvasva.</p>
<div data-gb-speech>
    Ez a tartalom nem ismerhető fel automatikusan,
    ezért szükséges a data-gb-speech tag.
</div>
<a href="#">Ez egy link</a>
<button type="button">Gomb címe</button>

<!-- Értékkel: -->
<div data-gb-speech="Ez a tartalom kerül felolvasásra">
    Ez a tartalom pedig csak megjelenítve lesz
</div>
<img src="kep.jpg" data-gb-speech="A képre kattintva felolvastatható a kép tartalma"/>
    

---

Olvasó mód

Az olvasó mód összegyűjti az oldalon található szöveges tartalmakat és azokat könnyen olvasható, zavaró elemektől mentesen jeleníti meg.
Az olvasó mód megfelelő működéséhez az oldal tartalmát befoglaló elemet definiálnunk kell egy data-gb-content HTML tag beillesztésével.

Példa a megfelelő beállításra:

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