Útmutatók
Fejlesztést igénylő funkciók
HTML attribútumok, amelyekkel finomhangolhatja a képernyőolvasót és az olvasó módot.
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.
A
data-gb-content HTML tag-ból csak egy kerüljön beillesztésre az oldal tartalmát befoglaló elemre!
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>