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

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

0:04podstaw i w końcu opowiem ci troszkę o tych problemach związanych z dostępnością

0:08o których wspominałem niejednokrotnie w poprzednich lekcjach ale

0:12zanim przejdę do faktycznego przedstawiania problemów i zaproponowania ci

0:16rozwiązania jak ich uniknąć chciałbym ci powiedzieć o

0:21co w tej dostępności tak naprawdę chodzi pojęcie dostępność najczęściej odnosi się do

0:25użytkowników czytników ekranowych czyli zarówno osób

0:29niewidomych jak i osób które znajdują się w spektrum niedowidzenia

0:34które korzystają z dodatkowego oprogramowanie które przedstawia to

0:38co użytkownik mógłby zobaczyć na ekranie natomiast nie

0:42tylko osoby niewidome korzystają z czytników ekranowych korzystają z nich również osoby

0:47które mają różne problemy poznawcze i screen reader

0:51po prostu uzupełnia te informacje poprzez informacje głosowe lecz poza

0:56czytnikami ekranowymi pojęcie dostępności można uprościć do

1:00dostosowywania naszych stron tak aby były dostępne dla

1:04jak najszerszej grupy odbiorców włączając to na przykład użytkowników

1:08którzy korzystają z klawiatury by nawigować się po stronach

1:12nawet bez wsparcia się czytnikami ekranowymi ja

1:17tutaj zmodyfikowałem troszkę nasz przykład i w tym momencie wszystkie

1:21nasze karty są zarówno minkami mają odnośniki

1:25do konkretnych nagłówków poprzez używanie tak zwanych

1:30kotwiczek po polsku no i mają dodatkową informacje dla czytników ekranowych

1:34atrybuty area jest to bardzo szeroki temat i tego nie

1:39będę w tej konkretnej lekcji poruszał natomiast jeśli chciałbyś się dowiedzieć

1:43jak uzupełniać swój markup stron www to

1:47atrybuty area to jest słowo kluczowe po którym powinieneś szukać dodatkowych informacji no

1:52i jako że to są już te linki to my będziemy mogli się po nich nawigować

1:56oczywiście jako użytkownicy którzy widzą stronę www

2:00możemy po prostu w odnośnik kliknąć najczęściej widzimy

2:05że dany element html jest odnośnikiem poprzez fakt

2:10że widzimy że nasz kursor zmienił styl i w tym momencie jest

2:14wskaźnikiem czyli ma kursor pointer ustawiony no i dodatkowo niektóre przeglądarki

2:19tak jak tutaj google chrome na samym dole viewport'u

2:23w lewym dolnym rogu pokazuje nam adres tego odnośnika oczywiście

2:27jeśli klikniemy teraz w te odnośniki to nie zobaczymy żadnej różnicy ponieważ są to kotwiczki te linki

2:32nas faktycznie nie nawigują nigdzie bo nie mamy żadnych nagłówków na tej stronie

2:36ale jako że już są to linki to my możemy się po

2:40nich nawigować również za pomocą klawiatury aby nawigować się po elementach formularzy

2:45nawigacyjnych polach tekstowych możemy używać klawisza tab i

2:50jak widzisz tutaj nam się ustawiło coś co nazywa się outline

2:54i po prostu to wskazuje który element ma obecnie

2:58focus na którym elemencie się znajdujemy jeżeli nawigujemy się klawiaturą no

3:02i możemy sobie tabować po naszych kartach shift tab pozwoli cofnąć

3:07się do poprzedniego odnośnika tab pozwoli nawigować się do następnego no

3:11i teraz jak użytkownik który posługuje się klawiaturą będzie widział

3:15naszą stronę jeśli będziemy korzystali z flexboxa w sposób

3:19nierozważny bądź używali jego feature'ów na siłę to znaczy tam gdzie nie ma

3:24potrzeby ich używania ale chcemy go użyć bo flexbox takie możliwości nam daje

3:28więc ja tutaj zmienię jedną rzecz w naszych

