Accessibility: Nieskalowalny tekst

0:00W tej lekcji opowiem o skalowalnym tekście generalnie

0:04tworząc strony internetowe bardzo często korzystamy z pikseli czyli wartości

0:08która jest absolutna piksele będą zawsze w tym samym rozmiarze wyświetlane

0:13jakie zadeklarujemy oczywiście to się różni w zależności od gęstości

0:17pikseli na wyświetlaczu na retinie 16 pikseli nie będzie wyglądało tak

0:21samo jak 16 pikseli na innym wyświetlaczu generalnie obietnicą

0:25które piksele dają jest absolutne pozycjonowanie

0:29tak jakby miały one się wyświetlać jest to bardzo szeroki temat to co chciałem opowiedzieć

0:33w tym w tej konkretnej lekcji tutaj na przykładzie woodworkingu uczyli

0:38tym konkretnym przypadku jak wkręcić śrubę w deskę tak by ona po

0:42prostu nie pękła że dla niektórych użytkowników tekst domyślny

0:46może być niestety zbyt mały no i co w takich sytuacjach użytkownik

0:50może zrobić jeżeli użytkownik jest na urządzeniu mobilnym no to już ustaliliśmy

0:55że może użyć gestu pinch to zoom żeby powiększyć sobie interfejs

0:59chyba że faktycznie będzie się znajdywało tutaj user scalable no user scalable

1:04no wyłącza możliwość pinch to zoom i to akurat jest widoczne u

1:08nas w tym przykładzie więc to jest bardzo zła praktyka takiech rzeczy proszę nie

1:12robić to możemy stąd usunąć od razu i to wiemy że to już jest o wiele lepiej bo

1:17po prostu jeżeli tekst będzie za mały na to użytkownik sobie zrobi ten gest i tekst

1:21będzie dla niego większy mniej oczywistą rzeczą jest sytuacja jeżeli chodzi o urządzenia

1:26stacjonarne desktopy jeżeli mamy zbyt mały tekst no to jest tutaj kilka możliwości

1:30którymi możemy się ratować żeby go powiększyć jednym z nich jest użycie

1:34albo controla i gałki myszy aby po prostu

1:39go zwiększyć można tego użyć też control plus command plus w zależności

1:43od systemu operacyjnego no i wtedy będziemy mieli takie oto przybliżenie

1:47jest jakby ok rozwiązanie na chwilę natomiast wyobraźcie

1:51sobie że do każdej strony która wam nie pasuje musicie zrobić sobie control

1:55plus control minus i te właściwości nie zapisują się pomiędzy przejściem w kartach bo tak się

2:00dzieje w większości przeglądarek firefox w wersji no nie chcę skłamać w

2:04jakiejś nowszych releases z stycznia 2020 udostępnił

2:08możliwość ustawienia zooma dla całej przeglądarki czyli taki

2:12zoom jak tutaj robimy sobie w ten sposób może być stały dla każdej podstrony którą

2:16ustalimy z tego co wiem inne przeglądarki takiej możliwości nie dają

2:21to co dają inne przeglądarki w tym firefox jest możliwość

2:25zmiany domyślnego font-size dla przeglądarki czy jeżeli

2:29wejdziemy sobie w tutaj w ustawienia na macu możecie to zrobić za pomocą command przecinek

2:33tylko tutaj w tym podglądzie nie mogę tego zrobić więc ja może po prostu otworzę

2:37tutaj nowe okno chrome no i tutaj przejdziemy sobie

2:41do localhost 3000 i wejdziemy

2:45tutaj w ten sposób więc jesli weźmiemy sobie w ustawienia wejdziemy czyli

2:50command przecinek no to mamy możliwość zmiany rozmiarów font size

2:54możemy tutaj wpisać font i widzimy że domyślnie jest medium

2:58recommended jeżeli zmieni to sobie na very large to widzimy że tutaj

3:02interfejs już się zupełnie zmienił natomiast na stronie z jakiegoś

3:06powodu nie przeniesiemy sobie tutaj ten woodworking i otworzymy

