Nagłówki i etykiety

Co oznacza to kryterium

Nagłówek pomaga przewidzieć, o czym jest następująca treść, a etykieta — do czego służy pole lub działanie. Jeżeli napis zapowiada godziny, a sekcja zawiera wyłącznie adres, użytkownik otrzymuje mylną wskazówkę. Krótki napis może wystarczyć, gdy otaczający kontekst jasno wyjaśnia jego znaczenie; kryterium nie wymaga długich ani zawsze unikalnych etykiet.

Przykłady błędów i poprawek

Pracownia udostępnia lokalne wyszukanie punktu odbioru według syntetycznego kodu P-104. Treść sekcji zawsze brzmi: „Punkt Pracownia: ul. Przykładowa 12. Wejście od ogrodu.” Pole jest zwykłym polem tekstowym. Aktywacja przycisku dla P-104 zawsze pokazuje „P-104: ul. Przykładowa 12, wejście od ogrodu.” Nie ma w tej funkcji adresu e-mail ani godzin otwarcia.

Jedyną istotną różnicą pary good–bad są trzy istniejące opisy. Typ kontrolki, relacja nazwy, callback i dane są wspólne. W mobilnej karcie układ i rozmiary pola, sekcji oraz przycisku są identyczne; długość tekstu zmienia szerokość samych liter. W WWW tekstowy przycisk ma naturalnie różne szerokości: good 116,8125, bad 134,328125 CSS px, przy tych samych stylach i funkcji. Oznaczenie wariantu i narzędzia researchu znajdują się poza badaną kartą.

Błędy i poprawki

1. Mylący nagłówek: „Godziny odbioru” prowadzi do tekstu zawierającego adres i instrukcję wejścia. Osoba szukająca godzin wybiera niewłaściwą sekcję. Poprawka: „Miejsce odbioru”, przy identycznej treści poniżej.
2. Myląca etykieta pola: „Adres e-mail” zapowiada e-mail, chociaż pole służy do wyszukania kodu odbioru. Wpisanie rzeczywistego e-maila nie realizuje tej funkcji. Poprawka: „Kod odbioru”, bez zmiany pola i danych.
3. Myląca etykieta działania: „Pokaż godziny” zapowiada wynik o godzinach, a przycisk ujawnia adres. Poprawka: „Pokaż adres”, bez zmiany callbacku i rezultatu.

To ocena AI na podstawie treści, wykonanej interakcji i kontekstu. XCTest sprawdza odtworzenie stanów, a nie samodzielne rozumienie języka. Nie są to dane o częstości takich błędów w produktach.

Kontrole bez naruszenia badanego warunku

„Odbiór”, „Kod” i „Adres” mają sens przy widocznej treści punktu odbioru i funkcji pokazania adresu. Ocena AI: w tym konkretnym kontekście krótkość nie powoduje usterki 2.4.6. Nie należy kopiować tej oceny do formularza bez kontekstu.

Minimalny WWW dodatkowo pokazuje widoczne grupy „Dostawa” i „Rozliczenie”, każda z polami „Imię” i „Ulica”. Wpisano różne syntetyczne dane: Ola / Przykładowa 12 i Jan / Testowa 8. Wynik rzeczywiście zachował przypisanie do obu grup. Widoczne legendy wyjaśniają rolę powtórzonych etykiet; każda etykieta pozostaje programowo powiązana z własnym polem. Kontrola ta uzupełnia mobilną kontrolę krótkich napisów.

Kiedy obowiązuje i gdzie są wyjątki

Normatywny warunek dotyczy opisowości obecnych nagłówków i etykiet. Nie ustanawia obowiązku dodania nagłówka do każdej sekcji ani etykiety do każdego elementu. Brak wymaganej etykiety lub instrukcji bada 3.3.2, strukturę i relacje — 1.3.1, a nazwę dostępną, rolę i wartość — 4.1.2. Zbieżność tekstu widocznego z nazwą dostępną należy do 2.5.3. Spełnienie jednej z tych właściwości nie potwierdza pozostałych.

