Dopasowanie treści

Co oznacza to kryterium

Po zwężeniu widoku zwykły tekst powinien zawijać się, a pola i przyciski pozostawać dostępne. Czytelnik nie powinien przesuwać ekranu w bok po każdym wierszu. Treść i funkcje trzeba zachować przy szerokości równoważnej 320 CSS px dla pionowego przewijania lub wysokości równoważnej 256 CSS px dla poziomego przewijania.

Pomaga to osobom słabowidzącym korzystającym z powiększenia, osobom z ograniczeniami ruchowymi oraz osobom łatwo gubiącym miejsce w tekście. Mapa lub tabela może potrzebować dwóch wymiarów, ale ten wyjątek nie obejmuje automatycznie zwykłych instrukcji obok niej.

Przykłady błędów i poprawek

Ta sama instrukcja w obszarze 320 CSS px

Pracownia przedstawia P-104, godzinę 18:00, wejście od ogrodu, pokazanie kodu i notatkę. Good dopasowuje akapit do miejsca; bad narzuca mu 640 px. Tekst, font, formularz i działania są te same. Poprawka nie zmniejsza fontu ani nie skraca instrukcji.

Końcowy odczyt WWW z 2026-10-04: innerWidth 335, pionowy scrollbar 15, więc document.clientWidth=320. Good ma scrollWidth 320 i akapit 288 po marginesach. Bad ma scrollWidth 656 i akapit 640; dodatkowy poziomy pasek zmniejsza clientHeight z 480 do 465. Wcześniejsze innerWidth 320/clientWidth 305 pozostają bardziej wąskimi próbami, bez nazywania ich client320.

Tabela godzin jako kontrola zakresu

Control zachowuje dopasowaną instrukcję i formularz. Dodaje tabelę 640 px z relacją punkt–dzień–godziny i zawijaniem w komórkach. Zwykłe przesunięcie ujawnia ostatnią kolumnę; reszta strony nie wymaga czytania w dwóch osiach.

Lokalny viewport tabeli ma 288 px, treść 640 px. Po dwóch przesunięciach scrollLeft osiągnął 352. Sam klawisz End wcześniej nie przesunął jej w poziomie. Ta mała tabela kontroluje zakres wyjątku, bez twierdzenia, że każdej prostej tabeli nie da się zamienić w listę.

Dodatkowy obszar w demonstracji iOS

Good/control zawijają zwykły akapit w 288 logical pixels po paddingu, bad zachowuje 640. To dostępny autorski obszar 320 logical pixels, odrębny od rozmiaru pełnoekranowego iPhone’a. Kadry good i bad nie są idealnie wyrównane: bad jest dodatkowo przewinięty pionowo.

Kiedy obowiązuje i gdzie są wyjątki

• Dobierz wymiar do kierunku treści: 320 CSS px szerokości dla pionowego przewijania, 256 CSS px wysokości dla poziomego przewijania zapisu pionowego. Nie wymagaj zawsze prostokąta 320×256.
• Przykłady 1280→400% i 1024→400% wyjaśniają równoważność wymiaru, bez nakazu takiej rozdzielczości OS. Zmierz rzeczywisty obszar po odjęciu interfejsu przeglądarki i pasków; 960 przy 300% może dać 320.
• Kolumny mogą się zmieniać, treść przenosić, a zwykła kontrolka ujawniać ją w innym miejscu. Wszystkie informacje i funkcje muszą pozostać osiągalne. Ukryte wyszukiwanie lub znikająca etykieta mogą gubić funkcję/informację.
• Wyjątek obejmuje fragment wymagający układu 2D dla znaczenia lub użycia, np. mapę, diagram, wideo, grę, prezentację, tabelę danych albo konieczny układ narzędzi manipulowania treścią. Dekoracyjny układ kolumn nie uzasadnia go.
• W tabeli wyjątek dotyczy relacji wiersz–kolumna. Zwykła treść komórki nadal powinna się dopasować, chyba że sama wymaga 2D. Tytuł, wyszukiwanie, paginacja i opis nie przejmują wyjątku.
• Poziomy pasek całej strony sam nie dowodzi błędu, gdy służy wyłącznie uzasadnionemu fragmentowi 2D, a reszta ma właściwy reflow. Lokalny scroll jest poprawą użyteczności, bez obowiązku tej konkretnej techniki.
• Karuzela może przesuwać panele poziomo, jeśli każdy mieści się w 320 CSS px i jego treść jest czytana jedną osią. Porównanie kodu w kolumnach wymaga oceny znaczenia, szerokości kolumn i alternatywy.
• Podgląd fizycznego wydruku lub canvas może wymagać 2D; komentarze obok nadal dopasowują wiersze. Alternatywny tryb redagowania/reflow musi zachować informacje i funkcje potrzebne w danym procesie.
• Pinch może powiększać tylko widoczną część bez zmiany layout viewportu. Nie jest wtedy samodzielnym sprawdzeniem reflow. 1.4.10 nie wymaga tekstu 400% ani 200% na każdym breakpoint.

