Pomoc
Zaloguj

Dostępność szablonów

Dostosowując szablon, dokonuj wyborów dotyczących projektu i treści, które pomogą utrzymać dostępność Twojego sklepu online. Dostępna strona internetowa jest zaprojektowana tak, aby mogły z niej korzystać wszystkie osoby, w tym osoby z niepełnosprawnościami. Dokonywanie wyborów dla sklepu online z uwzględnieniem dostępności może pomóc w zapewnieniu integracyjnego doświadczenia wszystkim klientom.

Poniższe wytyczne zostały stworzone z myślą o Wytycznych dotyczących dostępności treści internetowych (WCAG). Ze względu na wiele czynników, które należy wziąć pod uwagę podczas tworzenia dostępnej strony internetowej, samo przestrzeganie poniższych wytycznych nie gwarantuje, że Twój sklep online będzie w pełni dostępny. Możesz dowiedzieć się więcej na temat dostępności w Internecie, odwiedzając stronę WCAG lub przeglądając zasoby wymienione poniżej.

Na tej stronie

Dostępność tekstu

Ważne jest, aby tekst w Twoim sklepie online był czytelny dla klientów niedowidzących lub mających trudności z czytaniem zwartych bloków tekstu.

Kontrast kolorów

Edytując kolory w swoim sklepie online, upewnij się, że cały tekst jest dostępny dla klientów z daltonizmem lub innymi wadami wzroku. Klienci ci polegają na odpowiednim kontraście kolorów, aby wizualnie odróżnić od siebie poszczególne elementy. Możesz użyć narzędzia online do sprawdzania współczynnika kontrastu, aby sprawdzić kontrast różnych części swojego sklepu.

W poniższym przykładzie tekst ma współczynnik kontrastu 2,4:1 w stosunku do tła i jest trudny do odczytania dla niektórych klientów.

Blok jasnoszarego tekstu na jednolitym białym tle.

W następnym przykładzie tekst ma współczynnik kontrastu 4,8:1 i jest łatwiejszy do odczytania dla wielu klientów.

Blok ciemnoszarego tekstu na jednolitym białym tle.

Przetestuj kontrast całego tekstu, w tym tekstu głównego, nagłówków, linków i pól formularzy. Skorzystaj z następujących wskazówek:

  • Kolor tekstu głównego i tekstu na przyciskach ma współczynnik kontrastu co najmniej 4,5:1 w stosunku do tła.
  • Kolor nagłówków i innego dużego tekstu (rozmiar czcionki 24 px i większy) ma współczynnik kontrastu co najmniej 3:1 w stosunku do tła.
  • Kolor całego tekstu na obrazach, w tym na pokazach slajdów, banerach i filmach, ma wystarczający współczynnik kontrastu w stosunku do tła. W przypadku dużego tekstu (rozmiar czcionki 24 px i większy) kontrast wynosi co najmniej 3:1. W przypadku mniejszego tekstu kontrast wynosi co najmniej 4,5:1.
  • Kolor elementów nietekstowych, w tym obramowań pól wprowadzania i ikon, ma współczynnik kontrastu co najmniej 3:1 w stosunku do tła.

Nagłówki tekstowe

Gdy dodajesz nagłówki do strony za pomocą edytora tekstu sformatowanego, ważne jest, aby zachować ich sekwencyjną kolejność (1–6). Nagłówki są używane przez technologie asystujące do informowania o organizacji treści na stronie. Pomijanie poziomów, np. umieszczenie nagłówka poziomu 4 po nagłówku poziomu 2, może być mylące dla użytkowników. Stosuj się do poniższej wytycznej:

  • Nagłówki są używane w porządku sekwencyjnym, bez pomijania poziomów.

Rozmiar i wyrównanie tekstu

Podczas edycji ustawień typografii szablonu upewnij się, że tekst jest wystarczająco duży, aby klienci mogli go wygodnie przeczytać.

