Accessibility: Narzędzia developerskie przeglądarek

0:00Dzisiaj opowiem ci o narzędziach deweloperskich

0:04przeglądarek o których zapewne już trochę wiesz jeśli jesteś deweloperem designerem

0:08czy zajmujesz się seo natomiast w kontekście dostępności devtoolsy

0:12chrome czy firefoxa dają dużo fajnych ciekawych featureów które

0:17pozwolą otworzyć nam bardziej dostępne strony internetowe jeśli

0:21chodzi o google chrome no to mamy tutaj kilka jakby możliwości

0:25featureów pierwszym z nich jest wbudowany miernik

0:30kontrastu o którym już wspomniałem wcześniej gdy użyjemy

0:35skrótu klawiszowego shift command c na macu na windowsie może to być shift control c

0:39jest to skrót do inspekcji pojedynczego elementu który znajduje się pod

0:43kursorem myszy możemy podejrzeć jego kontrast oczywiście może to

0:47nie zawsze działać ponieważ operuje to na wartościach cssowych

0:51więc jeżeli jest jakiś tam pokręcony markup troszkę no to ten

0:56kontrast może się tutaj nie wyświetlać natomiast na stronie głównej google po

1:00wpisaniu frazy accessability no to widzimy że dla większości elementów

1:04tutaj ten kontrast jest napisany no i jakby nawet

1:08jest tutaj napisane jaki

1:12ten kontrast jest czyli tutaj mamy dla tego paragrafu developer

1:17mozilla.org mamy kontrast spełniający wymogi wcag 2.1

1:21dla aa czyli nie jest tak jakby maksymalny kontrast natomiast

1:26dla powiedzmy linku

1:30wikipedia mamy już kontrast o wartości 12 no

1:35i jeżeli chodzi już o jakieś takie naprawdę mocne kontrasty jak szary

1:40na białym czy czarny na białym na to tutaj już są to bardzo duże

1:44wartości natomiast jeśli chodzi o kontrast to google zdecydowanie

1:48wie co robi i nie ma tutaj takich rzeczy które są ciężko dostępne nie

1:53wiem jak bardzo dostępne jest tutaj ta lupka ponieważ

1:57jest to taki niebieski na białym ja na przykład na pierwszy rzut oka nie

2:01wydaje mi się to zbyt dostępne zwłaszcza jak tutaj on się zablokuje

2:06ten kolor niebieski natomiast nie

2:11wiem być może to spełnia te wymogi być może nie warto też zwracać

2:15uwagę na kontrast ikonek o czym też będziemy mówić w przyszłych lekcjach

2:19to jest jakby taka najbardziej oczywista rzecz którą można zobaczyć najszybciej

2:23w google natomiast możemy też zrobić audyt strony

2:27internetowej czyli tak naprawdę lighthouse ma tutaj sekcje accessibility

2:31no jeżeli ją tutaj wyłączymy uruchomimy tylko accessibility pozostałe checkboxy

2:35odznaczymy możemy wybrać czy chcemy sprawdzić dostępność na

2:39urządzeniu mobilnym czy na komputerze stacjonarnym no i możemy wygenerować

2:44sobie taki report tutaj lighthouse troszkę się rozgrzewa lighthouse

2:48z tego co wiem ma też możliwość uruchomiania jako cli

2:52czyli z poziomu linii komend z konsoli no i widzimy tutaj że google ma

2:57według własnego audytu 75% accessibility no i tutaj nie

3:01ma na niektórych elementach odpowiednich znaczników aria niektóre

3:05przyciski nie mają dostępnej nazwy czyli tak naprawdę są ikonkami

3:09bez nazwy podejrzewam że właśnie ta szukajka nie ma tej dostępnej nazwy

3:13a mogłaby być na przykład zaadresowana poprzez aria-label ale widzimy że tutaj

3:17jest jakby więcej problemów niż to co wykrył nam accessibility insights rozszerzenie do chromea

3:21więc warto też sobie lighthousem sprawdzić jakie tutaj mamy wyniki ponieważ jest

3:25to po prostu dodatkowe źródło no i możemy wyłapać rzeczy których wcześniej nie wiedzieliśmy natomiast

3:30firefox jest generalnie lepszy w kontekście wykrywania problemów

3:34z dostępnością z poziomu devtools uruchamiając narzędzia deweloperskie przeglądarki

3:39pod warunkiem że się włączą odswieżmy może stronę bo coś tutaj chyba

3:43nie nie za bardzo nam chce działać podejrzewam że to

3:47przez to że działam po prostu w trybie pełnoekranowym o tak dokładnie więc

3:52mamy tutaj generalnie całą zakładkę poświęconą tylko i wyłącznie dostępności

3:56musimy ją tutaj uruchomić i musimy w naszym systemie operacyjnym zezwolić na funkcje

4:01dostępności na przykład jeżeli pracujemy na macu no i tutaj widać całe drzewko

4:05dostępności tak jak mamy dom czyli dokument object model

4:09to tutaj jest aon accessibility object model no i widzimy pojedyncze

4:14elementy które mają konkretne accessibility

4:18name no i widzimy że na przykład ta sekcja nie ma jakiejś dostępnej nazwy

4:22ale podejrzewam że rzeczy w środku tej sekcji już taką nazwę będą miały albo

4:27i nie no dużo jest sekcji nie podpisanych mam tutaj search modes tak

4:31no i możemy generalnie w ten sposób audytować jest też oczywiście wbudowane

4:35sprawdzacz kontrastu no i tutaj widzimy że 15.91

4:40spełnia wymogi aaa co ciekawe w google chyba było

4:44napisane że spełnia aa czyli tutaj mamy bardziej konkretną już

4:49informację o tym że taki kontrast jest już bardzo bardzo dobry

4:53chrome było chyba tylko oznaczenie że spełnia generalnie wymogi wcag no

4:57i generalnie to jest o wiele lepsze ponieważ z aom

5:01korzystają czytniki ekranowe i to jest to na podstawie czego

5:05czytniki prezentują treść dla użytkownika więc możliwość

5:09przeglądania accessibility object model jest bardzo

5:14fajna no i możemy nawet sobie tutaj oczywiście sprawdzać jakie dodatkowe fakty

5:18na temat pojedynczych elementów generalnie większość przeglądarek

5:22internetowych korzysta z jednego silnika do generowania różnego

5:26rodzaju raportów dotyczących dostępności i właśnie o tym silniku opowiem

5:31w następnej lekcji