Accessibility: Kolejność elementów

0:00Cześć w tej lekcji opowiem o kolejności tabulacji

0:04coś co już poruszyliśmy przy omawianiu narzędzia accessibility insights for web

0:08dla chromea generalnie idea jest taka że każdy element

0:13interaktywny typu link button element formularza powinien

0:17podążać z naturalnym flow dla danego języka czyli jeżeli jesteśmy

0:21w krajach zachodnich no to jest to od lewej do prawej z góry do dołu no

0:25i jeżeli jesteśmy w jakimś kraju na przykład arabskim czy chińskim no to oczywiście ten

0:29ta kolejność jest inna i ona powinna zgadzać się z direction danego

0:33języka natomiast jest kilka sytuacji kiedy ten tab order jest zakłócony między

0:38innymi jest to niestandardowe pozycjonowanie na przykład absolutne bądź za pomocą

0:42flexa jeżeli zrobimy tutaj taką sytuację że zrobimy na body flex

0:47direction ponieważ body jest spozycjonowanie na flexie to możecie zobaczyć sobie tutaj

0:51w tym base flex-direction na column-reverse

0:55no to oczywiście cały ten

1:00podgląd się nam odwrócili i będzie renderowany w odwrotnej kolejności natomiast jak

1:04będzie wyglądał markup no jeśli będziemy tabować się po kolei no to faktycznie

1:08lecimy od samego dołu dlaczego no przede wszystkim dlatego

1:13że tabulacja jest zgodna z tym jak elementy są w kodzie

1:17źródłowym umiejscowione nie tak jak są renderowane na stronie czy jeśli musimy

1:21z jakiegoś powodu odwrócić elementy za pomocą flex-direction reverse

1:26no to wtedy musimy upewnić się że nawigacja dalej ma sens

1:30a nie jest to odwrócone tak jakbyśmy jechali od dołu

1:34do góry co nie jest naturalne dla naszego języka i może po prostu powodować

1:38zakłopotanie użytkowników jak to możemy naprawić oczywiście możemy pozamieniać kolejnością te

1:42miejsca te elementy formularza tylko nie wiem czy to jest sens skoro

1:47użyliśmy po prostu właściwości reverse co

1:52jeszcze można zrobić no przede wszystkim najlepiej byłoby po prostu się pozbyć tego

1:56reversea ale jeżeli nie mamy takiej możliwości z różnych powodów bo na przykład

1:59robimy customowy komponent bez javascriptu o ocenie

2:04gwiazdkami ja zrobiłem na youtubie poradnik na ten temat to musimy

2:08naprawić tą nawigację klawiaturą w inny sposób i jest na to sposób

2:12ale generalnie nie korzystajcie z tej właściwości

2:17poza dwoma wartościami chodzi mi o tabindex i

2:21tabindex ma jakby trzy stany tabindex minus 1 oznacza

2:25że element nie będzie focusowalny z poziomu klawiatury w ogóle na

2:30razie możemy to wykomentować czyli jeśli ustawimy sobie tabindex minus

2:341 oczywiście nie na labelce tył elemencie który chcemy sfokusować

2:38no to zaczynamy się tabować i ten first name jest ominięty

2:42czyli on jest już niedostępny z klawiatury czasami jest warto robić tabindex

2:46minus 1 zwłaszcza kiedy chcemy robić programowe przekierowywanie skupienia

2:50poza tym raczej się nie używa tabindexu chyba że musimy naprawić jakiś bug

2:54na przykład związany z fokusowaniem się elementów które normalnie nie powinny się fokusować

2:59na przykład safari focusuje elementy svg z tego co pamiętam więc

3:03generalnie obrazki nie powinny łapać fokusu a safari sprawia że faktycznie

3:07można ten focus złapać więc tam można ustawić tabindex minus 1 żeby naprawić

3:11błąd natomiast jeżeli będziemy ustawiać tabindex minus 1 na elementach formularza na to one oczywiście

