Informacje i relacje

Co oznacza to kryterium

Gdy prezentacja mówi „to nagłówek”, „te pola należą do jednej grupy” lub „ta cena dotyczy tej dostawy”, znaczenie powinno pozostać dostępne przy innym sposobie odbioru. Udostępnij właściwą strukturę i relacje programowo albo wyjaśnij je jednoznacznym tekstem. Duży font, ramka i położenie obok siebie nie wystarczą, jeśli trzeba z nich odgadnąć związek.

Pomaga to osobom niewidomym i odbiorcom brajla zachować kontekst, osobom słabowidzącym czytającym zmienioną prezentację oraz części osób z trudnościami czytania i orientacji w treści. Kryterium obejmuje również znaczenie przekazywane formatowaniem dźwiękowym. Motoryka nie jest bezpośrednim warunkiem przedstawionego przykładu.

Przykłady błędów i poprawek

Ten sam cennik, inna semantyka

Własna „Pracownia” prezentuje dwa syntetyczne rekordy: Punkt odbioru — 9,90 zł — 2 dni; Kurier — 14,90 zł — 1 dzień. Wersje bad/good zachowują dane, fonty, układ i kolejność. Ich PNG są identyczne bajtowo, dlatego jeden obraz pokazuje wspólny wygląd. Różnicę wyznacza porównanie prezentacji z kodem i natywnym API.

XCTest potwierdził pełne etykiety dwóch rekordów. Natywne drzewo nie wypisuje tu jawnego traitu Header; Other zamiast StaticText samo nie potwierdza działania rotora Nagłówki. Flaga nagłówka była przedmiotem testu semantyki Fluttera, a VoiceOver pozostał niewykonany.

Problem

Kolumny wzrokowo przypisują cenę i czas do dostawy, ale API przekazuje osobne liczby bez tego znaczenia.

Skutek

Odbiorca bez układu wizualnego musi odgadywać, której dostawy dotyczą 9,90 zł i 2 dni.

Poprawka

Dla tych nieinteraktywnych rekordów udostępnij pełne zdania z nazwami danych i rolę nagłówka. W większej macierzy zapewnij relacje do właściwych nagłówków i dogodną nawigację.

To mały widok danych z tekstową informacją w API, bez implementacji nawigowalnej tabeli z rolami komórek i nagłówków. Nie przenoś jednej długiej etykiety całej tabeli do rozbudowanego zestawu danych ani kontenera z oddzielnymi przyciskami lub polami.

Kontrola: pełne zdania zamiast kolumn

Stan text pokazuje te same dwa rekordy jako widoczny zwykły tekst i zachowuje semantykę nagłówka. Brak tabeli nie jest tu błędem: prezentacja nie wymaga odtwarzania relacji kolumn, a przypisania są zapisane w zdaniach.

Relacje w nagłówkach, polach i tabelach

Poniższe scenariusze tekstowe nie mają osobnych uruchomień. Nie są statystyką występowania ani obowiązkową listą technik.

Kiedy obowiązuje i gdzie są wyjątki

Wymaganie obejmuje informacje, strukturę i związki przekazywane prezentacją, również dźwiękiem, np. sygnałem początku działu. Nie każda geometria lub ozdobny styl niesie znaczenie. Kryterium nie ma listy zwolnień ze względu na małą liczbę wierszy lub koszt implementacji.

Relacja to znaczący związek części treści, a struktura ich organizacja oraz organizacja zbioru stron. Dane dostępne programowo muszą pozwalać oprogramowaniu i technologiom asystującym wyodrębnić znaczenie oraz przedstawić je w innej formie. Obiekt w kodzie, identyfikator testowy lub pozycja na ekranie tego nie zapewniają.

Dopuszczony tekst jest programowo rozpoznawalnym ciągiem znaków w języku naturalnym. Obraz tekstu lub screenshot nie spełnia tej definicji. Tekst musi wyjaśniać przypisanie i zachować kontekst także przy liniowym odczycie. Same nazwy kolumn i oddzielne liczby nie są jeszcze takim opisem.

Preferuj semantyczną strukturę tam, gdzie technologia ją wspiera. Droga tekstowa jest dopuszczona, bez uzasadnienia kasowania poprawnych relacji. Nie trzeba tworzyć nagłówków tam, gdzie ich nie ma; gdy treść rzeczywiście jest nagłówkiem, zachowaj rolę i hierarchię. Oznaczanie zwykłego zdania jako nagłówka tylko dla stylu może fałszować strukturę.

Znaczenie koloru może wymagać tekstu, ale nie trzeba udostępniać wartości RGB ani samej nazwy koloru. 1.4.1 osobno wymaga widocznej alternatywy; nazwa stanu wyłącznie dla czytnika nie rozwiązuje tamtej bariery. Kolejność, opisowość nagłówków, instrukcje pól oraz nazwa/rola/stan kontrolek mają też odrębne wymagania.

Platformy

Przegląd AI z 2026-10-02: WCAG 2.2 dla WWW i interpretacja WCAG2ICT bez zmiany wymagania dla dokumentów i oprogramowania. Draft nie podaje daty wydania WCAG2ICT. Klasyfikacja nie ustala obowiązków prawnych ani dostępności sprzętu.

W hybrydzie rozdziel WebView i część natywną. Brak tabeli nie wyłącza nagłówków i innych relacji.

Rozwiązania w technologiach

Przegląd oficjalnych API: 2026-10-02. Kod pokazuje tylko statyczne dane oraz nagłówek; nie jest pełnym formularzem ani walidatorem tabel. Nie scalaj w jedną etykietę kontenera z przyciskami lub edytowalnymi polami — utraciłbyś ich oddzielną obsługę.

