1.4.12Poziom AA

Odstępy w tekście

Text Spacing

Zachowaj treść i funkcje po jednoczesnym zwiększeniu czterech odstępów w tekście zapisanym w obsługującym je języku znaczników.

Komu pomaga
SłabowidzeniePamięć i koncentracja
Zastosowanie
WWWAplikacje mobilneAplikacje desktopoweDokumenty cyfroweInne urządzenia

Warunki i wyjątki opisano w artykule.

Wersja
WCAG 2.2, wprowadzone w 2.1
Zasada / wytyczna
Postrzegalność / 1.4
Stan researchu
Draft AI. Bez przeglądu człowieka.
Redakcja artykułu
· wersja robocza
Na tej stronie

Co oznacza to kryterium

Użytkownik może zwiększyć odstępy między wierszami, akapitami, literami i słowami, żeby łatwiej czytać. Tekst zapisany w obsługującym te właściwości języku znaczników powinien wtedy zachować pełną treść i działanie. Badanie obejmuje cztery zmiany naraz, bez zmiany pozostałego stylu.

Pomaga to osobom słabowidzącym i części osób mających trudności z czytaniem, np. osób z dysleksją. Tag „Pamięć i koncentracja” opisuje tu potrzeby związane z czytaniem; nie oznacza korzyści dla każdej osoby w tej szerokiej kategorii. Autor nie musi ustawiać takich odstępów domyślnie ani dodawać własnego panelu ustawień.

Przykłady błędów i poprawek

Ta sama instrukcja po zwiększeniu odstępów

Pracownia pokazuje syntetyczny odbiór P-104 na 6 października, 16:00–18:00. Drugi akapit podaje wejście od ogrodu, konieczność zabrania dokumentu i zakaz korzystania z wejścia od ulicy. We wszystkich wariantach dane i formularz są te same.

Bad ogranicza podgląd do 180 px i ukrywa nadmiar. Bazowo oba akapity się mieszczą, lecz po zmianie odstępów ginie koniec instrukcji. Good pozwala karcie rosnąć i przesuwa formularz w dół. W źródłowej próbie każdy wariant przyjmował P-104 i zwracał „P-104: odbiór potwierdzony.”; samo działanie formularza nie usuwa utraty instrukcji.

Pracownia w przeglądarce: po zmianie odstępów stała wysokość podglądu ucina koniec drugiego akapitu.

Surowy kadr bad z 2026-10-04. Zmieniono równocześnie cztery odstępy; rozmiar pisma pozostał ten sam. Obecność końcówki w DOM lub drzewie dostępności nie przywraca jej widoczności.

Pracownia w przeglądarce: karta rośnie, oba akapity ze zwiększonymi odstępami są widoczne nad formularzem.

Surowy kadr good z tego samego researchu. Wartości odstępów i pełny tekst potwierdzono osobnym odczytem; sam obraz nie potwierdza wszystkich wartości stylu.

Ucięty podgląd z pełnym ujawnieniem

Control początkowo ma takie samo przycięcie jak bad, ale przycisk „Pokaż pełną instrukcję” udostępnia oba akapity z zachowaniem zwiększonych odstępów. W przeglądarce użyto spacji, na iOS zwykłego tapnięcia. To kontrola przeciw fałszywemu alarmowi: sam ucięty podgląd nie przesądza wyniku, jeśli pełny tekst rzeczywiście da się zobaczyć.

Pracownia w przeglądarce: po aktywacji ujawnienia widoczna pełna instrukcja, w tym zakaz wejścia od ulicy.

Surowa dogrywka control-full z 2026-10-04. Działanie i zachowane odstępy opisują odczyty źródłowe. Dowód dotyczy tego mechanizmu; dowolny link do szczegółów nie naprawia automatycznie każdego przycięcia.

Natywna analogia na iOS

Flutter/Cupertino odtwarza ciasny podgląd oraz jego rozwinięcie. W bad koniec drugiego akapitu znika, w control tap usuwa ograniczenie. Nie wykazano tu języka znaczników: to dobra praktyka elastycznego układu i mechaniczna analogia, bez normatywnego FAIL 1.4.12 dla Dart.

