Accessibility: Linki omijające

0:00Cześć w tej lekcji opowiem o skip linkach czyli linkach które nie

0:04przynoszą nas na inną podstronę tylko przenoszą nas na inny fragment tej samej

0:08podstrony są one specjalnie przydatne dla osób korzystających z klawiatury czy z czytników

0:13ekranowych niekoniecznie przydatne dla użytkowników wizualnych

0:17ponieważ z reguły korzystają powiedzmy z myszki ich idea jest prosta tworzymy

0:21link który przenosi nas do innej w sekcji strony tak aby nawigacja z tamtego

0:25miejsca była wygodniejsza więc możemy zacząć to robić stworzymy sobie link

0:31lokalny do sekcji main do

0:35tej sekcji main-content czyli odnosimy się tutaj do id main-content

0:39no i nazywamy to skip

0:43to main content to jest bardzo popularne jeżeli odwiedzacie stronę

0:47która próbuje dbać o accessibility to możecie spróbować się przez nią przetabować

0:51i jeżeli jest skip link skip to main content to znaczy że ktoś tam faktycznie o tym

0:56po prostu pomyślał no z tym że skip to main content powinno być widoczne tylko dla

1:00użytkowników klawiatury czyli nie powinno być domyślnie widoczne czyli tak

1:04naprawdę możemy zaaplikować tutaj visually hidden z tym że nie chcemy

1:08tego umieszczać w ten sposób poprzez klasę ponieważ

1:12będziemy to włączać i wyłączać warunkowo w zależności od tego czy jest wskaźnik

1:17skupienia na tym czy nie więc możemy nazwać to po prostu skip-link i

1:23teraz mżemy ostylować tego skip linka w ten sposób że

1:29jeżeli skip link będzie nie sfokusowany

1:34no to wtedy wklejamy sobie tutaj tą regułę która nam ukrywa

1:38ten element czyli dopóki nie ma żadnego fokusu no to nic

1:42nie widzimy zaczynamy się tabować i faktycznie pojawia się nam skip to main content super

1:47więc połowa jakby za nami oczywiście jak się odfocusujemy o ten link nam zniknie możemy

1:51sprawdzić jak to działa z czytnikiem ekranowym screen readery fokusują nam

2:00elementy domyślnie i generalnie zaraz odwiedzimy ten link ale gdybyśmy mieli

2:04lecieć z góry na dół no to widzimy że będzie tutaj

2:11tak jest po prostu nagłówek przeczytany no i cała treść po kolei natomiast

2:15jeśli weźmiemy skip to main content to widzimy

2:19że od razu przeskoczyliśmy te 2 paragrafy i header no

2:24i faktycznie znajdujemy się w demographics czyli przeskoczyliśmy

2:28tą sekcję ponieważ wykorzystaliśmy tego skip linka to

2:33jest fajne zwłaszcza że jeżeli mamy duże sekcje nawigacyjne i użytkownik

2:38nie koniecznie chce przez tą nawigację przechodzić tylko chce przeczytać treść artykułu no

2:42to wtedy skip to main content jest bardzo fajna i pozwala użytkownikowi czytnika ekranowego

2:46szybciej dotrzeć do elementów które chce usłyszeć tak

2:50samo jeżeli mamy w głównej treści artykułu jakieś elementy interaktywne no

2:54to skip link będzie przydatny też dla osób widzących które po prostu chcą

2:59szybciej pojawić się w tej głównej treści artykułu no i wypełnić jakiś na przykład

3:03formularz a niekoniecznie tabować się przez całą nawigację z tym że skip linki

3:07nie muszą być tylko i wyłącznie do głównej treści możemy zrobić skip

3:11linki do sekcji komentarzy do nawigacji ich idea jest

3:15taka że mają przyśpieszyć nawigację po stronie dla osób korzystających z klawiatury

3:19i takim mniej oczywistym przypadkiem kiedy skip linki mogą się przydać jest przechodzenie przez tabele

3:23jeżeli będziemy nawigować się po tabeli

