Accessibility: Etykiety

0:00Cześć w tej lekcji przybliżę ci troszkę temat etykiet czyli

0:04elementów label generalnie bardzo często na naszych stronach

0:08internetowych no korzystamy z elementów formularza jest to jedna z podstawowych jakby

0:13składowych sieci stron internetowych no i załóżmy że mamy

0:17stronę super fly booking czyli jakąś rezerwację lotów online

0:21bardzo uproszczony formularz no ale będzie wystarczył na nasze

0:25potrzeby załóżmy że mamy stronę internetową która oczekuje od nas abyśmy wypełnili

0:30dane takie jak imię nazwisko adres mailowy hasło

0:34jakaś data nie wiemy co to za data no i twój adres jako pole

0:38tekstowe no dobrze no to zaczynamy no i wpiszemy tutaj wojtek

0:43nazwisko wpiszę eduweb a czemu nie adres

0:48emailowy ja tutaj wpiszę super@mail.com

0:54hasło no nie powiem jakie wpisuje hasło no

0:58i tutaj mamy pierwszą zagwozdkę otóż czym jest ten element

1:02do wpisywania daty no tak naprawdę nie wiemy patrząc tylko

1:06i wyłącznie na tą sekcję ekranu jeśli zerkniemy w

1:10źródła jest szansa że czegoś byśmy się dowiedzieli ja tutaj już akurat przygotowałem

1:15ściągawkę no okazało się że to jest data urodzenia a

1:19to mogło być równie dobrze czas wygaśnięcia paszportu albo

1:23różnego tego typu informacje w związku z czym

1:27dopóki nie określimy osobnym elementem czym

1:32jest to pole tekstowe to pole z datą no to tak naprawdę użytkownik wpisuje

1:36to na ślepo tak samo jest w przypadku placeholderów i innych

1:40elementów formularza tekstowych czyli w momencie kiedy wpisaliśmy tutaj

1:44już te dane no to tak naprawdę nie wiemy co tutaj było do

1:49wpisania ja wpisałem tutaj w nazwisku eduweb bo nie chcę podawać nazwiska na przykład

1:53no i mogę zapomnieć że tam faktycznie było to nazwisko muszę usunąć

1:57to żeby dowiedzieć się tak co ja tak naprawdę wypełniłem w tym

2:01polu to jest bardzo kłopotliwe przy długich formularzach

2:06gdzie musimy wypełnić dane jak nazwa ulicy kod

2:10pocztowy różne tego typu dane jeżeli mamy tylko i wyłącznie placeholder no

2:14to niestety użytkownik może zapomnieć co tam faktycznie wpisał to jest jeden z

2:18problemów innym problemem jest to że niektóre czytniki ekranowe faktycznie tego

2:22placeholdera nie czytają czyli tego atrybutu placeholder jest

2:26szansa że czytnik ekranowy nam nie przeczyta akurat chromevox z tego

2:30co pamiętam to czyta możemy to sprawdzić

2:35tak więc

2:39chromevox akurat to czyta natomiast są czytniki ekranowe które tego nie robią

2:43zwłaszcza też na starszych systemach operacyjnych w związku z czym jakby to nie jest

2:47wystarczające no i inna kwestia jest też taka że często właśnie domyślne

2:52placeholdery mają bardzo słaby kontrast i ciężko jest domyślić się co to jest za pole

2:56ciężko jest to po prostu przeczytać więc jakie jest rozwiązanie rozwiązanie jest proste bo

3:00wystarczy po prostu dodać labelki czyli etykiety znaczniki

3:05label można zrobić na kilka sposobów można owinąć dany

3:09element w labelkę i wtedy wszystko co

3:14tutaj się znajdzie nasz opis czyli w tym przypadku jest to first

3:18name zostanie zawarte jako labelka

3:22do tego właśnie elementy input no i teraz gdy klikniemy ten element

3:26to dostajemy w gratisie tak naprawdę możliwość

3:31focusowania pola formularza nawet jeżeli w to nie trafimy co jest świetne

3:35dla osób z problemami motorycznymi na przykład z chorobą

3:39parkinsona jak ktoś ma rozstrojona myszkę i ma za duże dpi

3:43tak naprawdę nie chcę tego więc labelki są do tego świetne

3:47to jest pierwszy sposób ale ja polecam drugi sposób który

3:51jest mniej oczywisty mianowicie używanie