import 'package:flutter/cupertino.dart';

Widget deliveryRow(String name, String price, String time) => Semantics(
  container: true,
  excludeSemantics: true,
  label: 'Dostawa: $name. Cena: $price. Czas: $time.',
  child: Row(children: [Text(name), Text(price), Text(time)]),
);

Widget deliveryPricesView() => Column(children: [
  Semantics(header: true, child: const Text('Koszty dostawy')),
  deliveryRow('Punkt odbioru', '9,90 zł', '2 dni'),
  deliveryRow('Kurier', '14,90 zł', '1 dzień'),
]);

import SwiftUI

struct DeliveryPrices: View {
  var body: some View {
    VStack(alignment: .leading, spacing: 16) {
      Text("Koszty dostawy").font(.title)
        .accessibilityAddTraits(.isHeader)
      HStack {
        Text("Punkt odbioru")
        Text("9,90 zł")
        Text("2 dni")
      }
      .accessibilityElement(children: .ignore)
      .accessibilityLabel("Dostawa: Punkt odbioru. Cena: 9,90 zł. Czas: 2 dni.")
      HStack {
        Text("Kurier")
        Text("14,90 zł")
        Text("1 dzień")
      }
      .accessibilityElement(children: .ignore)
      .accessibilityLabel("Dostawa: Kurier. Cena: 14,90 zł. Czas: 1 dzień.")
    }
  }
}

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.semantics

@Composable
fun DeliveryPrices() {
    Column {
        Text("Koszty dostawy", Modifier.semantics { heading() })
        Text("Dostawa: Punkt odbioru. Cena: 9,90 zł. Czas: 2 dni.")
        Text("Dostawa: Kurier. Cena: 14,90 zł. Czas: 1 dzień.")
    }
}

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

export function DeliveryPrices() {
  return (
    <View>
      <Text accessibilityRole="header">Koszty dostawy</Text>
      <Text>Dostawa: Punkt odbioru. Cena: 9,90 zł. Czas: 2 dni.</Text>
      <Text>Dostawa: Kurier. Cena: 14,90 zł. Czas: 1 dzień.</Text>
    </View>
  );
}

Jak sprawdzić

1. Ustal, co prezentacja przekazuje o strukturze i przypisaniu danych. Oczekiwany wynik dotyczy znaczenia, nie obecności słowa table.
2. Porównaj widoczny nagłówek i kolumny z semantyką. W bad oczekiwany jest brak flagi nagłówka Fluttera i osobne wartości bez relacji w API.
3. W good sprawdź bez zmiany wyglądu dwie pełne etykiety, właściwe ceny/czasy oraz nagłówek. W text sprawdź te same przypisania widoczne zdaniami. Reset ma odtworzyć początkowy wariant trasy.
4. Osobno użyj rzeczywistego VoiceOver i rotora Nagłówki, odczytaj rekordy oraz sprawdź brak duplikatów. Zapisz wypowiedzi, ustawienia i wynik; to niewykonany plan źródłowy.
5. Dla innych formatów skontroluj właściwy odbiornik i wynikowy dokument, bez wnioskowania o nich z mobilnego screenshotu.

Weryfikacja i ograniczenia

Wykonanie: Flutter 3.44.9 / Dart 3.12.2, iPhone 17 / iOS Simulator 26.5, Cupertino. Screenshoty zapewniają kontekst, widget testuje flagę i granice, a XCTest natywne etykiety. Żadne z nich nie jest testem rzeczywistego czytnika. Film zmiany wariantu nie potwierdziłby sam znaczenia relacji.

Reguła może wykryć brak znanego powiązania lub flagi, lecz obecność atrybutu nie potwierdza trafności. AI może porównać wizualną strukturę z API, bez pewności co do intencji ramki lub hierarchii całego procesu. Relacja może być poprawnie zapisana zdaniem. Bez potrzebnych danych wynik jest nierozstrzygnięty. Znane oczekiwania demonstracji muszą pozostać poza wejściem badanego walidatora; nie stanowią niezależnego dowodu jego skuteczności.

Jak sprawdza Clearship

Katalog z 2026-10-08 wymaga oceny człowieka. Reguła drzewa dostarcza kandydatów: nagłówek udostępniony tylko wyglądem, nienazwane pole bez powiązanej etykiety oraz opcje z widocznym pytaniem bez kontenera grupy. Sygnał nagłówka sondy Androida pomaga sprawdzić rolę; brak sygnału pozostaje do oceny. To ograniczone przypadki, bez ogólnego porównania prezentacji z całą programową strukturą lub równoważnym tekstem.

Pomiar reguły opisano dla Androida; iOS pozostaje niezmierzony. Drzewo nie potwierdza doświadczenia czytnika, a brak tabeli lub nagłówka w pojedynczym stanie nie rozstrzyga wymagania. Człowiek ocenia znaczące relacje i dopuszczoną drogę tekstową; bez tej oceny kryterium nie ma pełnego wyniku.

Powiązane kryteria

• 1.3.2
  Zrozumiała kolejność

  Poprawne relacje nie zastępują znaczącej kolejności odczytu.

• 1.4.1
  Użycie koloru

  Informacja kodowana kolorem potrzebuje także widocznej alternatywy.

• 2.4.6
  Nagłówki i etykiety

  Rola nagłówka i jego opisowość to odrębne warunki.

• 3.3.2
  Etykiety lub instrukcje

  Instrukcje wprowadzania danych uzupełniają relację etykiety i pola.

• 4.1.2
  Nazwa, rola, wartość

  Kontrolka potrzebuje również nazwy, roli i aktualnego stanu.