Audyt zdjęć i grafik w menu restauracji według WCAG 2.2

Zakres audytu: co sprawdzamy, a czego nie

Strona restauracji zwykle zawiera trzy typy treści wizualnej, które podlegają temu audytowi: fotografie dań w karcie menu, banery promocyjne na stronie głównej lub w sekcji wydarzeń, oraz menu udostępniane jako plik PDF do pobrania lub wydruku. Każdy z tych elementów jest treścią nietekstową w rozumieniu WCAG 2.2 i może stać się niedostępny dla osoby korzystającej z czytnika ekranu, nawigacji klawiaturowej lub przeglądarki z ograniczeniami wizualnymi na inne sposoby.

Audyt nie obejmuje formularzy rezerwacji stolika, procesu składania zamówienia online, chatbotów obsługi klienta ani interaktywnych map lokalizacji. Te elementy podlegają innym kryteriom WCAG 2.2 – między innymi dotyczącym etykiet formularzy, identyfikacji błędów i operowania za pomocą klawiatury – i wymagają odrębnego przeglądu.

Cztery kryteria WCAG 2.2 istotne dla materiałów wizualnych menu

Rama audytu PKTK: Percepcja, Kontrast, Tekst, Kontekst

Poniższy schemat porządkuje cztery kryteria WCAG 2.2 w kolejność praktycznych kroków sprawdzania. Nazwa PKTK odnosi się do czterech pytań zadawanych przy każdym elemencie wizualnym.

