Accessibility: Brak wsparcia dla nawigacji klawiaturą

0:00Cześć w tej lekcji opowiem ci o najczęstszych błędach

0:04związanych z nawigacją klawiaturą generalnie tutaj można zrobić naprawdę długą sekcję

0:08o tym i tak naprawdę będziemy o tym mówili jeszcze w kolejnym rozdziale który

0:12będzie poświęcone tylko i wyłącznie nawigacji klawiaturą 1 rozdział będzie

0:17poświęcony stylowaniu wskaźniku focusa więc będziemy jeszcze o

0:21tym dużo mówić natomiast jest to takie wprowadzenie czego na pewno nie robić w kontekście accessibility

0:25i nawigacji klawiaturą przede wszystkim zobaczmy co mamy na tej stronie

0:29na mamy tutaj strony backpack of your dreams mamy do wyboru kilka plecaków

0:34jest fajnie bo faktycznie każdy z tych przycisków ma

0:38nazwę w sobie więc wiemy co kupujemy już się nauczyliśmy na poprzednich

0:42naszych błędach że nie można zostawiać linków bez kontekstu no i tutaj jest jakaś treść i

0:46browse more fajnie możemy zacząć nawigację powiedzmy

0:51najpierw czytnikiem ekranowy

0:55backpack of your dreams no i lecimy

0:59dalej

1:03tak więc dostaliśmy informację że jesteśmy

1:07na elemencie listy dlatego warto też używać właśnie list numerowanych

1:11bądź nienumerowanych w zależności od przypadku ponieważ dostajemy wtedy informację

1:16że jesteśmy w liście ta lista ma ileś elementów no i możemy się po niej nawigować

1:20bardzo fajna rzecz dlatego właśnie robi się nawigację w listach ponieważ możemy

1:24się bardziej wymownie poruszać wtedy po takim elemencie natomiast czego

1:28tutaj zabrakło nie dostaliśmy informację czy to jest link czy to jest button zobaczmy

1:33jeszcze raz

1:37to jest po prostu list item

1:41dlaczego tak się dzieje ponieważ zrobiliśmy tutaj diva driva o

1:45klasie call to action który ma data goto buy dakine no

1:50i faktycznie jak zobaczymy sobie w javascryptach to tutaj jest

1:54że każdy element który ma klasę call-to-action po kliknięciu będzie przenosił nas

1:58na datasetem do tego goto które tam zadeklarowaliśmy widziałem

2:03firmy które rozwiązywały to w ten sposób z różnych technicznych przyczyn natomiast to

2:07rozwiązanie jest zupełnie niedostępne z kilku powodów po pierwsze nawigując się

2:12czytnikiem ekranowym nie wiemy że możemy ten element kliknąć

2:21nie ma żadnej informacji

2:25o tym czy to jest element nawigacyjny czy to jest link czy to jest button nie ma informacji że

2:29możemy to kliknąć jeżeli polecimy dalej

2:35to widzimy że browse more jest linkiem bo faktycznie został

2:39zakodowany jako a z href więc tak naprawdę

2:43wszystkie te elementy powinny być albo buttonami albo linkami

2:48wydaje mi się że powinny być linkami ponieważ tutaj mają data-goto i mają tutaj

2:52jakąś kotwiczkę po pierwsze użytkownik czytnika ekranowego jeżeli będzie

2:56zaanonsowany że jest to link będzie wiedział że można go kliknąć a po drugie będzie on dostępny

3:01z klawiatury nawet jeżeli nie korzystam z czytnika ekranowego ja go teraz wyłączę

3:06i jak już wspominałem możemy nawigować się po elementach interaktywnych

3:11takich jak formularze buttony linki za pomocą taba czyli tabulacji

3:15tab sam sfokusuje nam najbliższy element nawigacyjny

3:19w tym momencie jest to browse more tutaj widoczne

3:23no i oczywiście shift tab możemy wrócić do innego

3:27elementu natomiast jest tutaj tylko jeden element nawigacyjny

3:32dostępny z klawiatury te przyciski nie są dostępne z klawiatury ponieważ użyliśmy

3:36do tego divów żeby sprawić że divy były

3:40dostępne trzeba zrobić naprawdę bardzo wiele rzeczy trzeba dodać do tego tabindex

3:44żeby element był focusowalny z klawiatury trzeba dodać mu odpowiedni outline

3:48żeby był widoczny na którym elemencie jesteśmy obecnie czyli wskaźnik implementujemy

3:53samodzielnie implementujemy obsługę zdarzeń na spację

3:57na enter samodzielnie implementujemy rolę tak

