Accessibility: Symulatory problemów ze wzrokiem

0:00Bardzo ważnymi narzędziami są

0:04też symulatory problemów ze wzrokiem czyli takie narzędzia które

0:08będą albo zabierały nam konkretny kolor ze strony albo

0:12będą dodawały różne artefakty które osoby mogą widzieć jeżeli mają

0:16jakieś faktycznie choroby zmysłu wzroku no i kilka takich

0:21narzędzi chcę dzisiaj przedstawić tutaj wybrałem na stronie whocanuse dwa

0:26kolory które bardzo źle ze sobą kontrastują jak widzicie tutaj jest półtora do jednego

0:30to jest bardzo bardzo zły kontrast natomiast ze względu na rozmiar czcionki

0:35widać tutaj ten tekst faktycznie no i jakby

0:39się uprzeć jest to czytelne the quick brown fox jumps over the lazy dog to

0:43jest taka arbuzowa strona ponieważ mamy czerwony taki różowy razem

0:47z zielonym no i teraz jaki jest problem z tym poza tym że kontrast

0:52jest niewystarczający dla większości użytkowników którzy nie mają żadnych problemów

0:56ze wzrokiem jeżeli zmniejszymy tutaj font-size do 20 powiedzmy no to bardzo

1:01ciężko jest to przeczytać nie jest to zdecydowanie komfortowe no to jeżeli cierpimy

1:05na daltonizm na przykład deuteranotropię no

1:10to nie będziemy w stanie w ogóle tego przeczytać pierwszym narzędziem które chciałem przedstawić ono

1:14jest dostępne na pewno na mac os nie jestem pewien czy jest dostępna na windowsa ale jeżeli nie

1:18jest to na pewno są alternatywne narzędzia które znajdziecie wpisując

1:22color blindness simulator w internet jest

1:27sim daltonism no i on tworzy nam

1:31tutaj takie okienko które w zależności gdzie je przestawimy tam

1:35będzie tworzył właśnie jakby tą stymulację widzenia osoby

1:39z daltonizmem i możemy się przełączać skrótami klawiszowymi pomiędzy

1:43różnymi problemami z postrzeganiem koloru no i na

1:48przykład protanotropia ten tekst jest bardzo mało czytelny jeżeli

1:53byśmy puścili dokładnie te kolory w porównywarce kontrastów

1:58no to podejrzewam że to by było też jakoś w okolicy jedynki

2:02z hakiem to zdecydowanie lepiej widać jeżeli zmniejszymy tutaj

2:06po prostu font-size no to to jest już bardzo słabo czytelny tekst no i

2:11generalnie osoby które nie widzą niektórych kolorów będą tak

2:15widziały nasz design naszą stronę co oczywiście może się przełożyć na mniejszy

2:20ruch na wiele różnych problemów generalnie są różne rodzaje daltonozmu są

2:24odmiany w których nie widzi się czerwieni i są odmiany w których nie widzi się zieleni niebieskiego

2:29i tego typu narzędzia są do tego bardzo fajne ponieważ możemy przeskakiwać pomiędzy

2:33wszystkimi dostępnymi niepełnosprawnościami no

2:38i widzieć jak nasz design się prezentuje w każdym z nich jeżeli w każdej z tych symulacji

2:42jesteśmy w stanie rozczytać się co znajduje się na designie to znaczy że jest dobrze że

2:46generalnie paleta barw jest dostępna sim daltonism

2:50jest darmową aplikacją nie trzeba za nią płacić jeżeli macie mac os no to nie

2:55będzie z tym problemu możecie z niego korzystać jeśli chodzi o symulację

2:59większej ilości problemów ze wzrokiem wewnątrz przeglądarki to jest jedno świetne

3:03rozszerzenie do tego i nazywa się nocoffee vision

3:08simulator możemy je dodać sobie ponownie z chrome web store

3:12dodajemy do chromea no i mamy możliwość uruchomienia

3:17różnego rodzaju artefaktów niektóre

3:22z nich to na przykład blur czyli rozmycie co może symulować różnego

3:26rodzaju po prostu niedowidzenie wadę wzroku utratę kontrastu ghosting

3:30snow to zachmurzenie o którym też wspomniałem cataractsy problemy

3:34z rozróżnianiem koloru tutaj możemy tak samo jak w sim daltonism wybrać sobie

3:38w jaki sposób postrzegamy kolory no i zaaplikujmy po prostu tutaj

3:43jakieś wartości damy troszkę biura i

3:48faktycznie widać że ta strona już jest generalnie mniej dostępna czyli tak

3:52może teoretycznie widzieć osoba bez okularów szczerze mówiąc jak tak

3:56na to patrzę to ja tak mniej więcej bez okularów widzę

4:01no i możemy co potestujmy inne opcje utrata kontrastu

4:05no to tutaj się robią chyba jakieś artefakty przeglądarki tak

4:09podejrzewam że być nie powinno ale tutaj faktycznie widać że jest mniejsza różnica

4:13między tymi kolorami zobaczmy co nam zrobi glare szczerze mówiąc

4:17nie wiem nie jestem ekspertem w dziedzinie optyki ale natomiast

4:21cloudiness jest to jest takie dosyć oczywiste i właśnie to są to jest ten efekt brudnych okularów

4:25o którym ja tak mówię i on też nam uniemożliwia czytanie

4:29no w tym momencie jak bym tego glare wyłączył no to też przeczytanie

4:34tutaj tego tekstu który jest pod accessibility wikipedia

4:38no to jest po prostu to ciężkie zwłaszcza jeżeli dodamy jeszcze jakieś tutaj problemy

4:42z rozróżnieniem koloru tutaj nie rozróżnienie żadnego koloru tylko jakby

4:47jasność czerń i biel powiedzmy no to generalnie

4:51nocoffiee vision simulator jest bardzo dobry jeżeli zaproponujemy komuś

4:55przeczytanie artykułu 700 słów bez żadnych nagłówków

5:00bez żadnych paragrafów bez list po prostu czysty tekst 700

5:04słów od góry do dołu właśnie z nocoffiee vision simulator i przedstawienie tej samej

5:08treści właśnie używając nagłówków list odpowiednich

5:12paragrafów odpowiedniego spacingu bardzo wtedy łatwo jest dostrzec

5:17różnice że odpowiednio ułożony content odpowiednia struktura markupu

5:21co wpływa też na warstwę wizualną będzie czytelniejsza dla

5:25osób które nienawidzą po prostu tutaj oczywiście możemy też wchodzić na temat typografii

5:30które są bardzo szerokim aspektem natomiast jeśli chodzi o symulację

5:34wzroku nocoffiee vision simulator jest o tyle fajnym rozwiązaniem ponieważ żyje

5:39wewnątrz przeglądarki jest rozszerzeniem do chrome więc tak naprawdę wszędzie gdzie

5:43mamy chrome możemy używać nocoffiee vision simulator a jeśli chcemy mieć

5:47coś bardziej uniwersalnego to możemy pokusić się o rozwiązania takie jak sim

5:52daltonism które będą nam co prawda zajmowało się tylko i wyłącznie sprawdzaniem

5:57różnicy między kolorami ale będą o wiele bardziej dokładne

6:01i pozwolą nam sprawdzać nie tylko rzeczy które znajdują się wewnątrz

6:06przeglądarki czyli strony internetowe ale również aplikacje dla

6:10naszego smartfona czy po prostu do systemu operacyjnego