Weboldal optimalizáció

Tippek a hatékony akadálymentesítéshez.

Az oldal nyelvének beállítása
A képeknek alternatív szöveggel kell rendelkezniük
Az űrlap <input> elemeinek címkével (<label>) kell rendelkezniük
Guidebot "Képernyőolvasó" beállítása ÚJ BETA
Guidebot "Olvasó Mód" beállítása ÚJ BETA
Ne használjon időzített frissítést
A nagyítás és a méretezés ne legyen letiltva
Az ARIA gombok, linkek és menüelemek nevei

A Guidebot widget segít webhelye akadálymentesítésében. Az egyszerű telepítést követően azonnal működik, kiterjeszti webhelye elérhetőségét.

A Guidebot működik előre vásárolt sablonokon és egyedileg írt környezetben egyaránt. A tökéletes élmény érdekében néhány szempontot érdemes figyelembe vennie.

# Az oldal nyelvének beállítása

Győződjön meg arról, hogy a lang attribútumban megadott nyelvi kód érvényes nyelvi kód (pl. <html lang="en"> a dokumentum nyelvét angolra állítja be). A szövegfelolvasó konfigurálásakor a felhasználók kiválasztják az alapértelmezett nyelvet. Ha egy weboldal nyelve nincs megadva, a képernyőolvasó a felhasználó által beállított alapértelmezett nyelvet feltételezi. A nyelvválasztás problémássá válik azon felhasználók számára, akik több nyelvet beszélnek, és egynél több nyelven érik el a weboldalt. A weboldal szövegének helyes kiejtése érdekében elengedhetetlen a nyelv megadása.

A szövegfelolvasó minden nyelvhez más-más hangkönyvtárat használ. Ezek könnyen tudnak váltani e nyelvkönyvtárak között, viszont csak akkor, ha az adott oldalon meg van adva, hogy az milyen nyelvet használ. Ha a nyelv nincs megadva, a képernyőolvasó a felhasználó alapértelmezett nyelvén olvassa fel a dokumentumot, ami fura eredményt produkál, ha nyelvek nem egyeznek!

Példa az aktuális nyelv megadására: 

        
<html lang="en">
<head>
...

# A képeknek alternatív szöveggel kell rendelkezniük

A szövegfelolvasók nem képesek a képet szavakra lefordítani, még akkor sem, ha a kép csak szövegből áll. Éppen ezért képeknek rövid, leíró alt szöveggel kell rendelkezniük, hogy a szövegfelolvasót használó felhasználók egyértelműen megértsék a kép tartalmát.

Ha az Ön látása korlátozott, mindenféle vizuális információ - például a képek - teljesen használhatatlanok, hacsak nem biztosítanak digitális szöveges alternatívát, hogy a szövegfelolvasók át tudják alakítani a szöveget hang- vagy Braille-írássá.

Három fő módja van annak, hogy alternatív szöveget adjon egy képhez:

Alt attribútum használata: 
        
<img src="..." alt="Rajz egy macskáról"/>
Aria-címke használata: 
        
<img src="..." aria-label="Rajz egy macskáról"/>
Az aria-labelledby attribútum használata: 
        
<img src="..." arialabelledby="labelID"/>

# Az űrlap <input> elemeinek címkével (<label>) kell rendelkezniük

Az űrlapok akadálymentesítéséhez hatékony űrlapcímkékre van szükség. Az olyan űrlapelemek, mint a jelölőnégyzetek, rádiógombok, beviteli mezők stb. rendeltetése gyakran nyilvánvaló a látó felhasználók számára, azonban a szövegfelolvasó felhasználóknak hasznos űrlapcímkékre van szükségük az űrlapmezők azonosításához. Ha minden űrlapelemet címkével látunk el, megszűnik a félreérthetőség, és hozzájárulunk a könnyebben kezelhető űrlapohoz.

A legtöbb esetben ajánlott módszer a label elem és a for és id attribútumok társítása. 

        
<label for="firstname">Keresztnév:</label> <input type="text" id="firstname">

# Guidebot "Képernyőolvasó" beállítása ÚJ BETA

A képernyő olvasó képes a weboldal tartalmait hangszintézis útján felolvasni. Bekapcsoláskor a Guidebot jelzi a felolvasható tartalmakat az oldalon. A tartalomra, vagy a jelvényre kattintva a felolvasás elkezdődik. A felolvasás alatt álló szöveget a Guidebot kiemeli.
A felolvasó megfelelő működéséhez a felolvasható tartalmakat definiálnunk kell egy data-gb-speech HTML tag beillesztésével. 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:
<div data-gb-speech>Ez a tartalom kerül felolvasásra</div>
<a href="#" data-gb-speech>Ez egy link</a>
<button type="button" data-gb-speech>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="..." data-gb-speech="A képre kattintva felolvastatható a kép tartalma"/>

# Guidebot "Olvasó mód" beállítása ÚJ BETA

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: 

        
<main data-gb-content>...</main>

# Ne használjon időzített frissítést

A felhasználók nem számítanak arra, hogy az oldal frissülni fog, így az ilyen fajta frissítés zavaró lehet számukra. Ráadásul a frissítés a fókuszt is visszahelyezi az oldal tetejére, távolabb attól a helytől, ahol a felhasználó azt korábban tartotta.

Távolítsa el a http-equiv="refresh" attribútumot minden olyan meta elemről, amelyben az jelen van.

A példában a helytelen módot mutatjuk be: 

        
<meta http-equiv="refresh" content="10" url="http://www.domain.com/index.html">

# A nagyítás és a méretezés ne legyen letiltva

A user-scalable=no paraméter a <meta name="viewport"> elem content attribútumában letiltja a zoomolást az oldalon. A maximum-scale paraméter korlátozza a felhasználó által zoomolható mennyiséget. Ez problémás a gyengén látó emberek számára, akik képernyőnagyítókra támaszkodnak, hogy megfelelően lássák a weboldal tartalmát.

Távolítsa el a user-scalable=no paramétert a <meta name="viewport"> elem content attribútumából a zoomolás engedélyezése érdekében, és biztosítsa, hogy a maximum-scale paraméter ne legyen kisebb 2-nél.

A példában a helytelen módot mutatjuk be: 

        
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1" />

# Az ARIA gombok, linkek és menüelemek nevei

A képernyőolvasót használó felhasználók nem képesek felismerni a role="link", role="button" vagy role="menuitem" szerepű elemek célját, ha nincs elérhető nevük.

Az aria-command-name szabály négy olyan mintát tartalmaz, amely megfelel a kritériumoknak: 

        
<div role="link" id="al" aria-label="Name"></div>

<div role="button" id="alb" aria-labelledby="labeldiv"></div>

<div role="menuitem" id="combo" aria-label="Aria Name">Name</div>

<div role="link" id="title" title="Title"></div>