A látogató internetkapcsolata megszakad, miközben az űrlapod töltődik. Egy Chrome-bővítmény elrontja a JavaScriptedet. Egy régebbi böngésző nem támogatja azt a JavaScriptet, amit használsz. A képernyőolvasója nem tud navigálni az űrlapodban, mert a címkéket CSS-sel elrejtetted.
Az űrlapok kritikus útvonalak. A felhasználóknak be kell tudniuk küldeni őket. Az űrlap nem romolhat el csak úgy. A fokozatos fejlesztés az az elv, hogy olyan űrlapokat építesz, amelyek mindenhol működnek, aztán továbbfejleszted őket azoknak a böngészőknek, amelyek elbírják.
Ez a cikk azt mutatja meg, hogyan építs olyan űrlapokat, amelyek kecsesen visszaesnek, JavaScript nélkül is működnek, és mindenki számára elérhetők maradnak.
Mi az a fokozatos fejlesztés?
A fokozatos fejlesztés azt jelenti, hogy egy alap, működő űrlapból indulsz ki, amely a legrégebbi böngészőkben és JavaScript nélkül is működik, majd erre építed rá a javításokat a modern böngészőknek. Az 1. réteg (HTML) egy alap űrlapot ad beviteli mezőkkel, címkékkel és beküldő gombbal, amelyhez nem kell JavaScript, és mindenhol működik. A 2. réteg (CSS) színekkel, térközökkel és elrendezéssel stílusozza az űrlapot, így az űrlap akkor is működik, ha a CSS nem töltődik be, csak rosszul néz ki. A 3. réteg (JavaScript) valós idejű ellenőrzést, finom animációkat és AJAX-beküldést ad hozzá, így az űrlap akkor is működik, ha a JavaScript elromlik, és csak hagyományosan küld be. Ha bármelyik réteg meghibásodik, a felhasználó akkor is működő űrlapot kap. Ez az ellenálló képesség.
Az alap: HTML, ami működik
Kezdd szemantikus HTML-lel, megfelelő címkékkel, fieldset és legend elemekkel. Egy alap űrlap így néz ki: <form action="/submit" method="POST"> <label for="email">Email</label> <input type="email" id="email" name="email" required> <label for="message">Message</label> <textarea id="message" name="message" required></textarea> <button type="submit">Send</button> </form>. Ez az űrlap JavaScript nélkül, CSS nélkül, régi böngészőkben, képernyőolvasókkal és billentyűzetes navigációval is működik. Ez az alapod. Soha ne vegyél ki elemeket a DOM-ból, hogy JavaScripttel renderelt elemekre cseréld őket, mert ha a JavaScript elromlik, az űrlap is elromlik. Tartsd meg a szemantikus HTML-t.
Kecses visszaesés CSS-sel
A CSS-fejlesztéseket a HTML tetejére építsd. Stílusozd szépen az űrlapot. De ha a CSS elromlik, az űrlap akkor is működjön.
Ne rejtsd el CSS-sel a címkéket, és ne támaszkodj a helyőrzőkre, mert egyes CSS-ek nem töltődnek be, a képernyőolvasóknak pedig a HTML-ben lévő címkékre van szükségük. Ne használj CSS-t a kötelező jelölők elrejtésére, mert ha az egyedi "kötelező csillag" nem töltődik be, a felhasználók nem látják, mely mezők kötelezők. Használd inkább a HTML required attribútumot. Kerüld, hogy a címkét vizuálisan elrejted, és helyette helyőrzőt mutatsz a label { display: none; } és az input::placeholder { content: 'Email'; } használatával. Ehelyett tartsd meg a címkét a HTML-ben, és stílusozd, ahogy akarod, például label { font-weight: bold; color: #333; } használatával.
Kecsesen visszaeső JavaScript-fejlesztések
Adj hozzá JavaScript-fejlesztéseket, de csak akkor, ha az űrlap már működik. Használj funkcióészlelést annak ellenőrzésére, hogy a böngésző támogatja-e, amire szükséged van, például így: if (window._blocked_) { // Use _blocked_ for AJAX submission } else { // Form submits traditionally }. Ne feltételezd, hogy a funkciók léteznek. Feltételezd, hogy talán nem. Előbb észlelj.
Valós idejű ellenőrzés tartalékkal
Az alap legyen a HTML-ellenőrzés, például <input type="email" required>, hogy a böngésző beküldéskor ellenőrizzen. Aztán adj hozzá valós időben futó JavaScript-ellenőrzést, például input.addEventListener('blur', () => { if (!isValid(input.value)) { input.classList.add('invalid'); showError(input, 'Invalid email'); } });. Ez gépelés közben mutatja a hibákat, és ha a JavaScript elromlik, a böngésző beépített ellenőrzése még mindig működik. A felhasználó megkapja a valós idejű visszajelzés előnyét, és ha a JavaScript elromlik, a böngészőtől beküldéskor kap visszajelzést. Így vagy úgy, az ellenőrzés megtörténik.
AJAX-beküldés hagyományos tartalékkal
Építs hagyományos, szerveroldalon beküldő űrlapot, aztán fogd el a beküldést, és használj helyette AJAX-ot, például így: form.addEventListener('submit', async (e) => { e.preventDefault(); const response = await _blocked_('/submit', { method: 'POST', body: new FormData(form) }); if (response.ok) { showMessage('Success'); } });. Ha a JavaScript elromlik, a preventDefault soha nem fut le, az űrlap a hagyományos módon küld be, és a felhasználó egy oldalújratöltést kap sima felhasználói élmény helyett. De az űrlap működik.
Akadálymentesség mint fokozatos fejlesztés
Az akadálymentesség nem extra funkció. Ez az alap. Építs akadálymentes űrlapokat.
A címkéket a for és az id attribútumokkal kell párosítani a beviteli mezőkkel. Nem data-attribútumokkal, nem olyan aria-label címkékkel, amelyek elsikkadhatnak. Rendes címkékkel.
<label for="email">Email</label>
<input id="email">
Használj szemantikus HTML-elemeket (fieldset, legend, button, input). Ne gombnak kinéző, stílusozott div-eket.
A billentyűzetes navigációnak működnie kell. Tab-bal végig a mezőkön. Shift+Tab a visszalépéshez. Enter a beküldéshez. Szóköz a jelölőnégyzetek váltásához. Ez szemantikus HTML-lel alapból működik. Ne rontsd el JavaScripttel.
Miután az alapok működnek, adj hozzá ARIA-címkéket a képernyőolvasóknak. Adj fókuszjelzőket a billentyűzetet használóknak. De ezek fejlesztések az akadálymentes HTML tetején.
Tesztelés az ellenálló képességért
Teszteld az űrlapodat kikapcsolt JavaScripttel. Kapcsold ki a JavaScriptet a böngésződben, és próbáld beküldeni. Ha az űrlap elromlik, nem ellenálló.
Teszteld lassú hálózaton. Szűkítsd a kapcsolatot 2G-re. Ha az űrlap örökké töltődik, a szakadozó internetű látogatók elmennek.
Teszteld régebbi böngészőkkel. Használj egy böngészőtesztelő szolgáltatást a régi böngészők kipróbálására (ha még szükséged van rá). Nézd meg, mely funkciók nem támogatottak.
Teszteld képernyőolvasóval. Használd a számítógéped képernyőolvasóját. Hallgasd meg, hogyan jelenti be az űrlapot. Ha egy képernyőolvasónak semmi értelme, javítsd.
Teszteld csak billentyűzettel. Ne használj egeret. Végig tudsz navigálni az űrlapon? Be tudod küldeni?
Funkcióészlelés, nem böngészőészlelés
Ne konkrét böngészőket ellenőrizz. Funkciókat ellenőrizz böngészőészlelés helyett, ami így nézne ki: if (navigator.userAgent.includes('Chrome')) { /* use _blocked_ */ }. Helyette használj funkcióészlelést, például: if (window._blocked_) { /* use _blocked_ */ }. A funkcióészlelés megbízhatóbb, mert egy böngészőfrissítés, amely _blocked_-támogatást ad hozzá, működni fog a kódoddal, a böngészőészlelés viszont nem.
Ellenálló űrlapok építése
Az oldalaidat felépítheted a WEMASY weboldalépítőjében.
Nézd meg, mi tartozik a WEMASY csomagodhoz.