Przejdź do treści
Żółty fotel - ikea
17.08.20225 MIN. CZYTANIA

Jak stworzyć dostępny e-commerce?

Treść artykułu

Zazwyczaj na blogu Kinaole opisujemy Wam dobre praktyki dostępnościowe, tak abyście mogli wykorzystywać tę wiedzę w swojej branży. Dzisiaj chciałabym skupić się na serwisie, który większość z tych praktyk już wdrożył! Mowa o pewnym szwedzkim gigancie, którego meble znajdziemy w prawie każdym domu… :- )

Pisząc ten artykuł mam nadzieję, że inne sklepy internetowe zrozumieją, dlaczego dostępność cyfrowa na ich stronach jest tak ważna, a co za tym idzie, wprowadzą poprawki i w swoich serwisach.

Dlaczego IKEA?

Link otwiera się w nowym oknie. IKEA to jeden z e-commerce’ów, który mieliśmy przyjemność badać pod względem dostępności cyfrowej w kwietniu tego roku. Wydaliśmy wtedy raport dostępności cyfrowej e-commerce’ów w Polsce (link do strony, na której możecie pobrać raport – Link otwiera się w nowym oknie.https://kinaole.co/dostepnosc-ecommerce/). IKEA zajęła w nim zaszczytne, pierwsze miejsce! Uzyskała wtedy 73% dostępności. Dziś pokażę Wam, jakie elementy wdrożyła, by wszyscy na równi, również osoby z niepełnosprawnościami, mogli cieszyć się z zakupów online.

Wdrożone udoskonalenia

Według badań przeprowadzonych przez Ilknur Eren – Frontend Engineer – w Understood.org (link do artykułu z badaniami – Link otwiera się w nowym oknie. https://www.smashingmagazine.com/2022/08/organization-improved-web-accessibility-case-study/) najczęściej popełnianymi błędami dostępnościowymi na stronach są:

  1. niski kontrast dla treści;
  2. brak tekstów alternatywnych dla grafik;
  3. puste linki bez kontekstu;
  4. brak etykiet dla formularzy;
  5. puste przyciski bez kontekstu;
  6. brak określenia języka strony.

Czy Ikea popełniła te same błędy u siebie?

Kontrast

Kryterium szczególnie ważne dla osób starszych, słabowidzących ( Link otwiera się w nowym oknie.1.4.3 WCAG). Na stronie głównej sklepu nie występuje ani jeden błąd kontrastu. Wszystkie treści posiadają współczynnik co najmniej 4,5:1. IKEA używa prostych kolorów, w większości bieli, czerni, żółci i niebieskiego, które w połączeniu ze sobą świetnie pasują. Dzięki temu, treści na stronie są czytelne i przyjemne dla oka użytkownika.

Grafika pokazująca dobry kontrast na stronie

Teksty alternatywne dla grafik

W czasie, gdy wydawaliśmy raport, grafiki na stronie IKEA były naprawdę dobrze opisane bądź też oznaczone jako elementy dekoracyjne. Dzisiaj po fragmentarycznym sprawdzeniu da się zauważyć sporo błędów. Podejrzewam (a właściwie mam nadzieję!), że jest to spowodowane ciągłymi zmianami oraz nowymi artykułami wprowadzanymi bezustannie na stronie. Widać jednak, że stałe elementy posiadają starannie przygotowane opisy ( Link otwiera się w nowym oknie.1.1.1 WCAG).

Ręka osoby regulującej strumień wody wypływającej z baterii kuchennej z wylewką wygiętą w łuk. W tle widoczne są szary panel ścienny i roślina w doniczce.

 

Alt=”Ręka osoby regulującej strumień wody wypływającej z baterii kuchennej z wylewką wygiętą w łuk. W tle widoczne są szary panel ścienny i roślina w doniczce.”

Język strony

Język na stronie został prawidłowo określony. Dzięki temu technologie asystujące dokładnie wiedzą, w jaki sposób przetworzyć zawarte w serwisie treści i przekazać je swoim użytkownikom ( Link otwiera się w nowym oknie.3.1.1. WCAG).

 

<html lang=”pl-PL” […] >

 

Etykiety dla pól formularza

Wszystkie pola formularza do zamówienia produktów online posiadają etykiety. Dzięki temu użytkownik korzystający z narzędzi asystujących dokładnie wie, jakie informacje musi wpisać, by otrzymać zamawiany produkt ( Link otwiera się w nowym oknie.3.3.2 WCAG)

Grafika przedstawiająca pole formularza wraz z etykietą

 

Dwa z sześciu najczęściej pojawiających się błędów nadal widnieją na stronie. Myślę jednak, że można po części usprawiedliwić to dużym asortymentem sklepu oraz częstymi zmianami na stronie, przez co nie wszystkie linki posiadają kontekst. Gorzej jest z przyciskami – „dodaj do ulubionych” jest elementem stałym, niezmiennym… Co się zadziało, IKEA?

Spróbujmy wyróżnić jednak więcej tych dobrych rzeczy.

Skip to content

Sklep posiada dość rozbudowane udogodnienie pomijania treści. Istnieje możliwość pominięcia nie tylko nawigacji, ale także list znajdujących się na środku strony. Jest to bardzo wygodne rozwiązanie dla osób poruszających się po stronie za pomocą klawiatury ( Link otwiera się w nowym oknie.2.4.1 WCAG).

Grafika przedstawiająca element do przeskoczenie treściGrafika przedstawiająca element do przeskoczenie treści

Widoczność fokusa

Kolejna, bardzo istotna funkcjonalność dla osób poruszających się po stronie za pomocą klawiatury. Użytkownik musi wiedzieć, na którym aktywnym elemencie aktualnie się znajduje. Na IKEA jest on bardzo dobrze widoczny ( Link otwiera się w nowym oknie.2.4.7 WCAG).

Grafika przedstawiająca fokus na stronie

Nagłówki

Na stronie głównej świetnie zaprojektowano nagłówki. Występują w odpowiedniej hierarchii, a także są logicznie uporządkowane. Ich prawidłowa struktura zdecydowanie ułatwia poruszanie się po stronie niewidomym, którzy często w pierwszej kolejności sprawdzają właśnie nagłówki ( Link otwiera się w nowym oknie.1.3.1. WCAG).

Grafika przedstawiająca hierarchię nagłówków

Dopasowanie do ekranu

Z serwisu możemy korzystać zarówno na większych rozdzielczościach jak i na urządzeniach mobilnych. Strona jest responsywna i dopasowuje się do szerokości ekranu. Użytkownik bez utraty treści może przeglądać stronę. W dzisiejszych czasach jest to bardzo ważne.Popularność urządzeń mobilnych wciąż wzrasta i bardzo wielu użytkowników korzysta z możliwości robienia zakupów za pomocą telefonu ( Link otwiera się w nowym oknie.1.4.10 WCAG).

Dlaczego warto zaprojektować dostępny e-commerce?

Jest wiele czynników, dla których warto, aby strona była dostępna. Kiedy w 2020 roku wybuchła pandemia, ogrom ludzi bał się wyjść z domu. Z tego powodu decydowano się na zakupy online, które są nie tylko wygodne i bezpieczne, ale też dostępne całodobowo. Użytkownicy mogą robić zakupy, gdzie chcą i kiedy chcą. Argumentem za była również najlepsza cena – często konkurencyjna w stosunku do sklepów stacjonarnych.

Według Gemius, w 2021 roku 77% osób korzystających z Internetu robiło w nim też zakupy. Obecnie76% e-konsumentów robi zakupy przy użyciu smartfona, przy czym w 2015 było to tylko 37%.

Do niedawna dostępność była fakultatywna, traktowana z rezerwą. Od 2019 roku zaczęło się to zmieniać, odkąd podmioty publiczne zostały zobligowane do bycia dostępnymi na podstawie z dnia 4 kwietnia 2019 r. o dostępności cyfrowej stron internetowych i aplikacji mobilnych podmiotów publicznych.Podmioty prywatne mają na to więcej czasu – jest to czerwiec 2025 roku. Co później? W głównej mierze kary finansowe.

Co więcej, dostępny e-commerce przyciąga do siebie jeszcze większą ilość użytkowników, w tym również z niepełnosprawnościami. Wniosek jest prosty, im większa ilość korzystających, tym większe zyski. Tym bardziej, że konkurencja jest ogromna.

Na marginesie warto wspomnieć, iż na początku sierpnia tego roku przygotowaliśmy kolejny raport dostępności – tym razem pochyliliśmy się nad bankowością (Link do strony, na której można pobrać raport – Link otwiera się w nowym oknie. https://kinaole.co/dostepnosc-bankowosc/).

Chcesz, by Twój e-commerce był dostępny? A może prowadzisz inny biznes i zależy Ci na szerszym gronie odbiorców? Zapraszamy do kontaktu! https://kinaole.co/kontakt/