„Etykieta” oznacza informację przedstawioną użytkownikom do rozpoznania elementu; nie ogranicza się do znacznika HTML label. Sama ukryta nazwa AX nie naprawia mylącego widocznego napisu. W naszej parze etykieta i nazwa AX są takie same, więc problemem jest znaczenie opisu wobec rzeczywistego działania.

Nie ma wymaganej liczby słów. Jedno słowo, a czasem znak, może opisywać cel w wystarczającym kontekście. Powtórzone etykiety mogą być odpowiednie przy jasnych widocznych grupach; sam duplikat nie jest ustaleniem naruszenia. Kontekst trzeba faktycznie sprawdzić, zamiast zakładać, że każda lupa oznacza wyszukiwanie albo że każda krótka etykieta jest niejasna.

Understanding sprawdzono w wersji z aktualizacją 2026-03-09. G130 (2026-01-12) i G131 (2026-08-10) są pomocniczymi technikami wystarczającymi: porównać nagłówek z opisywaną treścią oraz etykietę z przeznaczeniem kontrolki. Techniki nie są obowiązkowymi sposobami implementacji. G201 i SCR24 dotyczą pomocniczego uprzedzania o otwarciu nowego okna; nie rozszerzają 2.4.6 o taki obowiązek. Understanding nie wymienia osobnej katalogowej techniki Failure dla tego kryterium; poniższe usterki są własnymi scenariuszami.

Platformy

WCAG2ICT stosuje tu treść wymagania bez zmian; tekst statyczny może pełnić funkcję nagłówka lub etykiety. Jest wskazówką interpretacyjną poza WWW, a nie odrębnym normatywnym wymaganiem ani oceną obowiązku prawnego. Nie analizowano EN 301 549. Wykonanie obejmuje Flutter/Cupertino w iOS Simulator i minimalny przykład webowy; desktop, dokumenty, inne urządzenia i pozostałe natywne frameworki NOT-RUN.

Rozwiązania w technologiach

Najpierw ustal, co rzeczywiście zawiera sekcja i co robi kontrolka, potem dobierz widoczny opis. Udostępnienie roli nagłówka lub nazwy pola pozwala korzystać z opisu w innych sposobach nawigacji; samo dodanie semantyki nie naprawia błędnego znaczenia tekstu.

import 'package:flutter/cupertino.dart';

Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
  Semantics(header: true, child: const Text('Miejsce odbioru')),
  const Text('Punkt Pracownia: ul. Przykładowa 12. Wejście od ogrodu.'),
  const Text('Kod odbioru'),
  Semantics(
    label: 'Kod odbioru',
    child: CupertinoTextField(controller: code),
  ),
  CupertinoButton(onPressed: showAddress, child: const Text('Pokaż adres')),
])

import SwiftUI

struct PickupForm: View {
    @State private var code = ""
    let showAddress: (String) -> Void
    var body: some View {
        VStack(alignment: .leading) {
            Text("Miejsce odbioru").font(.title2)
                .accessibilityAddTraits(.isHeader)
            Text("Punkt Pracownia: ul. Przykładowa 12. Wejście od ogrodu.")
            Text("Kod odbioru")
            TextField("Kod odbioru", text: $code)
                .accessibilityLabel("Kod odbioru")
            Button("Pokaż adres") { showAddress(code) }
        }
    }
}

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.semantics

@Composable
fun PickupForm(showAddress: (String) -> Unit) {
    var code by remember { mutableStateOf("") }
    Column {
        Text("Miejsce odbioru", Modifier.semantics { heading() })
        Text("Punkt Pracownia: ul. Przykładowa 12. Wejście od ogrodu.")
        TextField(value = code, onValueChange = { code = it },
            label = { Text("Kod odbioru") })
        Button(onClick = { showAddress(code) }) { Text("Pokaż adres") }
    }
}

import React, { useState } from 'react';
import { Button, Text, TextInput, View } from 'react-native';

export function PickupForm({
  showAddress,
}: {
  showAddress: (code: string) => void;
}) {
  const [code, setCode] = useState('');
  return (
    <View>
      <Text accessibilityRole="header">Miejsce odbioru</Text>
      <Text>Punkt Pracownia: ul. Przykładowa 12. Wejście od ogrodu.</Text>
      <Text>Kod odbioru</Text>
      <TextInput
        accessibilityLabel="Kod odbioru"
        value={code}
        onChangeText={setCode}
      />
      <Button title="Pokaż adres" onPress={() => showAddress(code)} />
    </View>
  );
}

