Accessibility: Ikony

0:00W tej lekcji opowiem troszkę o ikonkach no

0:04i jak stworzyć je w sposób dostępny ikony są świetne jako

0:08wymowny przekaźnik informacji który nie

0:13wymaga jakby dużo tekstu i może być rozumiany w

0:17wielu językach ze względu na to że są to ikony są to

0:21znaki graficzne no i jesteśmy w stanie je zrozumieć w większości przypadków

0:25bez większego problemu natomiast zdarzają się sytuację że zostawienie

0:30ikonki samej w sobie jako interaktywny element będzie

0:34niewystarczające w kontekście accessibility ponieważ nie będziemy pewni co

0:38konkretnie te elementy mają robić i jaka jest ich funkcja na

0:42przykład tutaj w tym przykładzie mamy jakiś domek więc podejrzewam że jest to homepage

0:47strona domowa jakiś znak nie wiem może to jest odświeżenie

0:52strony może to jest synchronizacja danych jeżeli to jest aplikacja mamy

0:56księżyc co może być trybem nie przeszkadzać w

1:00systemie operacyjnym albo może być trybem nocnym ciężko

1:05powiedzieć no i telefon który może być albo jakby

1:09czymś co faktycznie wybierze nam numer telefonu bądź po

1:13prostu sekcją do kontaktu no i w takich sytuacjach jeżeli mamy moment

1:18że faktycznie użytkownik nie jest zapoznany z naszym produktem no

1:22to dobrze jest zaproponować również etykiety dla ikon

1:26o etykietach już troszkę mówiłem natomiast etykiety dla ikon jest

1:30to coś co robi się dosyć rzadko a szkoda bo jest to bardzo dobra funkcja dostępności

1:35i tak naprawdę jest na nią miejsce jeżeli się o tym pomyśli

1:39wcześniej to na etapie projektowania mockup design można

1:43znaleźć spokojnie miejsce pod każdą ikonkę jeżeli chcemy być bardziej dostępni więc no

1:47możemy zerknąć sobie w markup i dowiedzieć się co te elementy

1:52powinny tak naprawdę robić widzimy że to jest faktycznie strona główna ta ikonka

1:56jest to strona główna jeśli chodzi o tutaj

2:01no to widać że jest to js-reload więc prawdopodobnie jest to po prostu refresh

2:05naszej aplikacji być może z jakiegoś powodu link do

2:09roota nie działa i musimy to zrobić jako tego typu button może to

2:13być też odświerzenie sekcji konkretnej nie musi to być całej strony no zależy

2:17no i widzimy że tutaj jest js-invert więc

2:21ja podejrzewam że to jest dark mode a nie tryb nie przeszkadzać no

2:25i widzimy że tutaj jest telefon numer telefonu na który możemy zadzwonić

2:30więc jest to faktycznie link więc to jest nie tyle contact

2:34us co faktycznie call us prawdopodobnie więc spróbujmy stworzyć

2:38tego typu labelki co ciekawe akurat w tym przypadku jesteśmy

2:42w stanie ominąć element label ponieważ wszystkie ikonki

2:46mają jakby swój element niektóre to linki niektóre to buttony i

2:51wewnątrz nich możemy napisać tekst który odpowiada za opis

2:55tego co się dzieje za nimi jaka jest za nimi akcja więc wpiszmy sobie tutaj po

2:59prostu homepage zapiszemy i oczywiście to jest już wszystko

3:03ostylowane jeżeli jesteście zainteresowani jak to jest ostylowanie możecie tutaj wejść

3:07w base.css tutaj są też custom properties css

3:11generalnie do każdego przykładu są tego typu pliki

3:16więc możemy stworzyć sobie homepage wiemy że tutaj jest

3:20reload więc możemy dać reload data powiedzmy

3:25i wszystko ładnie się układa może to reload data nie więc zostawimy

3:29samo reload oczywiście moglibyśmy to po prostu zaadresować w css tutaj

3:33wpiszemy dark mode i tutaj wpiszemy call us

