Jak uczynić sklep na Shopify dostępnym

Co kontrolujesz, a czego nie

Wszystko do koszyka włącznie to kod szablonu: szablony, sekcje, snippety i cokolwiek wstrzykują aplikacje. To wszystko możesz naprawić.

Hostowany koszyk należy do Shopify. Nie zmienisz jego kodu, więc jego zgodność to pytanie do Shopify — i uzasadnione pytanie na piśmie, bo twoja własna deklaracja musi coś o tym powiedzieć. Sprzedawcy na Shopify Plus mają więcej swobody dzięki rozszerzalności koszyka, ale główna ścieżka wciąż należy do Shopify.

Błędy szablonu obecne w niemal każdym sklepie

Nawet szablony wywodzące się z Dawn dryfują, gdy sklep był dostosowywany przez rok.

• nie takZdjęcia produktów wypisywane z `alt="{{ product.title }}"` przy każdym obrazie, przez co galeria sześciu zdjęć sześć razy ogłasza to samo zdanie. Korzystaj z pola alt osobno dla każdego obrazu, a przy czysto ozdobnych ujęciach zostaw je puste.
• nie takPrzyciski z samą ikoną — koszyk, wyszukiwanie, lista życzeń, przyciski ilości — bez dostępnej nazwy. Dodaj ukryty wizualnie span albo `aria-label` nazywające czynność.
• nie takPlakietki promocji i różnice cen niesione samym kolorem, co łamie 1.4.1.
• nie takCeny promocyjne oznaczone tak, że czytnik ekranu odczytuje obie liczby bez wskazania, która obowiązuje. Otocz starą cenę znacznikiem `<s>` i opisz ją.
• nie takPróbki wariantów zbudowane z `div`-ów z obsługą kliknięcia zamiast z przycisków radiowych — nieosiągalne klawiaturą.
• nie takPrzyciski ilości poniżej 24 × 24 pikseli CSS, co łamie 2.5.8 w WCAG 2.2.
• nie takPasek ogłoszeń obracający się automatycznie, bez pauzy, co łamie 2.2.2.

To przez aplikacje dostępność po cichu wychodzi

Sklep z piętnastoma aplikacjami ma piętnaście źródeł wstrzykiwanego kodu, których nikt nie przejrzał. Okienka z opiniami, przełączniki walut, banery cookies i modale z dosprzedażą to typowi winowajcy, a modal łapiący fokus klawiatury to złamanie 2.1.2, które kończy sesję.

Zanim zainstalujesz cokolwiek, co renderuje się w sklepie, otwórz to i naciśnij Tab. Jeśli nie potrafisz dotrzeć do tego i zamknąć klawiaturą, jest to ryzyko — cokolwiek robi dla konwersji.

Kolejność, która mieści się w sprincie

Nie potrzebujesz przebudowy. Napraw szablony, a każdy produkt to odziedziczy.

• róbPrzeskanuj stronę produktu, stronę kolekcji, koszyk i strony konta. Cztery szablony pokrywają większość sklepu.
• róbNapraw raz obsługę tekstu alternatywnego w snippecie zdjęcia produktu.
• róbNadaj nazwę każdemu przyciskowi z ikoną w snippetach nagłówka i karty.
• róbSprawdź kontrast na plakietkach promocji, wyłączonych przyciskach i pasku ogłoszeń — w tych trzech miejscach kolor marki zwykle przegrywa.
• róbDokończ zakup samą klawiaturą, aż do przekazania do koszyka Shopify.
• róbUstaw te szablony na cotygodniowe skanowanie, żeby następna aktualizacja szablonu tego nie cofnęła.

Co napisać w deklaracji

Nazwij granicę wprost: szablon jest twoją odpowiedzialnością i oto jego stan; koszyk dostarcza Shopify i oto, co Shopify o nim publikuje. To uczciwe, sprawdzalne i o wiele lepsze niż ogólne twierdzenie, którego nie da się poprzeć.

Pytania

Czy Shopify jest dostępne od razu po wyjęciu z pudełka?

Referencyjny szablon Shopify, Dawn, startuje w przyzwoitym stanie. Do klientów trafia twoja dostosowana wersja plus aplikacje, i to tam gromadzą się błędy. Platforma nie czyni twojego sklepu zgodnym.

Czy mogę naprawić koszyk Shopify?

W planie standardowym nie — ten kod nie jest twój. Udokumentuj granicę w deklaracji dostępności i zgłaszaj konkretne ustalenia do Shopify. Sprzedawcy Plus mają więcej miejsca dzięki rozszerzalności koszyka.

Czy aplikacje dostępnościowe z Shopify App Store to naprawiają?

Większość to nakładki, a te nie naprawiają kodu pod spodem. Naprawa szablonu kosztuje mniej więcej tyle samo i jest trwała.

Czytaj dalej

• Europejski akt o dostępności dla tych, którzy muszą go spełnić
• Co automatyczne testy dostępności znajdą, a czego nie
• Jak napisać deklarację dostępności, która się obroni