A widget telepítése, a megjelenés testreszabása és az akadálymentesítési nyilatkozat beágyazása.
Telepítés
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 HTML/CSS környezetben egyaránt. A tökéletes élmény érdekében néhány szempontot érdemes figyelembe vennie, ebben a Weboldal optimalizáció oktatóanyagunk tud segítséget nyújtani.
Tekintse meg az alábbi telepítési útmutatót, amely lépésről lépésre bemutatja, hogyan állíthatja be a Guidebot akadálymentesítő Widgetjét a webhelyén pár perc alatt.
Konfigurálás
A widget kinézete személyre szabható, hogy még jobban alkalmazkodjon cége arculatába.
A személyre szabás a domain listában a
ikonra kattintva érhető el. A módosítások maximum egy órán belül lesznek elérhetőek a weboldalon.
Nyilatkozat
Lehetőséget biztosítunk arra, hogy funkcióink leírását beilleszthesse weboldalába.
A beágyazáshoz a következő lépések szükségesek:
Jelölje ki a kódot, és másolja a vágólapra (CTRL + C vagy mac-en CMD + C)
Nyissa meg a fájl forráskódját, ahova a nyilatkozatot be szeretné illeszteni.
Illessze be a vágólapra másolt kódot a megfelelő helyre és mentse a fájlt a szerverre.
Nyissa meg a weboldalát és élvezze a Guidebot nyújtotta előnyöket.
A Guidebot weboldalán történő regisztrációhoz ki kell töltenie az összes mezőt az űrlapon, el kell olvasnia és el kell fogadnia az Adatkezelési irányelveket és a Szolgáltatási feltételeket, majd ezt követően kattintson a "Regisztráció" gombra.
A regisztrációs oldal közvetlenül a következő linken érhető el: Guidebot Regisztráció.
Profil szerkesztés
A profil véglegesítéséhez szükséges megadni a személyes adatokat.
Az adatkezelési irányelveket itt érheti el.
Domain hozzáadásához csak a személyes adatok megadása szükséges, bankkártya adatokat csak előfizetés során kell megadnia.
Domain hozzáadás
Domain hozzáadásához meg kell adnia a személyes adatait a "Profil" oldalon.
Bankkártya információ NEM szükséges a domain hozzáadásához.
Az "Új domain hozzáadása" gombbal kezdeményezheti a domain felvételt.
A domain mezőbe csak a fődomain nevét írja, a https:// és a www előtag nem szüséges (pl: domain.com).
Az előfizetés kiválasztása után regisztrálható a domain.
A következő lépés a guidebot widget telepítése.
Telepítés
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 HTML/CSS környezetben egyaránt. A tökéletes élmény érdekében néhány szempontot érdemes figyelembe vennie, ebben a Weboldal optimalizáció oktatóanyagunk tud segítséget nyújtani.
Tekintse meg az alábbi telepítési útmutatót, amely lépésről lépésre bemutatja, hogyan állíthatja be a Guidebot akadálymentesítő Widgetjét a webhelyén pár perc alatt.
Konfigurálás
A widget kinézete személyre szabható, hogy még jobban alkalmazkodjon cége arculatába.
A személyre szabás a domain listában a
ikonra kattintva érhető el. A módosítások maximum egy órán belül lesznek elérhetőek a weboldalon.
Nyilatkozat
Lehetőséget biztosítunk arra, hogy funkcióink leírását beilleszthesse weboldalába.
A beágyazáshoz a következő lépések szükségesek:
Jelölje ki a kódot, és másolja a vágólapra (CTRL + C vagy mac-en CMD + C)
Nyissa meg a fájl forráskódját, ahova a nyilatkozatot be szeretné illeszteni.
Illessze be a vágólapra másolt kódot a megfelelő helyre és mentse a fájlt a szerverre.
Nyissa meg a weboldalát és élvezze a Guidebot nyújtotta előnyöket.
A weboldal HTML-jének optimalizálása az akadálymentesítés szempontjából elengedhetetlen, mert a jól strukturált és szemantikus HTML biztosítja, hogy a segítő technológiák (például képernyőolvasók) pontosan értelmezzék a tartalmat és a funkcionalitást, lehetővé téve minden felhasználó számára a weboldal hatékony és önálló használatát. Egyszerűbben fogalmazva: a helyes HTML az alapja annak, hogy az oldal érthető legyen nemcsak a böngészők, hanem beépülő segítők és ezáltal a fogyatékossággal élők számára is.
Nyelvi beállítás
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>
...
Kontrasztarány
A weboldalak tervezésekor gyakran a látványra fókuszálunk, de egy lényeges elem, ami gyakran háttérbe szorul, az a színkontraszt. Pedig a megfelelő kontraszt nem csupán esztétikai kérdés, hanem alapvető fontosságú a felhasználói élmény, az akadálymentesség és a tartalom olvashatósága szempontjából.
Általános kontrasztkövetelmények (AA szint)
Szöveg és szöveges képek
A vizuálisan megjelenített szöveg és a szöveges képek kontrasztarányának legalább 4,5:1-nek kell lennie.
Nagy méretű szöveg
A nagy méretű szöveg (legalább 18 pontos, vagy 14 pontos és félkövér) és a nagy méretű szöveges képek kontrasztarányának legalább 3:1-nek kell lennie.
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
Ez az alapértelmezett és leggyakrabban használt módszer minden olyan képhez, amely információt hordoz, vagy a tartalom szempontjából releváns.
<img src="kep.jpg" alt="Rajz egy macskáról"/>
Aria-címke használata
<img src="kep.jpg" aria-label="Rajz egy macskáról"/>
Az aria-labelledby vagy aria-describedby attribútum használata
Akkor használatos, ha a kép "címét" vagy rövid, összefoglaló leírását egy másik elem biztosítja.
<h2 id="rovidleiras">Piros sportautó</h2>
<img src="kep.jpg" arialabelledby="rovidleiras" alt="Kép egy piros sportautóról" />
<p id="hosszuleiras">Ez egy nagyon részletes leírás a képen látható tájról, beleértve a hegyek elhelyezkedését, a folyó kanyarulatát és a fák típusait.</p>
<img src="taj.jpg" alt="Gyönyörű hegyi táj folyóval" aria-describedby="hosszuleiras">
Űrlapok
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.
Ha hiba történik az űrlap elküldésekor, egyértelmű hibaüzeneteket kell megjeleníteni
Az űrlapok hibakezelésénél a hibaüzeneteknek azonnal felismerhetőnek, konkrétnak és segítőkésznek kell lenniük, emellett egyértelműen jelezniük kell, melyik mezőben történt a probléma.
Kerülje el a meglepetéseket
Ne generáljon váratlan változásokat az űrlapban (pl. új mezőket ad hozzá vagy távolít el) anélkül, hogy a felhasználót értesítené.
Bemeneti típusok
HTML5 input típusok
Használja a megfelelő HTML5 input típusokat (pl. type="email", type="tel", type="date"). Ezek segítik az eszközöket (pl. mobil billentyűzet) a megfelelő bevitel előkészítésében, és a képernyőolvasókat is.
Autocomplete attribútum
Használja az autocomplete attribútumot az űrlapmezőkön, ahol releváns. Ez segíti a böngészőket és a kiegészítő technológiákat a felhasználói adatok automatikus kitöltésében, csökkentve a gépelési hibákat és gyorsítva az űrlapok kitöltését.
Kontextus és csoportosítás
Csoportosítsa az egymással összefüggő űrlapmezőket
Használja a <fieldset> és <legend> elemeket a kapcsolódó beviteli mezők logikus csoportosítására (pl. szállítási cím adatai). A <legend> biztosítja a csoport címkéjét a képernyőolvasók számára.
A gomb szövege világosan utaljon annak funkciójára (pl. "Regisztráció", "Adatok mentése", "Küldés").
Nagyítás / méretezés
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.
Az általános és leginkább akadálymentes megközelítés az, hogy ne használja a maximum-scale attribútumot, vagy állítsa be maximum-scale=no (ami 1.0-t jelent) helyett valamilyen magasabb értéket, például maximum-scale=2.0 vagy akár 3.0 vagy 4.0.
<!-- Leginkább akadálymentes megoldás -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Ajánlott (ha szükséges a maximum skálázhatóság, a példa 300%-ot engedélyez) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0" />
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!