3:55labelek w taki sposób że mamy osobny znacznik nie zawijamy input

4:00wewnątrz labelki no i tutaj atrybutem for

4:04możemy odwołać się do identyfikatora czyli id innego

4:08elementu html czyli jeśli chcielibyśmy stworzyć labelkę tutaj first

4:13name dla tego pola formularza no to możemy zabrać jego id

4:17no i tutaj go wkleić jak to zapiszemy no

4:21to oczywiście mamy teraz inne stylowanie dlatego też lubię tą metodę ponieważ daje nam

4:25to większą elastyczność no i dalej działa wszystko tak samo więc klikamy sobie na

4:29first name i nam się fokusuje pole formularza no

4:33i w tym momencie jeśli teraz wpiszę sobie tutaj imię to ja dalej będę wiedział że o to

4:38jest pole na first name czyli na faktycznie na imię nie

4:42ma takiej sytuacji że zaczynamy coś pisać wstawimy spację i nie

4:46mamy bladego pojęcia co tutaj się znajdowało no i oczywiście jest to też lepsze dla wszystkich

4:51czytników ekranowych więc możemy szybko uzupełnić tutaj pozostałe

4:55elementy czyli first name tutaj mamy last

4:59name zapisujemy formularz

5:03od razu staje się czytelniejszy tutaj wpisujemy

5:07email email password

5:14password przypominam że ja tylko robię tutaj

5:19atrybut for o takiej samej wartości jak identyfikator elementu

5:23który chcę oznaczyć etykietą zapisujemy no i tutaj będzie

5:27faktycznie w końcu widać do czego służy ten date picker date of

5:32birth date of birth i

5:37faktycznie widzimy już na pierwszy rzut oka wiadomo że to jest data urodzenia

5:41nawet jeżeli ktoś nie będzie pewny bo będzie kilka tutaj pól o typie

5:45date no to kliknięcie na date of birth od razu nas przekieruje na ten element

5:50na którym nam zależy no i dla textarea też możemy zrobić sobie labelkę

5:54oczywiście dlaczego nie do dowolnego typu formularza

5:58możemy stworzyć tak naprawdę labelkę i tutaj wstawiamy address i

6:03możemy powiedzieć type your address

6:08below też klikając to przeniesie się nam focus na

6:12tą textarea i teraz można zmienić jakby funkcję

6:16placeholdera i zamiast wpisywać tutaj jakby duplikować tą

6:20treść first name możemy dać w placeholder na przykład na przykład czyli

6:25example wojtek i

6:30do last name example eduweb zapisujemy

6:34i w tym momencie widać że to nie są dane docelowe ponieważ

6:38mamy tutaj przedrostek na przykład i użytkownik wie w jakim

6:42formacie wpisać na przykład dane wie co konkretnie wpisać jeżeli email nie

6:47jest dla niego wystarczająco jasny no to jeśli wpiszemy super@mail.com

6:51no to już widać o co tutaj chodzi i

6:56na hasło możemy dać na przykład jakieś emoji nie

7:01patrzącej małpki żeby żeby nie pokazywać co

7:05to jest za hasła nie no tak naprawdę możemy wstawić jakieś gwiazdki albo

7:09po prostu type your password here ciężko

7:15stwierdzić natomiast możemy zmienić funkcję tego placeholdera jako

7:19uzupełnienie danych które znajdują się na naszej etykietce też nie proponował bym

7:23wstawiać placeholdera na przykład gwiazdka ponieważ użytkownicy mogą

7:27ustalić faktycznie 6 gwiazdek jako hasło do serwisu co może być w sumie problem

7:32bezpieczeństwa i tego nie chcemy robić tak więc generalnie

7:36etykiety są bardzo istotną częścią tworzenia stron internetowych niestety

7:41wiele z nas o nich zapomina są też różne rozwiązania typu floating

7:45labels czyli labelki które nie są widoczne na pierwszy rzut

7:49oka tylko wyjeżdżają jakby z miejsca placeholdera i pojawiają się na górze one

7:53też mają problemy z dostępnością ja jestem zwolennikiem takiego klasycznego formularza

7:58gdzie labelki są faktycznie widoczne oczywiście możemy je ostylować

8:02według naszych dowolnych standardów estetycznych jakich trzymamy

8:06się na naszej stronie natomiast te etykietki ja polecam zawsze mieć

8:10na naszej witrynie