Accessibility: Czy a11y ma wpływ na SEO?

0:00Cześć w tej lekcji opowiem ci jak accessibility wpływa na

0:04seo czyli na to jak pozycjonowane są nasze strony przez wyszukiwarki

0:08internetowe takie jak google oraz jak seo wpływa na accessibility generalnie

0:12weźmy za przykład stronę wikipedii no i tu jest strona o accessibility

0:16to co charakteryzuje wikipedię że jest ona bardzo prosta i bardzo taka

0:20powiedzmy pierwotna w kontekście webowym czyli mamy bardzo proste teksty nagłówki

0:25paragrafy linki bardzo dużo linków jest to faktyczna strona internetowa

0:30którą możemy traktować jako dokument nie jako aplikację jeśli zaczniemy się tabować

0:34po wikipedii no to faktycznie widzimy na przykład skip linki jump to navigation

0:38jump to search i dopiero później zaczyna się cała treść każdy

0:42z linków jest focusowalny po odczekaniu chwilki na danym

0:47linku też pojawiają się tooltipy wbudowane w niego możemy

0:51praktycznie po każdym elemencie witryny się nawigować co prawda może

0:55tutaj tab order jest troszkę zmieniony natomiast nie

0:59jest to aż taki problem jeżeli po prostu ta treść jest dostępna co

1:03to ma do seo i accessibility generalnie w seo wszystkie

1:07treści które są zamieszczane w nagłówkach na przykład w h1 no dostają

1:11duży bust jeśli chodzi o słowa kluczowe i pozycjonowanie później

1:16na stronach wyszukiwarki internetowe robią to nie dlatego ponieważ h1

1:20czy h2 h3 h4 h5 h6 są jakimiś magicznymi elementami które

1:24z jakiegoś powodu są dobre dla seo tylko dlatego że te elementy są

1:28dobre dla dostępności użytkownicy czytników ekranowych mogą poruszać się

1:32po stronie www dzięki liście nawigacyjnej w taki sposób że

1:36będą widzieli po kolei jaki jest tytuł strony jakie są jego podtytuły podsekcje

1:41i w ten sposób mieć bardzo szybki pogląd tego co się na danej stronie znajduje

1:45jeśli otworzymy tą stronę w chrome tutaj

1:50możemy wejść na accessibility i wejść na wikipedię i

1:56włączymy czytnik ekranowy chromevoxa czyli command control a następnie a

2:01czytało nam po polsku

2:05mamy nawet możliwość przesłuchania całego artykułu

2:09nawet jeżeli nie jesteśmy użytkownikami czytników ekranowych no ale jeśli chcielibyśmy

2:14nawigować się po liście headingów możemy to zrobić za pomocą skrótu klawiszowego control

2:18command n i naciskając h

2:22sfocusowało nam to pierwszy dostępny nagłówek możemy powtórzyć ten skrót

2:26klawiszowy

2:31i widzimy że są treści tak naprawdę to jest table of contents

2:35czyli spis treści więc pierwszym headingiem jest nazwa

2:39strony drugim headingiem jest spis treści i tego typu nagłówki

2:44tego typu nagłówki

2:49są bustowane przez seo dlatego bo narzucają schemat dokumentu

2:53i są o wiele bardziej wymowne niż divy czy spany które są

2:57transparentne i możemy tam wrzucić cokolwiek nagłówki są dobre dla nawigacji i

3:02prowadzą strukturę dokumentu jeśli stworzylibyśmy listę nienumerowaną

3:06na przykład tutaj mamy listę numerowaną jako table of contents no

3:11to ona teoretycznie też może być przez google wypromowana jako featured

3:15snippet i wtedy dostajemy takiego boxa jako pierwszy wynik naszego

3:19wyszukiwania jest to bardzo dobre dla zbierania ruchu na

3:23naszą stronę internetową ale to tak ogólnie jeśli chodzi o to dlaczego accessibility

3:27może mieć też pozytywny wpływ na seo poza tymi oczywistymi rzeczami

3:32no to jest schema.org jeśli interesowałeś sie pozycjonowaniem stron

3:36www na pewno słyszałeś o schema tak samo jak atrybuty aria jest to

3:40jakby dodatkowa warstwa na html-a którą możemy wyrażać

3:44strukturę naszej strony w sposób które wyszukiwarki internetowe na przykład google