Pracownia na iOS: po autorskiej zmianie odstępów podgląd ucina zakaz korzystania z wejścia od ulicy.

iPhone 17 Simulator, Flutter/Cupertino, 2026-10-04. Przycisk zmienia styl demonstracji; nie są to systemowe ustawienia odstępów ani Dynamic Type.

Pracownia na iOS: po rozwinięciu widoczny koniec pełnej instrukcji i przycisk Ukryj pełną instrukcję.

Ten sam natywny scenariusz control po tapnięciu. Kadr jest przewinięty i pokazuje końcówkę; pełne ujawnienie dokumentuje również odczyt Column bez RenderClipRect. To analogia, bez testu WebView.

Kiedy obowiązuje i gdzie są wyjątki

Cztery odstępy względem lokalnego pisma

Wartości odnoszą się do własnego rozmiaru pisma każdego tekstu. Ustaw je jednocześnie do co najmniej podanych progów; większych istniejących odstępów nie zmniejszaj na potrzeby próby.

Właściwość Minimum Tekst 17 px Tekst 16 px
Wysokość wiersza 1,5 × rozmiar pisma 25,5 px 24 px
Odstęp po akapicie 2 × rozmiar pisma 34 px 32 px
Odstęp między literami 0,12 × rozmiar pisma 2,04 px 1,92 px
Odstęp między słowami 0,16 × rozmiar pisma 2,72 px 2,56 px

Jednostka em i line-height: 1.5 odnoszą wartości do lokalnego fontu. Sprawdź rzeczywisty odstęp po akapicie, także przy zapadaniu marginesów; nie sumuj dowolnych marginesów jako dowodu. W źródłowej parze dystans między akapitami wyniósł 34 px, dolny margines drugiego 32 px.

Nie zmieniaj przy tej próbie font-size, rodziny pisma, szerokości kontenera, overflow, kolorów, zoomu ani viewportu. Wzrost elementu wynikający z zawinięcia tekstu jest dozwolonym skutkiem. Dozwolone jest także przewijanie do pełnej treści; naturalny pionowy pasek może zmniejszyć clientWidth bez zmiany ustawionego rozmiaru okna. Zmiana rozmiaru tekstu i reflow mają osobne wymagania.

Format, język i rzeczywista możliwość zmiany

Dla języka lub skryptu nieużywającego jednej z właściwości stosuj pozostałe. Nie przenoś polskich odstępów między słowami na zapis bez takich granic. Tekst na canvas jest obrazem tekstu; PDF nie jest językiem znaczników w rozumieniu tego kryterium. Nie oceniamy tu innych wymagań PDF ani obrazów tekstu.

Brak obsługi przez format lub platformę oraz awaria bookmarkletu nie są same w sobie błędem treści, o ile autor aktywnie nie blokuje zmiany. Najpierw ustal możliwości i potwierdź, że nadpisanie dotarło do właściwego tekstu. Natywne API stylów bez markup nie potwierdza zastosowania; wewnętrzny XML, XAML lub XUL oraz osadzony HTML wymagają osobnego rozpoznania.

Pełna treść mimo skróconego podglądu

Stała wysokość, ucięcie, nakładanie i wielokropek mogą powodować utratę po zmianie odstępów. Pełna informacja może być ujawniana po fokusie, aktywacji lub na dostępnej stronie szczegółów. Potwierdź jej faktyczną widoczność i osiągalność. Ukryta nazwa semantyczna, niewywoływany title i sam tekst w AX nie są równoważnym widocznym dostępem.

C35 i C36 są technikami pomocniczymi; F104 opisuje ucięcie lub nakładanie po zmianie odstępów, z uwzględnieniem pełnego ujawnienia. Sugestia około 20% wolnego miejsca w C35 nie jest normatywnym progiem ani gwarancją. C8, C21 i C28 również nie dodają nowych progów wymagania.

Platformy

Ocena zastosowania pochodzi z researchu AI z 2026-10-04. Dla WWW podstawą jest WCAG 2.2, 1.4.12; poza WWW informacyjna WCAG2ICT 2.2, Group Note 2025-12-11. Warunkiem poza WWW są łącznie właściwy markup i możliwość zmiany odstępów. Brak wykonania nie wyłącza platformy.

