Kävijän verkkoyhteys katkeaa, kun lomakettasi ladataan. Chrome-laajennus rikkoo JavaScriptisi. Vanhempi selain ei tue käyttämääsi JavaScriptiä. Kävijän ruudunlukija ei pysty käyttämään lomaketta, koska nimiöt on piilotettu CSS:llä.
Lomakkeet ovat kriittisiä polkuja. Käyttäjien täytyy pystyä lähettämään ne. Lomake ei voi vain mennä rikki. Asteittainen parantaminen on periaate, jossa rakennat lomakkeet, jotka toimivat kaikkialla, ja lisäät sitten parannuksia selaimille, jotka niitä tukevat.
Tässä artikkelissa käydään läpi, miten rakennat lomakkeita, jotka heikkenevät sulavasti, toimivat ilman JavaScriptiä ja pysyvät saavutettavina kaikille.
Mitä on asteittainen parantaminen?
Asteittainen parantaminen tarkoittaa, että aloitat perustason toimivalla lomakkeella, joka toimii vanhimmissa selaimissa ja ilman JavaScriptiä, ja lisäät sen päälle parannuksia nykyaikaisille selaimille. Taso 1 (HTML) tarjoaa perustason lomakkeen, jossa on syöttökentät, nimiöt ja lähetyspainike. Se ei tarvitse JavaScriptiä ja toimii kaikkialla. Taso 2 (CSS) tyylittelee lomakkeen väreillä, väleillä ja asettelulla, joten lomake toimii edelleen, vaikka CSS ei latautuisi, vaikka se näyttääkin silloin huonolta. Taso 3 (JavaScript) lisää reaaliaikaisen tarkistuksen, sulavat animaatiot ja AJAX-lähetyksen, joten lomake toimii edelleen, vaikka JavaScript ei toimisi, ja lähettää tiedot perinteisellä tavalla. Jos jokin taso pettää, käyttäjä saa silti toimivan lomakkeen. Tämä on kestävyyttä.
Perusta: HTML, joka toimii
Aloita semanttisella HTML:llä, jossa käytetään oikeita nimiöitä, fieldset- ja legend-elementtejä. Perustason lomake näyttää tältä: <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>. Tämä lomake toimii ilman JavaScriptiä, ilman CSS:ää, vanhoissa selaimissa, ruudunlukijoiden kanssa ja näppäimistöllä. Tämä on perustasosi. Älä koskaan poista elementtejä DOM:sta ja korvaa niitä JavaScriptillä luoduilla elementeillä, koska jos JavaScript pettää, lomake menee rikki. Pidä semanttinen HTML.
Sulava heikentyminen CSS:n kanssa
Lisää CSS-parannukset HTML:n päälle. Tyylittele lomake kauniiksi. Mutta jos CSS pettää, lomake toimii silti.
Älä piilota nimiöitä CSS:llä ja luota paikkamerkkeihin, koska osa CSS:stä ei lataudu ja ruudunlukijat tarvitsevat nimiöt HTML:ssä. Älä käytä CSS:ää pakollisuusmerkkien piilottamiseen, koska jos oma "pakollinen tähti" ei lataudu, käyttäjät eivät tiedä, mitkä kentät ovat pakollisia. Käytä sen sijaan HTML:n required-attribuuttia. Vältä nimiön piilottamista visuaalisesti ja paikkamerkin näyttämistä sen tilalla käyttämällä label { display: none; } ja input::placeholder { content: 'Email'; }. Pidä sen sijaan nimiö HTML:ssä ja tyylittele se haluamallasi tavalla käyttämällä label { font-weight: bold; color: #333; }.
JavaScript-parannukset, jotka heikkenevät sulavasti
Lisää JavaScript-parannukset, mutta vain jos lomake jo toimii. Käytä ominaisuuksien tunnistusta tarkistaaksesi, tukeeko selain tarvitsemaasi, käyttämällä if (window._blocked_) { // Use _blocked_ for AJAX submission } else { // Form submits traditionally }. Älä oleta ominaisuuksien olevan olemassa. Oleta, että ne eivät ehkä ole. Tunnista ensin.
Reaaliaikainen tarkistus varajärjestelyllä
Käytä HTML-tarkistusta perustasona käyttämällä <input type="email" required>, jolloin selain tarkistaa tiedot lähetettäessä. Lisää sitten JavaScript-tarkistus, joka toimii reaaliajassa käyttämällä input.addEventListener('blur', () => { if (!isValid(input.value)) { input.classList.add('invalid'); showError(input, 'Invalid email'); } });. Se näyttää virheet käyttäjän kirjoittaessa, ja jos JavaScript pettää, selaimen oma tarkistus toimii silti. Käyttäjä saa reaaliaikaisen palautteen edun, ja jos JavaScript pettää, hän saa selaimelta palautteen lähetettäessä. Tarkistus tapahtuu joka tapauksessa.
AJAX-lähetys perinteisellä varajärjestelyllä
Rakenna perinteinen lomake, joka lähettää tiedot palvelimelle. Siepaa sitten lähetys ja käytä sen sijaan AJAXia käyttämällä form.addEventListener('submit', async (e) => { e.preventDefault(); const response = await _blocked_('/submit', { method: 'POST', body: new FormData(form) }); if (response.ok) { showMessage('Success'); } });. Jos JavaScript pettää, preventDefault ei koskaan suoriteta, lomake lähetetään perinteisellä tavalla, ja käyttäjä saa sivun uudelleenlatauksen sulavan käyttökokemuksen sijaan. Mutta lomake toimii.
Saavutettavuus asteittaisena parantamisena
Saavutettavuus ei ole lisäominaisuus. Se on perusta. Tee saavutettavia lomakkeita.
Nimiöt täytyy yhdistää kenttiin for- ja id-attribuuteilla. Ei data-attribuuteilla, ei aria-label-arvoilla, jotka voivat jäädä huomaamatta. Kunnolliset nimiöt.
<label for="email">Email</label>
<input id="email">
Käytä semanttisia HTML-elementtejä (fieldset, legend, button, input). Älä div-elementtejä, jotka on tyylitelty näyttämään painikkeilta.
Näppäimistöllä liikkumisen täytyy toimia. Siirry kenttien läpi Tab-näppäimellä. Shift+Tab palaa takaisin. Enter lähettää. Välilyönti vaihtaa valintaruutuja. Tämä toimii oletuksena semanttisella HTML:llä. Älä riko sitä JavaScriptillä.
Kun perusasiat toimivat, lisää ARIA-nimiöt ruudunlukijoille. Lisää kohdistusindikaattorit näppäimistön käyttäjille. Nämä ovat kuitenkin parannuksia saavutettavan HTML:n päälle.
Kestävyyden testaaminen
Testaa lomakkeesi JavaScript pois päältä. Poista JavaScript käytöstä selaimessasi ja yritä lähettää lomake. Jos lomake menee rikki, se ei ole kestävä.
Testaa hitailla verkoilla. Rajoita yhteytesi 2G-nopeuteen. Jos lomakkeen lataus kestää ikuisuuden, kävijät, joilla on heikko verkko, lähtevät.
Testaa vanhemmilla selaimilla. Käytä selaintestauspalvelua testataksesi vanhalla selaimella, kuten IE 11:llä (jos sitä vielä tarvitaan). Katso, mitä ominaisuuksia ei tueta.
Testaa ruudunlukijoilla. Käytä Windowsin tai Macin omaa ruudunlukijaa. Kuuntele, miten lomake kuulutetaan. Jos siitä ei saa mitään selvää ruudunlukijalla, korjaa se.
Testaa pelkällä näppäimistöllä. Älä käytä hiirtä. Pääsetkö lomakkeen läpi? Pystytkö lähettämään sen?
Ominaisuuksien tunnistus, ei selaimen tunnistus
Älä tarkista tiettyjä selaimia. Tarkista ominaisuuksia selaimen tunnistuksen sijaan. Älä tee näin: if (navigator.userAgent.includes('Chrome')) { /* use _blocked_ */ }. Käytä sen sijaan ominaisuuksien tunnistusta: if (window._blocked_) { /* use _blocked_ */ }. Ominaisuuksien tunnistus on luotettavampi, koska selainpäivitys, joka lisää _blocked_-tuen, toimii koodisi kanssa, mutta selaimen tunnistus ei.
Miten WEMASY tekee kestäviä lomakkeita
WEMASYn lomakkeet on rakennettu asteittaisen parantamisen periaatteilla: ne toimivat ilman JavaScriptiä, niissä on nimiöt ja semanttinen HTML paikallaan ja valinnaisia JavaScript-parannuksia, joten vanhemmat selaimet saavat toimivan lomakkeen ja nykyaikaiset selaimet sulavat vuorovaikutukset.
Katso kestävyysominaisuudet WEMASY-paketistasi.