Accessibility: Na co jeszcze zwrócić uwagę

0:00Cześć wiemy już jak tworzyć treści tylko dla czytników ekranowych

0:04jak tworzyć treści tylko dla użytkowników wizualnych możemy

0:08to oczywiście osiągnąć za pomocą specjalnej klasy visually-hidden czyli tak

0:13zwanego clip patterenu możemy używać aria-hidden ustawiona

0:17na true aby ukrywać treści przed czytnikami ekranowymi natomiast jest

0:21jeszcze jeden feature dostępności powiązany właśnie z atrybutami aria którego

0:25możemy użyć aby zmienić treść którą chcemy zaprezentować jeżeli

0:30przeczytamy sobie tutaj chromevoxem ten nagłówek

0:35no to mamy mystery solved natomiast jeśli chcielibyśmy aby to mówiło

0:39cokolwiek czasami się tak zdarza zwłaszcza jeżeli chcemy zmienić treść linka bądź mamy

0:43ascii arty czyli obrazki stworzone z literek to jest bardzo

0:47istotne w accessibility aby nie udostępniać takich obrazków

0:51bez ich uprzedniej modyfikacji zaraz to zrobimy no to możemy tutaj w

0:55aria-label ustawić hello world powiedzmy

1:01no i mystery solved czyta

1:06się jako hello world no i dlaczego to jest potrzebne no jeżeli byśmy

1:10wjechali na tego ascii arta to zobaczmy jak chromevox nam czyta tego ten

1:14atrybut pre

1:33tak więc

1:37generalnie każda literka czyta się jako osobny znak i nie ma tutaj informacji że jest to detektyw

1:42który ma na sobie cytat i'll be selling in the house and moving family to a condo

1:46w związku z czym użyć aria-label żeby zmienić

1:50treść tego elementu aria-label ja

1:55tutaj mam już przygotowane wcześniej treści które możemy tutaj powiedzieć to jest oczywiście

2:00sama treść tego cytatu zapisujemy to i

2:05teoretycznie jeżeli chcielibyśmy żeby faktycznie to przeczytało

2:09nam się jako to no to możemy użyć do tego aria-label natomiast chromevox

2:13ma z tym jakiś problem o ile mystery solved da się przetłumaczyć i

2:18pisze się jako hello world no to jeżeli wejdziemy w pre no to po

2:24prostu chromevox tego nie łapie ale to jest problem z chromevoxem

2:28więc możemy odpalić do tego voiceovera

2:33generalnie

2:45tutaj mięliśmy przebitkę polskiej wymowy czytnika ekranowego bo zmieniłem

2:49język zaraz dowiemy się czemu ale jak wejdziemy na i'll be selling in the house and

2:53moving family to a condo

3:04więc screen reader voiceover przeczytał nam faktycznie tego ascii arta poprawnie

3:08i aria-label zadziałało z jakiegoś powodu na chromevoxie aria-label

3:12nie działa ze znacznikiem pre podejrzewam że jest to bug i możemy to

3:16zaadresować na różne sposoby możemy albo ukryć

3:20ten element i stworzyć drugi element albo możemy zostawić to jako aria-label

3:25tylko że wtedy użytkownicy chromevoxa będą mieli tutaj buga zanim

3:29przejdziemy do opcji która będzie też działała dla chromevoxa chciałem pokazać jeszcze jeden feature

3:33a mianowicie przetłumaczenie strony na nasz język ojczysty w

3:38tym momencie ustawiłem język na polski strona jest po angielsku

3:42bo tutaj mamy lang na en czyli jeżeli zrobimy translację no

3:46to faktycznie przetłumaczyła nam się zagadka rozwiązana ascii art nam się zepsuł ponieważ

3:50spróbował jakby czytnik ekranowy próbował go przetłumaczyć natomiast zagadka rozwiązana

3:54się przetłumaczyło tylko co w sytuacji kiedy tutaj mamy hello world ustawione

3:58a tutaj jest zagadka rozwiazana czy aria-label się też przetłumaczy zobaczmy

4:03tutaj

4:07przejdziemy to całe na górę generalnie

4:13przeczytało treść tego a nie hello world zobaczmy jak zadziała

4:17voiceover

