Accessibility: Język treści

0:00W tej lekcji powiem co nieco o językach będzie to bardzo ogólne wprowadzenie do

0:04tego tematu no bo sieć jest bardzo dużym bytem który

0:08jest przetłumaczony na wszystkie 40 ileś języków które mamy na świecie

0:12w związku z czym zderzają się strony które mają sobie kilka języków na przykład

0:17słowniki polsko-angielskie hiszpańsko angielskie polsko-hiszpańskie

0:21czy nawet blogi techniczne na których używamy zapożyczeń z angielskiego czy

0:26właściwości css-owych one też są po angielsku więc tak naprawdę nasze strony

0:30są dwujęzyczne mówimy po polsku główna treść jest po polsku ale są fragmenty

0:34treści które są nie w tym języku to co każdy element

0:38każda strona tak naprawdę powinna mieć w sobie to jest określenie

0:42języka w jakim jest napisana i możemy to zrobić ustawiając atrybut lang

0:46na znacznik html no i w tym momencie będziemy

0:51w stanie zadeklarować że nasza strona jest w języku angielskim no

0:55i to jest akurat prawda bo to jest artykuł o przedrostkach hiszpańskich

0:59w zależności od tego czy mówimy o rzeczy która jest zdefiniowana i znaną autorowi

1:03czy też nie więc generalnie co się stanie jeżeli spróbujemy

1:08odpalić screen readera na takim artykule no możemy spróbować włączymy chromevoxa

1:17ciekawa sprawa że emoji też się czytają przez screen reader

1:22zgodnie z ich oficjalną nazwą według specyfikacji emoji tak jest specyfikacja

1:26emoji to nie jest wymysł apple i możemy czytać sobie tak stronę

1:31no i to jest jakiś paragraf który zawiera w sobie zarówno treści po angielsku

1:35jak i po hiszpańsku możemy go posłuchać

1:43i tu już screen reader przeczytał to z akcentem angielskim definido

1:48to nie jest słówko angielskie i nie powinno być czytane definido tylko definido

1:52i tak samo indefinido tak bardzo po polsku a nie indefinido

1:56to żeby screen reader czytał to w ten sposób możemy osiągnąć właśnie za pomocą zadeklarowania

2:01języka poprzez atrybut lang możemy to zrobić

2:06na wszystkich słówkach angielskich więc zrobimy to tutaj używając

2:10po prostu semantycznie transparentnego spana już o tym wspomniałem że z spany

2:14i divy są transparentne sematycznie czyli nie wnoszą żadnej informacji przez

2:19co nie zostaną przeczytane w żaden specjalny sposób przez czytniki ekranowe natomiast

2:23jeśli na spanie nadamy atrybut lang ustawione na s czyli

2:27to jest akurat kod kraju dla hiszpanii i

2:31zamkniemy go na końcu tego słowa no to de facto mówimy czytnikowi ekranowemu

2:36że to słowo jest po hiszpańsku no i tak samo możemy zrobić z indefinido span

2:41lang s no i zamykamy spana za

2:45słowem no i tutaj możemy ustawić na całym blockquote

2:49lang na hiszpański i lang

2:54na hiszpański o przepraszam tutaj jest angielski

2:59a tu jest drugi hiszpański zapiszemy

3:04i zobaczmy jak teraz chromevox to czyta

3:13jeśli nie umiecie mówić po hiszpańsku generalnie jest

3:17to dalej przeczytane z angielskim akcentem ja też nie mówię za dobrze po hiszpańsku

3:21ale powiedzmy że to powinno być disculpa fernando me passas

3:25la sal por favor a nie

3:30na pewno nie por favor w

3:34związku z czym jaki tu jest wniosek no wniosek jest taki że niestety chromevox nie potrafi

3:38w langa natomiast screen alternatywny dla mac os

3:42już potrafi czyli voiceover więc tylko żeby

3:47przedstawić jak to powinno działać włączę voiceover czyli klawisz

3:51funkcyjny command f5

3:55tak i to jest głos

3:59daniela

4:03i voiceover nam jeszcze

4:08mówi jak nawigować się po stronie więc teraz możemy nacisnąć modyficator

4:12voiceover z shiftem i strzałkę w dół żeby wejść do treści no i ta treść

4:16zostanie przeczytana przez voiceover i teraz jeżeli przejdziemy do następnego elementu

4:25nie coś nam jeszcze nie przeczytał jeszcze raz to spróbujmy

4:29puścić

4:33bardzo ciekawe wejdźmy tu

4:39z jakiegoś powodu

4:43voiceover tutaj nam tego też tego nie przeczytał pozwólcie mi tutaj zdebugować

4:47na chwilę voiceover ok ja tutaj to szybko zdebugowałem

4:52generalnie czasami jest tak że na mac się to zatnie i trzeba wejść w

4:56ustawienia voiceover utility i po prostu przywrócić to do ustawień fabrycznych więc

5:00generalnie jeżeli wrócimy tutaj do poprzedniego tekstu

5:13tak przeczytało nam to z angielskim definitywnie akcentem no

5:17i teraz wchodzimy na sekcję przetłumaczoną na hiszpański która tutaj ma lang

5:21ustawiony na s

5:34no i tu widać że wymowa jest zupełnie inna i tutaj akurat

5:38nam przyłączyło na damski głos no i to znaczy po angielsku excuse me fernando

5:42co po polsku

5:47znaczy przepraszam fernando czy mógłbyś podać mi sól proszę no

5:51i tak oczywiście możemy nawigować się po całej stronie aby sekcje które były

5:55w języku angielskim były czytane po angielsku fragmenty tekstu które są w języku

