Accessibility: Domyślne zachowanie przeglądarki

0:00Cześć w tej lekcji opowiem ci jak czytniki ekranowe działają domyślnie

0:04to znaczy jak czytają strony internetowe co wpływa na to że

0:08treść na czytniku ekranowym jest czytana no i w kolejnych lekcjach dowiesz

0:12się też jak tworzyć treści tylko i wyłącznie do czytników ekranowych bądź tylko i wyłącznie

0:16dla użytkowników wizualnych no i tutaj mamy przykład bazujący

0:21taki na kryminale na jakiejś zagadce no i możemy odpalić sobie chromevox

0:25czyli control command a a na macu

0:33tak więc generalnie screen reader zaczął czytać od góry do dołu no

0:37i przeczytał nam detektywa nasze zdjęcie w ten sposób

0:41to bardzo ciekawe

0:45ponieważ jakby tutaj nie mamy podanego alta dlatego wychodzi na to

0:49że chromevox jakoś w mądry sposób pozbył się rozszerzenia obrazka

0:53oraz przedrostka w katalogu no i przeczytał

0:57to jako detective image to bardzo ciekawe generalnie różne czytniki ekranowe

1:02działają różnie niektóre przeczytają całą ścieżkę niektóre

1:06będą ignorowały w ogóle source i nie zaanonsują

1:10zupełnie informacji do przeglądarki generalnie jeżeli

1:14chcielibyśmy się pozbyć w ogóle tego anonsa zawsze no to tak jak wspominaliśmy możemy

1:18zrobić jako alt dekoracyjny i czytając dalej

1:22no jakaś tajemnica heading poziomu pierwszego nagłówek

1:31poprzedniej nocy coś dziwnego stało

1:35się w mieście codu ktoś próbował dokonać zamachu na

1:39dostępność swojej strony internetowej

1:43kto mógł zrobić taką rzecz

1:47emoji twarz krzycząca w strachu możesz zapytać

1:53czy to był ogrodnik

1:57twarz myśląca emoji

2:01aby odkryć tą tajemnicę

2:05będziesz musiał okazać swoją odwagę więc generalnie emoji

2:09też się czytają jak już wcześniej o tym poruszyliśmy więc jeżeli chcielibyśmy się ich pozbyć

2:13moglibyśmy tutaj w pewien sposób je ukryć jak

2:18ukrywać elementy dowiesz się w następnej lekcji natomiast co chciałem powiedzieć w

2:23tym konkretnym przykładzie generalnie jest tutaj pewna tajemnica no którą trzeba odkryć

2:27jeżeli jesteśmy użytkownikami wizualnymi

2:31no to możemy tak naprawdę poruszać coś myszką najechać na ten obrazek no i tu się

2:35okazuje że jest secret na nim jest na nim secret no i gdy go klikniemy

2:39pojawia się it's someone who didn't understand the case czyli

2:43to jest ktoś kto nie zrozumiał problemu faktycznie spróbował

2:47dokonać zamachu na dostępność strony internetowej czemu to jest

2:51zły przykład ponieważ jeżeli wejdziemy sobie tutaj teraz w style no

2:56to widzimy że element game czyli tak naprawdę tutaj jest taki niewidzialny

3:00box na hover targetuje

3:04cta czyli call to action i ustawia mu display flex czy w momencie kiedy przejdziemy

3:09do pliku tutaj zobaczymy ze taki mamy kontener

3:14game wewnątrz niego jest obrazek o klasie cover no i tu

3:18jest dopiero div o kasie call-to-action już wspomnieliśmy o tym że generalnie buttony

3:22i inne elementy powinny używać semantycznych znaczników czy

3:26jeżeli chcemy żeby to był przycisk który aktywuje nam alert no to powinien to być button

3:30a nie div natomiast tutaj jest to divem no i jaki

3:34jest z tym problem po najechaniu na hover call to action się pokazuje jak

3:38display flex a domyślnie jest na display none i dlatego czytnik

3:42ekranowy nam tego nie czyta ponieważ cokolwiek ma disney none nie jest widoczne dla użytkownika

3:47wizualnego i też będzie schowane przez czytnik ekranowy jeżeli

3:51natomiast najechalibyśmy na to myszką i włączyli screen reader

3:57było detective image secret

4:01czyli tutaj coś nam się alt usunął jeszcze

4:05raz alta ustawimy

4:10więc ten tutaj secret nam się przeczytał

4:14dlatego ponieważ mieliśmy tutaj hover na tym jeżeli byśmy nie mieli tutaj myszki

4:18no to czytnik ekranowy by tego nie mógł przeczytać w związku z czym to

4:22rozwiązanie jest zupełnie dostępne ponieważ użytkownicy czytników ekranowych

4:27nie korzystają często z myszki korzystają przede wszystkim z klawiatury oczywiście

4:31można klawiaturą też myszkę poruszać natomiast jeżeli nie wiadomo gdzie mamy tą myszkę umiejscowić

4:35no to nie zaaktywujemy tego hovera a nawet

4:39jeżeli już mamy tutaj jakimś cudem hover ustawiony no to screen reader

4:43nie przeczyta że to jest przycisk który należy kliknąć no i użytkownik może się do tego

4:47nie dostać cokolwiek schowamy za pomocą display none nie będzie

4:52czytelne dla czytników ekranowych ponieważ nie będzie dostępne w drzewie dostępności

4:56i display none nie jest jedyną właściwością która sprawia że treść jest niedostępna

5:01dla czytników ekranowych display none visibility hiden

5:05czyli coś takiego jak display none tylko że zachowuje nam rozmiar

5:09elementu docelowy jeżeli wpiszemy sobie tutaj visibility hidden no to

5:13faktycznie jakby nie ma za dużej różnicy tylko musimy teraz to visibility

5:17zmienić w tym miejscu z powrotem na visibility

5:22visible no i w momencie gdy hoverujemy no style

5:26nam się troszkę zmieniły natomiast tak samo na hover się pokazuje i

5:30jeśli będziemy aktywować screen readera

5:34tak nie było tego

5:39anonsa najeżdżam na secret

5:43i secret jest czytelne ponieważ

5:47jest visibility visible czyli visibility hiden display

5:51none ukrywają nam elementy w drzewie dostępności i tak samo

5:55się dzieje co jest już nie oczywiste jeżeli zrobimy opacity na 0 opacity

6:02na 1 zapisujemy

6:08wyłączymy no i teraz gdy najeżdżamy na

6:12ten element no to oczywiście on się pokazuje możemy tak naprawdę zrobić tutaj display flex to wtedy

6:16to już będzie nam działać z powrotem tak jak wcześniej włączamy czytnik ekranowy

6:20nie przeczytało nam secretu

6:25najeżdżamy na secret na naszą grę

6:35i znowu się czyta w związku z czym jak można ukrywać

6:39rzeczy w taki sposób by były czytelne dla czytników ekranowych

6:43na pewno nie używając tych trzech właściwości możemy przesunąć je poza viewport możemy je

6:47uciąć możemy zmienić ich rozmiar ale o tym konkretnie

6:51dowiesz się w następnej lekcji