Accessibility: Poszerzanie horyzontów

0:00Cześć w tej lekcji powiem ci dlaczego warto się

0:04tym zajmować dlaczego warto zajmować się accessibility czyli dostępnością w sieci

0:08według mnie to co mnie interesuje faktycznie w tym zagadnieniu jest

0:13to że to jest bardzo bardzo szeroki temat który tak naprawdę zahacza

0:17o wiele różnych aspektów tworzenia produktów jeśli

0:21jesteś znudzony front-endem czy back-endem znasz już różne wzorce projektowe

0:26design patterny umiesz radzić sobie z różnymi błędami przeglądarek

0:30z różnicami między nimi no to accessibility jest bardzo dobrym

0:34tematem żeby po prostu poszerzyć swoje horyzonty na

0:39przykład jeśli chodzi o semantyczny html no to w 2014 roku

0:43html5 stał się faktycznie obecnym standardem jeżeli chodzi o html

0:47w sieci no ale oczywiście ten html już też wcześniej istniał

0:52już w 2010 mieliśmy pierwsze przesłanki jak to sieć powinna

0:57wyglądać pod kątem markupu pod kątem semantyki w 2012

1:01mieliśmy już też dużo znaczników do dyspozycji no i ten semantyczny

1:06html bardzo mocno przekłada się właśnie na dostępność sieci często

1:11zdarza się tak że frontendowcy nie znają powodu

1:15dlaczego mają korzystać z konkretnego znacznika html5 na przykład

1:20jak main aside article tych znaczników

1:24jest oczywiście bardzo dużo no i po prostu chcą żeby coś wyglądało dobrze więc korzystają

1:29z diva spana które tak naprawdę nie mają żadnej treści semantycznej

1:33czyli nie niosą dodatkowych informacji same w sobie są

1:37tak jakby przeźroczyste jeśli chodzi o treść no

1:42i jeśli tworzymy różnego rodzaju customowe komponenty na przykład czyli

1:46jakieś checkboxy radio buttony no to jeżeli zrobimy

1:50coś takiego na divach to tak naprawdę różne parsery czy na przykład

1:54czytniki ekranowe nie będą w stanie skorzystać z tego typu

1:58informacji więc accessibility jest bardzo mocno napędzane

2:02przez semantyczny html i też łatwo jest zrozumieć semantyczny html poprzez

2:07accessibility bo widzimy jego faktycznie zastosowanie jest multum stron

2:11które mówią o temacie accessibility w tym semantycznych elementów czytników

2:16ekranowych różnych trików więc to jest bardzo duże pole do popisu strona

2:20WebAIM którą też będziemy omawiać w następnych lekcjach jest jednym z takich źródeł

2:25jeśli już jesteśmy przy html-u no to poza semantycznymi tagami są

2:29też atrybuty aria są to tak jakby dodatkowe informacje

2:33których nie jesteśmy w stanie zawrzeć tylko i wyłącznie poprzez

2:37semantyczne taki takie jak main aside button link

2:41które uzupełniają właśnie semantyczny html o te dodatkowe

2:45informacje na przykład jesteśmy w stanie dać informacje

2:50tylko do czytników ekranowych że dany element powinien być ukryty z drzewa dostępności

2:54albo dać informacje które normalnie nie są widoczne dla użytkowników

2:58korzystających z przeglądarek powiedzmy normalnie czyli wizualny

3:02sposób korzystając z myszy ale jeżeli ktoś będzie używał czytników

3:07ekranowych bądź innych parserów to będzie miał te dodatkowe informacje

3:11zawarte aria jest naprawdę bardzo dużym tematem jest

3:15podejrzewam że ponad 50 różnych atrybutów aria

3:19który robią bardzo różne rzeczy no i jest cała specyfikacja na ten temat

3:24jeżeli ktoś faktycznie chce się tym zainteresować no to jest tej treści

3:28bardzo bardzo dużo a to jest tylko aria i to są tylko atrybuty

3:33które mają uzupełnić nam treści których html nam początkowo nie

3:37daje ponadto mamy też standard web content accessibility guidelines

3:42czyli WCAG są wersje 2.0 2.1

3:47generalnie są to wytyczne które nasze interfejsy

3:52powinny spełniać jeśli chodzi o dostępność czyli na przykład może

3:56tutaj być poruszany kontrast może tutaj być poruszone możliwość

4:00dostosowywania skrótów klawiszowych na stronie jak

4:05konkretne elementy powinny się zachowywać czyli radio buttony

4:09powinny reagować również na klawiaturę powinny przekazywać

4:14odpowiednie treści czytnikom ekranowym czy powinny też wysyłać dane

4:18w odpowiednim formacie jeśli zawarte są w formularzach html-owych istnieje

4:23bardzo dużo narzędzi które pozwalają nam testować dostępność jednym

4:28z takich narzędzi jest axe i axe właśnie pozwala nam w sposób

4:32automatyczny sprawdzić niektóre błędy dostępności no i oczywiście poprawić naszą

4:36witrynę w oparciu o wynik tego narzędzia takich narzędzi

4:40jest bardzo dużo narzędzia będziemy omawiać w kolejnych lekcjach i właśnie ten

4:44duży wybór narzędzi jest jednym z powodów dla których możemy

4:49rozważyć accessibility ponieważ każde z narzędzi pozwala sprawdzić

4:53różne rzeczy na przykład kontrast jak elementy będą dostępne dla czytników

4:57ekranowych czy elementy spełniają dobre

5:01praktyki w kontekście UX-a czyli user experience i możemy takich narzędzi

5:05użyć również do automatyzacji procesu tworzenia naszego oprogramowania

5:09ponadto jest bardzo duża społeczność za accessibility

5:13jeśli na przykład odwiedzić teraz twittera to zobaczysz bardzo

5:18dużo tweetów na różne tematy powiązane z dostępnością na przykład

5:22możesz znaleźć tweety powiązane z dostępnością w grach czyli

5:26jak tworzyć faktycznie gry które będą dostępne które

5:30można scustomizować dla każdego gracza które nie wykluczają

5:34tak naprawdę nikogo czy poprzez swój poziom trudności czy poprzez

5:39paletę barw z której korzystają oczywiście są też artykuły związane

5:43ze zwyczajnym web developmentem i jako że accessibility jest

5:47tak szerokim tematem na pewno znajdziesz aspekty których jeszcze

5:51nie znałeś ponieważ nie jest to powiedzmy binarne zagadnienie

5:55techniczne to znaczy możesz nauczyć się różnych dobrych praktyk natomiast

5:59tak jak w user experience tu chodzi o dostosowywanie się do użytkownika

6:04i dostarczanie jak najlepszych wrażeń dla niego a ludzie nie są binarnii

6:08różnią się na bardzo wielu płaszczyznach i w idealnym środowisk faktycznie

6:12chcielibyśmy adresować problemy wszystkich naszych użytkowników tak by

6:16mogli korzystać z naszych produktów w sposób wygodny dla nich na

6:20na przełomie kursu poznasz bardzo dużo źródeł narzędzi czy technik

6:24które pozwolą ci dostosowywać się do accessibility i na pewno będziesz

6:30wiedział o wiele więcej ogólnie o sieci jako takiej jeśli

6:35zainteresujesz się właśnie tym tematem