3:48interpretują i mogą wyświetlać na przykład dodatkowe informacje w

3:52wynikach wyszukiwania w odniesieniu do accessibility jest

3:57kilka schema propertiesów których kiedyś nie było w 2016 roku

4:01jeszcze ich nie było była walka żeby faktycznie zamieścić je w

4:05definicjach schema.org no i mamy na przykład accessibility feature accessibility summary

4:10access mode sufficient accwssibility api hazard weźmy

4:14na accessibility feature i co tutaj się może dziać generalnie

4:19jesteśmy w stanie powiedzieć czy dana strona internetowa wspiera nawigację klawiaturą

4:23wspiera nawigację myszką czy są jakieś ryzyka powiązane

4:28z accessibility jeśli chodzi o jej używanie na przykład możemy tutaj sobie

4:32wyszukać flash hazard wpiszmy sobie tutaj flashing hazard

4:37mamy na przykład accessibility hazard

4:41czyli możemy wpisać tutaj informacje o

4:45tym że jest ryzyko ataku padaczki padaczkę

4:50może wywołać na przykład szybko scrollująca się treść za pomocą

4:54scroll behavior smooth jeżeli mamy sekcje które są jedna po drugiej

4:58ale różnią się bardzo mocno kolorystycznie i na przykład na dole strony damy przycisk

5:02scroll to top no to wtedy przy scrollowaniu w górę te sekcje

5:07będą robiły takie błyski które faktycznie mogą wywołać padaczkę a

5:11według standardu wcag możemy to też sobie tutaj sprawdzić sprawdźmy

5:16wcag 2.1

5:20epilepsy mamy

5:28tutaj success criterion 2.3.1 czyli wystarczą

5:33trzy błyski w ciągu jednej sekundy aby wywołać padaczkę w

5:37związku z czym możemy wyrażać się schema.org o

5:41tym czy nasza strona jest dostępna oczywiście wyszukiwarka nie będzie tego weryfikowała

5:46natomiast my mamy możliwośc takiej deklaracji i

5:50na to czy wyszukiwarka faktycznie da nam jakiś bonus z tego powodu

5:54że jesteśmy dostępni czy nie czy deklarujemy się że jesteśmy dostępni to już zależy od

5:58silnika przeglądarki nie od nas natomiast zawsze lepiej jest dostarczać

6:02większą ilość informacji której wyszukiwarka może nie wykorzystać która

6:07nie przeszkadza użytkownikowi niż dawać jej za mało natomiast też musimy

6:11unikać redundancji treści i nie powielać informacji którą mamy zawartą na

6:15przykład już w jednym paragrafie no to nie powinniśmy jej w drugim tworzyć schema.org

6:19ma też bezpośredni wpływ na nasz user experience jeśli wpiszemy

6:23sobie schema.org safari reader

6:27mode to

6:34faktycznie zobaczymy że jest sytuacja że nasze itempropsy

6:38które deklarujemy w schema.org wpływają na to jak wyświetlają

6:42się elementy na przykład w reader safari czyli w takim trybie

6:47który pozwala na redukcję szumu i różnych informacji no

6:51i tutaj jeżeli damy na przykład itemprop autor na mandy mitchell

6:55no oczywiście to musimy sobie dostosować no to wtedy to się będzie wyświetlało w inny sposób

6:59będzie na przykład wycentrowane gdzie normalnie w reader mode nie mamy możliwości stylowania

7:03za pomocą css-a więc tutaj to jak zestrukturyzje nasz

7:07markup będzie wpływało na to jak zostanie on wyświetlony w reader

7:11mode to co chciałbym żebyście wynieśli z tej lekcji jest fakt że zarówno

7:15seo jaki accessibiliyt pod koniec dnia mają

7:19na celu dobro użytkownika google nie będzie bustował stron które nie dają żadnej

7:25wartości użytkownikowi które są niewygodne w użytkowaniu które nie niosą żadnej

7:29treści i które nie są też popularne oczywiście natomiast to że możemy w schema.org

7:33deklarować feature dostępności jest bardzo fajne i

7:37jeśli pracujecie na przykład z mediami z wideo z grami komputerowymi artykułami

7:42śmiało korzystajcie z accessibility feature i deklarujcie faktycznie problemy

7:47które użytkownik może napotkać na stronie oraz których na pewno nie

7:51napotka