Accessibility: Domyślny outline

0:00Cześć w tej lekcji przejdziemy do omawiania wskaźnika fokusu

0:04wskaźnika skupienia czyli outlineu generalnie w naszym przykładzie mamy

0:08jakąś pizzerię gdzie wybieramy sobie rodzaj ciasta składniki no i możemy kupić

0:12sobie pizzę w poprzednich przykładach nawigowaliśmy się już za pomocą klawiatury za pomocą

0:16taba mieliśmy tutaj taki wskaźnik niebieski który pokazywał na

0:21którym konkretnie elemencie obecnie się znajdujemy i tym właśnie znacznikiem

0:25jest outline on domyślnie nie jest najlepszy

0:29jeśli chodzi o kontrast natomiast jest natywnym elementem który jest zawsze

0:33dostępny w przeglądarkach chyba że go jawnie wyłączymy no i co się stanie

0:37jeżeli ten outline wyłączymy outline wyłącza się za pomocą reguły

0:43outline none jest nawet taka sławna strona która pokazuje

0:47dlaczego nie powinno się tego robić ja to zrobię tylko na potrzebę przykładu

0:53czyli na wszystkim co jest sfocusowane usuwamy outline none

0:57jaki to ma wpływ na dostępność i nawigację po naszej

1:01stronie ja zaczynam się tabować i tutaj

1:06nie widzę co się dzieje nie widzę co się dzieje ponieważ outline jest usunięty i

1:11jak teraz nacisnę spację to coś

1:15tutaj o tutaj się onions zaznacza niestety

1:19checkbox też nie jest za duży więc ja tak naprawdę na ślepo troszkę mogę

1:23wybierać jakie składniki chcę na mojej pizzy jeżeli nie korzystam

1:28z myszki no bo oczywiście jeżeli mam myszkę no to mogę sobie klikać natomiast dla użytkowników

1:32którzy korzystają z klawiatury no outline none jest totalnie niedostępnym

1:37rozwiązaniem i po prostu nie da się nawigować po stronie w ten sposób outline oczywiście

1:41możemy customizować i czasami jest sens wyłączania outlineu natomiast

1:45jeżeli nie dajemy jakby alternatywnego stylowania dla wskaźnika

1:49fokusu no to to jest już błąd dostępności i często

1:53właśnie ta reguła że usuwamy outline ze wszystkiego co ma focus jest

1:58by default włączona w różnych css resetach czy innych arkuszach

2:02styli które pozwalają na unifikacje tego jak przeglądarki renderują

2:06strony to było bardzo popularne w latach 2007

2:11kiedy faktycznie przeglądarki miały duże różnice między sobą

2:15w kontekście renderowania internet explorer wczesne wersję firefoxa wczesne wersje

2:19chromea bardzo różniły się od siebie oczywiście safari również no

2:23i tego typu arkusze styli miały sens bo ujednolicały to i front-end

2:27developerzy mogli faktycznie pracować z tym że jeżeli byśmy zobaczyli w źródła takiego

2:31arkusza styli no to okazuje się że autor mówi że koniecznym jest

2:35zaimplementowanie alternatywy bo to domyślnie jest

2:40wyłączone ale nie powinno być wyłączone jeżeli faktycznie już dajemy to na produkcję

2:44dlaczego to nie było włączane no z wielu przyczyn podejrzewam że między innymi dlatego

2:48bo nikt nie sprawdzał jak faktycznie te css resety działają albo

2:52po prostu jakby junior deweloperzy nie wiedzieli że coś takiego jest

2:57i dlaczego to istnieje więc zostało to wyłączane część może być też winy

3:01na designerach z lat właśnie 2007 którzy nie bardzo chcieli żeby

3:05był jakiś dziwny wtedy niekoniecznie niebieski ring obramowanie

3:09nad przyciskiem kiedy klikamy na coś myszką bo no dlaczego to tam

3:13jest nie powinno tam tego być nie pasuje to designu zwłaszcza w czasach kiedy coś miało

3:17być pixel perfect to bardzo mogło być tego wynikiem generalnie

3:22domyślnie outline tak czy siak nie jest najlepszy jeżeli chodzi o dostępność

3:26bo na wielu stronach które mają na przykład niebieskie

3:30tło no to ten outline nie będzie widoczny ja jestem zwolennikiem aby dostosować outline