3:11ten stąd no i zmniejszymy okienko

3:15będzie o wiele wygodniej no i teraz command przecinek będzie nam działał jak widzimy że

3:19tutaj mamy już font size ustawiony na very large jeśli

3:23to zamkniemy to jakby nie zmienia to w ogóle naszego wyglądu dlaczego otóż

3:27dlatego że w naszym przykładzie użyte jest pozycjonowanie ustalanie rozmiaru

3:31tak naprawdę naszego fonta za pomocą pikseli czyli całe nasze body będzie

3:35miało domyślne 16 pikseli które jakby jest takim standardem dla większości przeglądarek

3:39jako ustawienie domyślne więc to wygląda ok na większości przeglądarek

3:43które nie są zupełnie w żaden sposób skonfigurowane możemy to zmienić i faktycznie widzimy

3:47że już ten tekst wygląda zupełnie inaczej dlaczego ponieważ usuwając

3:52tą regułę uwolniliśmy możliwość przeglądarki do resize tego

3:56tekstu jeśli zmienimy teraz ten font na standardowy

4:01i zamkniemy no to znowu ta strona wygląda tak samo jak wyglądała z pikselami tak

4:05tutaj nie ma żadnej różnicy tu już się strona przeładowuje wygląda identycznie

4:09tak samo natomiast bez tego dajemy użytkownikowi możliwość zmiany

4:14tego z poziomu przeglądarki niektórzy mogą sobie ustawić mniejszą czcionkę ponieważ

4:19tak naprawdę mają na przykład okulary dodatnie no i wolą mieć mniejszy tekst przed sobą

4:23jest kilka opinii w internecie że generalnie nie powinno się tym

4:27przejmować że można pisać wszystko w pikselach jak to jest no bo jeżeli ktoś komuś

4:31to faktycznie przeszkadza to nie będzie tego zmieniał na poziomie przeglądarki tylko

4:35zmień to w systemie i o ile jest to poniekąd prawdziwe że można zmienić to

4:39ustawienie na poziomie systemu i wtedy nawet piksele zostaną zeskalowane

4:43w górę nie pokrywa to w pełni idei dostępności ponieważ

4:47zabieramy użytkownikowi feature które są tam ale

4:52my z naszego powiedzmy lenistwa programistycznego no odbieramy użytkownikowi

4:56możliwość customizacji z poziomu przeglądarki a dlaczego ktoś mógłby chcieć to robić no załóżmy

5:00że mamy jeden komputer współdzielony na całą rodzinę no i babcia korzysta

5:04z chrome o jakimś profilu takim albo korzysta z internet explorera

5:09nie wiem i chcemy żeby babcia miała większy tekst no bo babcia niedowidzi ale

5:13dla nas nie ma to większego sensu więc zmiana ustawień systemowych nie

5:17zadziałała by dla nas w takim przypadku a idea jednego komputera dla

5:21całej rodziny wcale nie jest tak nowa zwłaszcza że jest dużo rodzin ubogich

5:26dalej które też korzystają z internetu więc generalnie jedna prosta zasada

5:30jeżeli jest jakiś mechanizm który został zaimplementowany przez przeglądarki działa

5:34to nie psujmy go proszę i nie brońmy się argumentem że można to

5:38zmienić na poziomie systemu i to i tak będzie działać nawet jeżeli zrobimy to sposób niepoprawy

5:43który nie podąża za dobrymi praktykami wrzucę wam w linkach generalnie źródła

5:47do których się teraz odnoszę jak możemy tworzyć nasze layout żeby były dostępne

5:51możemy użyć remów czyli jednostek relatywnych remy

5:55różnią się o emów w tym że remy odnoszą się jakby do core całego

5:59dokumentu czyli są one bezwzględne a emy są względne jeżeli

6:03tutaj zmienimy od razu też powiedzmy na jednego rema marginesy

6:07i na 1,4 rema line-height font-size możemy

6:11na 1 rem wszędzie nic się nie zmieniło bo mamy

6:16medium size to w tym momencie zadziała nam oczywiście

6:20ta funkcja i tekst jest większy ale

