Jak tworzyć dostępne formularze internetowe

Sep 12, 2025

Jak

Formularze są istotnym elementem sieci, ponieważ łączą użytkowników do Twojej firmy i pomagają im osiągnąć to, co przybyli do Twojej witryny lub aplikacji. To powiedziane, chcesz upewnić się, że wszyscy Twoi użytkownicy mogą korzystać z twoich formularzy bez konieczności cierpienia okropnego doświadczenia. Celem jest uczynienie tych kluczowych interakcji użytkownika jako niedostępny.

Chociaż jest to prawda, że formularze budowlane mogą czasami być trudnym zadaniem, dzięki czemu umiarkowanie dostępne nie są tak skomplikowane, jak możesz pomyśleć (dobre Kreator strony internetowej sprawi, że jest super prosty). Często są rzucone przez "nie mamy czasu, aby się martwić o dostępność" lub "udostępnimy później". Te wymówki są często (jeśli nie zawsze) nieważne i możesz pomóc Twojemu zespołowi zmienić ten sposób myślenia.

Szukasz więcej rady? Mamy cię pokryte postami na tematy hosting do magazyn w chmurze .

13 Najlepsze oprogramowanie do testowania użytkowników

Oto kilka pytań, które należy rozważyć podczas budowy formularzy:

Jakie trudności mogą komuś z zaburzeniami wzrokowymi, wykorzystując moją formę?
Czy użytkownik ma wyraźne wskazanie, jakie dane są oczekiwane na wejście?
Czy forma jest łatwa w użyciu - czy użytkownicy będą mogli szybko zrozumieć?
Czy mogę użyć klawiatury, aby wypełnić formularz?

Jak zrobić podstawowy formularz subskrypcji

Dałem ci jakiś kod starterowy, który pomoże Ci się wyprzedzić. Dobrze zacznij od tego i ostatecznie dostać się do tego .

Dostarczyłem ci podstawową stylistykę i elementy, które stanowiłyby prostą formę subskrypcji, ale jest wiele, możemy tutaj zrobić, aby ten formularz był bardziej użyteczny. Dzięki czemu tworzysz, używając dobrego semantycznego HTML, dostaniesz Cię długą drogę.

Zacznijmy od podłączenia & lt; wejście & gt; elementy do ich odpowiedniego & LT; Label & GT; s. Robimy to, dając & lt; wejście & gt; ID i używając tego jako atrybutu dla & LT; Label & GT; . Możemy użyć "nazwy" i "wiadomości e-mail" i już zrobiliśmy dwie rzeczy:

Programowo skoczyliśmy etykietę do wejścia. Korzyść z tego jest to, że odczytuje etykietę do użytkownika czytnika ekranu, jeśli wkład ten jest skoncentrowany.
Użytkownik może teraz kliknąć na etykietę, a odpowiednie wejście zostanie skoncentrowane, więc użytkownicy mają teraz większy rozmiar docelowy.

Teraz, gdy nasze wejścia i etykiety są podłączone, możemy zdefiniować typy wejściowe HTML. Są to naprawdę przydatne i super łatwy sposób na doskonałe doświadczenie użytkownika. Dodawanie rodzaj Atrybut pomoże automatycznie wypełnić formularz i zapewni również bardziej odpowiednią klawiaturę dla użytkowników mobilnych. W przypadku naszego przypadku możemy to zrobić Typ = "Tekst" Dla wejścia nazwiska i Typ = "E-mail" na wejście e-mail.

Chcemy również, aby nasi użytkownicy mają dobry pomysł na to, jakiego rodzaju danych (i jego formatowanie) oczekujemy od nich. Tutaj jest całkiem oczywiste, ale to nie zawsze jest. To ogólnie dobra praktyka, aby zapewnić etykietę, która jest zawsze widoczna i symbol zastępczy, który przekazuje oczekiwane wejście. Oznacza to nie korzystanie z Placeholder. Atrybut jako etykieta wizualna dla wejść, w których etykieta nie jest widoczna, gdy użytkownik rozpocznie pisanie. Była to popularna praktyka dla wielu deweloperów i naprawdę musi zostać umieszczona do łóżka raz na zawsze. Możemy dać zastępczom "byłym. Jane Doe" na nazwę i "ex. [email protected]" dla e-maila.

Teraz możemy się pracować na skupieniu stan stylizacja. Domyślna stylizacja stanów ostrości różni się między przeglądarkami i możemy poprawić niezależnie od domyślnej stylizacji, aby uczynić go bardziej przyjaznym dla użytkownika. W naszym przypadku, chcemy, aby wejścia miały gruby, kolorowy kontur, który pasuje do przycisku.

14 łatwych sposobów, aby Twoja strona była bardziej dostępna

Dodaj style fokusowe do selektora wejściowego

Wreszcie musimy dodać kilka stylów ostrości wokół elementu przycisku. Jest to często pomijane, ale naprawdę może pomóc użytkownikom tylko klawiatura wiedzą, gdzie są. Musimy to dodać & amp; :: moz-focusinner Bit, aby pozbyć się niektórych domyślnych stylizacji w Firefoksie (możesz zapisać ten fragment na przyszłość).

Tak, mamy podstawowy formularz subskrypcji, z którego możesz być dumny i poprawić. Ponieważ użyliśmy dobre semantyki, forma jest dostępna tylko przez klawiaturę (spróbuj za pomocą kart i klawiszy kart / Enter). Kolory używane do przycisku są stosunkiem kolorów 11.51, spełniając standardy AAA dla WCAG (wytyczne dotyczące dostępności treści internetowych). Dostalimy etykiety zarówno dla użytkowników wizualnych, jak i użytkowników ekranu, a także w stylu standach na fokus dla naszych przyjaciół używających klawiatury. Wreszcie zauważ, że czcionka jest ustawiona na 18px. w ciele. To sprawia, że nasza forma jest znacznie bardziej czytelna (powinieneś spróbować pozostać powyżej 14px).

Projektowanie i budynek z myślą o dostępności, biorą praktykę, ale będziesz lepszym deweloperem i pomóc w tworzeniu sieci Web lepsze miejsce.

generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket — Generuj, nagradzaną konferencję dla projektantów stron internetowych, wraca do NYC 24-25! Kliknij obraz, aby zarezerwować bilet

Ten artykuł został pierwotnie publikowany w wydaniu 316 netto , Najlepiej sprzedający się magazyn na świecie dla projektantów stron internetowych i programistów. Kup problem 316 tutaj lub Subskrybuj tutaj .

Powiązane artykuły:

Napraw dostępność nie działa z tym darmowym narzędziem
50 niesamowite nowe narzędzia dla deweloperów w 2019 roku
Jak dostępne są twoje projekty?

Jak tworzyć dostępne formularze internetowe

Jak zrobić podstawowy formularz subskrypcji

Dodaj style fokusowe do selektora wejściowego

Jak - Najpopularniejsze artykuły

Jak czyścić pędzle: ostateczny przewodnik

Jak utworzyć skanowanie 3D z wychwytywaniem rzeczywistości

4 kroki do stosowania zmiennych czcionek

Jak utworzyć warstwowy efekt paralaksy na swojej stronie

Wskazówki dotyczące przepływów pracy z bruship

Użyj paska narzędzi Marmoset, aby zaprezentować modele w VR

Designer powinowactwo: Jak używać ograniczeń

Utwórz animowany efekt tekstu 3D

Kategorie