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

Wymaganie WCAG A/AA Priorytet: Krytyczne

Niestandardowe pola formularza nie mają etykiety

Niektóre pola zbudowane od podstaw, np. wyszukiwarka lub wybór kraju, nie mają nazwy, którą mogą odczytać technologie wspomagające.

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 nie wiedzą, do czego służy pole, więc mogą nie być w stanie wyszukać produktu ani wpisać adresu.

Kogo to dotyczy

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

Jak to naprawić

Nadaj nazwę każdemu elementowi z rolą pola (combobox, textbox, searchbox, listbox, slider, spinbutton) za pomocą aria-labelledby wskazującego na widoczny tekst albo aria-label. Jeszcze lepiej: użyj natywnego <input> lub <select> z elementem <label>.

W Shopify

Zwykle podpowiedzi wyszukiwania, filtry lub widżety aplikacji. Popraw etykiety w Liquid i JavaScript motywu; widżety aplikacji zgłoś ich twórcy.

W Shoptet (CZ)

Zwykle komponenty wyszukiwania lub filtrów w szablonie. Zgłoś problem do Shoptet lub partnera Shoptet.

W PrestaShop

Zwykle moduły wyszukiwania lub filtrów. Dodaj etykiety w nadpisanych szablonach modułów albo zgłoś problem twórcy modułu.

W WooCommerce

Zwykle wtyczki wyszukiwania, filtrów lub autouzupełniania adresu. Dodaj etykiety w ustawieniach wtyczki lub w kodzie motywu potomnego albo zgłoś problem 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-input-field-name. dequeuniversity.com, github.com, www.w3.org

Podobne testy

Wszystkie reguły, które sprawdzamy