Accessibility: Linki bez kontekstu

0:00W tej lekcji opowiem troszkę o linkach bez kontekstu generalnie

0:05tutaj mamy przykład artykułu o camden town czyli dzielnicy

0:09londynu bardzo fajne klimatyczne miejsce polecam generalnie

0:13no artykuł jak artykuł jest to tak naprawdę wycinek z wikipedii możemy

0:17tutaj włączyć sobie homevox no i

0:22oczywiście czytnik ekranowy znacznie nam anonsować rzeczy od góry do

0:26dołu czyli on na początku stwierdził nam co jest na tym obrazku no

0:31bo ustaliliśmy tutaj alta jako upper camden high street

0:35a następnie przeczytał camden town więc to jest pytanie czy to

0:39jest faktycznie istotna informacja dla artykułu czy to że to jest

0:43upper camden high street jest istotne być może nie no bo jak widzimy czytnik

0:47ekranowy przeczytał generalnie te dwie rzeczy od razu no i to jest domyślne

0:51jakby zachowanie czytników ekranowych niezależnie od tego czy to chromevox czy

0:55voiceover czytniki ekranowe będą czytały stronę od początku do końca

0:59a jeżeli im się nie przerwie na to po prostu będą leciały z góry na dół więc generalnie

1:04tak to się zaczyna no i jeżeli będziemy to czytaj dalej

1:20zatrzymał

1:25się na of no bo tutaj mam linka no i wpisujemy

1:29tak no i generalnie te linki będą tak czytane jak są czyli

1:33o przeczytało nam jeszcze kropkę to ciekawe bo niektóre czytniki

1:37ekranowy tego nie czytają chromevox jak widać czyta pojedynczy znak kropki jako

1:42dot czyli kropkę no i tak możemy polecieć po każdym paragrafie

1:46i te linki możemy dostać

1:50się do nich na kilka sposobów oczywiście możemy lecieć chromevox strzałka

1:55w dół aż do nich dojdziemy możemy wyszukać linki na stronie z

1:59tego co pamiętam na zasadzie chromevox l i l

2:03a command chromevox l l

2:07wyszukuje

2:13wydaje mi się że listę możemy jeszcze raz to sprawdzić

2:18link list dobrze więc możemy

2:22wpisywać słowa których szukamy na stronie na przykład london

2:27i on nam będzie dopasowywał

2:31będzie nam dopasowywał wszystkie

2:35linki które pasują do tego konkretnego schematu

2:39w związku z czym możemy wyszukiwać te linki w ten sposób albo możemy też się nawigować

2:44strzałkami w tym momencie aby wyszukiwać wszystkie linki na stronie

2:59natomiast ta funkcjonalność jest prościej dostępna za pomocą po prostu przycisku tab więc

3:03tabując się po stronie możemy złapać się na dowolnym interaktywnym elemencie może

3:08to być button może to być element formularza może to być link więc jeżeli chodzi nam tylko o

3:12nawigację po linkach no to oczywiście możemy to zrobić za pomocą czytnika ekranowego natomiast

3:17tutaj mamy tylko i wyłącznie linki i jeżeli byśmy słuchali tylko i wyłącznie linków

3:21nie patrząc na kontekst no to zobaczmy ile z nich będziemy w stanie zrozumieć o czym one są

3:25charing cross no ok

3:29no jest takie miejsce w londynie więc link pewnie będzie o tym proste

3:34london borough of camden też jest takie miejsce więc

3:38prawdopodobnie jest tam po prostu konkretniej wytłumaczone

3:43kultura alternatywna prawdopodobnie będzie

3:47coś więcej o tym no i przejdziemy do następnego linka

3:51no i to jest let's go no i ten link już nie jest

3:56linkiem z kontekstem ponieważ tak naprawdę nie wiemy dokąd nas przekieruje let's go zupełnie

4:01nic nie mówi użytkownikowi czytnika ekranowego ponieważ zakładając

4:05że nie nawigował się od góry do dołu może nie mieć tego kontekstu ponieważ

4:09nawigował się po prostu po jakby takich landmarkach po punktach nawigacyjnych tutaj

4:13faktycznie jest to napisane see the turn around camden yourself natomiast żeby

4:18dowiedzieć się tej informacji musimy najpierw przez to przejść więc ten link

4:22nie posiada kontekstu i osoba korzystająca z czytnika ekranowego niewidząca

4:26która nie będzie widziała tego co tutaj my widzimy nie będzie wiedziała dokąd

4:30ten link nas przenosi i to jest bardzo częsty przypadek jeżeli na przykład chodzi

4:35o sklepy online że mamy kartę z siedmioma produktami no

4:39i do każdego z tych produktów jest przycisk kup teraz jeżeli nawigujemy się po tabem

4:43no to słyszymy tylko i wyłącznie kup teraz kup teraz kup

4:47teraz ale nie wiemy co kupujemy i tak naprawdę czy to jest produkt o

4:51który nam chodzi musimy wejść na stronę przeczytać co tam się dzieje ewentualnie

4:56próbować nawigować się w okolicach tego linku i jest to po prostu niewygodne i jest to słaby user

5:00experience więc co można zrobić możemy wpisać tutaj dodatkowo

5:05informację zamiast po prostu let's go let's go and see camden

5:10zapisujemy

5:14możemy

5:19też użyć do tego klasy visual hidden i ten fragment tekstu

5:23jakby ukryć przed użytkownikiem natomiast do tego dojdziemy

5:27w kolejnych lekcjach gdzie będę mówił jak projektować treść tylko

5:31i wyłącznie dla czytników ekranowych a jak tylko i wyłącznie dla użytkowników widzących natomiast

5:35uzupełnienie tego linku w sposób widoczny też jest jak najbardziej ok no bo możemy

5:40wtedy tak naprawdę pozbyć się tego elementu i napisać tak naprawdę

5:44to mógłby być tekst tego linku see the tourn

5:48around camden yourself no i zapisujemy to możemy

5:52usunąć no i od razu wiadomo że

6:00to będzie odnośnik do jakiegoś toura po camden linki

6:04bez kontekstu to zmora przede wszystkim osób niewidomych

6:08bądź niedowidzących jeżeli korzystamy z czytnika ekranowego no on

6:12przeczyta tylko i wyłącznie to co jest w danym znaczniku jeżeli nie użyjemy do tego specjalnych

6:17technik w związku z czym linki z kontekstem są bardzo ważne i nawet

6:21takie proste linki jak charing cross dają nam ten kontekst ponieważ wiemy

6:25o czym one będą linki typu let's go by now i don't know

6:29dużo innych może być tutaj przykładów nie są wymowne

6:33ponieważ nie wiemy co się stanie po ich actywacji każdy link powinien

6:37być zaanonsowany przez screen reader tak abyśmy

6:42wiedzieli aby użytkownik wiedział co stanie się po tym jak w niego wejdziemy