Accessibility: Tekst alternatywny

0:00Cześć jednym z najbardziej popularnych błędów

0:04które deweloperzy popełniają tworząc strony internetowe nie

0:08tylko deweloperzy również osoby które zajmują się wypełnianiem danych w cms

0:13czyli contentowcy jest zapominanie o alt dla

0:17obrazków czyli tekstach alternatywny no więc możemy przejść do naszego

0:21przykładu no i zaczniemy tworzyć strukturę naszej strony

0:25stworzymy sobie element h1 czyli heading główny heading naszej witryny

0:29no i podpiszemy go jako accessibility następnie

0:33stworzymy testowy paragraf i fają rzeczą w visual studio code

0:37jest to że wpisując lorem i naciskając następnie

0:42tabulację jesteśmy w stanie podpowiedzieć sobie całą

0:46sekcję lorem ipsum czy to co w brackets czy w innych edytorach

0:50tekstu trzeba rozwiązać rozszerzeniem w visual studio code już

0:54jest zawarte i faktycznie możemy tworzyć testowy tekst szybko

0:59po prostu wpis lorem i naciskając tabulator no więc przejdźmy

1:03dalej i zduplikujmy sobie może ten paragraf no

1:07i generalnie musimy zacząć mówić o obrazkach więc stworzymy sobie obrazek src

1:11ustawimy mu na img i accessibility logo o

1:15jest to jakieś logo z internetu dam mu klasę logo zapisujemy

1:21no i fajnie tylko jest dosyć duże my chcięli byśmy żeby było troszkę

1:25mniejsze więc może przejdźmy tutaj do style ustawmy

1:29klasę logo no i ustawmy max width na

1:3480 pikseli powiedzmy może być no i teraz wygląda to już całkiem

1:38nieźle przejdziemy dalej i faktycznie zajmiemy

1:42się ustawieniem tego alta generalnie

1:46zasada jest taka że na każdym obrazku musimy ustawić alt nawet

1:51jeżeli jest to obrazek dekoracyjny to musimy wstawić alt

1:55który będzie miał pustą wartość ponieważ jest to wtedy informacja dla czytników ekranowych

1:59że to jest element dekoracyjny i nie powinien być czytany z

2:03poziomu czytnika ekranowego czyli nie wpisujemy żadnych tutaj informacji

2:08dodatkowych typu accessibility logo oczywiście

2:12jeżeli był by to jakiś serwis wasz produkt no to nie wpisujcie w alt dla

2:17obrazka my site logo to nie nie o to chodzi w dostępności

2:21i generalnie jest złą praktyką więc to po prostu usuwamy

2:26no i oczywiście nie ma to jako takiego wpływu wizualnego na nasze

2:31elementy natomiast jeśli teraz spróbujemy przeczytać sobie to

2:35za pomocą chromevox

2:41to jesteśmy teraz na accessibility heading one no i jeżeli spróbujemy

2:45poruszyć się w górę

2:49to chromevox powiedział nam wrap to bottom

2:53czyli generalnie nie ma już nic nad nim a faktycznie fizycznie w markup

2:57jest tutaj obrazek więc to że daliśmy tutaj alt

3:01o pustej wartości pozwoliło nam na to aby ten obrazek

3:05był ignorowany przez czytniki ekranowe i to jest dobrze to tutaj właśnie

3:09o to nam chodzi wyłączamy chromevox

3:13no i kontynuujemy naszą pracę więc

3:18gdybyśmy chcieli stworzyć obrazek który faktycznie ma jakąś

3:23semantyczną treść dla naszego artykułu możemy wpisać

3:27sobie tutaj na przykład leonie leonie watson

3:31jest to bardzo znana osoba w kontekście accessibility i deweloperki

3:35generalnie leonie była programistką która widziała natomiast

3:40ze względu na jej stan zdrowotny związany z cukrzycą no straciła wzrok w

3:44związku z czym tak naprawdę zna oba światy i świat w którym

3:49normalnie użytkownicy nie korzystają z czytników ekranowych no i świat

3:53niewidomych którzy muszą korzystać z czytników ekranowych żeby poruszać się po internecie więc

3:57jeśli mielibyśmy tutaj ustawić alt to w żadnym wypadku

4:02nie możemy tutaj ustawić alta pustego ponieważ jest to istotny dla naszego

4:06artykułu to jest artykuł o accessibility no i leonie

4:10pełni tutaj funkcję autorytetu o którym będziemy mówili więc

4:14możemy zacząć pisać że leonie speaking

4:18at cross goverment design meeting i

4:23jak zapiszemy to i sprawdzimy to w chromevox

