Accessibility: Accessibility Insights

0:00W tej lekcji opowiem ci o narzędziu

0:04accessibility insights i jest to faktycznie kolejne rozszerzenie do chrome

0:08czyli to już nie jest strona internetowa które ułatwia audytowanie stron

0:12internetowych pod kątem dostępności accessibility insights możemy pobrać

0:16do chrome wydaje mi się że jest też dostępny na firefoxa natomiast

0:20jeżeli wejdziecie na stronę accessibilityinsights.io no

0:24to widzimy tutaj że jest opis rozwiąż problemy z dostępnością zanim

0:29dotrą do twoich użytkowników i jest to faktycznie bardzo fajne narzędzie pod

0:33tym kontem z tego co wiem accessibility insights jest tworzone przez microsoft microsoft

0:38ostatnimi czasy bardzo dużą wagę kładzie na accessibility generalnie

0:44widać to po ich systemie operacyjnym po inicjatywie związanymi z grami bardzo fajną

0:48robi robotę microsoft w tym kontekście no i dodajemy

0:52na chrome web store accessibility insights widzimy że zostało dodane

0:56no i możemy sobie zaudytować tak samo stronę accessibility

1:00w google

1:05jak to działa no klikamy analogicznie do tego co zrobiliśmy

1:09w chromevox

1:15na ikonkę w pasku możemy zgodzić się na jakieś

1:19zbieranie danych statystycznych no i tutaj mamy kilka opcji

1:23jak chcemy audytować naszą stronę weźmy fastpassa fastpass

1:28polega na tym że o proszę google jako wyszukiwarka ma

1:32pięć błędów dostępnościowych na swojej stronie głównej po

1:37wyszukaniu jakiegoś słowa kluczowego generalnie narzędzie audytuje nam stronę

1:41automatycznie więc jesteśmy w stanie od razu po uruchomieniu tego rozszerzenia wyłapać

1:45kilka błędów związanych z naszą dostępnościa możemy oczywiście każdy

1:50z nich podejrzeć i zobaczyć co jest nie tak dlaczego jest nie tak i są też

1:54proponowane rozwiązania dlatego to jest bardzo przyjemne ponieważ

1:58możemy zobaczyć fix the following required aria attribute not present aria-expanded

2:02czyli w tym wypadku chodzi o to że jakiś element który tworzy

2:08menu nie ma atrybutu aria-expanded przez co ta informacja dla

2:12czytników ekranowych nie jest propagowana i jeżeli byśmy korzystam z czytnika ekranowego

2:17no to moglibyśmy nie wiedzieć że jakieś menu nam się na przykład otworzyło

2:21to jest jakby sekcja automatycznych weryfikacji mamy

2:26też bardzo fajną sekcję do sprawdzania tab stops szczerze

2:30mówiąc to jest część tego rozszerzenia z której ja korzystam najczęściej i

2:35polega ona na tym że po prostu w momencie kiedy nawigujemy się tabem czyli

2:39to jest takie podstawowe jakby rozwiązanie jeżeli chodzi o nawigację

2:43po elementach interaktywnych po stronie czyli na przykład po linkach czy elementach formularza

2:47to pokazuje nam gdzie obecnie znajduje się nasz focus czyli umiejscowienie

2:52takiego wirtualnego wskaźnika na naszej stronie internetowej i

2:56przy tabulacji faktycznie widać gdzie znajdują się kolejne elementy

3:00interaktywne i dzięki temu możemy sprawdzić czy na przykład jedno

3:05z wymagań wcag 2.1 jest spełnione czyli flow

3:09order to znaczy że nawigacja powinna być naturalna

3:14dla języka w którym ta strona jest stworzona czyli jeżeli mamy

3:18stronę która jest powiedzmy po polsku no to powinniśmy

3:22tworzyć strony które będą się od lewej do prawej no i zawijały swój

3:26tekst na dole od góry do dołu i przy każdym takim tabie faktycznie

3:31pojawia się index elementu na który weszliśmy no

3:38i w google faktycznie działa to całkiem nieźle nie ma tutaj żadnych

3:42takich skoków niespodziewanych nie ma elementów które generalnie nie są widoczne na

3:46stronie to też jest bardzo istotne może tutaj się robi taki trochę

3:50zawijas na przykład być może ten about feedback

3:54mógł być pierwszy zamiast tego elementu który znajduje się tutaj bądź

3:59też dziwnym jest że najpierw po 18 wchodzimy na

4:03tytuł linku a dopiero później w elementy jeśli chodzi o wizualny

4:07aspekt z punktu widzenia czytników ekranowych ma to

4:11sens no bo chyba link jest bardziej istotny niż jakieś informacje o tym linku

4:15natomiast wizualnie nie jest to źle zdecydowanie nie

4:19jest to źle to jest bardzo dobry tab order natomiast czasami się tak

4:24zdarza że musi coś tam poskakać dopóki nie mamy naprawdę

4:28nienaturalnych skoków czyli na przykład lecimy z góry na dół i nagle wskakujemy

4:33gdzieś tutaj w jakąś sekcję idziemy 3 razy w dół i dopiero później tu wracamy

4:37albo stopka jest na górze z jakiegoś powodu no to generalnie nie

4:41ma z tym problemu i to jest bardzo fajne narzędzie w

4:44kontekście sprawdzania tab order jesli chodzi o kolejne

4:48funkcjonalności accessibility insights

4:53no to mamy tutaj też możliwość zrobienia audytu manualnego

4:59czyli możemy wejść sobie na stronę i

5:04ręcznie sprawdzać wymogi wcag tutaj

5:09się robi skanowanie tutaj są automatyczne właśnie sprawdzania i potem nawigując

5:14się po tej stronie po prostu korzystając z niej jako deweloperzy robimy audyt

5:18czyli taki test manualny tych zmian które się znajdują no

5:22i możemy sobie tutaj to odhaczyć czy dany element

5:26zalicza wymogi wcag czy nie no i oczywiście możemy

5:32na przykład napisać jeżeli powiedzieliśmy że czegoś nie spełnia no to możemy wytłumaczyć dlaczego

5:36to nie spełnia i tutaj jest taka bardzo długa lista jak widzicie wszystkich

5:41elementów które mogą nie działać nie jest to zdecydowanie pełna lista

5:45wcag ponieważ wcag ma bardzo długi standard ale co jest fajne ponieważ

5:49gdy skończymy mamy możliwość wyeksportowania wyników i przedstawienia

5:54tego audytu od razu w jakimś pdf czy w dowolnym innym pliku tak

5:58by na przykład agencja interaktywna z którą współpracujemy mogła

6:03od razu te rzeczy zaadresować bądź jeżeli to my jesteśmy wynajmowani

6:07jako specjaliści od accessibility możemy skorzystać z tego narzędzia aby podarować naszemu klientowi

6:12taką fajną listę dokładną z każdym konkretnym przypadkiem dlaczego

6:16coś nie zalicza wymogów wcag a które rzeczy na naszej stronie są faktycznie

6:20dobrze zaimplementowane więc accessibility websites for web są

6:24bardzo dobrym narzędziem ja najczęściej korzystam z opcji tab order

6:29oraz tego manualnego audytu jeśli faktycznie mam taką potrzebę natomiast

6:33jeśli szukacie dodatkowej opcji jak sprawdzić czy wasze strony są dostępne

6:37na pewno warto zainteresować się tym rozszerzeniem