Flexbox: Problemy z dostępnością cz. 2

0:00Cześć witam cię w kolejnej lekcji z kursu flexbox od

0:04podstaw przedstawię ci jeszcze jeden problem który flexbox

0:08może tworzyć i też jest związany z rozstrzałem pomiędzy tym

0:12co użytkownik widzi a tym co jest zadeklarowane w markup'ie jeśli

0:17ustawimy sobie na

0:21konkretnych kartach inny

0:25order to znaczy ustawimy order minus 1 na

0:30karcie numer 5 tak aby ona znalazła się jako pierwsza no

0:34i może jeszcze tutaj coś pozmieniajmy czyli karta numer dwa będzie

0:38ostatnia ja ci tylko przypomnę dlaczego w ten sposób to działa ponieważ

0:42domyślnie wszystkie dzieci flexboxa mają ustawione

0:47order na zero więc ustawiając wartości mniejsze bądź większe

0:51na pojedynczych kartach wypychamy je na początek lub koniec i

0:55spróbujmy w tym momencie ponawigować się po jednej stronie ponownie

0:59tylko że utrudnimy jeszcze jedną sytuację czyli usuniemy focus

1:05czyli usuniemy outline na focusie co

1:12jest bardzo złą praktyką i nie polecam tego robić na faktycznych stronach www przynajmniej

1:17nie w tej formie i spróbujmy teraz się po tej stronie ponawigować ja

1:21naciskam tab natomiast my zupełnie nie widziemy na którym elemencie

1:25jesteśmy oczywiście tutaj jako użytkownicy którzy widzą

1:30zarówno ui przeglądarki jak i jej treść możemy wywnioskować

1:34że znajdujemy się na linku numer dwa natomiast nie jesteśmy w stanie stwierdzić która

1:38z tych kart zawiera link numer dwa więc to co ja tutaj przedstawiłem

1:43z tym usuwaniem outline jest tylko na potrzeby tego przykładu i

1:47abyś zrozumiał bądź zrozumiała w czym jest problem z

1:51używaniem tego typu reguł aby zwizualizować to jak

1:55użytkownik tego narzędzia będzie się poruszał po witrynie na systemie max os dostępny jest

2:00czytnik ekranowy voice over aktywuje się go domyślnie

2:04za pomocą skrótu klawiszowego command f5 voiceover on chrome

2:09flexbox google com window visited link third card has keyboard focus

2:13you are currently on a link inside web content to click this link press control option space

2:17to exit this web area press control option shift up arrow

2:20tak ja zostawiłem tutaj reader'owi przestrzeń żeby mógł się wypowiedzieć i

2:26generalnie działa to na tej zasadzie że my możemy się nawigować po stronie za pomocą taba za

2:30pomocą skrótów klawiszowych danego screen reader'a i screen reader

2:34będzie nam przedstawiał głosowo na jakim elemencie

2:38się faktycznie znajdujemy zwróć uwagę że pomimo tego iż outline

2:42na danym elemencie jest usunięty to screen reader i tak zaznacza ten element natomiast

2:47nie jest to zbyt rzetelne wskazywanie elementów screen reader'y mają z tym duży

2:51problem dlatego to tylko pokazuje jak ważne jest to

2:55wskazywanie na którym elemencie obecnie się znajdujemy i proszę nie

2:59traktuj tego na zasadzie że screen reader'y i tak przedstawią

3:04na jakim elemencie się znajdujemy ponieważ nie wszyscy korzystają ze screen reader'ów i

3:09osoby które nie będą korzystały ze screen reader'a natomiast będą używały tabów

3:13do nawigacji po stronie w tym momencie będą poszkodowane po

3:17prostu zostawiaj ten outline jeśli na przykład wykryłeś że

3:21użytkownik nacisnął tab i teraz będziemy się nawigować po tej stronie ja

3:25użyję skrótu klawiaturowego voice over czyli taki przycisk specjalny modyfikator

3:29do obsługi voice over'a i strzałka w prawo aby przejść do następnego elementu

3:33i zobaczymy na którym się znajdujemy więc naciskam voice over strzałka w prawo visited link

3:38fourth card więc znajdujemy się na czwartej karcie klikam

3:42tu ponownie link fifth card znajdujemy się na tamtej karcie natomiast

3:46zobacz wizualnie ona jest w nieprzewidywalnym miejscu visited link sixth card jesteśmy

3:52na szóstej karcie i przeskoczyliśmy z karty niebieskiej na białą więc

3:57mamy zupełny rozstrzał pomiędzy tym co jest widoczne na ekranie

4:01a tym jak nawigujemy się po naszej witrynie za pomocą

4:05klawiatury ponieważ jeśli teraz odkryjemy ten

4:10nasz content wyłączę w tym momencie screen reader'a

4:14żeby nam już nie przeszkadzał to okaże

4:18się że czerwona karta nie ma numeru 1 żółta karta nie ma numeru 2 i tak

4:23dalej zobaczmy jaki faktycznie flex nadał nam layout

4:27dzięki tym selektorom które tu stworzyliśmy więc widzimy że pierwszą kartą