1. Percepcja – Czy obraz ma tekst alternatywny zgodny z kryterium 1.1.1? Sprawdź, czy alt opisuje danie lub funkcję obrazu (np. "Risotto z borowikami i parmezanem", nie "zdjęcie1"), a elementy czysto dekoracyjne

   Krok po kroku: jak przeprowadzić audyt w praktyce

   Audyt materiałów wizualnych menu nie polega na jednorazowym przebiegnięciu strony narzędziem automatycznym. Poniższy przebieg pokazuje kolejność działań, która pozwala udokumentować zgodność z WCAG 2.2 w sposób powtarzalny i możliwy do zweryfikowania przez inną osobę.

   1. Inwentaryzacja treści wizualnej. Sporządź listę wszystkich zdjęć dań, banerów i plików PDF występujących na stronie – łącznie z wersjami mobilnymi, które mogą ładować inne pliki graficzne niż wersja desktopowa.
   2. Ustalenie próbki do sprawdzenia. Jeśli menu zawiera dziesiątki zdjęć, wybierz próbkę obejmującą różne kategorie (przystawki, dania główne, desery, alergeny) oraz wszystkie unikalne szablony banerów – nie tylko pierwszą stronę.
   3. Sprawdzenie kodu źródłowego pod kątem 1.1.1. Dla każdego elementu z próbki odczytaj atrybut alt lub jego brak. Rozróżnij obrazy informacyjne (wymagają opisowego alt) od czysto dekoracyjnych (wymagają alt="" lub oznaczenia jako element dekoracyjny w kodzie).
   4. Pomiar kontrastu tekstu i elementów graficznych. Dla banerów z nałożonym tekstem zmierz kontrast tekstu względem tła zgodnie z 1.4.3, a dla ramek, ikon i przycisków graficznych – zgodnie z 1.4.11.
   5. Weryfikacja plików PDF menu. Otwórz plik i sprawdź, czy tekst można zaznaczyć i skopiować. Jeśli menu jest zeskanowanym obrazem bez warstwy tekstowej, oznacz to jako niezgodność z 1.4.5 i 1.1.1 jednocześnie.
   6. Test z czytnikiem ekranu. Przejdź przez próbkę stron przy użyciu czytnika ekranu, aby ocenić, czy odczytywane opisy obrazów są zrozumiałe w kontekście, a nie tylko formalnie obecne.
   7. Dokumentacja i priorytetyzacja. Zapisz każdy znaleziony problem z odniesieniem do konkretnego kryterium WCAG 2.2, lokalizacji na stronie i sugerowanej poprawki.
   8. Retest po poprawkach. Po wdrożeniu zmian powtórz kroki 3–6 dla poprawionych elementów, zamiast zakładać, że poprawka zadziałała.

   Przypadki graniczne wymagające dodatkowej uwagi

   Część sytuacji na stronach restauracyjnych nie mieści się jednoznacznie w prostym podziale „obraz ma alt / obraz nie ma alt” i wymaga decyzji opartej na kontekście użycia.

   • Obrazy tła w CSS (background-image). Zdjęcie dania ustawione jako tło elementu przez CSS nie przyjmuje atrybutu alt w HTML. Jeśli obraz przekazuje informację (np. jest jedynym miejscem prezentującym nazwę promocji wpisaną graficznie), potrzebny jest alternatywny mechanizm tekstowy zgodny z 1.1.1 – np. tekst umieszczony w znaczniku obok, a nie tylko w tle.
   • Karuzele i slidery ze zdjęciami dań. Automatycznie przewijające się banery wymagają odrębnej weryfikacji względem kryteriów dotyczących ruchu i czasu, które nie są częścią tego audytu, ale warto odnotować je jako punkt do sprawdzenia w osobnym przeglądzie, ponieważ dotyczą tych samych elementów wizualnych.
   • Rozróżnienie dekoracyjne vs. informacyjne. Zdjęcie dania w karcie menu, które jedynie ilustruje istniejący opis tekstowy, może być oznaczone jako dekoracyjne, jeśli opis tekstowy przekazuje tę samą informację. Jeśli jednak zdjęcie jest jedynym miejscem, gdzie widać np. sposób podania lub garnirunek wspomniany w opisie sprzedażowym, powinno mieć opisowy alt.
   • Ikony alergenów i diet. Piktogramy (np. gluten, laktoza, wegańskie) używane bez podpisu tekstowego wymagają tekstu alternatywnego jednoznacznie identyfikującego znaczenie ikony, a nie ogólnego opisu graficznego – sama nazwa pliku lub „ikona” nie spełnia intencji 1.1.1.
   • Menu PDF z warstwą tekstową, ale bez struktury tagów. Plik może przechodzić test „zaznacz i skopiuj tekst”, a jednocześnie nie mieć logicznej struktury nagłówków i kolejności odczytu, co utrudnia korzystanie z niego przez czytnik ekranu mimo formalnej obecności tekstu.

   Dokumentowanie wyników audytu

   Wynik audytu powinien być zapisany w formie umożliwiającej śledzenie postępu poprawek, a nie tylko listy zdjęć „dobre/złe”. Poniższa struktura rekordu ułatwia przekazanie wyników do zespołu technicznego.

   Pole rekordu	Przykładowa treść
   Lokalizacja elementu	Sekcja "Desery", strona /menu, trzecie zdjęcie w rzędzie
   Kryterium WCAG 2.2	1.4.3 Kontrast (minimum)
   Zmierzona wartość	Kontrast tekstu 3,1:1 przy wymaganym 4,5:1
   Status	Niezgodne
   Priorytet naprawy	Wysoki / średni / niski – ustalony wewnętrznie, nie wynika automatycznie z kryterium
   Data retestu	Do wypełnienia po wdrożeniu poprawki

   Warto zachować zrzuty ekranu lub zapisany kod HTML z momentu audytu – ułatwia to weryfikację, czy poprawka faktycznie zmieniła zgłoszony element, a nie inny, podobny wizualnie.

   Ograniczenia audytu i czego nie wykryją narzędzia automatyczne

   Narzędzia do automatycznego skanowania kontrastu i atrybutów alt są przydatne do pierwszego przejścia, ale mają wyraźne granice, które warto uwzględnić przy planowaniu audytu.

   • Narzędzie automatyczne wykryje brak atrybutu alt, ale nie oceni, czy istniejący tekst alternatywny jest sensowny w kontekście dania lub promocji – to wymaga przeglądu przez osobę.
   • Pomiar kontrastu na obrazach ze zdjęciowym tłem (np. tekst na fotografii dania) bywa niedokładny przy antyaliasingu krawędzi liter lub gradientowym tle – warto zmierzyć kontrast w kilku punktach tekstu, nie tylko w jednym.
   • Automatyczne skanery PDF różnią się w sposobie wykrywania struktury tagów; wynik „zgodne” w jednym narzędziu nie zawsze potwierdza się w teście czytnikiem ekranu.
   • Audyt automatyczny nie ocenia kolejności odczytu treści na banerze złożonym z kilku warstw graficznych – to wymaga manualnego testu z czytnikiem ekranu.
   • Wyniki audytu opisują stan strony w momencie testu; zmiany w systemie zarządzania treścią (np. nowe zdjęcie dania wgrane bez alt) mogą wprowadzić regresję, jeśli audyt nie jest powtarzany okresowo.

   Ustalanie wielkości próbki: rama liczbowa

   Krok „ustalenie próbki” z głównego przebiegu audytu można oprzeć na prostej regule proporcjonalnej, a nie na intuicyjnym wyborze kilku zdjęć. Poniższa rama pomaga zdecydować, ile elementów sprawdzić przy różnej wielkości menu.

   Liczba unikalnych obrazów na stronie	Zalecany rozmiar próbki	Zasada doboru
   Do 20	100% (wszystkie)	Pełny przegląd jest wykonalny czasowo
   21–100	Minimum 1 obraz z każdej kategorii menu + wszystkie unikalne szablony banerów	Reprezentacja typów, nie tylko liczby
   Powyżej 100	Jak wyżej, plus losowa próba dodatkowa z pozostałych obrazów	Losowość ogranicza obciążenie wynikające z wyboru „najłatwiejszych” przykładów

   Reguła ta nie wynika z WCAG 2.2 (specyfikacja nie definiuje metody próbkowania), lecz jest praktycznym uzupełnieniem kroku 2 z przebiegu audytu – warto to wyraźnie odnotować w dokumentacji audytu, aby nie sugerować zgodności ze standardem.

   Przypadki graniczne pominięte w podstawowym przebiegu

   Obrazy responsywne (srcset, picture)

   Strona restauracji może ładować różne pliki graficzne w zależności od szerokości ekranu za pomocą atrybutu srcset lub elementu <picture>. Audyt kryterium 1.1.1 powinien objąć każdy wariant źródłowy, nie tylko ten wyświetlany domyślnie w przeglądarce testera – tekst alternatywny jest wspólny dla wszystkich wariantów, ale sam obraz (np. przycięty kadr) może ujawniać lub skrywać inną informację niż wersja desktopowa.

   Ikony SVG i animacje

   Ikony alergenów zapisane jako SVG mogą zawierać wewnętrzny tekst (<title>, <desc>) niezależny od atrybutu alt kontenera – audyt powinien sprawdzić oba miejsca, ponieważ czytniki ekranu różnie obsługują zagnieżdżony tekst SVG. Animowane banery (GIF, animowane SVG) wymagają dodatkowo sprawdzenia, czy tekst promocyjny jest widoczny na tyle długo, by zdążyć go odczytać – to zagadnienie czasu ekspozycji wykracza poza cztery kryteria opisane w tym audycie i wymaga odrębnego przeglądu.

   Wariant ciemny/jasny motywu

   Jeśli strona udostępnia przełącznik motywu ciemnego, kontrast tekstu na banerach i ikon (1.4.3, 1.4.11) należy zmierzyć w obu wariantach osobno – zmiana tła może obniżyć kontrast, który był zgodny w motywie domyślnym.

   Kalibracja pomiaru kontrastu

   Wynik pomiaru kontrastu zależy od miejsca pobrania próbki koloru, zwłaszcza na zdjęciach z teksturowanym lub gradientowym tłem. Zamiast jednego odczytu warto:

   • zmierzyć kontrast w co najmniej trzech punktach wzdłuż napisu (początek, środek, koniec),
   • przyjąć najniższą zmierzoną wartość jako wynik reprezentatywny, nie średnią,
   • powtórzyć pomiar po eksporcie/kompresji obrazu, jeśli plik był ponownie zapisany po edycji – kompresja może zmienić kolory pikseli na krawędziach liter.

   Zarządzanie regresją w czasie

   Audyt jednorazowy nie chroni przed regresją wynikającą z bieżącej edycji treści przez zespół restauracji. Praktyczny cykl kontrolny obejmuje: (1) oznaczenie w systemie zarządzania treścią pól „alt tekst” jako wymaganych przy wgrywaniu nowego zdjęcia dania, (2) okresowy retest próbki niezależny od retestu poprawek (np. co ustalony interwał, a nie tylko po zgłoszonych zmianach), oraz (3) prowadzenie rejestru wersji audytowanych plików PDF, ponieważ podmiana pliku pod tym samym adresem URL może przywrócić wersję bez warstwy tekstowej.

   Dodatkowe ograniczenia audytu

   • Treści wizualne osadzone z zewnętrznych widżetów (np. wtyczka mediów społecznościowych prezentująca zdjęcia dań) mogą nie być pod kontrolą operatora strony i wymagają odnotowania jako ograniczenie zakresu, nie jako niezgodność do samodzielnej naprawy.
   • Jeśli menu istnieje w wielu wersjach językowych, tekst alternatywny powinien być sprawdzony w każdej wersji językowej osobno – automatyczne narzędzia zwykle nie wykrywają niedopasowania języka alt do języka strony.
   • Ustalenie priorytetu naprawy (wysoki/średni/niski) jest decyzją wewnętrzną zespołu, a nie wynikiem, który sama specyfikacja WCAG 2.2 przypisuje kryteriom.

   Źródła pierwotne

   • W3C: Web Content Accessibility Guidelines 2.2

   FAQ

   Czy ten audyt obejmuje formularze rezerwacji lub zamówień online?

   Nie. Ten proces dotyczy treści nietekstowych – zdjęć dań, banerów promocyjnych i menu w formacie PDF. Formularze, procesy zamówień i interaktywne widżety rezerwacyjne podlegają odrębnym kryteriom WCAG dotyczącym etykiet, identyfikacji błędów i obsługi klawiatury, i powinny być audytowane osobno.

   Które kryteria WCAG 2.2 mają największe znaczenie dla zdjęć w menu?

   Dla materiałów wizualnych w menu kluczowe są kryteria 1.1.1 Treść nietekstowa, 1.4.3 Kontrast (minimum), 1.4.5 Obrazy tekstu oraz 1.4.11 Kontrast elementów nietekstowych, zdefiniowane w specyfikacji WCAG 2.2. Każde z nich odnosi się do innego sposobu, w jaki obraz może stać się niedostępny dla osoby korzystającej z technologii asystującej.

   Czy zaliczenie testu w narzędziu do sprawdzania kontrastu wystarczy, by uznać stronę z menu za zgodną z WCAG?

   Żadne pojedyncze narzędzie nie potwierdza pełnej zgodności. Automatyczne testy mierzą precyzyjnie współczynniki kontrastu kolorów, ale nie ocenią, czy tekst alternatywny jest sensowny, czy menu PDF ma poprawnie oznaczoną strukturę, ani czy obraz przekazuje informację niepowtórzoną gdzie indziej na stronie. Przegląd manualny pozostaje niezbędny jako uzupełnienie testów automatycznych.

   Nota redakcyjna: ChefNet publikuje ten przewodnik i rozwija produkty wspierające odkrywanie restauracji oraz ich działalność. Ogólne zalecenia operacyjne są oddzielone od twierdzeń o produkcie. Funkcje mogą się zmieniać wraz z rozwojem pilotaży. Opublikowano 2026-08-12.