6:24co ciekawe jeśli będziemy się odnosić do poszczególnych elementów poprzez

6:28emy to one będą relatywne do tego do rozmiaru swojego

6:32rodzica to znaczy jeżeli ustawimy na a font-size powiedzmy

6:372 em to będzie to dwukrotność rozmiaru rodzica jeżeli ustalimy

6:42to na 0,8 em no to będzie to 80%

6:46rozmiaru rodzica czyli w tym wypadku body niektórzy powiedzą że może

6:50to być ciężkie jeżeli chodzi o tłumaczenie designów do html

6:54i css jeżeli mam na przykład plik psd photoshopa bo niektóre

6:59agencje dalej w takich formatach dostarczają nam informacje no to wszystko jest w pikselach

7:03na i trzeba w tych pikselach robić nie trzeba tego robić w pikselach jest kilka sposobów

7:07na to żeby pisać tekst który będzie się skalował a jednocześnie odnosząc się do

7:12faktycznej relacji rozmiarów tak jak było na designie jednym

7:16z nich jest ustalenie po prostu na body font-size 16

7:21pikseli a całą resztę robienie przepraszam nie font-size 16 pikseli tylko

7:25oczywiście 62.25 dlaczego otóż

7:30jakby jest to po prostu obliczone że tyle będzie to 10 pikseli i teraz

7:34możemy pisać w remach na zasadzie tak jakby to były piksele czyli 1 rem

7:38będzie to 10 pikseli czyli jeśli chcielibyśmy ustawić na czymś font-size 16

7:43pikseli to może napisać 1.6 rem i będziemy to mieli w ten sam sposób ale jeśli

7:47ktoś zmieni rozmiar według tego co zostało zadeklarowane

7:51w przeglądarce no to będzie mu się ten tekst oczywiście skalował jakby minus tego

7:55jest taki że po pierwsze domyślnie serwujemy coś co jest o te 30

8:00ileś procent mniejsze niż to co użytkownik zarequestował

8:05czy jeżeli nie zrobimy takiej reguły na body która będzie nadpisywać wszystkie domyślne style

8:09niektóre elementy interfejsu mogą być bardzo za małe jeżeli nad tym nie

8:13panujemy a jeżeli korzystamy z preprocesorów css jak na przykład sass less

8:17stylus jest ich bardzo dużo no to możemy skorzystać ze specjalnego mixinu

8:21który pozwoli nam pisać wartość w pikselach i sam automatycznie będzie to tłumaczył na

8:25remy jest to jakby dodatkowy kroko o którym trzeba pamiętać natomiast jeżeli jesteście

8:29na projekcie front-endowym który ma już tam niewiem czytaj skrypta czy sasa

8:33czy granta webpacka generalnie jakikolwiek module bundler

8:38czy task runner możecie skorzystać z tego typu mixinów i będzie to o wiele

8:42lepsze niż ustawienie pikseli na stronie no

8:46i oczywiście jakby sam rozmiar wyświetlania nie wpływa zupełnie na czytniki ekranowe

8:50ponieważ one czytają treść i nie zwracają uwagi na to jakiego coś jest rozmiaru

8:54na stronie czyli musimy dalej używać semantycznych tagów jak na przykład właśnie headingi paragrafy

8:59artykuły jeżeli chcemy coś uwydatnić dla użytkownika screen

9:04readera no i na szczęście użytkownicy screen readerów mogą dowolnie modulować

9:08głos który jest do nich mówiony czyli tak jak my tutaj zmieniamy rozmiar wyświetlanego

9:12tekstu no to nie możemy wpływać na pitch tempo czy

9:16generalnie nasycenie głosu który do nas mówi z za ekranu co bym chciał

9:21żebyście wyjęli z tej lekcji nie stylujcie w pikselach to jest najważniejsze czy będziecie

9:25używali remów emów czy procentów na body czy jakiegoś mixina

9:29css-owego nie ma to znaczenia po prostu dajcie użytkownikowi możliwość dostosowywania

9:33rozmiaru czcionki z poziomu interfejsu przeglądarki