Środowisko Warunek i adaptacja Wykonanie w źródle
WWW, również w telefonie Markup obsługujący stosowalne odstępy; bez adaptacji wymagania. HTML/CSS na macOS; przeglądarka telefonu niewykonana.
Aplikacje mobilne HTML w WebView i inne właściwe markup oceniać osobno; sam Flutter/Dart nie dowodzi warunku. „Treść” obejmuje oprogramowanie i dokument. Natywna analogia iOS; WebView, Android, SwiftUI i React Native niewykonane.
Aplikacje desktopowe UI lub dokument w markup z możliwością nadpisania; natywny widget nie wystarcza. Natywne macOS, Windows i Linux niewykonane.
Dokumenty cyfrowe Ustal format i odbiornik; sam tekst PDF nie uruchamia 1.4.12. Dokumenty poza WWW niewykonane.
Kiosk lub telewizor Oceniaj oprogramowanie, właściwy markup i możliwości zamkniętej funkcjonalności; brak mechanizmu platformy nie dowodzi blokady autora. Niewykonane.

Nie mapowano EN 301 549 ani obowiązków prawnych. Brak markup w jednej próbce nie jest wyłączeniem wszystkich aplikacji mobilnych.

Rozwiązania w technologiach

Dokumentację oficjalnych API przejrzano przez AI 2026-10-04. Dla osadzonego HTML stosuj rozwiązanie markup i sprawdź faktyczny WebView; takich odbiorników tutaj nie uruchomiono. Fragmenty natywne pokazują elastyczny układ, bez obietnicy pełnego mechanizmu czterech odstępów.

Flutter

import 'package:flutter/cupertino.dart';
Widget paragraph(String text, double fontSize, bool expandedSpacing) {
  return Padding(
    padding: EdgeInsets.only(bottom: expandedSpacing ? fontSize * 2 : 12),
    child: Text(text, style: TextStyle(
      fontSize: fontSize,
      height: expandedSpacing ? 1.5 : 1.2,
      letterSpacing: expandedSpacing ? fontSize * .12 : 0,
      wordSpacing: expandedSpacing ? fontSize * .16 : 0,
    )),
  );
}

Fragment odpowiada wykonanej analogii; wymaga osadzenia w przewijanym ekranie z naturalną Column. TextStyle.height jest mnożnikiem fontu, letterSpacing i wordSpacing dodatkowym odstępem w logical pixels. wordSpacing dotyczy sekwencji białych znaków. Padding po akapicie zależy od jego lokalnego fontu.

Bad używa ClipRect i SizedBox o wysokości 180; control usuwa to ograniczenie po tapnięciu. Flutter 3.44.9 / Dart 3.12.2: analiza, build i wykonanie iOS opisane poniżej. Jednostek oraz wysokości natywnych nie mapujemy automatycznie na normatywne CSS px.

iOS / SwiftUI

import SwiftUI
struct Instruction: View {
    let text: String
    var body: some View {
        ScrollView {
            Text(text).font(.body)
                .fixedSize(horizontal: false, vertical: true)
                .padding()
        }
    }
}

Tekst rośnie pionowo w ScrollView. tracking zmienia odstęp znaków, lineSpacing dodaje odstęp między wierszami i nie jest line-height 1,5. Nie udowodniono pełnej zmiany odstępów między słowami. Dokumentacja przejrzana; kompilacja i działanie fragmentu niewykonane.

Android / Jetpack Compose

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
@Composable fun Instruction(text: String) {
    Column(Modifier.verticalScroll(rememberScrollState())) { Text(text) }
}

Brak maxLines i stałej wysokości daje tekstowi miejsce. TextStyle.lineHeight i letterSpacing mogą używać em; w przejrzanym API nie znaleziono ogólnego wordSpacing. Nie zastępuj go dodatkowo wpisanymi spacjami. Dokumentacja przejrzana; kompilacja i działanie niewykonane, bez uruchamiania Androida.

React Native

import React from 'react';
import { ScrollView, Text } from 'react-native';
export function Instruction({ text }: { text: string }) {
  return (
    <ScrollView>
      <Text style={{ padding: 16 }}>{text}</Text>
    </ScrollView>
  );
}