Tekst powinien również mieć spójne odstępy między wyrazami i literami, aby był łatwy do odczytania. W poniższym przykładzie tekst jest wyjustowany, co powoduje niespójne odstępy między wyrazami.

Blok tekstu z wyrównaniem justowanym. Każdy wiersz tekstu wypełnia przestrzeń od końca do końca, wymuszając zróżnicowane odstępy między wyrazami w celu dopasowania.

W następnym przykładzie tekst jest wyrównany do lewej, co powoduje spójne odstępy między wyrazami.

Blok tekstu wyrównany do lewej. Między poszczególnymi wyrazami zachowano spójne odstępy.

Dostosowując rozmiar i wyrównanie tekstu, postępuj zgodnie z poniższymi wytycznymi:

  • Minimalny rozmiar czcionki dla tekstu głównego to odpowiednik 16 px.
  • Wyrównanie tekstu nie jest justowane. Tekst justowany tworzy niespójne odstępy między wyrazami.

Linki tekstowe

Linki tekstowe powinny być podkreślone lub mieć inny, wizualnie odróżniający się styl w porównaniu ze zwykłym tekstem. Ponieważ niektórzy klienci mają problemy z postrzeganiem kolorów, nie można polegać wyłącznie na zmianie koloru w celu odróżnienia linku od zwykłego tekstu.

Linki tekstowe powinny otwierać się w tej samej karcie. Linki otwierane w nowej karcie lub oknie mogą powodować dezorientację, zwłaszcza na urządzeniach mobilnych, gdzie stare okno nie jest widoczne, i nie są dostępne dla wszystkich klientów, w szczególności dla tych, którzy używają powiększenia ekranu lub są mniej obeznani z technologią.

Jeśli edytujesz arkusz stylów szablonu, upewnij się, że nie usuwasz stylów linków tekstowych. Postępuj zgodnie z poniższymi wytycznymi:

  • Linki tekstowe są podkreślone lub mają inny wizualny wyróżnik (nie tylko kolor), aby klienci mogli odróżnić linki od zwykłego tekstu.
  • Linki tekstowe otwierają się po kliknięciu w tej samej karcie.

Alternatywny tekst dla obrazów

Dodając obrazy do sklepu online, należy zadbać o ich dostępność dla klientów niewidomych lub niedowidzących. Można to zrobić, dodając alternatywny tekst, który dokładnie opisuje każdy obraz. Klienci korzystający z czytników ekranu polegają na alternatywnym tekście, aby poznać zawartość obrazów w sklepie online.

Możesz dodać alternatywny tekst do obrazów produktów w panelu administracyjnym Shopify. Możesz dodać alternatywny tekst do pozostałych obrazów w szablonie w edytorze szablonów.

Dodając alternatywny tekst do obrazu, dobrą praktyką jest wyobrażenie sobie, że opisujesz obraz komuś, kto ma zamknięte oczy. Pomóż tej osobie stworzyć obraz w jej umyśle. Sposób opisu obrazu zależy również od kontekstu strony internetowej. Na przykład możesz opisać obraz inaczej, jeśli Twoja firma jest biurem podróży, a inaczej, jeśli jest sklepem ze sprzętem outdoorowym. Rozważ poniższy obraz:

Dwoje obejmujących się przyjaciół z plecakami, patrzących na ocean

W przypadku biura podróży można odnieść się do kraju i regionu, w którym podróżuje dwoje przyjaciół, oraz do nazwy oceanu lub morza, na które patrzą. Z kolei w przypadku sklepu ze sprzętem outdoorowym można skupić się na markach i cechach plecaków obojga przyjaciół.

Jeśli Twoja firma to biuro podróży, przykładem słabego alternatywnego tekstu może być: „Dwie osoby na tle oceanu”. W przypadku tej samej agencji przykładem dobrego alternatywnego tekstu może być: „Dwoje przyjaciół podróżujących po Lagos w Portugalii, patrzących na piaszczystą zatokę Praia do Camilo w słoneczny dzień”.

