Návštěvníkovi vypadne internet, zatímco se načítá váš formulář. Rozšíření Chrome rozbije váš JavaScript. Starší prohlížeč nepodporuje JavaScript, který používáte. Jeho čtečka obrazovky se ve formuláři nedokáže orientovat, protože popisky jsou skryté pomocí CSS.
Formuláře jsou kritické cesty. Uživatelé je musí odeslat. Formulář se nemůže jen tak rozbít. Postupné vylepšování je princip tvorby formulářů, které fungují všude, a teprve potom se přidávají vylepšení pro prohlížeče, které je zvládnou.
Tento článek popisuje, jak vytvořit formuláře, které se elegantně zjednoduší, fungují bez JavaScriptu a zůstávají přístupné všem.
Co je postupné vylepšování?
Postupné vylepšování znamená začít základním funkčním formulářem, který funguje i v nejstarších prohlížečích a bez JavaScriptu, a pak na něj vrstvit vylepšení pro moderní prohlížeče. Vrstva 1 (HTML) poskytuje základní formulář s poli, popisky a tlačítkem odeslání, který nepotřebuje žádný JavaScript a funguje všude. Vrstva 2 (CSS) formulář stylizuje barvami, mezerami a rozvržením, takže formulář stále funguje, i když se CSS nenačte, jen vypadá špatně. Vrstva 3 (JavaScript) přidává ověřování v reálném čase, plynulé animace a odesílání přes AJAX, takže formulář stále funguje, i když JavaScript selže, a prostě se odešle tradičně. Pokud selže kterákoli vrstva, uživatel stále dostane funkční formulář. To je odolnost.
Základ: HTML, které funguje
Začněte sémantickým HTML se správnými popisky, prvky fieldset a legend. Základní formulář vypadá takto: <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>. Tento formulář funguje bez JavaScriptu, bez CSS, ve starých prohlížečích, se čtečkami obrazovky i při ovládání klávesnicí. To je váš základ. Nikdy neodstraňujte prvky z DOM a nenahrazujte je prvky vykreslenými JavaScriptem, protože pokud JavaScript selže, formulář se rozbije. Zachovejte sémantické HTML.
Elegantní zjednodušení s CSS
Vrstvěte vylepšení CSS na HTML. Formulář hezky nastylujte. Ale pokud CSS selže, formulář stále funguje.
Neskrývejte popisky pomocí CSS a nespoléhejte na zástupný text, protože některé CSS se nenačte a čtečky obrazovky potřebují popisky v HTML. Nepoužívejte CSS ke skrytí indikátorů povinných polí, protože pokud se vaše vlastní „hvězdička povinného pole“ nenačte, uživatelé nepoznají, která pole jsou povinná. Použijte místo toho atribut required v HTML. Vyhněte se vizuálnímu skrytí popisku a zobrazení zástupného textu pomocí label { display: none; } a input::placeholder { content: 'Email'; }. Místo toho ponechte popisek v HTML a nastylujte ho, jak chcete, pomocí label { font-weight: bold; color: #333; }.
Vylepšení v JavaScriptu, která se elegantně zjednoduší
Přidávejte vylepšení v JavaScriptu, ale jen pokud formulář už funguje. Pomocí detekce funkcí zjistěte, zda prohlížeč podporuje to, co potřebujete, takto: if (window._blocked_) { // Use _blocked_ for AJAX submission } else { // Form submits traditionally }. Nepředpokládejte, že funkce existují. Předpokládejte, že nemusí. Nejdřív zjišťujte.
Ověřování v reálném čase se záložním řešením
Použijte jako základ ověřování v HTML pomocí <input type="email" required>, aby prohlížeč ověřoval při odeslání. Pak přidejte ověřování v JavaScriptu, které běží v reálném čase, takto: input.addEventListener('blur', () => { if (!isValid(input.value)) { input.classList.add('invalid'); showError(input, 'Invalid email'); } });. Zobrazuje chyby, když uživatel píše, a pokud JavaScript selže, vestavěné ověřování prohlížeče stále funguje. Uživatel má užitek ze zpětné vazby v reálném čase, a pokud JavaScript selže, dostane zpětnou vazbu od prohlížeče při odeslání. Ať tak či onak, ověřování proběhne.
Odesílání přes AJAX s tradičním záložním řešením
Vytvořte tradiční formulář, který se odesílá na straně serveru, a pak odeslání zachyťte a místo toho použijte AJAX takto: form.addEventListener('submit', async (e) => { e.preventDefault(); const response = await _blocked_('/submit', { method: 'POST', body: new FormData(form) }); if (response.ok) { showMessage('Success'); } });. Pokud JavaScript selže, preventDefault se nikdy nespustí, formulář se odešle tradičním způsobem a uživatel dostane místo plynulého zážitku opětovné načtení stránky. Ale formulář mu bude fungovat.
Přístupnost jako postupné vylepšování
Přístupnost není doplňková funkce. Je to základ. Vytvářejte přístupné formuláře.
Popisky musí být spárované s poli pomocí atributů for a id. Ne pomocí datových atributů, ne pomocí aria-label, které se dají přehlédnout. Správné popisky.
<label for="email">Email</label>
<input id="email">
Používejte sémantické prvky HTML (fieldset, legend, button, input). Ne prvky div nastylované tak, aby vypadaly jako tlačítka.
Ovládání klávesnicí musí fungovat. Tabulátorem projděte všechna pole. Shift+Tab zpět. Enter odešle. Mezerník přepíná zaškrtávací políčka. S sémantickým HTML to funguje ve výchozím stavu. Nerozbíjejte to JavaScriptem.
Až základy fungují, přidejte popisky ARIA pro čtečky obrazovky. Přidejte indikátory fokusu pro uživatele klávesnice. Ale to jsou vylepšení nad přístupným HTML.
Testování odolnosti
Vyzkoušejte formulář s vypnutým JavaScriptem. Vypněte JavaScript v prohlížeči a zkuste formulář odeslat. Pokud se formulář rozbije, není odolný.
Vyzkoušejte s pomalými sítěmi. Omezte připojení na 2G. Pokud se formulář načítá věčnost, návštěvníci s kolísavým internetem odejdou.
Vyzkoušejte se staršími prohlížeči. Použijte službu pro testování v prohlížečích a vyzkoušejte IE 11 (pokud to ještě potřebujete). Podívejte se, které funkce nejsou podporované.
Vyzkoušejte se čtečkami obrazovky. Použijte NVDA (Windows) nebo VoiceOver (Mac). Poslechněte si, jak se formulář ohlašuje. Pokud čtečce obrazovky nedává smysl, opravte to.
Vyzkoušejte jen s klávesnicí. Nepoužívejte myš. Dokážete se formulářem pohybovat? Dokážete ho odeslat?
Detekce funkcí, ne detekce prohlížeče
Nezjišťujte konkrétní prohlížeče. Zjišťujte funkce místo detekce prohlížeče, jako je if (navigator.userAgent.includes('Chrome')) { /* use _blocked_ */ }. Místo toho použijte detekci funkcí, například if (window._blocked_) { /* use _blocked_ */ }. Detekce funkcí je spolehlivější, protože aktualizace prohlížeče, která přidá podporu _blocked_, bude s vaším kódem fungovat, zatímco detekce prohlížeče ne.
Jak WEMASY vytváří odolné formuláře
Formuláře WEMASY jsou postavené na principech postupného vylepšování: fungují bez JavaScriptu, mají na místě popisky a sémantické HTML a mají volitelná vylepšení v JavaScriptu, takže starší prohlížeče dostanou funkční formulář a moderní prohlížeče plynulé interakce.
Funkce odolnosti najdete ve svém tarifu WEMASY.