Accessibility: Czytniki ekranowe

0:00Cześć w tej lekcji opowiem ci troszkę o czytnikach

0:04ekranowych czyli generalnie oprogramowaniu które

0:08czyta to co znajduje się na ekranie za pomocą takiego syntezowanego głosu

0:12widzimy po kolei pojedyncze fragmenty strony może nie widzimy ale

0:17są one nam anonsowane zapowiadane no i czytnik ekranowy to

0:21na pewno nie jest e-book to na pewno nie jest kindle to na pewno nie jest

0:25urządzenie z którego my czytamy tekst a często taka opinia istnieje

0:29w internecie więc czytnik ekranowy to właśnie oprogramowanie do

0:33czytania tekstu na głos no i jest bardzo dużo rodzajów

0:37czytników ekranowych w zależności od tego z jakiego systemu operacyjnego

0:42korzystamy możemy wybierać z kilku możliwości no

0:46i jeśli chodzi o windowsa to jest kilka najpopularniejszych

0:50jaws czyli szczęki jest takim czytnikiem ekranowym

0:54który faktycznie jest używany przez osoby które są permanentnie

0:59niewidome ponieważ jest dosyć dobrze wspierany z tego co wiem natomiast

1:03nie jest darmowy jest cenowo dosyć korporacyjny więc

1:07generalnie nie sądzę że jeżeli chcesz krzystać z czytnika

1:11ekranowego tylko i wyłącznie dla jakiś swoich testów własnych

1:16aplikacji no to jaws raczej nie jest dla ciebie ponieważ jest płatny no i z tego co pamiętam licencja

1:20jest też dosyć droga liczona w dolarach i raczej nie

1:24w setkach tylko w większej kwocie tak że jeżeli chodzi o czytnik ekranowy to

1:29jaws na windowsa istnieje i bardzo wielu deweloperów testuję

1:33pod tym kontem strony internetowe no natomiast uważam

1:37że nie jest to jakby entry-level narzędzie czyli takie

1:41początkowe dla osób które dopiero zaznajamiają się z tematem accessibility no

1:45są inne rozwiązania na windowsa kolejnym darmowym tym razem jest

1:49nvda no i nvda możemy pobrać ze strony nvaccess.com

1:54no i obecnie najnowszą wersją jest 2019.3.1

1:58no i możemy nvda pobrać za darmo generalnie

2:03jest opcja dotacji ale nie jest obowiązkowa więc jeżeli chcemy tylko przetestować no

2:07to możemy oczywiście pobrać to oprogramowanie za darmo na windowsa

2:11no i jeżeli uznamy że chcemy wesprzeć projekt na to możemy dać symboliczne

2:16wsparcie nie płacimy za produkt tylko to jest bardziej w formie podziękowania no

2:20i nvda i jaws są takim bardzo często testowanymi

2:24czytnikami ekranowymi jeżeli chodzi o światek accessibility jest też

2:28jedno rozwiązanie które jest natywne dla microsoft windows w wersji

2:3210 jest to narrator narrator jest wbudowanym

2:37w system czytnikiem ekranowym czyli tak naprawdę nie trzeba nawet nic instalować ten

2:41czytnik ekranowy jest dostępny za darmo i możemy sobie zobaczyć jak

2:45z niego korzystać na oficjalnej stronie microsoftu na pewno w sekcji pomocy

2:49w systemie też będzie taka możliwość nie ma za dużo tutoriali

2:53ani artykułów które narratora jakby opisują jak on działa

2:58w konkretnych sytuacjach ale podejrzewam że z biegiem czasu to będzie się zmieniało

3:02i faktycznie im dłużej narrator będzie w obiegu tym częściej

3:06będzie wybierany chociażby przez osoby które nie mają jakichś permanentnych niepełnosprawności

3:10chcą skorzystac z tego typu rozwiązań albo po prostu przez

3:14deweloperów co jest istotne ponieważ jeżeli deweloperzy korzystają z

3:18czytnika ekranowego żeby testować ten czytnik ekranowy de facto staje się coraz lepszy

3:23ponieważ bugi są reportowane naprawiane no i koniec końców może

3:28to być produkt lepszy ja korzystam na co dzień z mac os-a i wbudowanym