3:37no i w porównaniu do tego co było przed chwilą czyli

3:41takiego stanu że możemy sobie tutaj teraz to podejrzeć no

3:45to fakt że mamy te etykietki jest o wiele

3:49bardziej wymowne ja na pierwszy rzut oka wiem o co tutaj chodzi w przypadku

3:54gdy były tutaj same ikony nie byłem tego pewien więc polecam to robić zwłaszcza

3:58że jest na to miejsce możemy nawet zrobić to naprawdę malutkim tekstem który niekoniecznie

4:02musi już spełniać wszystkie wymogi dotyczące rozmiaru

4:06tekstu bo jest to dodatkowa informacja której wcześniej nie mielibyśmy tam więc

4:11warto to w ten sposób zainwestować a w międzyczasie możemy tak dla sportu zaimplementować

4:16prosty dark mode w kilku linijkach css

4:20i javascript ponieważ możliwość przełączania motywu między jasnym a

4:24ciemnym jest też bardzo ważnym aspektem accessibility ponieważ to że jeżeli

4:28wchodzimy w przeglądarkę wieczorem i dostajemy białym światłem

4:32na naszą twarz nie jest dobre dla naszego snu i generalnie

4:37dla naszego wzroku jest dużo badań na ten temat ja te linki

4:41zostawię w odpowiedniej sekcji pod kursem więc zaimplementujemy to na szybko

4:45i stworzymy sobie po prostu queryselector pobierzemy

4:52sobie tutaj tą klasę js-invert i na nim dodamy addeventlistener

4:56oczywiście moglibyśmy zrobić tutaj jakiś eventdelegation czy inne

5:00techniki jeżeli chodzi o performance i optymalizację javascriptu natomiast

5:05nie jest o tym ten kurs no i zrobimy po prostu tutaj na tym

5:09elemencie na eventtarget classlist

5:13toggle czyli przełączamy obecność pewnej

5:17klasy tylko może nie na samym targecie czyli nie na klikniętym elemencie

5:21tylko na dokument body i

5:25możemy dać klasę inverted domyślnie jej nie ma więc

5:30tak nawet gdy będziemy klikać ten dark mood to nic się nie będzie działo konkretnego

5:34ale jeśli damy tutaj klasę inverted no

5:38to możemy zrobić filter invert

5:43podając w parametrze jedynkę czyli 100% czyli cały kolor zostanie odwrócony

5:47zapiszemy zobaczmy co się stanie i faktycznie coś

5:52się odwróciło ale to tło niekoniecznie ponieważ ustawiamy

5:56to na body no to możemy tutaj wstawić jeszcze background na

6:00kolor białe ja tutaj użyję właśnie tych custom properties o których

6:05wcześniej mówiłem mam zadeklarowaną zmienną white i

6:09ona odpowiada po prostu kolorowi white w css zapisujemy no

6:13i teraz przy kliknięciu dark mode faktycznie przełącza nam się

6:17motyw strony jest to jak widzicie trzy

6:22linijki javascriptu można byłoby to zciśnić w jeszcze mniejsze ilości jedna

6:26klasa i mamy bardzo prymitywny bo prymitywny ale

6:30dark mode na naszej stronie ostatnią rzeczą którą warto tutaj nadnienić jest to że

6:34jeżeli mamy elementy nawigacyjne bądź interaktywne które

6:38coś przełączają to warto byłoby tutaj zmieniać tą treść czyli

6:42jeżeli mamy teraz tryb jasny no to mogłoby się tutaj zrobić tu

6:46mógłby być księżyc i napis dark mode natomiast jak jesteśmy w trybie dark mode

6:51to mogłoby być tutaj słoneczko i napisane light mode więc etykiety

6:55dla ikonek jak najbardziej fajna acccessibility praktyka dark

7:00mode też fajna rzecz no i oczywiście korzystanie z odpowiednich

7:04atrybutów i znaczników semantycznych aby to wszystko było

7:08dobrze czytane przez czytniki ekranowe