5:59hiszpańskim były czytane po hiszpańsku no i dowolny inny język też

6:03powinien generalnie działać i działa na większości czytników ekranowych natomiast na chromvox

6:07nie udało mi się tego skonfigurować tak aby działało chociaż raz więc podejrzewam że

6:11chromevox nie ma takich uprawnień systemowych żeby dobrać się do innych głosów jeśli

6:16wam się natomiast uda skonfigurować chromevox do tego dajcie mi proszę znać ja jestem bardzo ciekawy jak to

6:20zrobić no i co możemy dalej z tym zrobić zamkniemy voiceover na pewno i

6:24to jesteś też ważne że jeżeli mamy stronę w jakimś konkretnym języku no

6:28może nam nie chcieć żeby niektóre rzeczy były translatowalne czyli google translate

6:32może nam tłumaczyć część stron jeżeli wkleimy linka do google translate no

6:36to wtedy faktycznie cała strona nam przetłumaczy się na język jaki chcemy ale możemy nie

6:40chcieć żeby część rzeczy się tłumaczyła ponieważ w tym wypadku na przykład uczymy się języka

6:45hiszpańskiego no to możemy dać atrybut translate ustawiony na no i

6:49wtedy teoretycznie silniki które zajmują się tłumaczeniem

6:53treści no powinny zignorować te słowa i zostawić je w języku jaki zadeklarowaliśmy

6:58więc możemy zostawić tutaj lang s translate no i

7:04tak samo lang s translate no nie powinniśmy dawać tego

7:08tutaj do langa do en czyli dla całego html bo wtedy w ogóle

7:12strona nam się nie przetłumaczy a to nie o to chodzi my chcemy po prostu mieć możliwość przetłumaczonego

7:17artykułu który tłumaczy hiszpańskie zwroty w naszym

7:21języku na hiszpański więc hiszpański w tym wypadku nie powinien być tłumaczony tak

7:25samo jeżeli tworzymy blog o css no to nie chcemy tłumaczyć display

7:30none na wyświetlacz żaden to nie ma żadnego sensu i nie będzie działał

7:34w css więc możemy tam też dać translate no i english ustawić jako język w

7:38atrybucie lang to jest o tyle też fajne że możemy teraz wykorzystać to w stylach

7:43czyli możemy ostylować elementy po atrybucie ustawiając

7:47lang na s czli wszystkie elementy które mają język hiszpański

7:51możemy im zmieć kolor i ustawimy to na pomarańczowy

7:56z tej palety barw którą ja wybrałem to są css custom properties zapisujemy

8:00i widzimy już na pierwszy rzut oka które słówka są hiszpańskie i które powinny

8:05być przeczytane w inny sposób to jest bardzo fajna rzecz polecam stylowanie

8:09po atrybutach w ten sposób jest naprawdę super ostatnią rzeczą w kontekście języka

8:13o której chciałem powiedzieć jest atrybut direction jak wiemy po polsku piszemy

8:17od lewej do prawej z góry do dołu no i w większości krajów zachodnich

8:21piszemy właśnie w ten sposób natomiast są języki które mają inny szyk

8:25zdania na przykład arabski piszemy tam od prawej do lewej z góry na dół w chińskim

8:30piszemy w chińskim tradycyjnym piszemy od góry do dołu z

8:34lewej do prawej czli treści są najpierw wpisane w ten sposób później

8:38tak później tak generalnie przeglądarka z reguły sobie z tym radzi ale

8:43jeżeli chcemy jawnie zadeklarować w jakim języku pisana jest treść

8:47a tak naprawdę z której strony czytać tą treść no to możemy

8:51użyć atrybutu dir jak direction no i tutaj mamy trzy

8:55możliwości jedna to jest auto czyli to jest ta automatyczna opcja ltr czyli left to right

8:59czyli od lewej do prawej no i rtl

9:03czyli od prawej do lewej dla hiszpańskiego i angielskiego będzie

9:08to ltr ponieważ czytane od lewej do prawej i co ciekawe można tego

9:12direction też użyć w css czyli nie musimy tego tutaj ustawiać możemy

9:18też po prostu na o tutaj żeby nie było błędu możemy

9:22ustawić po prostu na body direction już tutaj w pełnej

9:26formie nie skróconej nie dir ltr no i efekt będzie generalnie

9:31ten sam a możemy to kontrolować poziom css więc to jest naprawdę bardzo fajne co

9:35jest ciekawe to w przypadku kiedy zmieniamy direction zmienia się też

9:39położnie scroll bara czyli domyślnie dla języków które piszą od lewej do prawej

9:43scroll bar znajduje się po prawej stronie natomiast jeżeli zmienimy to na rtl możemy to

9:47podejrzeć w ogóle jak to wygląda o treść wygląda

9:51teraz ten sposób i tutaj stylowanie nam się rozjechało ponieważ ustawiamy tutaj

9:55border-left a tutaj już treść jest po prawej więc to też jest bardzo ciekawe

9:59case w kontekście jakby naszych layoutów które musimy dostosowywać do takich

10:04przypadków no i tutaj scroll bar znajdowałby się po lewej stronie nie po prawej ciekawa

10:08sprawa polecam się tym zainteresować ale minimum które warto robić dla dostępności

10:13w kontekście języka jest używanie atrybutu lang przede wszystkim dla całego

10:17dokumentu no i jeśli mamy jakieś słówka które są w innym języku na

10:22przykład te dekoracje css czy słowa które po prostu nie powinny być

10:26tłumaczone wstawiamy tam lang z odpowiednią wartością i możemy dać

10:30też translate na no i wtedy silniki mogą to respektować lub nie