3:32czytnikiem ekranowym dla maców jest voiceover ja już korzystałem z

3:36voiceovera w jednej z poprzednich lekcji generalnie uruchamiamy go

3:40za pomocą skrótu klawiszowego command f5 no

3:44i oczywiście jeżeli nie mamy klawiatury z klawiszami funkcyjnymi bądź mamy po prostu

3:49klawiaturę z touch barem musimy też kliknąć fn więc robi się z tego skrót

3:53klawiszowy fn command f5 no i po wpisaniu

3:57tego skrótu klawiszowego

4:02tak no i generalnie

4:13voiceover czyta automatycznie miejsce w którym się znajdujemy jest

4:17to czytnik dla całego systemu nie tylko dla przeglądarki więc jeżeli będziemy nawigować się

4:21po systemie no to oczywiście będzie nam mówił co się dzieje w odpowiednim miejscu w

4:25systemie warto też zwrócić uwagę że czytniki ekranowe reagują dynamicznie

4:29na różne rzeczy czyli jeżeli dostaniemy powiadomienie no to czytnik ekranowy przestanie czytać

4:33to co w tym momencie prezentował czyli jeżeli czytamy artykuł albo jakiś

4:38wiersz cokolwiek no to czytnik ekranowy z reguły przerwie czytanie

4:42i przeczyta treść powiadomienia co może być bardzo irytujące zwłaszcza

4:46jeżeli nasza strona implementuje push notifications no

4:50to warto wziąć to pod uwagę żeby po prostu nie bombardować użytkownika

4:54nowymi powiadomieniami bo o ile jakby użytkownik korzystający z

4:59aspektów wizualnych naszej witryny jest w stanie sobie to kliknąć może nawet nie zwróci

5:03na to uwagi że tam mu jakaś plakietka wyskoczyła no to użytkownik czytnika ekranowego

5:07będzie miał cały kontekst przerwany będzie musiał zamknąć to powiadomienie

5:11jest bardzo duża szansa że tak naprawdę będzie musiał zacząć czytać zdanie

5:15od początku co jeżeli jesteśmy na którymś kroku koszyka to może być naprawdę irytujące

5:20i może zniechęcić po prostu kogoś do do korzystania z naszej strony no i tak samo z

5:25notyfikacjami tak samo sprawa się ma do jakichś alertów

5:29dla jakichś modali wszystkie tego typu rzeczy będą anonsowane przez

5:34screen readery różnego rodzaju generalnie w tym kursie nie będziemy korzystali tak

5:38dużo z voiceovera ponieważ jest on specyficzny dla mac os-a ani nie chcę faktycznie

5:42tworzyć ostatecznego poradnika tylko pod jeden czytnik ekranowy w związku

5:47z czym my będziemy korzystali z czytnika ekranowego który jest cross-platformowy

5:51i ten czytnikiem jest chromevox czyli tak naprawdę rozszerzenie do

5:55chrome które jest czytnikiem ekranowym który jest zawarty w przeglądarce no musimy

6:00zainstalować rozszerzenie ale nie będzie anonsował nam niczego poza

6:05przeglądarką czyli jeżeli dostaniemy jakieś powiadomienie systemowe

6:09to chromevox może to przeczytać ale nie musi tak naprawdę bo to zależy od uprawnień

6:13chromevox będzie nam czytał tylko i wyłącznie strony internetowe krok po kroku no

6:17i możemy wejść sobie na chrome web store'a dodać go do chroma tutaj dostaniemy

6:21modal musimy potwierdzić no

6:26i możemy powiedzieć że nie chcemy teraz synchronizacji no i

6:30możemy tak naprawdę scustomizować od razu naszego chromea klikając tutaj ikoneczkę

6:37tutaj tą ikonkę chromevoxa no i otworzy nam się

6:41menu rozwijane możemy

6:46wejść w options i tutaj możemy wybrać sobie

6:50głos naszego czytnika ekranowego możemy przejrzeć skróty klawiszowe ja

6:55tutaj ustawię głos daniel

6:59tak tak brzmi daniel generalnie

7:03czytnik ekranowy będzie czytał w języku w którym mamy system bądź w którym

