d-tags 
Ładowanie...*Deque Accessibility Covid Report 2021
Table of contents:
- SEO i dostępność stron internetowych
- Dostępność strony internetowej – podstawy
- Elementy, które poprawiają zarówno SEO, jak i dostępność witryny
- Element poprawiający dostępność witryny #1: Tytuł strony
- Element poprawiający dostępność witryny #2: Nagłówki
- Element poprawiający dostępność witryny #3: Teksty alternatywne
- Element poprawiający dostępność witryny #4: Linkowanie
- Element poprawiający dostępność witryny #5: Sitemapa, breadcrumbs i jasna nawigacja w menu
- Element poprawiający dostępność witryny #6: Multimedia
- Element poprawiający dostępność witryny #7: Czytelność i użyteczność
- Element poprawiający dostępność witryny #8: Dane schema
- Dostępność strony – jak sprawdzić, czy Twoja strona jest dla wszystkich?
- Narzędzia do poprawy dostępności strony: Wtyczki WordPress
- Korzyści z prowadzenia działań SEO zgodnych z zasadami dostępności stron internetowych
W związku z pandemią wielu przedsiębiorców zostało zmuszonych do przeniesienia swojego biznesu do internetu, zwiększając jednocześnie liczbę klientów wchodzących w interakcję z ich marką za pośrednictwem urządzeń elektronicznych.
Wydaje się to całkiem zwyczajnym zjawiskiem? Może tak, dopóki nie zobaczysz raportów, z których wynika, że coraz więcej osób niepełnosprawnych jest dotkniętych przez wykluczenie cyfrowe. Co to znaczy? Oznacza to, że strony internetowe nie są przystosowane do potrzeb tych osób – i ta jedna trzecia, o której pisaliśmy wcześniej, po prostu nie może z nich korzystać.
Problem dostępności stron internetowych jest teraz tak palący jak nigdy dotąd, dlatego każdy właściciel witryny (nie tylko e-commerce) powinien podejść do niego jak najbardziej poważnie.
Dzisiaj opowiem Ci o tym, jakie elementy designu wpływają na dostępność serwisu, jak sprawdzić, czy Twoja strona jest przystępna w obsłudze dla każdego, oraz jakie aspekty SEO mają bezpośredni wpływ na dostępność serwisu.
Czego się dowiesz:
- czym jest dostępność stron internetowych,
- co należy wziąć pod uwagę, aby poprawić dostępność witryny,
- co wpływa zarówno na SEO, jak i dostępność strony,
- jak sprawdzić, czy strona jest dostępna dla osób z niepełnosprawnościami.
SEO i dostępność stron internetowych
Nie ma wątpliwości, że SEO i dostępność stron internetowych są ze sobą powiązane. W końcu jedną z podstawowych zasad optymalizacji pod kątem wyszukiwarek jest skupienie się na tym, aby strona była użyteczna i łatwa do zrozumienia nie tylko dla botów, ale także dla wszystkich osób, które ją odwiedzają: niezależnie od ich wieku, jakości łącza internetowego czy stanu zdrowia. Oznacza to, że dobrze zoptymalizowana witryna zapewnia dostępność cyfrową.
Warto jednak zdawać sobie sprawę z tego, że dostępność witryny to coś więcej niż sukces SEO. Powiedziałbym, że chodzi bardziej o przestrzeganie najlepszych praktyk UX i przyjęcie opracowanej strategii SEO już w czasie projektowania witryny. Tylko w ten sposób sprawisz, że Twoja strona będzie przystępna pod kątem nawigacji, czytania i użytkowania. A gdy spełnia wszystkie te trzy warunki, znacznie zmniejsza się ryzyko frustracji odwiedzających, którzy mogliby mieć trudności w interakcji z witryną.
Kiedy eksploracja Twojej witryny wywołuje pozytywne emocje, odwiedzający są bardziej usatysfakcjonowani i pewni siebie, dzięki czemu stają się bardziej skłonni do:
- polecania strony innym,
- zostania powracającym klientem,
- konwersji.
Dzisiaj pokażę Ci, które elementy strony warto dopracować, aby poprawić zarówno SEO, jak i dostępność witryny. Dam Ci również kilka praktycznych wskazówek, dzięki którym zwiększysz widoczność i poprawisz intuicyjność witryny.
Zanim jednak to nastąpi, porozmawiajmy trochę więcej o tym, czym dokładnie jest dostępność witryny i dlaczego jest ona ważna dla Ciebie — właściciela firmy internetowej.
Dostępność strony internetowej – podstawy
Termin dostępność serwisu odnosi się do umożliwienia łatwej i intuicyjnej interakcji z serwisem niezależnie od fizycznych, poznawczych czy technicznych zasobów użytkownika.
Choć może się to wydawać dość oczywiste, termin ten jest znacznie szerszy: dostępność witryny to dużo więcej niż zapewnienie łatwej nawigacji po stronach, wystarczająco dużych przycisków lub czytelności czcionki.
Dostępność witryny oznacza, że dosłownie każdy może z niej korzystać, a przez „wszystkich” rozumiem osoby, które żyją z wszelkiego rodzaju niepełnosprawnościami, na przykład:
- słuchu,
- mowy,
- funkcji poznawczych,
- motorycznych,
a także osoby, które nie mają niepełnosprawności, ale nie mogą korzystać z Twojej witryny zgodnie z przeznaczeniem z powodu takich czynników jak:
- słabe połączenie internetowe,
- korzystanie z sieci na przestarzałych lub mających niewielkie ekrany urządzeniach,
- podeszły wiek, który może wiązać się z trudnością z obsługą komputera,
- przebywanie w miejscu lub sytuacji, które utrudniają korzystanie z Twojej witryny (np. gdy użytkownik nie może odsłuchać dźwięku wstawionego do filmu, wejść w interakcję ze stroną za pomocą jednej ręki lub ma problemy z przeczytaniem artykułu z powodu dużego natężenia światła słonecznego).
Czy to nie szokujące, jak wiele osób – Twoich potencjalnych klientów – może zniechęcić się do korzystania z witryny, gdy nie spełnia ona wymagań dostępności?
Teraz pewnie się zastanawiasz, jakie czynniki wpływają na to, czy strona internetowa jest dostępna. Ujmę to w następujący sposób: aby Twoja witryna była dostępna dla wszystkich, musisz upewnić się, że spełnia cztery cechy zgodne z zasadą POUR.
- P – PERCEIVABLE
Oznacza to, że użytkownik może odbierać informacje publikowane na Twojej stronie internetowej w preferowany przez siebie sposób. Z tego, co zauważyłem, dotyczy to głównie udostępnienia możliwości korzystania z czytnika ekranu osobom mającym problemy ze wzrokiem.
- O – OPERABLE
Gdybym zapytał Cię, z jakich urządzeń musisz skorzystać, aby uzyskać dostęp do strony internetowej, prawdopodobnie odpowiedziałbyś: klawiatura, mysz, touchpad. Osoby niepełnosprawne mogą jednak odpowiedzieć na to pytanie inaczej, ponieważ technologie wspomagające to na przykład joysticki, klawiatura brajlowska czy head mouse – by wymienić tylko trzy. Dobrze działająca strona internetowa to taka, z którą można wchodzić w interakcję niezależnie od urządzeń, z jakich się korzysta.
- U – UNDERSTANDABLE
Trzecia cecha, zaczynająca się w języku angielskim na literę U, oznacza, że treści publikowane na dostępnym serwisie internetowym muszą być zrozumiałe. Ma duże znaczenie dla użytkowników z niepełnosprawnością wzroku, osób z trudnościami w uczeniu się (np. tych, które radzą sobie z rozumieniem długich zdań i zaawansowanego słownictwa) oraz osób z zaburzeniami poznawczymi (np. tych, którym trudno jest skupić się na długich fragmentach tekstu).
Witryna jest zrozumiała także wtedy, gdy jej układ odpowiada standardowym wzorcom czytania (np. ustandaryzowane użycie nagłówków) i oferuje pomoc przy wprowadzaniu treści (np. autokorekta przy pisaniu komentarzy).
- R – ROBUST
Wreszcie litera R, którą można tłumaczyć w tym kontekście jako rzetelność. W przeciwieństwie do powyższych cech, które koncentrują się wokół projektowania i treści stron internetowych, ostatnia dotyczy kompatybilności i możliwości dostosowania strony internetowej do nowych technologii. Witryna internetowa jest rzetelna, gdy działa płynnie z szeroką gamą urządzeń, takich jak tablety lub telefony komórkowe, oraz oprogramowaniami czy przeglądarkami, i ta elastyczność nie zmieni się w ciągu następnych lat.
Technologia ułatwień dostępu stron internetowych
Aby uzyskać dostęp do zasobów internetowych, osoby z niepełnosprawnościami mogą korzystać z technologii ułatwiających dostęp. Oczywiście liczba tych technologii rośnie z roku na rok, co jest absolutnie wspaniałe, teraz jednak pokażę Ci 4 najpopularniejsze urządzenia, które wspierają dostępność stron:
- Czytnik ekranu – ta technologia pomaga osobom niedowidzącym nie tylko uzyskać dostęp do treści internetowych, lecz także wchodzić z nimi w interakcję. W większości przypadków są to programy interpretujące tekst, obrazy i przyciski. Istnieją jednak również urządzenia wielkości notebooka, które konwertują treści internetowe na alfabet Braille’a.
- Klawiatura brajlowska – jak sama nazwa wskazuje, urządzenie to przeznaczone jest dla osób znających i aktywnie korzystających z systemu czytania i pisania Braille’a. Klawiatury brajlowskie wyglądają prawie identycznie jak zwykłe klawiatury, z wyjątkiem tego, że każdy klawisz ma na powierzchni kropki reprezentujące dany znak.
- Lupy ekranowe – to również jest dość oczywiste. Lupy ekranowe powiększają wybrane sekcje treści w celu poprawy ich czytelności. Co z kolei może być mniej oczywiste – ta technologia wspomagająca oferuje również inne modyfikacje wizualne. Wśród nich warto wymienić zwiększenie kontrastu kolorów, podkreślenie cieniowania, wygładzenie krawędzi fontu.
- Sterowanie głosowe – ta technologia umożliwia poruszanie się po stronie internetowej bez użycia rąk. Przydaje się nie tylko tym osobom, które nie potrafią posługiwać się klawiaturą czy myszką, lecz także tym z trudnościami w uczeniu się (np. dysleksją). Działa podobnie do Asystenta Google lub Siri firmy Apple (tutaj obowiązuje Voice Search SEO) z jedną różnicą – sterowanie głosowe nie odpowiada głosowo na słowa użytkownika.
Mam nadzieję, że teraz w pełni rozumiesz pojęcie dostępności stron internetowych i rozróżniasz podstawowe urządzenia wspomagające. Przejdźmy więc dalej i dowiedzmy się, jakie elementy witryny możesz poprawić, aby poprawić zarówno SEO, jak i dostępność strony.
Elementy, które poprawiają zarówno SEO, jak i dostępność witryny
Już na wstępie muszę wyraźnie zaznaczyć jedną rzecz: jako specjaliści SEO nie zawsze mamy całkowity wpływ na wszystkie elementy świadczące o dostępności strony. Istnieje kilka czysto technicznych i związanych z projektowaniem czynników, nad którymi powinni pracować głównie certyfikowani specjaliści w zakresie dostępności sieci i twórcy stron internetowych.
Mamy jednak wpływ na niektóre elementy witryny, dzięki czemu możemy podnieść zarówno rangę serwisu, jak i sprawić, by był on zgodny z zasadami POUR.
Przeprowadzę Cię teraz przez 8 elementów SEO, które pozytywnie wpływają na dostępność strony. W miarę możliwości posłużę się witrynami naszych klientów jako przykładami, żeby pokazać Ci, jak w Delante łączymy optymalizację pod kątem wyszukiwarek z podążaniem za standardami dostępności stron.
Element poprawiający dostępność witryny #1: Tytuł strony
Tytuły stron to te niewielkie elementy, które są wyświetlane jako nagłówek w wynikach wyszukiwania, a także pojawiają się na kartach przeglądarek – służą w tych kontekstach rzecz jasna SEO. Ale, co ważne, tytuły stron są również pierwszą rzeczą analizowaną przez czytniki ekranu.
Ich główną funkcją jest zapewnienie odpowiedniego kontekstu dla treści, dzięki któremu użytkownicy już na starcie będą wiedzieć, jaki jest główny temat danej strony czy podstrony. Urządzenie wspomagające wyszukuje więc tagi Title i korzysta z nich, aby w opisać użytkownikowi główny motyw strony, na której się znajduje.
To teraz pora na krótki quiz.
Jak myślisz, która z poniższych opcji jest przykładem dobrze zoptymalizowanego tytułu strony?
A Blog SEO/SEM – Delante
B Witamy w sekcji blogowej | Delante
C Blog Delante – Czytaj nasze posty!
Jaka jest Twoja odpowiedź? Jeśli A, to gratulacje, trafione! Nie zaczyna się on od nazwy marki (jak w przykładzie C) i wskazuje na główny pomysł/temat poruszany na blogu (w przeciwieństwie do tytułu B).
Wiesz zatem, jak tworzyć tytuły stron, które służą i botom, i ludziom.
Jeśli chcesz poprawić tytuły w obrębie swojej witryny, aby sprzyjały dostępności, możesz to zrobić z poziomu swojego CMS-a. Załóżmy, że korzystasz z najpopularniejszego systemu zarządzania treścią, jakim jest WordPress, i masz zainstalowaną wtyczkę Yoast SEO. Co musisz zrobić?
KROK 1 Kliknij na stronę, którą chcesz edytować.
KROK 2 Wprowadź nowy tytuł w miejscu oznaczonym jako “Yoast SEO Title”.
Źródło: własny zrzut ekranu Delante
Element poprawiający dostępność witryny #2: Nagłówki
Podobnie jak roboty w SEO, technologie wspomagające wykorzystują nagłówki, aby uzyskać lepsze zrozumienie tematów poruszanych na stronie i zrozumieć jej strukturę. To pozwala im łatwo przeskakiwać z jednej sekcji witryny do drugiej.
Aby poprawić SEO i dostępność witryny, użyj tylko jednego H1 u góry strony, aby przedstawić jej główny temat. Później rozwiń go, dodając tagi H2-H5, jeśli to konieczne.
Nagłówki powinny zawsze być ułożone hierarchicznie. Dlatego polecam czytanie na głos tylko nagłówków (pomijając tekst akapitów), aby zobaczyć, czy brzmią logicznie. Spójrz na poniższy przykład:
Źródło: własny zrzut ekranu Delante
Jeśli prawidłowo ustawisz nagłówki w swojej witrynie, narzędzie do testowania dostępności strony (więcej o narzędziach opowiem za moment) pokaże Ci odpowiednio opracowaną strukturę nagłówków.
Czytniki ekranu przedstawiają zawartość strony zgodnie z hierarchią nagłówków. Dlatego odradzam mieszanie nagłówków z pobudek czysto estetycznych. Nawet jeśli wygląda to lepiej, to czytnik ekranu zgubi się i wyświetli zawartość strony w niewłaściwej kolejności, utrudniając zrozumienie sensu treści, którą chcesz przekazać.
Ostatnią rzeczą, na którą chcę zwrócić Twoją uwagę, jest to, że nie ma uniwersalnej liczby, która określałaby, ile nagłówków H2 lub H3 należy użyć w obrębie jednej podstrony. Struktura zależy od treści (jej rozbudowania i długości), a także od sposobu, w jaki witryna jest zbudowana: czy jest to landing page z wieloma sekcjami, czy zwykły blog, a może w ogóle e-commerce?
Element poprawiający dostępność witryny #3: Teksty alternatywne
Z perspektywy SEO teksty alternatywne spełniają 3 funkcje:
- pomagają robotom indeksującym zrozumieć zawartość witryny,
- są wyświetlane, gdy obraz się nie ładuje (np. z powodu słabego połączenia internetowego),
- zwiększają szanse na wyświetlenie w Grafice Google.
Zasadniczo wszystko to świadczy o technicznym charakterze altów.
Jednak z punktu widzenia dostępności serwisu tekst alternatywny spełnia zupełnie inny cel – opisuje treść lub funkcję grafiki publikowanej na stronie w taki sposób, aby osoby z niepełnosprawnością wzrokową mogły zwizualizować ten obraz w swojej wyobraźni.
Innymi słowy, czytniki ekranu używają tekstów alternatywnych, aby opisać obraz osobom, które nie mogą na niego patrzeć. Dlatego zaleca się, aby podczas tworzenia tekstów alternatywnych dbać o dokładność i zwięzłość przekazu. Oczywiście to tylko bardzo podstawowe zasady, więc jeśli chcesz poznać więcej sposobów na pisanie dobrych tekstów alternatywnych, przejdź do artykułu Optymalizacja i pozycjonowanie zdjęć na stronę, gdzie sporo piszemy o altach.
No dobrze, to teraz pora na kolejny quiz. Gotowy?
Wyobraź sobie, że sprzedajesz czapki. Jaki alt można stworzyć dla tego obrazu, żeby osoby, które nie mogą go zobaczyć, zrozumiały jego treść?
A zolto-niebieska-czapka
B welniana-czapka-robiona-na-drutach-zolto-niebieska-unisex
C robiona-na-drutach-welniana-czapka-zimowa-unisex
D czapka-z-pomponem-super-modna
Który opis alternatywny najlepiej pasuje do przedmiotu? Dla mnie to B, ale C też spełnia swoje zadanie.
Przeanalizujmy inny przykład, ale tym razem sugeruję przeczytanie opisów alternatywnych przed obejrzeniem obrazu – tak po prostu, żeby przez chwilę poczuć się jak osoba niewidoma.
Która odpowiedź ułatwia Ci wyobrażenie sobie wykresu?
A wykres-z-danymi
B wykres-pokazujacy-wzrost
C wykres-z-danymi-Google-Search-Console-pokazujący-453%-wzrostu-w-liczbie-wyświetleń-w-wynikach-wyszukiwania-po-6-miesiacach
D screen-z-Google-Search-Console
Teraz spójrz na screena:
Źródło: własny zrzut ekranu Delante
Który tekst alternatywny pomógł Ci stworzyć obraz przypominający dane pokazane na wykresie? Założę się, że był to wariant C, prawda?
Co istotne, tworzenie tekstów alternatywnych dotyczy nie tylko opisywania produktów. Nie zapomnij dodać tych elementów do przycisków CTA – w przeciwnym razie czytnik ekranu odczyta przyciski „zobacz nowości” lub „najnowsze artykuły” jako „link”.
Ponadto, jeśli publikujesz obraz wyłącznie w celach estetycznych, lepiej pozostawić puste pole tekstu alternatywnego.
Jeśli chodzi o dodawanie alternatywnych tekstów do obrazów, to – znów – wiele zależy od Twojego CMS-a. Na przykład WordPress daje możliwość dodania tekstu alternatywnego zaraz po przesłaniu obrazu.
Źródło: własny zrzut ekranu Delante
Jeśli chcesz poprawić lub dodać teksty alternatywne do obrazu, który jest już opublikowany na Twojej stronie, postępuj zgodnie z następującymi krokami:
KROK 1 W panelu WordPress otwórz podstronę, na której jest opublikowany obraz.
KROK 2 Kliknij w obrazek i wybierz Edytuj (ikona ołówka).
Źródło: własny zrzut ekranu Delante
KROK 3 Dodaj lub zmień tekst alternatywny.
Źródło: własny zrzut ekranu Delante
Element poprawiający dostępność witryny #4: Linkowanie
Linki to elementy, które kierują użytkowników do innej podstrony lub witryny. Mogą również przenieść Cię do określonej części strony bez konieczności przewijania (tak jak spis treści na początku tego wpisu). Z zasady linki prowadzą dokądś, dlatego muszą być na tyle dokładne i zwięzłe, aby użytkownik zdecydował, czy chce przejść do docelowej sekcji/strony, czy też woli zignorować link i czytać dalej.
Co więcej, roboty również lubią, gdy link rzeczywiście informuje o zawartości łącza, a nie jest tylko słynnym nadużywanym „kliknij tutaj” lub – jeszcze gorszym – „link”. Właściwie przeprowadźmy szybki test, dzięki któremu samodzielnie się przekonasz, która opcja jest bardziej przyjazna.
No to jak, która opcja brzmi według Ciebie Ciebie lepiej?
A Jeśli chcesz dowiedzieć się więcej o linkowaniu w obrębie witryny, kliknij tutaj.
B Jeśli chcesz dowiedzieć się więcej o linkowaniu w obrębie witryny, zapoznaj się z naszym artykułem: Struktura linkowania wewnętrznego.
C Więcej wskazówek – link.
Założę się, że najchętniej klikniesz w drugi link, prawda?
Inną kwestią jest to, że anchory powinny być łatwe do rozróżnienia, aby każdy mógł je rozpoznać jako rzeczywiste linki, a nie zwykły tekst. Tak jak tutaj:
Źródło: własny zrzut ekranu Delante
Wskazówka: Jeśli chcesz sprawdzić, czy twoje linki są łatwe do odróżnienia od reszty tekstu, odsuń się od ekranu – dwa, trzy kroki wstecz powinny wystarczyć – i sprawdź, czy nadal możesz znaleźć anchor w treści.
Pamiętaj też, że kiedy dodajesz anchory, kursor myszy zmienia swój kształt na dłoń lub wskaźnik, co jest kolejną funkcją poprawiającą dostępność witryny.
Element poprawiający dostępność witryny #5: Sitemapa, breadcrumbs i jasna nawigacja w menu
Zebrałem te trzy elementy razem, ponieważ ich głównym celem jest zmniejszenie zamieszania w czasie crawlowania strony przez boty albo skanowania jej przez czytniki lub po prostu – odwiedzania przez użytkowników.
Istnieją dwa rodzaje map witryn: HTML (dla ludzi) i XML (dla botów). Oba typy ułatwiają nawigację, bez względu na docelowego odbiorcę. Pierwsza mapa pomaga zwykłym odwiedzającym uzyskać wgląd w zawartość strony, ponieważ pokazuje listę rzeczy, które można na niej znaleźć. Druga z kolei jest kluczowa dla SEO i urządzeń wspomagających dostępność – wiele technologii polega na tym pliku, starając się zrozumieć napotykaną treść i jej strukturę, a także wygenerować dokładne wyniki i skierować użytkowników do określonych sekcji strony.
Breadcrumbs (znane też jako “okruszki”) działają praktycznie tak samo, pomagając robotom indeksującym oraz czytnikom ekranu zobaczyć, jak zbudowana jest strona internetowa. Tak jak ty patrzysz na zwykłą mapę, aby znaleźć punkt „Jesteś tutaj”, aby zorientować się w swojej lokalizacji, tak roboty, użytkownicy i technologie wspomagające dzięki breadcrumbs zdobywają analogiczną informację – ich aktualną lokalizację w Twojej witrynie. Breadcrumbs pomagają też cofnąć się kilka podstron wstecz bez przeklikiwania się.
Oto przykład:
Źródło: własny zrzut ekranu Delante
Delante > Definicje SEO i SEM > Bookmarking Sites
Właśnie przeczytałeś, czym są Bookmarking Sites, ale chcesz wyszukać inny termin związany z SEO i SEM? Nic prostszego! Wróć do poprzedniej podstrony (SEO SEM Glossary, czyli słownik SEO SEM) klikając na link w menu nawigacyjnym. Nic trudnego!
Na koniec został nam trzeci element z tej kategorii – nawigacja. Aby poprawić dostępność strony, upewnij się, że pasek nawigacyjny, czyli menu, jest przejrzysty i właściwie przemyślany. Jego struktura wpływa na to, czy czytniki ekranu są w stanie zdobyć cenne informacje i chociażby poinformować użytkownika o liczbie kategorii i podkategorii w menu.
Źródło: własny zrzut ekranu Delante
Pamiętaj, że słowa użyte do opisu kategorii w menu i breadcrumbsach muszą być – tak, masz rację, nic nowego! – dokładne i zwięzłe.
Jeśli chcesz zagłębić się w temat map witryn i okruszków, przeczytaj te dwa artykuły, które napisałem jakiś czas temu: Breadcrumbs – co to jest i dlaczego jest ważne dla SEO? oraz Jak automatycznie aktualizować mapę strony, aby podwoić widoczność w sieci? Nasze metody i efekty.
Element poprawiający dostępność witryny #6: Multimedia
Podstawową zasadą dostępności mediów jest dostarczanie treści prezentowanych audio i wideo w takiej formie, aby mogli z niej skorzystać internauci, którzy nie mogą ich w danym momencie obejrzeć albo odsłuchać – i mowa tu nie tylko o osobach z niepełnosprawnościami.
Closed captions to termin określający tekst zsynchronizowany w czasie z obrazem, który pojawia się na ekranie i który można przeczytać podczas oglądania lub słuchania treści multimedialnych. Kto skorzysta z takich napisów?
- osoby, które żyją z upośledzeniem słuchu lub są głuche,
- osoby, dla których język użyty w filmie/podcaście nie jest językiem ojczystym,
- osoby z zaburzeniami poznawczymi i problemami z uczeniem się,
- osoby, które chcą zabić czas oglądając/słuchając Twoich treści, ale znajdują się w głośnym otoczeniu (np. w transporcie publicznym),
- osoby, które chcą posłuchać Twoich treści, ale nie mogą odtworzyć dźwięku na głos (np. aby nie obudzić dziecka lub, no cóż, aby nie zwrócić na siebie uwagi na nieco zbyt nudnym wykładzie/spotkaniu)
- tak naprawdę – praktycznie każdy.
Pora na kolejny quiz!
Czy napisy i closed captions to to samo?
A Tak, to dokładnie to samo.
B Nie, są przeznaczone dla dwóch różnych grup odbiorców.
Prawidłowa odpowiedź to B. Krótko mówiąc, zwykłe napisy są przeznaczone dla tych, którzy MOGĄ słyszeć dźwięk, podczas gdy napisy CC są przeznaczone dla tych, którzy NIE SŁYSZĄ dźwięku.
Oznacza to, że przygotowując napisy do treści audio/wideo, należy pamiętać nie tylko o mowie, lecz także o opisaniu dźwięków takich jak głośne huki, odgłos kroków, pukanie do drzwi, muzyka.
Zupełnie jak tutaj:
Zsynchronizowane napisy, audiodeskrypcje i transkrypcje tekstu – tak powinny wyglądać multimedia umieszczone na Twojej stronie. A, i gdy mowa o synchronizacji – musi być zrobiona naprawdę dobrze.
Źródło: własny zrzut ekranu Delante
Jak dodać closed captions do swoich multimediów? Cóż, to zależy. Na przykład, jeśli mówimy o YouTube, ten proces jest prawie automatyczny:
KROK 1 Otwórz YouTube Studio.
KROK 2 Kliknij Napisy (lewy pasek boczny).
KROK 3 Wybierz film, do którego chcesz dodać napisy.
KROK 4 Wybierz język (klikając Dodaj język).
KROK 5 Kliknij Dodaj.
Możesz też obejrzeć ten tutorial dotyczący korzystania z edytora napisów: How to Add Captions While Uploading & Editing Your Videos
Obecnie opisana powyżej opcja dobrze sprawdza się w przypadku treści anglojęzycznych, ponieważ YouTube potrafi automatycznie generować (z reguły 😉 ) prawidłowe napisy. Zdarza się, że trzeba dokonać drobnych poprawek, ale ogólnie rzecz biorąc – ta opcja spełnia swoje zadanie zaskakująco dobrze.
Jeśli chcesz dodać napisy w języku innym niż angielski, musisz je wcześniej utworzyć. Możesz to zrobić w dowolnym edytorze tekstu – pamiętaj tylko, aby zapisać plik w formacie .srt.
Jeśli wolisz przesłać wideo/audio na swój serwer, być może będziesz musiał użyć narzędzi do tworzenia napisów, takich jak Happy Scribe.
Element poprawiający dostępność witryny #7: Czytelność i użyteczność
Ponownie łączę w jednej sekcji dwa elementy, ponieważ zarówno czytelność, jak i użyteczność, mają służyć temu, aby interakcja ze stroną była prosta, łatwa i przyjemna.
Teksty, które publikujesz na swojej stronie internetowej, powinno się dać przeczytać bez problemu. Co to oznacza? Warto przede wszystkim postępować zgodnie z tymi wskazówkami dotyczącymi czytelności:
- staraj się nie przekraczać 100 słów w akapicie i 35 słów w zdaniu,
- jeśli to możliwe, upewnij się, żeby Twoje treści mógł spokojnie zrozumieć ósmoklasista,
- używaj wypunktowań i list numerowanych,
- unikaj skomplikowanego słownictwa i żargonu branżowego,
- używaj formatowania tekstu – byle mądrze.
W ten sposób ułatwisz zrozumienie zawartości witryny nie tylko osobom niepełnosprawnym, lecz także obcokrajowcom i osobom, które podczas przeglądania Twojej witryny znajdują się w pełnym rozproszeń środowisku.
Kwestie związane z użytecznością warto przemyśleć gdy strona jest jeszcze w budowie. Skonsultuj swoje pomysły z ekspertem UX, web developerem i specjalistą SEO. Jestem pewien, że razem opracujecie projekt, który będzie naprawdę funkcjonalny, i to dla każdego użytkownika. To naprawdę, naprawdę istotne.
W Delante prowadzimy również konsultacje związane z UXi funkcjonalnością witryny, więc jeśli potrzebujesz pomocy w zakresie użyteczności strony, skontaktuj się z nami.
Element poprawiający dostępność witryny #8: Dane schema
Schema, znane również jako znaczniki schema, dane schema lub dane strukturalne, to elementy kodu mówiące robotom indeksującym, czym są poszczególne elementy na stronie. Na przykład? Jaka jest cena produktu, jak wygląda nawigacja, gdzie są często zadawane pytania (FAQ) lub znaczniki produktu takie jak rozmiar czy kolor. Dane schema pomagają wyszukiwarkom i technologiom ułatwień dostępu stron internetowych zrozumieć zawartość witryny.
Warto mieć na uwadze, im wyraźniej pokażemy botom, co znajduje się na stronie, tym większa szansa, że zostanie ona wyświetlona w wynikach wyszukiwania głosowego i rich snippets.
Jeśli treść opublikowana w Twojej witrynie zostanie wykorzystana jako wynik wyszukiwania głosowego, możesz właściwie mieć pewność, że zadziała ona również dobrze dla czytników ekranu i innych urządzeń pomocniczych.
Mówiąc krótko, dane strukturalne wspierają działanie zarówno wyszukiwarek, jak i technologii wspomagających. Dzięki zaimplementowanym znacznikom schema zwiększamy też wydajność urządzeń i robotów.
Dostępność strony – jak sprawdzić, czy Twoja strona jest dla wszystkich?
Jeśli nadal czytasz ten artykuł, mamy dobre wieści: udało Ci się już poznać 8 elementów witryny, które wpływają zarówno na SEO, jak i jej dostępność. Teraz nadszedł czas, abym pokazał Ci, jak sprawdzić, czy Twoja witryna w ogóle jest przystępna dla użytkowników.
Uwaga: Muszę tu zaznaczyć, że żadne z narzędzi, o których opowiem, nie jest idealne. Możesz spodziewać się, że po analizie Twoja strona będzie pełna czerwonych i zielonych znaczników wskazujących elementy Twojej witryny, które wymagają lub nie wymagają naprawy. Jednak, jak to bywa z technologią, wymienione narzędzia nie są w stanie dobudować sobie kontekstu do wszystkiego, dlatego to ty musisz zdecydować, czy dany element jest w porządku, czy jednak należy go zoptymalizować.
Weźmy na przykład teksty alternatywne. Narzędzia oceny dostępności sieci nie są w stanie zweryfikować, czy dana grafika niesie ze sobą jakieś znaczenie, czy też została dodana jedynie w celach dekoracyjnych. Dlatego to ty musisz zweryfikować, czy obraz jest integralną częścią artykułu, bez której nie da się zrozumieć opisywanego problemu, czy jednak będzie tylko zbędnym zapychaczem dla osób korzystających z czytników.
Z drugiej strony, istnieje duża szansa, że narzędzie zaznaczy tekst alternatywny o treści alt=”to jest zdjęcie” na zielono. Ale czy ta informacja coś w ogóle mówi użytkownikowi? No, jak się domyślasz – nie za bardzo.
To tylko jedna z wielu rzeczy, które należy wziąć pod uwagę podczas korzystania z popularnych narzędzi do oceny dostępności strony. Jeśli chcesz dowiedzieć się więcej, polecam Twojej uwadze artykuł napisany przez Web Accessibility Initiative: Selecting Web Accessibility Evaluation Tools.
Narzędzia do testowania dostępności strony: WAVE
Pierwsze narzędzie, o którym chcę wspomnieć, to WAVE. Jest bardzo proste w obsłudze.
Źródło: własny zrzut ekranu Delante
PODSTAWOWE INFORMACJE
Licencja:
Bezpłatny
Dostęp:
https://wave.webaim.org/
Jak używać:
KROK 1 Wprowadź adres URL strony internetowej, którą chcesz sprawdzić pod kątem dostępności. Ja użyję jako przykładu strony Delante, aby pokazać Ci, jak działa narzędzie.
Źródło: własny zrzut ekranu Delante
Tak wygląda zeskanowana przez narzędzie strona. Widzisz, co oprogramowanie rozpoznaje jako błąd, a co uważa za zgodne z ogólnymi zasadami dostępności stron internetowych. Na żółto zobaczysz potencjalne problemy.
Przypomnę tu jeszcze raz: informacje dostarczane przez WAVE i inne narzędzia nie powinny być uważane za w 100% dokładne i dokładne. Raport ma być Twoim przewodnikiem, dzięki któremu zidentyfikujesz potencjalne problemy z dostępnością witryny, a nie egzaminem.
KROK 2 Sprawdź szczegóły, aby zobaczyć wszystkie elementy ocenione przez narzędzie.
Źródło: własny zrzut ekranu Delante
KROK 3 Po kliknięciu w dany kwadrat zostaniesz przeniesiony na stronę, na której znajduje się zweryfikowany element.
W przypadku strony Delante większość błędów wynika z braku tekstów alternatywnych. Są to jednak grafiki, które uważamy za nieistotne do przetworzenia przez czytniki ekranu, dlatego w praktyce nie jest to wcale problem z dostępnością.
Narzędzia do testowania dostępności strony: Google Lighthouse
Drugim narzędziem, które warto wypróbować, jest Google Lighthouse.
PODSTAWOWE INFORMACJE
Licencja:
Bezpłatny
Dostęp:
Wtyczka do Chrome
Jak używać:
KROK 1 Aby korzystać z Google Lighthouse, musisz otworzyć stronę internetową, którą chcesz zweryfikować. Może to być dosłownie każda witryna, nie musisz być jej właścicielem.
KROK 2 Użyj prawego przycisku myszy i z rozwijanej listy wybierz polecenie Zbadaj (Inspect).
Źródło: własny zrzut ekranu Delante
KROK 3 Z górnego menu ekranu, który zobaczysz po kliknięciu Zbadaj, wybierz opcję Lighthouse, a potem zaznacz elementy, które chcesz zweryfikować – może być więcej niż jeden.
Źródło: własny zrzut ekranu Delante
Źródło: własny zrzut ekranu Delante
KROK 4 Po wybraniu niebieskiego przycisku Analizuj ładowanie strony otrzymasz raport. Wynik podawany jest w skali od 0 do 100. Podobnie jak WAVE, narzędzie to dostarcza informacji o poszczególnych elementach serwisu.
Źródło: własny zrzut ekranu Delante
Źródło: własny zrzut ekranu Delante
Jeszcze jedna ważna wskazówka. Radzę przejrzeć nie tylko te elementy, które wybrałeś do analizy, ale także te, które narzędzie oznaczyło jako bezproblemowe. O co chodzi?
Narzędzie przypisuje na przykład tekstom alternatywnym zielone kropki lub czerwone trójkąty, nie jest to jednak ocena jakości tego elementu, a raczej sygnał jego obecności lub braku. Dlatego lepiej przeczytać każdy alternatywny tekst, aby sprawdzić, czy spełnia powyższe kryteria, nawet jeśli jest w teorii zielony.
Narzędzia do testowania dostępności strony: Screen Reader
Wreszcie ostatnie narzędzie, czyli czytnik ekranu. Warto go dodać do przeglądarki, aby przekonać się, jak działa Twoja witryna podczas interakcji z czytnikiem ekranu.
PODSTAWOWE INFORMACJE
Licencja:
Bezpłatny
Dostęp:
Wtyczka do Chrome
Jak używać:
KROK 1 Pobierz tę wtyczkę i dodaj ją do przeglądarki Google Chrome.
KROK 2 Wejdź na swoją stronę i przeglądaj ją tylko za pomocą Czytnika ekranu. Sprawdź, czy wszystko działa płynnie i jest zrozumiałe. Jeśli znajdziesz coś do ulepszenia, po prostu to popraw, nawet jeśli nie wyszło jako błąd w poprzednich testach – najważniejsze, żeby Twoja witryna była tak dostępna, jak to tylko możliwe.
Narzędzia do poprawy dostępności strony: Wtyczki WordPress
Oprócz narzędzi do oceny dostępności stron warto wymienić również kilka sprytnych wtyczek, które możesz dodać do swojego CMS-a. Oczywiście mają one na celu pomóc Ci wprowadzić odpowiednie zmiany dotyczące dostępności.
Jak można się domyślić, każdy CMS posiada własne wtyczki. Ponieważ zdecydowana większość właścicieli witryn korzysta z WordPressa, wymienione poniżej wtyczki są przeznaczone w szczególności dla tego systemu zarządzania treścią.
Zwróć uwagę na:
- WP Accessibility
- WP Accessibility Helper
- WP ADA Compliance Check Basic
- WP Accessibility Tool & Missing Alt Text Finder
- One Click Accessibility
- accessiBE
- UserWay
- wA11y
- Accessibility Widget
Nie jestem w stanie powiedzieć, która wtyczka jest najlepsza, ponieważ różnią się między sobą funkcjami, do których zostały stworzone: niektóre z nich dają tylko szybkie wskazówki, podczas gdy inne proponują pełne rozwiązania, jeszcze inne wspierają Cię w ich wdrażaniu. Dlatego najpierw określ, które elementy swojej witryny chcesz poddać optymalizacji, a następnie wybierz wtyczkę, która może to zrobić za Ciebie lub przynajmniej z Tobą.
Korzyści z prowadzenia działań SEO zgodnych z zasadami dostępności stron internetowych
Zdarzyło Ci się kiedyś próbować przeczytać napis na plakacie, ale litery były tak małe, że po prostu się poddałeś i odszedłeś? A może chciałeś obejrzeć krótki filmik, tak po prostu, dla zabicia czasu w poczekalni u lekarza, ale nie miałeś ze sobą słuchawek, a napisy dla filmu nie były włączone?
To, co wtedy czułeś, każdego dnia czują użytkownicy sieci, gdy wchodzą na strony, które nie są zoptymalizowane pod kątem dostępności. Dlatego z całego serca zachęcam do upewnienia się, że Twoja witryna jest przyjazna dla wszystkich użytkowników. Upewnij się, że jej struktura i funkcjonalności nie przyczyniają się do wykluczenia kogokolwiek, bez względu na to, czy miałoby to być tymczasowe wykluczenie, na przykład ze względu na środowisko, czy brak możliwości wejścia w interakcje ze względu na niepełnosprawność.
Gdy już zauważysz, że Twoja witryna może być dużo lepiej dostępna, spróbuj popracować nad ośmioma elementami SEO opisanymi powyżej. Prawidłowe zoptymalizowanie elementów witryny takich jak nagłówki, teksty alternatywne, linki wewnętrzne, menu czy tytuły przynoszą korzyści wszystkim odwiedzającym, a do tego poprawiają pozycję witryny.
Jaki jest Twój cel na teraz? Zidentyfikuj, które elementy nie działają prawidłowo, a potem zoptymalizuj je, stosując ogólne zasady dostępności strony i SEO.
Mam nadzieję, że widzisz już wyraźnie, jak silny jest związek między pozycjonowaniem a dostępnością witryny. Jeśli masz jakieś pytania dotyczące połączenia tych dwóch elementów, daj nam znać. Pomożemy Ci w pracy nad dostępnością strony i podnoszeniu pozycji w rankingach wyszukiwarek!