C31/C32 opisują zawijanie regionów Flexbox/Grid, C33 długich ciągów, C38 dopasowanie pól, SCR34 pozycje skalowane z tekstem, G206 wybór układu, G224 znaczące wcięcia i G225 dopasowane panele. C34/C37 są poradami o przyklejonych elementach i mediach. F102 dotyczy utraty treści po reflow; nasz bad zachowuje tekst i demonstruje sztywną szerokość, bez przypisania mu wykonanej demonstracji F102. To materiały pomocnicze, bez oceny całej strony.

Platformy

Jednostki i najbliższy dostępny obszar

Interpretacja AI z 2026-10-04 wskazuje CSS reference pixel, jednostkę niezależną od gęstości. WCAG2ICT dopuszcza platformowe przybliżenia, np. pt iOS/macOS, dp Androida i epx Windows. Flutter używa logical pixels. Fizyczny screenshot i DPR opisują geometrię, bez automatycznego potwierdzenia równoważności normatywnej.

Poza WWW bada się wspierane skalowanie, resize okna/dialogu/obszaru i zmianę rozdzielczości. Jeśli platforma nie osiąga 320/256, najbliższy dostępny benchmark trzeba opisać z ograniczeniem. Dla urządzenia bez jednostki niezależnej od gęstości potrzebne są dane o sprzęcie. Niezbędne układy 2D mogą być częstsze; nie zwalnia to całej platformy.

W researchu pełnoekranowy iPhone miał portrait 402×874 logical i landscape 874×402; po SafeArea treść landscape 750. Nie zmieniono OS scale ani nie zmniejszono natywnego okna do 320. „Zmień obszar” daje dodatkowe 320 logical, bez dowodu natywnego viewportu 320 CSS px i współpracy z wszystkimi ustawieniami iOS. Najbliższy wykonany pełnoekranowy wariant miał szerokość 402 logical.

WCAG2ICT pozostaje interpretacją informacyjną, bez ustalenia EN 301 549 lub prawa. W hybrydzie rozdziel WWW i interfejs natywny. Brak testu nie wyłącza zastosowania.

Rozwiązania w technologiach

API sprawdzono 2026-10-04 w oficjalnej dokumentacji. Każdy przykład zakłada zwykłą instrukcję i wspólne dane; układ 2D w tabeli pozostaje osobnym kontenerem. Nie usuwaj pól ani przycisków, by zmieścić układ.

import 'package:flutter/cupertino.dart';
Widget pickupNotice(String notice) => SingleChildScrollView(
  padding: const EdgeInsets.all(16),
  child: Column(crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [Text(notice), const Text('Notatka do odbioru')]),
);

import SwiftUI
struct Pickup: View {
    @State private var note = ""
    @State private var shown = false
    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 16) {
                Text("Odbiór P-104")
                Text("Punkt otwarty do 18:00. Odbiór przy wejściu od ogrodu.")
                    .fixedSize(horizontal: false, vertical: true)
                TextField("Notatka do odbioru", text: $note, axis: .vertical)
                Button("Pokaż adres") { shown = true }
                if shown { Text("Adres: ul. Przykładowa 12. Notatka: \(note)") }
            }.frame(maxWidth: .infinity, alignment: .leading).padding(16)
        }
    }
}

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
@Composable fun Pickup() {
    var note by remember { mutableStateOf("") }
    var shown by remember { mutableStateOf(false) }
    Column(Modifier.fillMaxWidth().verticalScroll(rememberScrollState()).padding(16.dp)) {
        Text("Odbiór P-104")
        Text("Punkt otwarty do 18:00. Odbiór przy wejściu od ogrodu.")
        OutlinedTextField(note, { note = it }, Modifier.fillMaxWidth(),
            label = { Text("Notatka do odbioru") }, singleLine = false)
        Button(onClick = { shown = true }) { Text("Pokaż adres") }
        if (shown) Text("Adres: ul. Przykładowa 12. Notatka: $note")
    }
}

import React, { useState } from 'react';
import { ScrollView, Text, TextInput, Button } from 'react-native';
export function Pickup() {
  const [note, setNote] = useState('');
  const [shown, setShown] = useState(false);
  return (
    <ScrollView contentContainerStyle={{ padding: 16 }}>
      <Text>Odbiór P-104</Text>
      <Text>Punkt otwarty do 18:00. Odbiór przy wejściu od ogrodu.</Text>
      <Text>Notatka do odbioru</Text>
      <TextInput
        accessibilityLabel="Notatka do odbioru"
        multiline
        value={note}
        onChangeText={setNote}
      />
      <Button title="Pokaż adres" onPress={() => setShown(true)} />
      {shown && <Text>Adres: ul. Przykładowa 12. Notatka: {note}</Text>}
    </ScrollView>
  );
}