<h1>Miejsce odbioru</h1>
<p>Punkt Pracownia: ul. Przykładowa 12. Wejście od ogrodu.</p>
<label for="code">Kod odbioru</label>
<input id="code" />
<button type="submit">Pokaż adres</button>

<fieldset>
  <legend>Dostawa</legend>
  <label for="shipping-name">Imię</label><input id="shipping-name" />
</fieldset>
<fieldset>
  <legend>Rozliczenie</legend>
  <label for="billing-name">Imię</label><input id="billing-name" />
</fieldset>

Jak sprawdzić

1. Rozpoznaj faktyczny nagłówek, opisywaną treść i etykiety w wybranym języku. Zachowaj widoczny kontekst, nie tylko wyizolowane napisy.
2. Porównaj temat każdego nagłówka z rzeczywistą zawartością sekcji. W przykładzie adres i wejście mają odpowiadać „Miejsce odbioru”, a nie godzinom.
3. Dla etykiety ustal cel pola lub działania, korzystając z treści i rzeczywistej interakcji. Wpisz P-104 i aktywuj przycisk; oczekiwany wynik to adres. Zapisz rezultat również dla mylącego wariantu.
4. Sprawdź krótkie i powtórzone etykiety w kontekście. W kontroli WWW wpisz różne dane do obu grup i sprawdź przypisanie wyniku. Duplikat tekstu ani mała liczba znaków nie wystarczają do FAIL.
5. Osobno odnotuj relację, rolę i nazwę w DOM/AX. Są dowodem tego, jaki opis udostępniono, a nie automatyczną oceną jego trafności ani wykonaniem czytnika.
6. Powtórz z innym kodem, zmianą wariantu i resetem; wyklucz pozostawiony wynik lub dane poprzedniego stanu. W badanej demonstracji ZZ daje komunikat braku odbioru, a reset wraca do początkowego good.

Weryfikacja i ograniczenia

Wyniki wykonania — 2026-10-04

Środowisko: iPhone 17 Simulator, iOS 26.5, dedykowany UDID 1EBF874A-4981-4C31-A744-72A53238C827, Xcode 27.0 (27A266a), Flutter 3.44.9, Dart 3.12.2, jasny wygląd i kategoria tekstu large. Wymiary renderera, DPR i pikseli obrazów są zapisane przy rzeczywistych odczytach w metadanych. Nie zmieniano skali, orientacji ani konfiguracji AT podczas tej próby.

Pełne logi, obserwacje i manifesty obu prób zachowują pochodzenie. Porównano wszystkie pliki zbudowanych i zainstalowanych aplikacji oraz sterowników przed i po testach. Checker sprawdza integralność fixture i artefaktów; wynik PASS tego skryptu nie jest wynikiem audytu WCAG. Szczegóły odtwarzania są w dokumentacji wykonania.

ACT — zakres jest węższy niż całe kryterium

Przejrzano kompletne proponowane reguły w formacie ACT 1.1, nie ogłoszono wykonania ich przez silnik.

b49b2e — Heading is descriptive, proposed, aktualizacja 2026-07-09. Zakres: semantyczny heading w drzewie dostępności, z niepustą nazwą. Oczekiwanie dotyczy pierwszej następującej po nim postrzegalnej, niedekoracyjnej treści według flat tree, nie całej sekcji. Postrzegalna treść jest treścią palpable obecną wizualnie lub w AX, z rolą inną niż none/presentation. Nagłówek poza ekranem może należeć do zakresu; widoczny nagłówek usunięty z AX oraz pusty nagłówek nie są objęte tym testem. Reguła zakłada zbliżoną kolejność drzewa i obrazu oraz widoczność treści, którą nagłówek opisuje. Inne pozycjonowanie lub rozwijana treść mogą dać FAIL reguły bez naruszenia SC; rozwiązywanie konfliktu roli presentation zależy od wsparcia technologii. Potrzebne są DOM, AX, CSS i język. PASS lub inapplicable nadal wymagają dalszego badania SC; FAIL należy interpretować w granicach założeń.

