Hogyan készítsünk hozzáférhető webes űrlapokat

Jan 30, 2026

kézikönyv

Az űrlapok az internet lényeges összetevője, mert a felhasználókat a vállalkozáshoz kapcsolják, és segítenek nekik elérni azt, amit a webhelyére vagy az alkalmazásra jöttek. Ez azt jelenti, hogy azt szeretné, hogy megbizonyosodjon róla, hogy az összes felhasználó képes használni az űrlapjait anélkül, hogy szörnyű élményt kellene szenvednie. A cél az, hogy ezeket a kulcsfontosságú felhasználói interakciókat a súrlódásmentes lehetséges.

Bár igaz, hogy az építési formák időnként nehéz feladat lehetnek, és mérsékelten hozzáférhetővé válhatnak, nem olyan bonyolult, mint amilyennek gondolhatsz (jó weboldal építője szuper-egyszerű lesz). Gyakran kifogásokat dobtak ki, mint "nincs időnk, hogy aggódjunk az akadálymentesség miatt" vagy "később elérhetővé válik". Ezek a kifogások gyakran (ha nem mindig) érvénytelenek, és segíthet a csapatának megváltoztatni ezt a gondolkodásmódot.

Több tanácsot keres? A témák témakörökkel foglalkozunk web hosting nak nek felhő tároló .

13 legjobb felhasználói tesztelési szoftver

Íme néhány kérdés, amelyet meg kell fontolnia, amikor az építési formák:

Milyen nehézségek merülhetnek fel valaki vizuális károsodásokkal az én forma?
A felhasználónak egyértelműen jelzi, hogy milyen adatok várhatók a bemenetre?
Az űrlap könnyen használható - a felhasználók képesek lesznek gyorsan megérteni?
Tudom használni a billentyűzetet az űrlap kitöltéséhez?

Hogyan készítsünk alapfizetési űrlapot

Adtam neked néhány induló kódot, hogy segítsen előrelépni. Jól kezdődik ezzel és végül eljuthat ehhez .

Néhány alapvető stílust és elemet adtam neked, amely egyszerű előfizetési űrlapot alkotna, de sokat tehetünk itt, hogy ezt az űrlapot használhassa. Bármit, amit létrehoz, a jó szemantikus HTML segítségével hosszú utat fog kapni.

Kezdjük azzal, hogy összekapcsoljuk a & lt; input & gt; elemeket a megfelelőnek & lt; címke & gt; s. Ezt úgy tesszük, ha megadjuk & lt; input & gt; egy azonosítót, és ezt az attribútumot használja a & lt; címke & gt; . Használhatjuk a "NAME" és az "E-mail" ezeket, és már két dolgot csináltunk:

A címkét programoztuk a bemenetre. Ennek előnye az, hogy elolvassa a címkét a képernyő-olvasó felhasználónak, ha ez a bemenet összpontosul.
A felhasználó mostantól rákattinthat a címkére, és a megfelelő bemenet koncentrálódik, így a felhasználók most már nagyobb célméretűek.

Most, hogy bemeneteink és címkéink mindhálózaton vannak, meghatározhatjuk a HTML bemeneti típusokat. Ezek valóban hasznosak és szuper könnyű módja annak, hogy kiváló felhasználói élményt nyújtsunk. A típus Az attribútum segít a felhasználó automatikus kitöltéséhez, és a mobil felhasználók számára megfelelőbb billentyűzetet is biztosít. Használatunk esetében meg tudjuk csinálni Típus = "szöveg" A névbemenet és a Típus = "Email" Az e-mail bemenethez.

Azt is szeretnénk, ha a felhasználóknak jó ötlete van arról, hogy milyen típusú adatok (és formázása) számukra elvárható. Itt nagyon nyilvánvaló, de ez nem mindig ez a helyzet. Általában jó gyakorlat, hogy olyan címkét biztosítson, amely mindig megtekinthető és olyan helyőrző, amely kommunikál a várt bemenetet. Ez azt jelenti, hogy nem használja a helykitöltő Az attribútum, mint vizuális címke bemenetek esetén, ahol a címke nem látható, ha a felhasználó megkezdi a gépelést. Ez volt a népszerű gyakorlat egy csomó fejlesztő számára, és tényleg fel kell ágyazni egyszer és mindenkinek. A "ex. Jane doe" helyőrzőjét adhatjuk meg a névért és a "ex. [email protected]" -nek.

Most már eljuthatunk a fókuszban állapot Styling. A fókuszállapotok alapértelmezett stílusa eltérő a böngészők között, és javíthatjuk, hogy az alapértelmezett stílus lehet, hogy felhasználóbarátabbá váljon. A mi esetünkben azt szeretnénk, hogy a bemenetek vastag, színes vázlatot kapjanak, amely megfelel a gombbal.

14 egyszerű módja annak, hogy webhelyét hozzáférhetőbbé tegye

Adjon hozzá fókuszstílusokat a bemeneti szelektorhoz

Végül hozzá kell adnunk néhány fókuszstílust a gombelem körül. Ezt gyakran figyelmen kívül hagyják, de igazán segíthet a billentyűzet-felhasználók számára, hogy hol vannak. Ezt hozzá kell adnunk & amp; :: Moz-focus-inner Bit, hogy megszabaduljon néhány alapértelmezett stílustól a Firefoxban (lehet, hogy meg akarja menteni a részleteket a jövőbeni használatra).

Ugyanúgy, mintha egy alapvető előfizetési űrlapunk van, akkor büszke lehet és javulhat. Mivel már használt jó szemantika, az űrlap elérhető a billentyűzeten keresztül csak (próbálja ki a fület és a szóközt / be gombok). A gombhoz használt színek 11,51 színaránya, megfelelnek az AAA szabványoknak a WCAG (Webtartalom hozzáférhetőségi irányelveinek). Mind a vizuális felhasználók, mind a Screen-Reader felhasználók számára címkéket kaptunk, valamint stílusos fókuszállapotokat a billentyűzet-barátok számára. Végül vegye figyelembe, hogy a betűtípus beállítása 18px a testben. Ez sokkal olvashatóbb formáinkkal (meg kell próbálnunk 14px felett maradni).

Tervezési és építési hozzáférhetőség szem előtt tartva gyakorolja, de jobb fejlesztő lesz, és segítsen az internet jobb helyének.

generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket — Generálja, a díjnyertes konferencia webes tervezők számára, Április 24-25. A jegy foglalásához kattintson a képre

Ezt a cikket eredetileg a 316. \ t háló , A világ legjobban értékesítő magazinja webes tervezőknek és fejlesztőknek. Vásároljon ki kérdezést 316 itt vagy Iratkozzon fel itt .

Kapcsolódó cikkek:

A javítás elérhetősége meghiúsul ezzel az ingyenes eszközzel
50 félelmetes új eszközök a fejlesztők számára 2019-ben
Milyen hozzáférhető a tervek?

Hogyan készítsünk hozzáférhető webes űrlapokat

Hogyan készítsünk alapfizetési űrlapot

Adjon hozzá fókuszstílusokat a bemeneti szelektorhoz

kézikönyv - Most Popular Articles

Hogyan kell felhívni a perspektívát

Affinity Designer: Hogyan kell használni a hatások és stílusok

Építsen egy komplex 3D sci-fi jelenetet a keverőben

Rajzoljon egy rossz szamár geisha-t

Fájlok letöltése 3D világ 232

Hozzon létre egy digitális etch egy vázlatot

Hozzon létre egy karaktert stilizált realizmussal

Hogyan juthat el a ZBRUSH modelljéhez Maya

Kategóriák