3:31no to zanim przejdziemy przez całą tabelę to faktycznie trzeba

3:35się troszkę naklikać oczywiście możemy też

3:39wejść w tryb nawigacji po tabeli i poruszać się po osi x i osi y

3:43natomiast generalnie no nie jest to wygodne żeby przeskakiwać przez całą tabelę zwłaszcza

3:48jeżeli mamy kilka tabel na stronie no to nawigacja pomiędzy każdą z

3:52nich będzie po prostu uciążliwa co możemy zrobić no to możemy wziąć skip linka

3:56i przed tabelą

4:01dać taki skip link

4:07i napisać na przykład jump after respondent

4:11region table czyli

4:16skocz za tą tabelę oczywiście nie możemy tutaj kierować do

4:20main content tylko do czegoś innego stworzymy zaraz element respondent table

4:25after tak nazwiemy nasz element no i oczywiście

4:30takiego elementu nie mamy i nie możemy sfokusować się za tabelą nie ma takiej możliwości jakby

4:34w html-u i w webie ale możemy zrobić po prostu pustego diva czy spana który

4:39będzie miał id takie jak tu nadaliśmy zapiszę to

4:48tak jeżeli teraz zrobię chromevox

4:53w dół no to wchodzę w tabelę a jeżeli wezmę aktywuje

4:57ten link to przeskoczyliśmy od razu do następnego

5:01paragrafu czyli ominęliśmy całą tą tabelę jest to bardzo fajne

5:05rozwiązanie z tym że jeżeli przejdziemy skip linkiem

5:10w dół i będziemy chcieli wrócić w

5:14górę no to znowu już musimy przechodzić przez całą tabelę więc warto

5:18zrobić to w dwie strony czyli tutaj zrobiliśmy nawigację

5:22w dół i tutaj zrobimy nawigację w górę czyli

5:26tu jest table before i tutaj daje ją przed skip linkiem po

5:30to żeby to było po prostu płynniejsza nawigacja no i oczywiście

5:34musimy tutaj zrobić drugi link za tabelą i

5:42tutaj dajemy link jump before respondent region table

5:46i tutaj dajemy before zapisujemy

5:53ja się upewnię czy dobrze napisałem tak więc zaczynamy

5:57skip to main content jesteśmy

6:02w demographics następnie znowu tabujemy

6:06skaczemy za

6:10tabelę respondent region przeskoczyliśmy

6:14i teraz jeżeli zrobimy shift z tab to mamy możliwość

6:20przeskoczenia przed tą tabelę klikamy to

6:24i mamy możliwość przeskoczenia

6:29znowu do przodu czyli jest tutaj płynna nawigacja w obu kierunkach

6:33dookoła tabeli i dla każdej z tabeli dla

6:37każdej sekcji komentarzy dla każdej treści która jest ciężka do nawigacji

6:41poprzez czytnik ekranowy możemy robić takie skip linki i taki jest ich właśnie

6:45zamysł jeśli nie chcemy żeby skip linki nam się pojawiały i

6:49znikały niszcząc nam layout no to oczywiście możemy zrobić tutaj jakieś

6:54albo po prostu rozmiar padding żeby tutaj była ta przestrzeń na

6:58ten skip link jak on się pojawi albo możemy to wypozycjonować absolutnie tutaj możliwości

7:02jest bardzo dużo ale generalnie takie podejście też jest dobre skakanie tego typu treści

7:06nie jest generalnie takim dużym problemem więc skip linki są

7:10bardzo fajnym rozwiązaniem polecam ich używać nie trzeba używać skip linków tylko i wyłącznie

7:14do sekcji głównej naszego dokumentu możemy przeskakiwać do dowolnej

7:18innej sekcji strony tak długo jak ma to sens i faktycznie skip link przyśpiesza

7:22nawigację a nie ją spowalnia no i możemy też używać jej aby przeskakiwać tabele

7:26sekcję komentarzy czy inne treści które są generalnie długie

7:31do przeglądania