cc0f0a — Form field label is descriptive, proposed, aktualizacja 2026-01-28. Zakres obejmuje widoczną kontrolkę i jej widoczną programmatic label: HTML label przypisane do kontrolki albo element wskazany przez aria-labelledby. Dotyczy ról checkbox, combobox, listbox, menuitemcheckbox, menuitemradio, radio, searchbox, slider, spinbutton, switch, textbox oraz input bez roli o typach color, date, datetime-local, file, month, password, time, week. Opis wraz z kontekstem wizualnym ma wyjaśniać cel pola. Etykieta może być ukryta przed AT, lecz nadal widoczna; ukryta nazwa nie naprawia mylącej widocznej etykiety. Reguła zakłada, że programowe etykiety są częścią kontekstu wizualnego i służą osobom widzącym. Wsparcie konfliktów roli może się różnić. Wymaga DOM, AX, CSS i języka; PASS/inapplicable nie wystarczają do potwierdzenia całego SC.

Ta reguła formularza nie pokrywa każdej etykiety w rozumieniu WCAG, np. własnego tekstu przycisku działania w naszym przykładzie. Nie przenosimy zakresu HTML ACT na natywne drzewo XCTest. Pola i nagłówek naszego WWW nadają się do badania opisanych warunków, ale rzeczywista ocena znaczenia jest tu oceną AI, a nie formalnym wynikiem ACT.

Reguła, drzewo, AI i człowiek

Deterministycznie można sprawdzić obecność, relacje, rzeczywistą wartość, identyczny wynik funkcji, zachowanie resetu i hashe. Drzewo pomaga powiązać opis z kontrolką, lecz nie zawiera całego kontekstu wizualnego ani intencji biznesowej. Ocena AI może wykryć oczywistą sprzeczność „godziny”–adres, ale pozostaje wrażliwa na język, specjalistyczne znaczenie i brak danych. Człowiek ma ocenić trafność opisów w realnym zadaniu; jego przegląd nie został wykonany.

Nie oceniaj opisowości po długości, obecności nazwy AX, zgodności z oczekiwanym stringiem lub nazwie good/bad. Do zaślepionego walidatora należy przygotować wejście z prawdziwej treści, struktury, widocznego kontekstu i wykonanej funkcji, bez trasy, znacznika wariantu i oczekiwanego werdyktu. Aktualne surowe materiały zawierają te oznaczenia researchu; nie są gotowym zaślepionym wejściem. Brak danych lub brak wykrytej sprzeczności oznacza potrzebę oceny, a nie PASS.

Jak sprawdza Clearship

Clearship analizuje nagłówki i etykiety pól na osiągniętych ekranach natywnych. Reguły rozpoznają ogólne opisy, a ocena AI porównuje pozostałe opisy z kontekstem obrazu i drzewa. To pomoc we wskazaniu treści do oceny; język specjalistyczny, pełna sekcja i faktyczny rezultat działania nadal wymagają rozstrzygnięcia w kontekście zadania.

Metoda z 8–9 października 2026 r. ogranicza wejście AI do 200 węzłów i najwyżej sześciu kandydatów na obserwację. Nie obejmuje nazw przycisków, wszystkich wizualnych nagłówków ani osobnej oceny treści webowej. Bez AI, przy niepewności, błędzie lub wyczerpaniu budżetu wynik wymaga człowieka. Android i iOS pozostają bez pomiaru kontrolnego, więc brak znalezisk nie potwierdza spełnienia całego kryterium.

Powiązane kryteria

• 1.3.1
  Informacje i relacje

  Struktura i programowe relacje są odrębną właściwością.

• 3.3.2
  Etykiety lub instrukcje

  Określa potrzebę etykiet i instrukcji przy wprowadzaniu danych.

• 4.1.2
  Nazwa, rola, wartość

  Obecność nazwy nie potwierdza trafności opisu.

• 2.5.3
  Etykieta w nazwie

  Tekst widoczny ma znaleźć się w nazwie dostępnej.