A HTML-technikák ismerete a webes hozzáférhetőség javítására

A weboldal létrehozása nem csupán egy weboldal létrehozása. A front-end fejlesztés egyik fontos szempontja annak biztosítása, hogy a felhasználói felületek mindenki számára elérhetőek legyenek az interneten, beleértve a látás- és hallássérülteket is. Ezeket az embereket szem előtt tartva kell megírnia a kódot. Hogyan biztosíthat látássérült embereknek egyenlő hozzáférést a webhelyéhez, mint a nem látássérülteknek? Olvassa el ezt a cikket, hogy megtudja.

Miért kell a fejlesztőknek aggódniuk a webes akadálymentesítés miatt?

A webes akadálymentesítés azon az elképzelésen alapul, hogy mindenkinek egyenlő hozzáféréssel kell rendelkeznie az internethez, bármilyen fogyatékosságtól vagy fogyatékosságtól függetlenül. Egy elérhető weboldal megkönnyíti a nagyobb közönség elérését (a világ körülbelül 16%-a szenved valamilyen fogyatékosságtól).

A digitális hozzáférhetőség nem választható fejlesztők számára. Ez minden professzionális márka számára elengedhetetlen. Ezt komolyan veszik: amint arról beszámolt

Fajta, valaki 2019-ben beperelte a The Pokémon Company-t egy nem elérhető weboldal miatt.

Webes hozzáférhetőség HTML-lel

A HTML-ben vannak szabályok, amelyek biztosítják az akadálymentes webhelyek fejlesztését. Ez a szakasz néhány ilyen szabályt ismertet.

Használjon szemantikai elemeket

A HTML szemantikai elemei olyan elemek, amelyek jelentéssel bírnak. A HTML5-ben körülbelül 100 elem található. Egyes elemek, mint pl és, nem szemantikusak, míg más HTML-címkék szemantikusak. Bár elképzelhető, hogy lehetetlen abbahagyni ezeknek a nem szemantikai elemeknek a használatát, fontos, hogy minél több szemantikai elemet építsen be a munkájába. Íme a népszerű szemantikai elemek listája:

Tekintsük ezt a példát Taasklytól:

Egy pillantás a fenti képre a következő elemeket tárja fel:

• Egy címsor
• Egy kép
• Egy bekezdés
• Három gomb

Könnyű feltételezni, hogy a fejlesztők használtak címkék segítségével rendezheti el az elemeket a képernyőn. Ha közelebbről megvizsgálja a kódokat, látni fogja, hogy hat szemantikai címkét használtak helyette. Az egyszerűsített kód így néz ki:

<szakasz>
<imgsrc="/hero.png"alt="hős">
<cikk>
<h1>Találja meg a megfelelő termékeket és szolgáltatásokat a megfelelő időben.h1>
<p>
 Kézzel készített lábbelik, hajfelújítás, közösségi média menedzser, megbízások küldése, bevételi forrásb>— ha nevezed, Taaskly értette. Találja meg az összes terméket vagy szolgáltatást, amire ma szüksége van, ha regisztrál és használja a Taaskly-t. 
p>
<ahref="/fő/otthon">Kiszervezni egy feladatota>
<ahref="/fő/szolgáltatások"> Keressen egy szolgáltatásta>
<ahref="/fő/piactér" >Keress egy boltota>
cikk>
szakasz>

A HTML-részletből a következőket figyelheti meg:

1. A képek, szövegek és gombok a elem.
2. A elem egyenlően osztja a és elemeket.
3. A elem tartja a, , és elemeket.
4. A gombok kódolása: elemek; ezért ezek hivatkozások, nem gombok. Általános szabály, hogy mindig használjon hivatkozásokat, hogy a felhasználót egy másik oldalra vagy nézetre irányítsa, és használjon gombokat, ha csak azt szeretné, hogy a felhasználó ugyanabban a nézetben hajtson végre egy műveletet. Lát Angular's Button oldal további információért erről.

Használjon tereptárgyakat, hogy egyértelmű oldalstruktúrát biztosítson

A tereptárgyak olyan szemantikus címkék, amelyek segítségével a vak felhasználók képernyőolvasóval navigálhatnak a weboldalakon. A tereptárgyak segítségével könnyen meghatározható a weboldal különböző részei. Az Apple weboldala tereptárgyakat használ.

