Przejdź do treści
Pandus

Wymaganie WCAG A/AA Priorytet: Umiarkowane

Atrybuty dostępności użyto w niewłaściwej sytuacji

Niektóre elementy mają atrybuty dostępności, które dla ich typu są dozwolone tylko w określonych warunkach, np. aria-checked na prawdziwym polu wyboru lub atrybuty tabeli drzewiastej na zwykłym wierszu tabeli.

Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.

Dlaczego to ważne dla Twoich klientów

Czytnik ekranu może odczytać stan inny niż widoczny, np. „niezaznaczone” przy zaznaczonym polu „Akceptuję regulamin” lub opcji filtra, albo odczytać wiersze tabeli jako poziomy drzewa. Klienci mogą dokonać złego wyboru w filtrach lub przy składaniu zamówienia.

Kogo to dotyczy

  • osoby korzystające z czytników ekranu
  • niewidomi klienci

Jak to naprawić

Z natywnych pól wyboru należy usunąć aria-checked; stan elementu input wystarcza. Atrybuty wierszy, takie jak aria-level, aria-posinset, aria-setsize i aria-expanded, należy stosować na wierszach tabeli tylko wewnątrz role="treegrid". Tam, gdzie to możliwe, lepiej używać natywnych elementów HTML zamiast ARIA.

W Shopify

Zwykle własny kod filtrów, wariantów lub pól wyboru w motywie albo aplikacji. Należy znaleźć element w plikach Liquid i JavaScript motywu i usunąć sprzeczny atrybut; widżety aplikacji zgłosić ich twórcy.

W Shoptet (CZ)

Zwykle filtry lub formularze szablonu albo dodatki. Problem należy zgłosić do Shoptet lub partnera Shoptet.

W PrestaShop

Zwykle moduły wyszukiwania fasetowego, opcji produktu lub formularzy. Należy poprawić pliki .tpl i JavaScript motywu lub nadpisane szablony modułów.

W WooCommerce

Zwykle wtyczki filtrów, opcji produktu lub formularzy albo kreator stron. Należy poprawić to w motywie potomnym lub zgłosić autorowi wtyczki.

Normy

Normy
NormaPunkt
WCAG 2.2 4.1.2 (A) Name, Role, Value
WCAG 2.1 4.1.2 (A) Name, Role, Value
WCAG 2.0 4.1.2 (A) Name, Role, Value
EN 301 549 4.1.1 9.4.1.2
EN 301 549 3.2.1 9.4.1.2
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.4.1.2

Automatyczny test: reguła axe-core aria-conditional-attr. dequeuniversity.com, github.com, www.w3.org

Wszystkie reguły, które sprawdzamy