3:32regułach powiązanych z flexboxem zmienię flex-direction na row-reverse i jak

3:36widzisz w tym momencie karty ułożone są od

3:40prawej do lewej ponieważ tak ustawiły nam się osie flexboxa

3:44i my jako użytkownicy widzący spodziewamy się że

3:48ewentualna nawigacja o takich odnośnikach

3:53będzie dalej odbywała się z lewej do prawej czyli najpierw możemy sobie

3:57kliknąć odnośnik numer 3 później w odnośnik numer 2 itd ponieważ

4:01tak myślimy kiedy widzimy tego typu layout natomiast jeśli teraz

4:05spróbujemy nawigować się za pomocą klawiatury ja naciskam

4:09w tym momencie tab więc nawiguje

4:14się do kolejnego linku nawigacyjnego to zobacz że nie zaznaczyła się

4:18karta numer 2 tylko karta numer 4 dlaczego tak się stało ponieważ

4:22nawigacja klawiaturą bądź generalnie zarządzanie focusem

4:27w przeglądarce odbywa się na podstawie markup'u a

4:31nie tego jak dany element jest wizualnie reprezentowany za pomocą

4:35css'a i w tym przypadku flexboxa czyli my

4:39tabując się po stronie będziemy dalej tabowali

4:43się od jedynki czyli teraz naciskam tab idę do przodu jest dwójka naciskam tab

4:47idę do przodu jest trójka i tak dalej mamy rozbieżność

4:51między tym co jest zadeklarowane w naszym kodzie

4:56html a tym jak jest to prezentowane dla użytkownika i my jako użytkownicy widzący

5:01bądź widzący w jakimkolwiek stopniu możemy się mocno zdziwić jeżeli

5:05zaczynając nawigację po stronie zaczniemy nie od lewej górnej krawędzi

5:09ekranu tylko od prawej górnej skomplikujmy jeszcze troszkę

5:13nasz przykład i zamiast flex-direction row-reverse

5:18ustawimy colonumn reverse dodatkowo

5:23ja usunę w tym momencie numery tych kart które ustawiliśmy za pomocą css counters

5:27po prostu nadpiszę je pustym stringiem i teraz jak

5:32spodziewalibyśmy się że nawigacja po tej stronie będzie się odbywać ja

5:36teraz robię nawigację do przodu i pojawiamy się na

5:41karcie zielonej można byłoby się spodziewać że focus przeskoczy

5:45nam na kartę czerwoną bądź żółtą a my w tym w przeskoczyliśmy na

5:49kartę zieloną jeśli będziemy tabować dalej no to już w

5:53tym momencie widać dlaczego tak to wygląda ponieważ ma ustawione column reverse

5:58czyli elementy układają się od góry do dołu i

6:02domyślne zawijanie jest w kierunku prawym więc tak naprawdę tak

6:06będzie wyglądała ta nawigacja przy pomocy klawiatury natomiast

6:10użytkownik który nie spróbuje nie będzie tego

6:14wiedział czyli nasi użytkownicy mogą być w lekkim szoku zanim

6:19zorientują się o co w danej stronie chodzi a w przypadku jeżeli tworzymy sklepy

6:24internetowe i uwaga użytkownika jest krytyczna aby

6:28zarabiać faktycznie pieniądze może to nam doprowadzić do naprawdę wielu strat

6:32według raportu z 2016 roku ponad 1800 tysięcy

6:36osób w polsce zadeklarowało jakiś

6:40stopień niedowidzenia to znaczy że ignorując aspekt

6:45dostępności stron www ignorujemy w samej polsce miasto

6:50rozmiarów warszawy gdzie są to nasi potencjalni klienci w tym

6:54kursie na pewno znajdziesz odpowiednie linki dzięki którym będziesz mógł poszerzyć

6:58dane zagadnienie jeżeli cię faktycznie zainteresują to wszystko w tej lekcji

7:02do usłyszenia