3:15będą niedostępne z klawiatury ale będzie można je fokusować ręcznie za pomocą myszki

3:20na przykład do tabindex minus 1 jeszcze wrócimy naturalną jakby wartością

3:24dla tabindexu jest 0 i wartość 0 jest

3:28chyba najbardziej zdrową z właściwości dla tabindex ponieważ możemy

3:32dać możliwość sfokusownia elementu który wcześniej nie był

3:36focusowalny ponieważ mamy zadeklarowany tabindex ale zero

3:40sprawia że element będzie fokusowany w takiej kolejności w jakiej jest w markupie

3:44czyli jeśli zrobimy coś takiego

3:50i damy tabindex 0 na first namea to faktycznie first name w tym

3:54momencie jest focusowalny nie ma to za dużo sensu z punktu widzenia tego konkretnego

3:58przykładu natomiast widać to łatwo że możemy dawać elementom

4:02które wcześniej nie były fokusowalne z klawiatury stan skupienia że faktycznie

4:06bedzie to przechwytywało i będzie to przechwytywało zgodnie z tym jak

4:10jest w markupie umiejscowione jesli byśmy skopiowali tego tabindex 0 do

4:14innych labelek no to faktycznie moglibyśmy się sfokusować najpierw na first name potem

4:18na input odpowiedni last name i kolejne input to się przydaje

4:22też zwłaszcza przy customcomponentach jeżeli musimy odtwarzać

4:26jakieś funkcjonalności przeglądarki bo nie możemy korzystać z różnego powodu z natywnych

4:31elementów no i tą najmniej przydatną częścią tabindexu

4:35i tą której nie polecam używać jest używanie tabindexu z

4:40wartościami większymi niż jeden dlaczego no jeżeli damy sobie tutaj tabindex

4:444 na przykład a tutaj damy tabindex

4:491 no to zobaczmy co się stanie wchodzimy na stronę ja tabuję jeden raz

4:53i sfokusowało nam się najpierw email address dlaczego no bo tutaj ustawiliśmy

4:57tabindex na 1 jeśli teraz sfokusujemy się ponownie to

5:02przechodzimy na first name 4 dlaczego na 4 no bo on ma zadeklarowaną

5:06wartość więc ma jakby priorytet to jest tak samo jak macie order we flexboxie

5:10no i teraz cała reszta bedzie szła naturalnie według tego jak są w markupie

5:14czyli last name password nie email address bo email address już

5:18był no i date of birth i tak dalej jeżeli byśmy odpalili teraz accessibility insights for web

5:22możemy to zrobić fastpass tab stops

5:28włączamy no i teraz się tabujemy to widzimy że pierwszy sfokusował się email

5:32address następnie fokusuje się first name następnie last

5:37name password date of birth i dopiero textarea czyli

5:41tutaj jest zupełnie zaburzony ten szyk nie możemy widzieć jednej prostej linii jeżeli

5:45nie możemy widzieć prostej linii w accessibility insights for web no to znaczy że faktycznie

5:50coś z tym outlinem jest nie tak no i zaczynamy od emailu potem jest first name last

5:54name password date of birth dlatego generalnie nie polecam tego używać

5:58bo jeżeli zaczynamy bawić się z tabindexem z wartościami dodatnimi no

6:02to musimy je zaaplikować tak naprawdę wszędzie żeby to miało sens no i to jest

6:06po prostu bardzo złe w zarządzaniu jest bardzo ciężkie w utrzymaniu i

6:11no generalnie potraktujcie to jako ciekawostkę ale jeżeli chodzi o accessibility

6:15to tabindex z wartością większą niż 1 przepraszam

6:19z wartością większą niż zero jest zły natomiast wartości minus 1

6:23i 0 są ok ponieważ pozwalają nam włączać bądź wyłączać focus na elementach które

6:28mogą mieć bądź go nie mieć domyślnie