Accessibility: Treść tylko dla użytkowników widzących

0:00Cześć w tej lekcji i powiem ci jak ukrywać treści

0:04przed czytnikami ekranowymi no dlaczego ktoś może chcieć to robić

0:08ponieważ niektóre rzeczy czytniki ekranowe no generalnie nie powinny czytać

0:12ponieważ doświadczenie dla użytkownika wizualnego i użytkownika

0:17czytnika ekranowego będzie się troszkę różnić generalnie powinniśmy unikać

0:21szumu informacyjnego na naszych stronach jeżeli projektujemy pod czytniki ekranowe

0:25no jeżeli wejdziemy jeszcze raz w ten przykład

0:29no to na pewno ten detektive img alt

0:33jak zwykle możemy tutaj schować ten secret możemy też

0:38ukryć na dobrą sprawę bo co jeśli akurat się zdarzy że ktoś ma myszkę położoną

0:42na tym elemencie

0:46jeżeli

0:50będzie miał przypadkiem ktoś tam myszkę no to ten secret się przeczyta a to nie jest wymowne

0:55bo ani nie wiemy że trzeba to kliknąć ani nie nie wiemy czemu ten secret tam jest no bo on

0:59jest przed całą więc nie mamy wprowadzenia czemu on się tam znajduje w związku

1:03z czym możemy to ukryć no ale nie chcemy tego ukrywać usuwając to no bo jeżeli

1:08to usuniemy

1:12jeżeli to usuniemy aha tutaj mi się coś nie odświerzyło w każdym razie jeżeli

1:18tutaj usuniemy sobie ten secret

1:26no to faktycznie nam się nie przeczyta ten secret

1:31bo już go nie ma w markupie natomiast jak najedziemy myszką na ten element no

1:35to już nie mamy tego napisu secret który chcielibyśmy odczytać wizualnie

1:39faktycznie no to generalnie co można zrobić to użyć

1:43znaczników aria to są te atrybut o których wcześniej już wspomniałem które jakby

1:47uzupełniają html w momencie kiedy on nie ma już semantycznie

1:51możliwości czegoś wyrazić jednym z takich bardzo podstawowych znaczników atrybutów

1:56aria jest aria-hidden no tutaj widzieliśmy że jest ich bardzo dużo

2:00vs code nam podpowiada różne możliwości jeżeli chodzi

2:04o przerobienie całej aria no to zdecydowanie jest to materiał na osobny

2:08kurs natomiast aria-hidden jest takim bardzo podstawowym i bardzo przydatnym

2:12atrybutem który pozwala ukryć element przed czytnikiem ekranowym

2:17czyli jesli damy aria-hidden o wartości true na ten div

2:21o klasie game no to wszystko wewnątrz tego diva będzie niedostępne dla

2:25czytnika ekranowego jeśli teraz to odpalimy

2:29to przeczytało nam się almost there

2:33ja zrobiłem strzałkę w górę natomiast my polecieliśmy na dół ponieważ chromevox

2:37ma wrap to top wrap to bottom czy jeżeli się osiągnie koniec

2:41treści z którejkolwiek strony no to on się zawija z drugiej strony no i jeżeli spróbujemy jeszcze raz wejść

2:45na tego detectiva

2:50był dźwięk że to jest koniec w związku z czym wszystko co zawrzemy wewnątrz

2:54znacznika który ma na sobie aria-hidden będzie niedostępne dla czytników ekranowych

2:58jeżeli damy to na body co jest bardzo złą praktyką ale widziałem

3:03strony internetowe które faktycznie to robiły zapiszemy

3:07no to cała strona będzie niedostępna nie będzie zupełnie nic

3:11wystawione dla czytnika ekranowego jak się spróbujemy teraz poruszać potem

3:19no to słyszymy że nie ma zupełnie nic w żadną stronę czyli strona jest pusta anonsuje się

3:24tylko i wyłącznie tytuł strony więc ostrożnie z aria-hidden ponieważ

3:28no można bardzo skrzywdzić użytkowników w ten sposób pierwsza zasada ara

3:32to generalnie jeżeli nie trzeba jej używać no to nie używamy aria

3:36za pomocą aria możemy na przykład odtworzyć niektóre zachowania semantyczne

3:40natywnych elementów ale pierwsza zasada jest taka że jeżeli są natywne elementy

3:44które dostarczą tą samą funkcjonalność powinniśmy korzystać z nich a nie z aria

3:48natomiast tutaj w tym przypadku do tego diva o klasie game

3:53jest to jak najbardziej ok no i co jeszcze możemy ukryć możemy

3:57ukryć te emoji ponieważ jeżeli tutaj je przeczytamy sobie

4:06czytanie emoji jest bardzo

4:10ciekawym przypadkiem generalnie często jest to

4:14treść która nie jest potrzebna do zrozumienia przekazu trzeba byłoby tak naprawdę

4:18zrobić ankietę użytkowników czytników ekranowych czy lubią słuchać emoji

4:23natomiast z mojego punktu widzenia jest to treść dodatkowa która

4:27nie jest potrzebna do zrozumienia całego kontekstu no i jakby przerywa nam

4:31normalne flow czytania ponieważ jak my czytamy wizualnie no to czytamy

4:35who could do such a thing i nie czytamy emoji na głos czy nie czytamy go w głowie po

4:39prostu widzimy reprezentacje emocji za pomocą emoji w związku z

4:43czym dla czytników ekranowych można to ukryć no i możemy tak samo jak w przypadku

4:47spana i ustawienia konkretnego języka na niej możemy zrobić sobie span

4:51aria-hidden ustawić

4:55na true no i wstawić to emoji do środka no i oczywiście analogicznie tutaj

5:00też tak samo span aria-hidden

5:04true zapisujemy

5:10czasami może się zdarzyć że znaki

5:14tego typu jak quot będą się teraz czytać natomiast to się różni w zależności

5:18od czytnika ekranowego i już ja bym zostawił to w ten sposób nawet jeżeli chromevox

5:22nam to przeczyta a wydaje mi się że czyta

5:28no i widzimy że w ogóle teraz czytnik ekranowy robi nam tutaj pauzę

5:32pomiędzy emoji a tym co jest przed emoji a tym co jest po emoji czyli

5:37musimy tutaj w chromevoxie na przykład przeczytać to 2 razy zrobić dwie interakcje ale to ma

5:41tutaj nawet sens ponieważ jakby czytamy najpierw

5:45who could do such a thing

5:49you might ask nawet ma tutaj sens jeżeli się to przeczyta na głos jeżeli przejdziemy do następnego

5:53paragrafu no to nie ma tutaj tej informacji o

5:57tym emoji ale jest informacja o tym quotcie

6:01jeżeli nie chcielibyśmy czytać tych quotów no to moglibyśmy teoretycznie użyć pseudo

6:05elementów i tam to umieścić w treści jako content natomiast

6:09nie uważam że to jest coś złego w tym momencie i właśnie w ten sposób chowa

6:14się treści przed czynnikami ekranowymi można tutaj oczywiście dać aria-hidden false natomiast

6:18domyślnie jakby nic nie jest ukryte w aria jeżeli jest semantyczne jeżeli

6:23zrobimy sobie aria-hidden false

6:27w tym miejscu na to jest to jakby redundancja w tym momencie ten element

6:31i tak nie byłby ukryty w aria domyślnie więc nie musimy tego robić jeżeli

6:36chcemy coś ukryć natomiast no to oczywiście możemy zrobić aria-hidden na true