4:22co ciekawe voiceover

4:26poradził sobie z przetłumaczeniem aria-label natomiast nie wszystkie czytniki ekranowe

4:30to robią jak na przykład właśnie chromevox więc co można zrobić żeby treść

4:35była przetłumaczalna na każdy język oraz żeby

4:39była faktycznie zastępowana w odpowiedni sposób zamiast używać aria-label możemy

4:43to zrobić na inny sposób po pierwsze usuniemy stąd

4:47aria-label i damy translate no

4:53czyli jak już wiemy to powinno teoretycznie zapobiec translacji

4:57natomiast silnik google do tłumaczeń tego nie respektuje trzeba

5:01dać specjalną klasę class notranslate zapisujemy

5:06no i teraz możemy jeszcze raz to przetłumaczyć i faktycznie widzimy że zagadka rozwiązana się

5:10przetłumaczyło natomiast treść samego ascii artu już nie żeby to

5:14było dostępne dla czytników ekranowych możemy dać tutaj

5:18aria-hidden na true ukrywając tego ascii arta

5:22przed użytkownikami no i tworząc osobny element który

5:26będzie ukryty wizualnie dla pozostałych użytkowników czyli class visually-hidden

5:32i tutaj dajemy tą treść którą sobie wcześniej przygotowaliśmy

5:36i w tym momencie nie widać tego oczywiście tutaj ale jeśli odpalimy czytnik

5:41ekranowy

5:49i on przeczytał nam ten konkretnie paragraf nie czytał

5:53faktycznie ascii artu i o to nam chodziło więc mamy jakby substytut

5:57tego aria-label tutaj w ten sposób zrobiony że mamy aria-hidden ustawione na true no

6:02i klasa visually-hidden na osobnym elemencie w którym jest tylko i wyłącznie to

6:06i to jest o tyle też lepsze ponieważ aria-label czasami się nie tłumaczy

6:11więc jezeli teraz zrobimy translację na polski to mamy zagadka

6:15rozwiązana oczywiście to przeczytało nam z angielskim akcentem

6:19ale jezeli przejedziemy niżej

6:23generalnie

6:27można w ten sposób ustalać też elementy nie trzeba zawsze

6:31korzystać z aria-label zwłaszcza że narzędzia tłumaczące czasami

6:36sobie z tym tłumaczeniem nie radzą zostawię wam też linki i źródła do tego

6:40aby musi od tego odnieść ważne jest też aby treści nam się nie duplikowały

6:44czyli jeżeli byśmy nie ukryli tego tutaj przez aria-hidden no to teoretycznie

6:48mogłoby się to 2 razy przeczytać tak bo oczywiście byłby tutaj szum informacyjny

6:52przez te wszystkie o.o. małpa małpa małpa buck-tick buck-tick buck-tick

6:56natomiast jest tutaj ta treść jeżeli byłoby na tym aria-label ustawione

7:01właśnie na tą treść i tutaj mielibyśmy jeszcze drugie visually-hidden no to mielibyśmy dwa

7:05razy tą samą treść na jednej stronie co jest po prostu duplikacją i jest

7:09nieprzyjemne dla użytkownika i jest nie jest optymalne ponieważ te informacje

7:13muszą się wysłać dwa razy do przeglądarki z naszego serwera więc

7:17to co chciałbym żeby zapamiętać z tej lekcji translate no nie zawsze

7:21zadziała dla googlea na przykład trzeba dać klasę no translate i wtedy on to

7:25respektuje jest aria-label natomiast aria-label się nie tłumaczy

7:30lepiej skorzystać albo z osobnego elementu albo wykorzystać

7:34w ogóle atrybut aria-labelledby który działa praktycznie tak samo jak labelki

7:38natywne czyli po prostu możemy podać mu identyfikator elementu

7:42który nam opisuje element czyli tutaj moglibyśmy dać id label

7:46i tutaj aria-labelledby

7:50ustawione na ten label tylko oczywiście wtedy nie możemy

7:54mieć tutaj aria-hidden true bo to się zupełnie wtedy nie przeczyta w kolejnych lekcjach będziemy

7:59mówili więcej o nawigacji klawiaturą i wskaźniku skupienia