4:01być czytnik ekranowy przeczytał to jako przycisk też samodzielnie i

4:06jakby tak sobie to podsumować użycie jednego znacznika button a 12 atrybutów

4:11oraz garści js-a żeby odwzorować dokładnie

4:15to samo zachowanie i trochę ułatwić sobie sprawę ze stylowaniem

4:20jest zupełnie nieopłacalne jest generalnie złą praktyką jeżeli chodzi o performance który

4:25też de facto wpływa na dostępność ponieważ jest dużo krajów

4:29w którym dostęp do sieci nie jest jeszcze tak powszechny sieć 3g nie

4:33jest nawet tak bardzo rozpopularyzowana na świecie w wielu miejscach na świecie będziecie

4:38mięli sieć bezprzewodową bardzo powolną no i takie nawet zmiany

4:42pokroju kilkanaście atrybutów więcej zamiast jednego znacznika będą miały

4:46też znaczenie natomiast nie jest to w ogóle button to jest link jak już ustaliliśmy więc

4:51możemy tutaj zaznaczyć sobie wszystkie te divy zrobić z tego a

4:55w tym momencie jest to już link tylko nie ma jeszcze odpowiedniego

4:59atrybutu href możemy go tutaj ustawić i tak naprawdę możemy

5:03pozbyć się tego javascriptu usuwamy no

5:09tutaj się oczywiście zrobiło podkreślenie ale to możemy sobie już jakby

5:13naprawić samodzielnie czyli tutaj robimy sobie jeżeli to nam nie przeszkadza a

5:19chcielibyśmy żeby call-to-action nie miał tego podkreślenia

5:23no to robimy text-decoration none no i

5:28już tego tutaj nie ma jeszcze jeśli chcielibyśmy ustalić jakieś rozmiary konkretne

5:32dla tego elementu możemy nadać na nim display block ponieważ domyślnie

5:36linki mają display inline więc atrybuty takie jak with czy

5:41high nie będą na nie wpływać i po prostu możemy to zrobić jeżeli na tym zależy

5:45divy są domyślnie blokowe i mają wpływ właśnie na nie te właściwości co

5:49się teraz zmieniło zobaczmy z poziomu nawigacji klawiaturą widzimy

5:54że jest tutaj już outline natywny może nie jest najlepiej widoczny ale jest

5:58faktycznie obecny na stronie możemy na każdym z tych elementów się

6:02nawigować tabem do przodu albo shift tabem do tyłu no i jeżeli

6:07włączymy czytnik ekranowy

6:17widzimy że jest to internal link internal dlatego

6:21ponieważ ma kotwiczkę czyli nie przenosi nas poza naszą stronę no i każdy z tych elementów

6:25jest teraz zarówno elementem listy jest linkiem no i ma

6:29kontekst sam w sobie więc jest dosyć dostępny no i możemy go aktywować

6:33z klawiatury możemy go aktywować za pomocą czytnika ekranowego możemy

6:37też wyszukać możemy

6:45też wyszukać linki z listy poprzez wbudowany w czytnik

6:49ekranowy wyszukiwarkę czy jeśli teraz jesteśmy osobą niewidomą no

6:53i uznaliśmy że och ale moim plecakiem marzeń jest dakine

6:58no to wpisuję dakine

7:06no i super i wiem że to są tylko dakine jeżeli były by tutaj inne jeżeli

7:13byłyby tutaj inne plecaki dakine no to one oczywiście też by się wypisał że są następne

7:17albo poprzednie więc mamy kolejną funkcjonalność tylko

7:21i wyłącznie dlatego że użyliśmy adekwatnego znacznika html5 który

7:26jest zgodny z sematyką tego co robimy to co chciałbym żebyście wynieśli z tej lekcji

7:30jest proste używajcie znaczników które są do tego przeznaczone nie

7:34starajcie się reimplementować funkcjonalności które już w przeglądarce

7:38są na przykład linków w taki sposób jak tutaj zaprezentowałem na nagraniu

7:43ponieważ będziecie to wszystko musieli zrobić samodzielnie będzie to kosztowne dla

7:47was bo będziecie to sam implementować dla użytkownika bo on będzie musiał czekać

7:51aż to wszystko się załaduje no i dla dostępności ponieważ domyślnie

7:55divy nie są dostępne i nie będą dostępne z racji że są właśnie transparentne semantycznie

7:59w kolejnych lekcjach dowiecie się więcej o tym jak nawigować się

8:03za pomocą klawiatury jak tworzyć interfejsy które będą dostępne z klawiatury jeszcze

8:08bardziej bo to tutaj jeszcze nie jest najlepszym co możemy osiągnąć