Dostępność pokazów slajdów i filmów

Dodając filmy do swojego sklepu online, należy wziąć pod uwagę potrzeby klientów niedowidzących, głuchych lub niedosłyszących oraz klientów, którzy mogą być podatni na zaburzenia przedsionkowe.

Niektórzy z tych klientów polegają na funkcji zamiany tekstu na mowę w czytnikach ekranu, które odczytują na głos zawartość strony internetowej. Dodatkowy dźwięk z filmów i muzyki, zwłaszcza nieoczekiwany, może utrudniać to doświadczenie. W przypadku klientów głuchych lub niedosłyszących warto dodać do filmów napisy dla niesłyszących, aby ci klienci mieli dostęp do treści.

Klienci z zaburzeniami przedsionkowymi mogą odczuwać zawroty głowy przy kontakcie z ruchomymi treściami. Z tego powodu ważne jest, aby pokazy slajdów i filmy nie były odtwarzane automatycznie oraz aby klient mógł sterować pokazem slajdów za pomocą przycisków sterujących.

Pokazy slajdów

Dodając pokaz slajdów do sklepu online, postępuj zgodnie z poniższymi wytycznymi:

  • Pokazy slajdów nie odtwarzają się automatycznie.
  • Jeśli pokazy slajdów odtwarzają się automatycznie, zawierają elementy sterujące, za pomocą których klienci mogą wstrzymywać, przewijać lub zatrzymywać pokaz slajdów.

Filmy

Dodając film do sklepu online, postępuj zgodnie z poniższymi wytycznymi:

  • Filmy nie odtwarzają się automatycznie.
  • Jeśli filmy odtwarzają się automatycznie, ich dźwięk jest wyciszony.
  • W przypadku filmów z dźwiękiem, film jest w pełni widoczny i nie jest zasłonięty przez inne elementy strony. Dzięki temu napisy dla niesłyszących pozostają widoczne.
  • W przypadku filmów zawierających dialogi dostępne są transkrypcje tekstowe. Są one umieszczane na stronie lub w linku do osobnej strony.

Te wytyczne dotyczą również filmów, które są częścią pokazu slajdów.

Obsługa za pomocą klawiatury

Klienci z zaburzeniami wzroku lub motoryki mogą używać klawiatury do nawigacji i wykonywania zadań online. Tacy klienci polegają na wizualnym wskaźniku, który informuje, gdzie na stronie internetowej znajduje się fokus klawiatury. W poniższym przykładzie pole E-mail ma wizualny wskaźnik fokusu:

Ekran logowania klienta w sklepie online, na którym widoczne są pola formularza E-mail i Hasło. Pole E-mail jest obrysowane na niebiesko.

Jeśli edytujesz arkusz stylów szablonu, upewnij się, że nie usuwasz stylu fokusu klawiatury z żadnych elementów strony. Postępuj zgodnie z poniższą wytyczną:

  • Wszystkie interaktywne elementy strony mają wyraźny wskaźnik wizualny, gdy mają fokus klawiatury. Elementy te obejmują linki, przyciski i pola formularzy.

Zasoby

Aby dowiedzieć się więcej na temat dostępności w sieci w odniesieniu do tematów omówionych w tym artykule, zapoznaj się z poniższymi zasobami.

Zasoby dotyczące kontrastu kolorów

  • Colors with Good Contrast, artykuł z inicjatywy Web Accessibility Initiative
  • Contrast Ratio, narzędzie online, za pomocą którego można znaleźć współczynnik kontrastu między dwoma kolorami
  • Color Contrast Analyzer, aplikacja do sprawdzania współczynnika kontrastu do pobrania, opracowana przez Paciello Group

Zasoby dotyczące tekstu

Zasoby dotyczące tekstu alternatywnego

Zasoby dotyczące pokazów slajdów i wideo

Zasoby dotyczące obsługi klawiatury

W tej sekcji