4:33i tutaj mamy już informację dla czytnika ekranowego która tak naprawdę jest przekładana

4:38na syntezowany głos co się na tym obrazku

4:42znajduje i oczywiście możemy też uzupełnić tą informację to nie musi

4:46być wszystko co w tym alt chcemy zamieścić poprzez na przykład znacznik figure

4:50żeby to zrobić możemy wrócić tutaj

4:54do kodu no i może

4:58na początku zacząć od zamknięcia całego

5:04tutaj tej treści lorem ipsum

5:08w wrapper no i obok tego postawimy obrazek

5:13z lionie no

5:18i te dwa paragrafy też zamkniemy w osobnym elemencie ponieważ

5:22będziemy to pozycjonowali na flexie i po prostu będzie nam tak wygodniej więc

5:26jeśli teraz przejdziemy do styli i ustawimy sobie klasę

5:31wrapper to

5:35możemy ustawić tutaj display na flex no

5:45i możemy stworzyć naszą figurę w tym momencie ja zapiszę może to

5:49to będzie widać że faktycznie nam leyout się zmienił no i wewnątrz figury możemy umieścić cokolwiek

5:54może to być zdjęcie może to być snippet może to być fragment kodu tak naprawdę

5:58może to być nawet element audio czy video no i generalnie do elementu

6:02figure możemy dodać figcaption o

6:08tutaj coś się zepsuło usuniemy dodatkowe figcaption

6:12wrócimy i piszemy

6:17sobie kasę speaker no

6:21i tutaj damy jakąś treść uzupełniającą figcaption co jest istotne alt i

6:26figcaption nie powinny się pokrywać nie powinniśmy kopiowac sobie tego co jest tutaj widoczne

6:32w alt do figcaption bo to jest duplikacja treści

6:36i tak naprawdę czytnik ekranowy przecztyał by to 2 razy nie jest dobre żeby czytać cokolwiek

6:40dwa razy to jest duplikacja tej informacji i gdybyśmy słuchali takiej strony

6:44no to powtarzanie informacji może być irytujące więc tego generalnie nie robimy

6:48no ale możemy dać tutaj inną treść na przykład opisując co się na tym

6:52zdjęciu działo w szerszym kontekście czyli powiedzmy że w

6:57piątek 22 kwietnia 2016 roku 14

7:03spotkanie rządowego

7:08no dotyczącego mitingu

7:13to jest też copy zabrane z faktycznie strony tego wydarzenia gdzie

7:17też leonie mówiła no to generalnie możemy dać taki

7:21szerszy kontekst tego no i na końcu możemy napisać że to jest featuring

7:26leonie watson i to już faktycznie widzimy

7:31na stronie internetowej figcaption nie jest czymś co jest niewidoczne dla użytkowników

7:35korzystających z narządu wzroku ale jest dodatkową informacją zarówno

7:39na czytników ekranowych jak i dla nas więc to jest bardzo fajne i warto to rozróżnić

7:43możemy jeszcze tutaj tylko sobie zduplikować ten paragraf troszkę

7:48to uładnić dodamy

7:52tutaj na tym jeszcze figcaption jakiś

7:58padding ok no i

8:02możemy jeszcze zmniejszyć font-size żeby był troszkę mniejszy

8:06od pozostałego tekstu i generalnie jak teraz poruszamy się po tej stronie używając

8:10chromevox pierwszy

8:15jest oczywiście nagłówek potem mamy paragrafy

8:19z tekstem

8:23tak czyli mam informację na zdjęciu że leonie mówi

8:28na tym konkretnym wydarzeniu a dalej poruszając się w markup możemy

8:32dowiedzieć się więcej

8:45więc generalnie to co chciałbym żebyś

8:49wyniósł z tej lekcji to jest do każdego obrazka zawsze dawaj

8:53alt jeżeli jest to obrazek dekoracyjny i nie ma jakiejkolwiek treści

8:58potrzebnej dla użytkownika jak na przykład to logo accessibility no

9:02to możesz zostawić go pustego natomiast jeżeli obrazek ma jakieś znaczenie względem

9:07treści na przykład prezentuje jakiś autorytet który na danym wydażeniu mówił no

9:11to oczywiście trzeba je podpisać a jeżeli jest więcej informacji

9:15które chciałbyś zamieścić dotyczące tego obrazka to możesz go zamknąć w figcaption

9:19a niekoniecznie umieszczać wszystkie informacje tego typu w alt

9:24w alt powinien być jakby opis obrazka a wszelkie dodatkowe

9:28informacje mogą być w osobnych elementach używając faktycznie semantycznych

9:32elementów do tego wyrażenia