Accessibility: Treść tylko dla użytkowników czytników ekranowych

0:00Hej w tej lekcji powiem ci jak faktycznie ukrywać

0:04treści w ten sposób by były dostępne dla czytników ekranowych generalnie

0:08to co trzeba zrobić no to jakby zduplikować tą

0:12treść niekoniecznie tutaj ten secret bo to nie to jest

0:16treścią której nam chodzi to jest jakby podpowiedź dla użytkownika że tu

0:20jest jakiś secret natomiast chodzi nam o samą tą treść więc co musimy

0:24zrobić to wyjąć to z tego alerta możemy

0:29stworzyć tutaj paragraf no i jak to zapiszemy no

0:33to oczywiście tutaj to będzie widoczne a to nie o to chodzi ponieważ to jest tajemnica musimy ją odkryć

0:37wiec to nie powinno być widoczne dla użytkowników wizualnych ale dla użytkowników

0:42czytników ekranowych już owszem i żeby nie duplikować sobie tutaj tej treści możemy zrobić

0:46taki trik po prostu mamy tutaj klasę hidden

0:51secret no i po tej klasie hidden secret możemy wziąć

0:55dokument queryselector hidden

1:01secret no i wziąć

1:05innertext z tego jako alert więc jak zapiszemy no

1:09to po kliknięciu tylko secretu faktycznie będzie ta sama treść no i nie piszemy jej dwa razy więc

1:13to fajnie natomiast to jest rozwiązanie tylko

1:17javaskryptowe więc jak komuś nie będzie działało javascript to niestety nawet

1:22użytkownik wizualny nie zobaczy tego ale no to pozostaje nam jeszcze ukryć tą treść

1:26wizualnie więc to co się robi to z reguły używa się takiej gotowej

1:30klasy visually-hidden to jest tak zwany

1:34clip pattern no i jak to wkleimy taką gotową klasę

1:38którą możecie znaleźć na accessibility project bardzo wiele stron internetowych o tym mówi

1:43nie wiem szczerze mówiąc kto stworzył ten pattern kto wyszedł z

1:47tą inicjatywą to jest ciekawa rzeczy żeby się tego dowiedzieć na własną

1:51rękę natomiast o co tutaj chodzi no to po prostu zamiast ustawiać display none

1:55opacity 0 czy visibility-hidden na elemencie który chcemy ukryć no to możemy

1:59ustawić mu pozycję absolutną tak aby wyskoczył on z normalnego flow i

2:03nie zajmował w ogóle żadnej przestrzeni w swoim kontenerze zmienić mu rozmiar

2:08żeby zajmował tylko jeden piksel usunąć mu cały overflow czyli cały

2:12nadmiarowy tekst który tam by się znalazł będzie niewidzialny no i można jeszcze

2:16tutaj sclipować ten jeden piksel żeby to po prostu było zupełnie niewidzialne tutaj

2:21jest jeszcze taki syntax dla starszych wersji przeglądarek dla ie6 i

2:25ie7 jeżeli nie korzystacie z tych przeglądarek w waszej

2:29pracy to znaczy wasi klienci nie korzystają z tych przeglądarek nie ma ruchu z

2:34tych konkretnych wersji no to możecie tak naprawdę to usunąć są to dosyć stare wersję przeglądarek

2:38więc też wydaje mi się że nie ma z tym problemu no i po zapisaniu faktycznie to nam zniknęło

2:42ta też nie możemy nawet tutaj nawet jej zaznaczyć nie ma jej po prostu na stronie no i jeżeli

2:46puścimy to screen readerem to zobaczmy co się stanie

2:56tak polecimy już dalej żeby tego nie przedłużać

3:06tak no i tutaj nie widać generalnie żadnej treści która jest dalej dla użytkownika

3:10wizualnego natomiast jeżeli pojedziemy dalej w treści używając po

3:14prostu normalnego skrót klawiszowy na następny element w czytniku ekranowym

3:18to widzimy że ten

3:23element no tutaj chromevox jakoś nam spróbował to podświetlić to generalnie jest wypozycjonowane

3:28w ten sposób że no ciężko określić gdzie to się teraz znajduje chromevox ustalił

3:32że jest to tam ale sama treść została przeczytana jeszcze raz

3:36aby odkryć tą tajemnicę musisz

3:40pokazać swoją odwagę no i tutaj za chwilę pokazujemy swoją odwagę

3:44odkrywając ten secret

3:49czyli nie ma sytuacji że użytkownik czytnika ekranowego jest wykluczony

3:53z dostępu do treści może jest inny experience bo jakby

3:57nie trzeba nic kliknąć żeby dowiedzieć sie jaki to jest secret wystarczy

4:01po prostu dalej przeczytać natomiast lepsze jest nawet zaserwowanie innego

4:06jakby doświadczenia niż wyłączenie go zupełnie moglibyśmy

4:10tutaj oczywiście zrobić jakiś button który też będzie niewidzialny i który po kliknięciu

4:14zostanie zaanonsowany w ten sam sposób też poprzez alerta natomiast

4:19to nie chcę tego robić w tej lekcji ponieważ zajmie to więcej czasu ale używając

4:23klasy visually-hidden możemy zrobić naprawdę wiele rzeczy możemy ukryć

4:27właśnie w ten sposób buttony dodatkowe linki jeżeli nie chcemy z jakiegoś powodu pokazywać

4:32linków wizualnie możemy ukrywać różne semantyczne elementy które

4:36są przydatne generalnie dla różnych parserów silników które bazują

4:41na markupie czytników ekranowych ale niekoniecznie chcemy je pokazywać użytkownikowi

4:45wizualnemu bo to może być po prostu szum informacyjny w niektórych przypadkach jeśli

4:50chodzi o kasę visually hidden to możecie ją zapamiętać nie jest aż takie długie position

4:54absolute height i width na 1 pikseli i clip rect też na jeden piksel całość

4:58chowamy overflowem no i jeszce ewentualnie white-space nowrap żeby to było w jednej

5:02linii natomiast ja najczęściej po prostu wchodzę na accessibility project

5:06i sobie stamtąd to kopiuję bądź po prostu biorę to z mojej listy snippetów które

5:10uważam za przydatne w codziennej pracy ważne jest też że jeżeli nie trzeba duplikować

5:14z tego kontentu na przykład w ten sposób no to możemy go pobrać sobie za

5:18pomocą javascryptu jeśli zakładamy że aby skorzystać z tej gry tak

5:23czy siak będzie potrzebny javascript wtedy możemy to spokojnie zrobić no i będzie to teoretycznie

5:27mniej troszkę bajtów przesłanych do przeglądarki zakładając że nie gzipujemy

5:32naszych requestów czyli nie nakładamy żadnego mechanizmu kompresji danych

5:37jeżeli byśmy to zrobili być może lepiej byłoby nawet tą treść tutaj zduplikować

5:41to wszystko w tej lekcji w kolejnej lekcji powiem jak ukrywać elementy

5:46przed czytnikami ekranowymi ale zostawiać je

5:50widoczne wizualne co jest bardzo często potrzebne