Brak numberOfLines pozwala tekstowi rosnąć. Natywny Text ma lineHeight i letterSpacing, lecz w sprawdzonym TextStyle nie ma wordSpacing. marginBottom jest właściwością układu, a nie pełnym mechanizmem odstępów użytkownika. Dokumentacja przejrzana; typecheck, build i działanie niewykonane.

WWW / HTML, CSS i JavaScript

<section class="instruction">
  <p>Pierwszy akapit instrukcji.</p>
  <p class="detail">Drugi akapit instrukcji.</p>
</section>
<style>
  .instruction {
    padding: 1rem;
  }
  .instruction p {
    font-size: 17px;
  }
  .instruction .detail {
    font-size: 16px;
  }
</style>

Naturalna wysokość i zawijanie pozwalają obu akapitom rosnąć. Nie ograniczaj jedynej ważnej instrukcji stałą wysokością ani line-clamp bez pełnego ujawnienia. Samo usunięcie clip nie gwarantuje braku nakładania na kontrolki.

Osobne narzędzie próbki dodaje wyłącznie cztery deklaracje:

* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
p {
  margin-bottom: 2em !important;
}

To wartości testowe, bez obowiązku używania ich domyślnie. Lokalny arkusz ma pochodzenie autora; nie udaje user-origin, rozszerzenia ani technologii asystującej. W bad nie naprawia overflow. Stronę z tą logiką uruchomiono w przeglądarce w researchu.

Jak sprawdzić

  1. Ustal markup, możliwość zmiany i język/skrypt. Zapisz font każdego tekstu, styl, viewport, zoom i pełną treść bazową.
  2. Nadpisz jednocześnie cztery stosowalne właściwości, bez innych zmian. Potwierdź lokalne minima 1,5 / 2 / 0,12 / 0,16.
  3. Porównaj tekst i funkcje: brak utraconych słów, nakładania oraz niedostępnych działań. Zwykłe przewijanie jest dozwolone.
  4. Przy ucięciu lub wielokropku aktywuj ujawnienie albo przejdź do szczegółów. Obejrzyj pełny tekst po działaniu, nie tylko jego obecność w DOM/AX.
  5. W próbce wpisz P-104 i sprawdź potwierdzenie. Cykl good → bad → control → good oraz reset powinny usuwać wpis, wynik, odstępy i rozwinięcie; nieznany wariant ma wracać do good.

Oczekiwany wynik próbki: good zachowuje instrukcję i funkcję, bad gubi końcówkę, control ujawnia pełny tekst. Nazwy wariantów opisują scenariusz i nie powinny być wejściem zaślepionego walidatora.

Historyczne obserwacje z 2026-10-04

Sprawdzenie Wynik i ograniczenie
HTML/CSS, rzeczywisty IAB na macOS 12 stanów, 18 zalogowanych wejść i 7 aktywnych JPEG; dodatkowe Home nie mają osobnych czasów wejść. inner 1280×720, DPR 1, visualViewport.scale 1; clientWidth 1280 lub 1265 przez scrollbar. Dokładny UA i ustawienie zoomu niewychwycone; scale 1 nie dowodzi zoomu 100%.
Good po nadpisaniu Akapity 102 i 72 px, podgląd 208 px, szerokość tekstu nadal 388 px; pełna instrukcja widoczna.
Bad po nadpisaniu Podgląd 180 px, scrollHeight 240 px. Ostatni wiersz zaczyna się przy 282,406 px, poniżej końca clip 276,406 px. Brak ujawnienia.
Control po spacji Podgląd 208 px i overflow visible; oba akapity dostępne przy większych odstępach.
Formularz P-104 i lokalne potwierdzenie w każdym wariancie; cykl, reset i fallback wykonane.
Flutter 3.44.9 / Dart 3.12.2 Analiza, 64 testy hostowe i build iOS PASS. XCTest: 1 test, 0 błędów, 53,760 s; cały run 59,989 s. 15 stanów/drzew, 28 wejść, 7 PNG, 8 odczytów renderera.
Natywna geometria Fonty 17/16, wysokości po zmianie 104/72 logical, przerwa 34. Ostatni wiersz 382,915–402,008 wychodzi za clip 373. Good rośnie jako karta 173→274; control po tap ma pełną Column bez clip. To analogia.
Inne technologie Dokumentacja przejrzana; SwiftUI, Compose i React Native niekompilowane i nieuruchamiane.

