Przejdź do treści
Pandus
pl Zmień język
Menu

Wymaganie WCAG A/AA Priorytet: Krytyczne

Niektóre przyciski formularzy nie mają nazwy

Niektóre przyciski utworzone przez <input type="button">, "submit" lub "reset" nie mają czytelnego tekstu, np. przycisk wyszukiwania lub zapisu do newslettera z samą ikoną albo pustym value.

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

Dlaczego to ważne dla Twoich klientów

Osoby korzystające z czytników ekranu i sterowania głosem nie wiedzą, co robi przycisk: wyszukuje, zapisuje, stosuje kod rabatowy czy wysyła formularz. Mogą go pominąć lub nacisnąć niewłaściwy, a więc nie znaleźć produktu albo nie przejść dalej.

Kogo to dotyczy

  • niewidomi klienci
  • osoby korzystające z czytników ekranu
  • osoby sterujące urządzeniem za pomocą głosu

Jak to naprawić

Każdy przycisk typu input powinien mieć nazwę. Najczęściej wystarczy znaczący atrybut value, np. value="Szukaj" lub value="Zastosuj kod". Przyciski-ikony wymagają aria-label albo zastąpienia inputa elementem <button> z widocznym lub wizualnie ukrytym tekstem. Nie należy zostawiać pustego value ani polegać na obrazku tła czy atrybucie title.

W Shopify

Zwykle przycisk wyszukiwania lub newslettera w motywie, wystylizowany jako ikona z pustym value, albo przyciski dodane przez aplikacje. Należy dodać value lub aria-label we fragmentach Liquid motywu; przyciski aplikacji powinni poprawić ich twórcy.

W Shoptet (CZ)

Zwykle w formularzu wyszukiwania lub newslettera w szablonie albo we własnych formularzach. Najpierw warto poprawić własny kod; w sprawie szablonu należy zapytać Shoptet lub partnera Shoptet, czy nowsza wersja opisuje te przyciski.

W PrestaShop

Zwykle w modułach wyszukiwania, newslettera lub kuponów, których szablony .tpl używają inputa-ikony z pustym value. Należy dodać value lub aria-label w motywie albo w nadpisanych szablonach modułów.

W WooCommerce

Częste w widżetach wyszukiwania, formularzach newslettera, polach kodu rabatowego i wtyczkach formularzy, które generują <input type="submit" value="">. Tekst przycisku można ustawić w ustawieniach widżetu lub wtyczki albo poprawić szablon motywu potomnego; przyciski wtyczek należy 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 input-button-name. dequeuniversity.com, github.com, www.w3.org

Podobne testy

Wszystkie reguły, które sprawdzamy