Dlaczego filtry w mojej witrynie e-commerce nie działają z czytnikiem ekranu

Filtry często brakuje nazwy, roli lub komunikatu o stanie

Filtry produktów zwykle nie działają prawidłowo ze czytnikami ekranu, ponieważ nie jest wystarczająco jasne, co to jest filtr, jaki jest jego bieżący stan lub co się stanie, gdy użytkownik dokona wyboru. Filtry w wielu sklepach internetowych składają się z pól wyboru lub przycisków, które wizualnie działają doskonale, ale są programowo niekompletnie skonstruowane: pole wyboru bez powiązanej etykiety, przycisk, który pokazuje aktywny filtr tylko poprzez zmianę koloru, lub panel filtru, który się otwiera bez powiadomienia czytnika ekranu. Dla widzącego odwiedzającego nie stanowi to problemu, ponieważ widzi zmianę. Dla czytnika ekranu ta wizualna zmiana nie istnieje — potrzebuje technicznego powiadomienia.

Innym powtarzającym się problemem jest to, że lista wyników zmienia się, ale czytnik ekranu o tym nic nie wie. Na przykład pod filtrem wyświetlane jest "24 wyniki", ale bez przekazania tego jako komunikatu o stanie, więc użytkownik musi sam szukać tego, co się zmieniło. Jest to ściśle związane z tym, jak nagłówki i struktura na stronie są zbudowane, ponieważ czytnik ekranu często porusza się po tej strukturze, aby określić, gdzie zaczynają się wyniki — więcej na ten temat znajduje się w Dlaczego czytnik ekranu nie czyta prawidłowo nagłówków na mojej stronie. Sposób, w jaki fokus zachowuje się po zastosowaniu filtru, również odgrywa istotną rolę: jeśli fokus przeskoczy bez życzenia do innej części strony, użytkownik czytnika ekranu traci orientację, jak opisano w Dlaczego kursor lub fokus przeskakuje na mojej stronie internetowej.

Co WCAG ustanawia w tej sprawie

To, że filtry muszą być w stanie przekazać nazwę, rolę i stan do technologii wspomagających, takich jak czytnik ekranu, oraz że zmiany stanu, takie jak zmieniona liczba wyników, są ogłaszane, wynika z kryteriów dotyczących nazwy, roli i wartości oraz komunikatów o stanie w WCAG 2.1 (W3C) — poziomu, który w praktyce oczekiwany jest poprzez EN 301 549. Automatyczne skanowanie rozpoznaje część tego rodzaju wad, takich jak pole wyboru bez etykiety, ale czy komunikat o stanie jest rzeczywiście zrozumiały dla użytkownika, wymaga oceny, której skanowanie nie może przeprowadzić — zobacz czy automatyczny test dostępności może znaleźć wszystko.