A fenti képen négy különböző tereptárgy látható. Használhatja a Kisegítő lehetőségek Insights bővítmény ezen tereptárgyak megjelenítéséhez.

A képen következtethetünk a tetején, a amely a és a elem. Észrevehetően a képen látszik "navigáció", "vidék", és "tartalmi információ". Ezeket szerepeknek nevezzük, amelyekkel később foglalkozunk.

Ha egy oldalon több tereptárgyat kell használnia, mindig címkével különböztesse meg őket. Például, ha többet használ mint az Apple, meg kell címkézni őket. Fel kell címkézni őket a ária-címke tulajdonság. Tehát az alábbiak közül bármelyiket írhat:

<navária-címke = "globális">
<navária-címke = "helyi navigáció">
<navária-címke = "alma könyvtár">

A címkék használatával a képernyőolvasók bármelyik navigációhoz ugorhatnak.

Használja a szerep, név és érték attribútumokat

Néha előfordulhat, hogy lehetetlen a beépített akadálymentesítési funkciókkal rendelkező HTML-elemek használata. Ilyen eset lehet a kettő közül:

1. Nincs natív HTML elem ahhoz, amit el szeretne érni. Például, ha használnia kell a mert úgy tűnik, más elem nem illik a szerephez.
2. Technikai okok miatt nem tud szemantikai elemeket használni. Ha olyan keretrendszert használ, amely a amikor jobb lett volna használni, az Ön feladata lesz egyéni vezérlés meghatározása.

Egyéni vezérlőelem meghatározásához szerepre, névre és (néha) értékre van szüksége az elemhez.

Szerep

Alapértelmezés szerint a elemnek navigációs szerepe van, míg a elemnek banner szerepe van. Ezeket az elemeket csak a rendeltetésüknek megfelelően használja, hogy segítse a kisegítő technológiákat a weboldal szerkezetének megértésében. Ha az egyiket kell használnia a másik helyett, akkor a következőképpen adja meg a szerepet:

<fejlécszerep = "navigáció">
<navszerep = "transzparens">
<divszerep = "navigáció">

Név

A név egy HTML-elemhez társított leíró szöveg vagy címke. A név legegyszerűbb formája egy elem szövege. Íme egy példa:

<divszerep = "gomb">Kattints ide!div>

A fenti részletben "Kattints ide!" a neve a elem. Hozzáférhető névként is ismert.

Az olyan elemeknél, mint a navigáció, legördülő menük stb., a név hozzárendelése bonyolultabb, mint az előző példában. Ez azért más, mert ezekben az elemekben gyermekelemek vannak. A fenti navigáció elnevezéséhez használja a ária-címke tulajdonság. Nézd meg ezt a példát:

<navszerep = "navigáció"ária-címke = "globális navigáció">...nav>

Meg kell jegyezni, hogy a név attribútum eltér egy elérhető névtől. Ez a kódrészlet jobb megértést tesz lehetővé:

 név attribútum 
<navszerep = "navigáció"név = "globális navigáció">...nav>
 elérhető név 
<navszerep = "navigáció"ária-címke = "globális navigáció">...nav>

Lát A TGPi cikke az elérhető nevekről hogy ezt mélyebben megértsük.

Érték

A HTML-ben az érték attribútum további információkat nyújthat egy elemről. Az értékek információt adnak az összetevő állapotáról az egyéni összetevők, például a harmonika esetében. Például egy harmonika nyitható vagy zárható.

Többféle módon is hozzáadhat értéket elemeihez. Ez a részlet bemutat néhány módszert, amellyel ezt megteheti:

 aria-valuenow 
osztály="lejátszás gomb" aria-label="Hang lejátszása" aria-valuenow="0"></button>
<hang-src="audio-file.mp3">hang->
ária-bővített
<divszerep="gomb"ária-bővített="hamis">GYIK 1div>
érték
<bemenettípus="jelölőnégyzet"név="termék[]"érték="1">

A webes hozzáférhetőség prioritása a befogadó online élmény érdekében

A webes hozzáférhetőség meghaladja a szabályok betartását; arról is szól, hogy mindenki egyenlő hozzáférést kapjon a webhelyéhez. A szemantikai elemek, tereptárgyak és attribútumok, például szerep, név és érték beépítése a HTML-be könnyebben elérhetővé teheti webhelyét a fogyatékkal élők számára. Ne gondoljon a webes hozzáférhetőségre, mint lehetőségre; szükségszerűnek tartja.