* {
  box-sizing: border-box;
}
main {
  max-width: 720px;
  padding: 16px;
}
p {
  overflow-wrap: anywhere;
}
textarea {
  width: 100%;
}
button,
select,
input {
  max-width: 100%;
  white-space: normal;
}
.actions {
  display: flex;
  flex-wrap: wrap;
}
.table-area {
  max-width: 100%;
  overflow: auto;
}

Jak sprawdzić

1. Określ kierunek czytania każdej sekcji, informacje/funkcje widoku wyjściowego i uzasadnione wyjątki 2D.
2. Zmierz właściwy obszar 320 CSS px szerokości albo 256 CSS px wysokości. Zapisz innerWidth, clientWidth, scrollWidth i paski. Kontrolowany autorski obszar oznacz jako taki.
3. Przeczytaj instrukcję, wpisz notatkę, pokaż adres, przejdź wszystkie działania, warianty i reset. Porównaj dostępność informacji z szerokim widokiem.
4. Znajdź źródło drugiej osi. Zmierz akapit osobno od tabeli i komórek, przesuń tabelę do końca. Nie oceniaj wyjątku z samego scrollWidth.
5. Dla software sprawdź rzeczywiście wspierane resize, skalowanie i orientację. Udokumentuj najbliższy dostępny obszar oraz ograniczenie, bez udawania równoważności 320/256.
6. Połącz renderer/DOM, geometrię, normalne wejścia i obrazy. Pełny tekst w AX nie dowodzi pełnej widoczności i osiągalności.

Historyczne wyniki z 2026-10-04

Observer czyta istniejące RenderParagraph/Editable, ramki, viewport/DPR i ScrollPosition; nie ustawia wariantu ani oczekiwanej oceny. Snapshoty drzewa, stanu i obrazu są sekwencyjne. Driver v2 ukończył próbę, ale helper reveal nadal wykonywał zbędne 12 swipe w landscape; ograniczenie źródła pozostaje jawne. Wszystkie PNG zakodowano jako 1206×2622; EXIF poziomego obrazu daje 2622×1206, bez pomiaru CSS z samych pikseli.

Weryfikacja i ograniczenia

ACT b4f0c3 sprawdza blokadę zoomu w meta viewport. Understanding reflow ją wymienia, lecz formalne mapowanie reguły wskazuje 1.4.4. Nie bada geometrii, funkcji i wyjątków 2D. Brak ograniczających atrybutów w DOM demonstracji nie jest wykonaniem ACT engine.

Checker sprawdza zapisane pomiary, działania, manifesty i integralność własnej demonstracji. Geometria wykrywa zbyt szeroki zwykły akapit; nie kwalifikuje znaczenia tabeli czy mapy. AI obejrzała obrazy, a niezależny walidator i człowiek nie wykonali oceny.

Jak sprawdza Clearship

Clearship porównuje zebrane drzewa i zrzuty podstawowego ekranu z większym tekstem oraz orientacją poziomą. Metoda text-resize-3 szuka obcięcia, nakładania, ukrycia treści lub kontrolki oraz oznak czytania zwykłego tekstu w dwóch osiach. Treść poniżej widocznej części ekranu, brak pary lub obrazu kierują wynik do człowieka.

Android spełnił próg pomiaru, z otwartym zastrzeżeniem niezależności: kierunek zmian między próbami wybrano także po liczbach zestawu kontrolnego. iOS pozostaje poniżej progu i wymaga człowieka. Metoda nie mierzy normatywnego obszaru 320/256 CSS px, kierunku czytania ani nie kwalifikuje wyjątku 2D. Większy tekst i rotacja są ograniczonymi wariantami, bez testu tekstu 200% w poziomie; P2 nie przewija całej treści. Krótki wiersz tabeli lub karuzeli nie jest niezależnym uzasadnieniem wyjątku. Brak znaleziska nie potwierdza reflow całej aplikacji.

Powiązane kryteria

• 1.4.4
  Zmiana rozmiaru tekstu

  Podwojenie rozmiaru tekstu jest osobnym wymaganiem, bez zastępowania badania 320/256.

• 1.3.4
  Orientacja ekranu

  Orientacja może zmienić obszar treści, ale nie zastępuje pomiaru reflow.

• 1.4.12
  Odstępy w tekście

  Odstępy w tekście zmieniają geometrię według innych parametrów.