7:07mamy przeglądarkę bądź w którym jest tak naprawdę napisana strona internetowa

7:11to oczywiście też trzeba html-u w markupie określić ponieważ

7:15czytnik ekranowy będzie na tym polegał natomiast możemy teraz szybko przetestować

7:19sobie chromevoxa otworzymy nową kartę wpiszemy accessibility i możemy

7:26nawigować się chromevoxem chromevoxa aktywujemy i deaktywujemy za

7:30pomocą skrótów klawiszowych na macu skrót klawiszowy do

7:34jakby wydawania kolejnych sekwencji poleceń to jest control command a

7:38i to jest taki bardzo generyczny skrót no i teraz

7:42jeżeli klikniemy a ponownie to chromevox się wyłączy bądź włączy

7:48tak no i chrome generalnie w momencie

7:52kiedy jest aktywowany możemy nawigować się również za pomocą control command

7:57ta sekwencja jakby ta grupa klawiszy control i command ona będzie się

8:01różnić między systemem operacyjnym tak samo głosy mogą nam się różnić między

8:05systemem operacyjnym ale generalnie logika czytania będzie taka sama na

8:09wszystkich urządzeniach więc to jest fajne ponieważ możemy korzystać z tego samego narzędzia na macu

8:13na windowsie na linuxie co jest bardzo wygodne i po prostu

8:17dobre jeśli chodzi o wstęp do accessibility i propagowanie

8:22tej treści dbania o dostępność w naszej firmie a ludzie mogą pracować na linuxie

8:26mogę na windowsie na macu często jest tak że nie korzystamy z tego samego systemu

8:30operacyjnego więc chromevox jest bardzo fajnym rozwiązaniem no i pokrótce aby

8:34nawigować się po stronie za pomocą chromevoxa musimy użyć control command i strzałka

8:38w górę lub w dół nawigują nas po markupie czy jeżeli teraz kliknę

8:42strzałkę w dół no to przyjdę gdzieś dalej

8:48no coś tam czyta

8:59tak chrome nam czyta generalnie wszystkie po kolei rzeczy nawet mamy tutaj

9:03taki wskaźnik na którym elemencie się obecnie znajdujemy większość

9:07czytników ekranowych udostępnia taką możliwość można ją też wyłączyć no i generalnie możemy się

9:11nawigować po elementach i widzimy że generalnie

9:16będziemy po każdej liście nawigacyjnej się poruszać i będziemy czytali jedno

9:20po drugim jeżeli chromevox czy inny czytnik ekranowy zacznie coś czytać

9:24no to jest opcja zapauzowania go i możemy to zrobić za pomocą controla

9:33jeżeli nie chcemy tego słyczeć klikamy control i

9:37w tym momencie chromevox już tego nie czyta ponowne kliknięcie control

9:41nie spowoduje że będziemy tego czytali od nowa na pewno są do tego skróty klawiszowe

9:45które trzeba sobie skonfigurować ale po prostu możemy też zrobić strzałkę w górę i w dół

9:49no i będzie to się czytało ponownie poza

9:53takim nawigowaniem od góry do dołu każdy czytnik ekranowy

9:58daje też dużo różnych możliwości na przykład nawigacji po nagłówkach nawigacji

10:02po linkach nawigacji po tabelach generalnie po wszystkich tych semantycznych

10:07elementach użytkownik czytnika ekranowego może się nawigować czyli często

10:11jest tak że użytkownik czytnika ekranowego szybciej zobaczy tabelę dotrze

10:15do informacji zawartej w tabeli niż użytkownik wizualny ponieważ

10:19ma do tego skróty klawiszowe i jest to dla niego normalne aby korzystać ze strony

10:24w ten sposób w tym kursie będziemy korzystali właśnie chromevoxa aby zapewnić

10:28tą taką kompatybilność między platformami chromevox jest darmowy działa

10:33ma swoje słabsze strony i lepsze strony ale na

10:37taki bardzo podstawowy wstęp do dostępności na nasze

10:41potrzeby aby naprawić 20% problemów z accessibility i

10:45mieć 80% zysków będzie zdecydowenie wystarczający więc

10:49chromevox to jest nasz screen reader z wyboru na ten kurs