4:31którą użytkownik widzi jest karta numer 1 drugą kartę jest karta numer 4

4:35trzecią jest karta numer 2 czwartą jest karta numer 5 piątą jest

4:39karta numer 3 i akurat szósta karta jest w tym miejscu w którym

4:43być powinna więc jeśli teraz przywrócimy sobie ten focus

4:48z outline'm już nie będziemy tego selektora

4:52więcej pisać to zobaczysz że ja się teraz nawiguję wstecz i

4:57dalej nawigujemy się zgodnie z tym jak jest to widoczne

5:01na ekranie czyli jest kartą numer 5 karta numer 4 karta

5:05numer 3 karta numer 2 i karta numer 1 ten problem nie jest jedynie

5:10problemem flexboxa jest też problemem css grid'a jest też problemem

5:14pozycjonowania absolutnego generalnie każdej sytuacji

5:18kiedy my wizualnie przestawiamy jakiś element w ten sposób że czytając

5:22naturalny dla danego języka sposób element znajduje się

5:26w markup'ie w innym miejscu niż użytkownik mógłby się spodziewać patrząc

5:31tylko na efekt wynikowy strony więc jak rozwiązywać

5:36tego typu problemy niestety może to cię zmartwi natomiast nie ma możliwości aby

5:40w css ustawić jakąś właściwość która nam

5:44zapewni powiązanie tego co mamy wizualnie z tym co się faktycznie znajduje

5:49w markup'ie więc jedyne co mogę polecić jeśli to jest faktycznie przypadek

5:53który musisz obsłużyć a będzie tak jeśli będziesz musiał spełnić pewne

5:57wymagania dotyczące dostępności na przykład jeśli będziesz tworzył strony rządowe

6:01ponieważ te są zobligowane do implementacji konkretnego standardu dostępności

6:06jest uregulowane prawnie bądź po prostu z empatii rozwiązaniem

6:10jest po prostu nienadużywanie właściwości orders flexboxa

6:14jest nienadużywanie flex-direction z

6:18wartościami o sufiksie revers ponieważ to odwracanie kolejności jest największym

6:23problemem nie czy elementy układają się z góry do dołu i jeśli faktycznie

6:27masz przypadek że na danym breakpoint'cie chciałbyś chciałabyś

6:31aby elementy układały się w innej kolejności to nie

6:36piszemy tego w ten sposób ale za pomocą javascriptu

6:40możemy zmienić kolejność elementów w markup'ie i czytniki ekranowe

6:45wtedy poprawnie przeczytają to co znajduje się na ekranie

6:49nie jest to na pewno najprostrza droga natomiast jeśli chcemy tworzyć w pełni

6:53dostępne strony www to jest to chyba najlepsze ogrodzenie

6:57sytuacji tak byśmy mogli tworzyć strony które są wizualnie

7:01atrakcyjne i żeby screen reader'y dobrze je czytały oczywiście

7:05jeśli korzystamy z różnych frameworków takich jak vue angular czy

7:09react przy renderowaniu tego rodzaju list linków prawdopodobnie

7:14mielibyśmy tablicę elementów i tą tablicę po prostu moglibyśmy odwrócić

7:18więc jeśli korzystamy z frameworków jest to troszkę ułatwione

7:22implementacja tego nie jest faktycznie problemem a sam fakt dbania o

7:27dostępność stron www na pewno w oczach potencjalnego

7:31pracodawcy będzie sygnałem że nie jesteś zwykłym tylko

7:36że dbasz o zagadnienia i rozwijasz się na własną rękę dbając

7:41o rozwiązywanie niebanalnych problemów podsumowując

7:45to co chciałbym żebyś wyniósł z tej lekcji

7:49jest to że czytniki ekranowe i użytkownicy

7:53klawiatury dalej będą w podstawowych przypadkach operować

7:57na w kolejności która jest zdefiniowana przez markup a nie to jak elementy

8:01są wyświetlane za pomocą css'a że jest coś takiego jak screen reader'y jeśli

8:06korzystasz z mac os jest możesz skorzystać z wbudowanego voice over jeśli

8:10nie to jest rozszerzenie do google chrome nazywa się chromevox

8:14jest on dostępny na wszystkie platformy na których można

8:18zainstalować google chrome i działa ona na analogicznej zasadzie jak voice over

8:23tylko że jest rozszerzeniem do przeglądarki nie używaj flex-direction z

8:27wartościami o sufiksie reverse jeśli dbasz o

8:31dostępność stron www nie używaj właściwości order ponieważ

8:36ona wprowadza chyba najwięcej zamieszania i te informacje na

8:40pewno będziesz mógł przenieść też do zagadnień takich jak css grid czy

8:44absolute positioning to wszystko w tej lekcji oczywiście

8:48stosowne linki znajdziesz w odpowiedniej sekcji na platformie eduweb.pl a

8:53w kolejnej lekcji przybliżę ci po prostu dodatkowe materiały które

8:58będziesz mógł pogłębić na własną rękę dotyczące samego flexbox'a

9:02do usłyszenia