Fizetés folyamatban, kérjük várjon. 
Miért szükséges?
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.Kontrasztarány ellenőrzés
Képek
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.
<label for="firstname">Keresztnév:</label> <input type="text" id="firstname">
Hibakezelés és validáció
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 azautocomplete 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.
<form>
<fieldset>
<legend>Személyes adatok</legend>
<label for="nev">Név:</label>
<input type="text" id="nev" name="nev">
<label for="email">E-mail cím:</label>
<input type="email" id="email" name="email">
</fieldset>
</form>
A gombok legyenek egyértelműen felcímkézve
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
Auser-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" />