3:34do potrzeb naszej witryny czyli możemy to teraz sobie tutaj zrobić na zasadzie

3:38takiej że ustawimy że jeżeli input ma

3:42na sobie focus czyli ten na przykład element no to złapiemy

3:47następny element który jest obok niego w tym wypadku jest to label no

3:52i możemy go w tym momencie ostylować tak dla testów możemy nie wiem zmienić mu kolor

3:56powiedzmy na niebieski zapisujemy

4:01no i jak tutaj sfokusujemy ten element mu to faktycznie widać że

4:05wszystko na czym mamy focus teraz ma niebieski tekst czyli

4:09niekoniecznie musimy stylować wskaźnik skupienia tylko i wyłącznie

4:13na elemencie który ma ten focus tylko możemy się odnosić do innych elementów

4:17które są obok niego no i zamiast robić tutaj kolor możemy zrobić po prostu outline

4:21outline powiedzmy ustawione na 3

4:26piksele styl solid stylujemy to tak samo jak stylujemy border

4:30no i na zwykłym inputcie możemy

4:34ten outline usunąć bo już mamy go na labelce nie

4:39jest to do końca idealne no bo ja bym chciał żeby tutaj ten checkbox

4:43też był zawarty w tej labelce możemy to oczywiście ostylować robimy

4:47to na zasadzie że stylujemy każde li jako position relative

4:52no i każdą labelkę jako

4:56position absolute ustawione na width

5:00100% height 100%

5:07zobaczmy co się stanie no oczywiście to tam się nam troszkę rozjechało

5:11ze względu na to że wtedy element nie ma już jakby

5:15rodzic z tej labelki i tego checkboxa czyli li nie ma

5:19już tej treści pepperoni no i to się troszkę tutaj rozjeżdża więc zamiast robić label

5:23można zrobić label before czyli pseudo element i

5:28w tym momencie jak będziemy coś fokusować no to musimy jeszcze oczywiście dać tutaj

5:32content czyli treść tego pseudo elementu żeby on się w ogóle mógł pokazać i

5:36display inline-block i w tym momencie jest

5:41już troszkę lepiej on jest dalej trochę przesunięty więc możemy tutaj jeszcze ustawić left

5:45na 0 no i w tym momencie jest już naprawdę całkiem nieźle możemy

5:49oczywiście zrobić jeszcze top na 0 i wtedy mamy ładny kwadrat

5:53który łapie nam zarówno checkbox jak i labelkę więc jest jakby lepszym

5:58outlinem niż ten domyślny tylko i wyłącznie na checkbox no

6:02i też nie mamy standardowego koloru tylko właśnie nasz niebieski

6:06który będzie na pewno miał dobry kontrast w odniesieniu do tego jaki jest design

6:10naszej strony jaką mamy paletę barw i jakie jest jego tło jeśli

6:14chodzi o outline none nie jest to reguła której powinniście unikać jak ognia

6:18jeżeli dajecie alternatywne stylowanie jeżeli

6:22nie zamierzacie dawać alternatywnego stylowania zostawcie outline tak jak jest natomiast

6:27w samym sobie outline none nie ma nic złego jeżeli faktycznie

6:31troszczymy sie o użytkownika i damy alternatywę według specyfikacji nie

6:35powinniśmy stylować po niczym innymi niż po outline ponieważ czytniki ekranowe

6:40czy inne narzędzia systemowe mogą zmieniać kolor outlineu wedle

6:44preferencji użytkownika z tym że nie ma jako takich implementacji

6:48z tego co wiem które by korzystały z tego rozwiązania a nawet jeżeli użytkownik

6:52mógłby zdefiniować sobie kolor który chce mieć na outline no to tak czy siak

6:56na niektórych stronach będzie spotykał się z problemem kontrastu ponieważ będzie jedno

7:00generyczne rozwiązanie zamiast dostosowanego do pojedynczej strony www outline

7:05jest tylko jednym z możliwości stylowania wskaźnika fokusu

7:09w następnych lekcjach opowiem ci troszkę o innych opowiem ci też o wadach

7:13tego rozwiązania a póki co proszę cię tylko abyś pamiętał aby

7:17zawsze jakikolwiek wskaźnik stylowania dostarczać na swoich dostępnych

7:22stronach www