Środowisko iOS: iPhone 17 Simulator / iOS 26.5, Xcode 27.0, SDK iphonesimulator 27.0, viewport 402×874 logical, DPR 3, PNG 1206×2622. Nie zmieniano systemowego Dynamic Type ani odstępów. Manifesty potwierdziły identyczne bajty app/driver przed i po oraz zgodność built/installed; zmieniona ścieżka kontenera drivera nie oznaczała zmiany pliku.

Zachowano 12 historycznych JPEG i błędne odczyty. Pierwszy CSS ujawniał ukryty przycisk; po korekcie button[hidden] ponowiono przepływ. Wadliwe eksporty fullPage miały 1 px lub skurczony obraz, późniejsze viewportowe pokazały przesunięty fragment; przyczyny providera nie ustalono. Aktywne dogrywki mają prawidłowe kadry i odczyty, bez odtwarzania nieznanych czasów wejść. Odmowy sandboxu przy cache i porcie nie były nieudanymi XCTest.

Weryfikacja i ograniczenia

ACT 24afc2, 78fd32 i 9e45ec mają wąski zakres: widoczny bezpośredni węzeł tekstowy HTML i autorski styl inline z !important wpływający na computed style; line-height dodatkowo dotyczy miękkiego zawijania. Nie badają odstępu po akapicie ani wszystkich skutków czterech zmian. User-origin !important wygrywa z autorskim inline; arkusz wstrzyknięty jako author-origin nie ma tej samej pozycji w kaskadzie. Własny dostępny mechanizm może zapewnić zmianę mimo negatywnego wyniku wąskiej reguły. Brak kandydatów inline nie potwierdza całego kryterium.

W researchu nie znaleziono inline style w ograniczonym odczycie main, lecz silnik ACT nie był uruchomiony. Eksport stylu obejmował pierwsze 200 kluczy, z osobnymi polami odstępów. Nie uzyskano pomiaru każdego znaku; Range akapitów zwrócił ramki wierszy. Checker zna warianty i sprawdza integralność, geometrię oraz przebieg własnej próbki. Nie jest ACT ani zaślepionym walidatorem. DOM/AX może zawierać tekst poza clip, a renderer nie dowodzi systemowej możliwości zmiany lub istnienia markup.

Jak sprawdza Clearship

Metoda text-spacing-1 porównuje treść WebView na Androidzie przed i po jednoczesnym zwiększeniu czterech odstępów. Wymaga kanału debugowania treści, potwierdzonych lokalnych wartości i tekstu WebView przy 100%. Kanał cofa większy tekst wcześniejszej fazy; analizator porównuje stan bez odstępów z ich zwiększeniem, a nie sam tekst 200%.

Metoda szuka nowego ucięcia lub wyjścia tekstu poza element o stałym wymiarze. Przewijana treść sama nie daje usterki. Obcięcie już przed zmianą, niepotwierdzony kanał oraz podgląd z details/summary kierują wynik do człowieka. Rozwinięcia nie są aktywowane; inne przyciski ujawnienia mogą dać zgłoszenie wymagające sprawdzenia. Nakładanie jest wnioskowane z wyjścia poza ramkę, bez pomiaru sąsiedniej treści. Poza zakresem pozostają utrata funkcji niezwiązana z wymiarami, pseudoelementy, iframe i języki bez wszystkich właściwości.

Android spełnił próg pomiaru 2026-10-08: 6 z 6 usterek i 0 fałszywych alarmów na 20 poprawnych ekranach zestawu kontrolnego, próba 1/3. Dotyczy to osiągniętych WebView z potwierdzonym kanałem. WebView klienta bez debugowania treści i iOS pozostają do człowieka; kanał WKWebView jest niewspierany, pomiar kontrolny iOS niewykonany. Natywne widgety bez markup nie są oceniane tą metodą. Brak wejścia, pominięte stany i brak kandydata nie potwierdzają całej aplikacji.

Powiązane kryteria