1.4.5Poziom AA

Obrazy tekstu

Images of Text

Gdy technologia pozwala uzyskać potrzebną prezentację, używaj tekstu zamiast obrazu tekstu, poza dostosowaniem lub niezbędną formą.

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.0
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

Instrukcję, nagłówek i etykietę przedstaw jako widoczny tekst, jeżeli użyta technologia może uzyskać potrzebny wygląd. PNG utrwala krój, wielkość oraz kolory liter i tła. Poprawny alt i powiększenie całej bitmapy nie dają takiej możliwości dostosowania jak tekst.

Pomaga to osobom słabowidzącym oraz osobom, których trudności w czytaniu uzasadniają zmianę kroju, odstępów czy układu. Wyjątki dotyczą obrazu dającego się rzeczywiście dostosować oraz formy niezbędnej dla informacji, w tym logotypu.

Przykłady błędów i poprawek

Instrukcja jako raster albo żywy akapit

Pracownia pokazuje odbiór P-104: „Punkt otwarty do 18:00. Odbiór przy wejściu od ogrodu.” Bad przedstawia oba zdania przez Image.asset z poprawną nazwą semantyczną. Good używa Text. W obu można wpisać Ogrod, pokazać adres ul. Przykładowa 12, przejść warianty i wykonać reset.

Pracownia iOS: instrukcja godziny i wejścia przedstawiona rastrem PNG, pola i przyciski są normalnymi kontrolkami.

Pracownia, wykonanie 2026-10-04. Surowy obraz trwałego stanu; sposób renderowania potwierdzono odrębnie w rendererze lub DOM. Nie jest to test VoiceOver ani dowód wszystkich ustawień prezentacji.

Pracownia iOS: ta sama instrukcja jako widoczny żywy tekst.

Pracownia, wykonanie 2026-10-04. Surowy obraz trwałego stanu; sposób renderowania potwierdzono odrębnie w rendererze lub DOM. Nie jest to test VoiceOver ani dowód wszystkich ustawień prezentacji.

Nazwa obrazu zachowuje instrukcję w AX, lecz nie tworzy widocznych znaków. W good rzeczywisty RenderParagraph z treścią potwierdza tekst w rendererze. Krój snapshotu NSView i Fluttera nie jest pikselowo identyczny; treść, cel i działania są wspólne. Kadry bad/control są przewinięte, bez retuszowanego wyrównania.

Kontrola wyjątku dla marki

Control umieszcza raster „Pracownia” jako logotyp syntetycznej marki demonstracji. Instrukcja pozostaje osobnym żywym tekstem. Wyjątek wynika z funkcji znaku; nie przemianowano zwykłej instrukcji ani numeru P-104 na logo. Nie jest to branding Clearship ani zwolnienie z innych wymagań.

Pracownia iOS: logotyp Pracownia jest rastrem, instrukcja odbioru pozostaje żywym tekstem.

Pracownia, wykonanie 2026-10-04. Surowy obraz trwałego stanu; sposób renderowania potwierdzono odrębnie w rendererze lub DOM. Nie jest to test VoiceOver ani dowód wszystkich ustawień prezentacji.

Widoczny odpowiednik i przełączenie prezentacji

Webowy parallel pokazuje raster razem z widocznym akapitem zawierającym tę samą informację. Switch ma zwykły przycisk „Pokaż tekst”: usuwa bitmapowe tło i przenosi span spoza ekranu do normalnego układu, zachowując notatkę i podgląd adresu.

Pracownia WWW: raster instrukcji i widoczny akapit z tą samą informacją obok siebie.

Pracownia, wykonanie 2026-10-04. Surowy obraz trwałego stanu; sposób renderowania potwierdzono odrębnie w rendererze lub DOM. Nie jest to test VoiceOver ani dowód wszystkich ustawień prezentacji.

Pracownia WWW po Pokaż tekst: widoczny akapit, bez bitmapowego tła, zachowane Ogrod i adres.

Pracownia, wykonanie 2026-10-04. Surowy obraz trwałego stanu; sposób renderowania potwierdzono odrębnie w rendererze lub DOM. Nie jest to test VoiceOver ani dowód wszystkich ustawień prezentacji.

To dwa odrębne rozwiązania. Ukryty span przed przełączeniem sam nie jest widocznym odpowiednikiem. Działanie switch ilustruje mechanizm C30; nie potwierdza zgodności całej alternatywnej strony. Pierwszy odczyt bad miał obraz jeszcze przed dekodowaniem (complete:false, 0×0); późniejszy odczyt i kadr potwierdziły raster 330×90. Nie uznano wcześniejszego odczytu za brak obrazu.

Kiedy obowiązuje i gdzie są wyjątki

  • Obraz tekstu utrwala tekst w formie nietekstowej dla efektu wizualnego. Fotografia z identyfikatorem, wykres lub diagram z istotną inną treścią wizualną mogą pozostawać poza tą definicją. Pusta ramka wokół instrukcji nie staje się diagramem przez nazwę.
  • Możliwości technologii oceniaj dla rzeczywistej prezentacji i wiarygodnego wsparcia. Brak możliwości osiągnięcia efektu wymaga konkretnego uzasadnienia. Zwykłe dwa zdania tej demonstracji da się pokazać tekstem.
  • Dostosowanie: użytkownik może ustawić krój, wielkość, kolor liter i tło, a ustawienia zmieniają wynik, np. generują nowy obraz. Zoom, większy PNG, filtr całej bitmapy lub sama nazwa dostępności tego nie dowodzą. Demonstracja nie bada implementacji tego wyjątku.
  • Niezbędność: wygląd jest konieczny dla informacji, np. w próbce badanego kroju lub analizie oryginalnego listu. Preferencja graficzna zwykłej instrukcji nie wystarcza. Logotyp jest uznawany za niezbędny; tekst pod nim nie otrzymuje tego wyjątku.

Równoległy tekst i granica ACT

Understanding 1.4.5 wyjaśnia, że obraz dodatkowo przedstawiony razem z widocznym tekstem przekazującym tę samą informację spełnia ten warunek. Ukryta nazwa dla czytnika nie jest takim odpowiednikiem. AAA 1.4.9 ma szerszy zakres, więc tego wniosku nie przenosi się automatycznie na AAA.

Research z 2026-10-04 zachowuje rozbieżność z ACT 0va7u6: Failed Example 4 reguły z 2023-12-20 uznaje obraz powitania i powtarzający go akapit za błąd, podczas gdy późniejsze Understanding z 2026-06-28 wyjaśnia powyższą drogę. Punktowy odczyt obu stron podczas konwersji 2026-10-11 potwierdził ten opis. Nie przypisujemy parallel fikcyjnego ACT PASS ani nie zamieniamy wyniku tej reguły automatycznie w FAIL 1.4.5. Przegląd człowieka pozostaje niewykonany.

C22 opisuje stylowanie żywego tekstu, C30 przełączenie z obrazu na tekst, a G140 oddzielenie informacji od prezentacji. PDF7 dotyczy OCR skanu do actual text, z kontrolą kompletności, kolejności i struktury; nie jest poprawką polegającą na alt PNG w UI. F3 dotyczy informacji wyłącznie w tle CSS w 1.1.1, a C23 jest techniką 1.4.8. Własny bad z prawidłowym alt nie jest demonstracją F3. Techniki są pomocnicze.

Platformy

Środowisko Podstawa i zakres Wykonanie
WWW, także w telefonie WCAG 2.2, 1.4.5; warunek możliwości technologii i brak wyjątku, bez adaptacji. Własne HTML/CSS w IAB/macOS; mobilna przeglądarka niewykonana.
Aplikacje mobilne WCAG2ICT Group Note 2025-12-11, bez zmiany brzmienia. Flutter/Cupertino na iOS Simulator; Android i fizyczny iPhone niewykonane.
Aplikacje desktopowe Ta sama interpretacja; bitmapa instrukcji w oknie wymaga oceny technologii i wyjątków. Niewykonane; przeglądarka macOS nie potwierdza aplikacji desktopowej.
Dokumenty poza WWW Ta sama interpretacja, bez zmiany brzmienia. PDF/Word, OCR i odbiornik niewykonane.
Wizualne oprogramowanie kiosku/telewizora Część natywna według WCAG2ICT, webowa według WCAG; uwzględnij zamkniętą funkcjonalność. Brak instalacji AT nie czyni bitmapy logotypem. Niewykonane; sprzęt osobno.

Interpretację sprawdzono przez AI 2026-10-04. WCAG2ICT jest wskazówką informacyjną, bez ustalenia obowiązku prawnego lub EN 301 549. W hybrydzie rozdziel podstawy. Brak wykonania nie wyłącza platformy.

Rozwiązania w technologiach

Przegląd oficjalnej dokumentacji API: 2026-10-04. Poniższe minimalne fragmenty wstawiają ten sam widoczny tekst; nie wymagają implementowania własnego edytora kroju i kolorów, by usunąć raster. Nie należy blokować normalnych możliwości platformy ani zastępować widocznego tekstu samą nazwą dostępności. Statusy kompilacji i działania poniżej są odrębne od zastosowania wymagania.

Flutter

import 'package:flutter/cupertino.dart';

class PickupNotice extends StatelessWidget {
  const PickupNotice({super.key});
  @override
  Widget build(BuildContext context) => const Text(
    'Punkt otwarty do 18:00. Odbiór przy wejściu od ogrodu.',
    style: TextStyle(fontSize: 17, height: 1.5),
  );
}

Pełna demonstracja używa tego samego wzorca i Cupertino. Image.asset(..., semanticLabel: ...) pozostaje dobrym sposobem opisania grafiki, lecz nie poprawką wizualnego tekstu. Flutter 3.44.9, Dart 3.12.2: analiza, testy hostowe, build i wykonanie iOS opisane niżej. Ten fragment nie ma osobnego buildu; wykonano jego wzorzec w pełnej demonstracji. Zmiany ustawienia OS/Dynamic Type niewykonane; żywy tekst nie jest dowodem wszystkich aspektów jego dostosowania.

iOS / SwiftUI

import SwiftUI
struct PickupNotice: View {
    var body: some View {
        Text("Punkt otwarty do 18:00. Odbiór przy wejściu od ogrodu.")
            .font(.body)
            .fixedSize(horizontal: false, vertical: true)
    }
}

Text pokazuje znaki, .body korzysta ze stylu systemowego, układ pozwala rosnąć pionowo. Image(...).accessibilityLabel(...) opisuje obraz i nie zamienia go w wizualny tekst. Przegląd API wykonany; kompilacja/typecheck fragmentu i działanie SwiftUI niewykonane. Driver XCTest nie jest aplikacją SwiftUI.

Android / Compose

import androidx.compose.runtime.Composable
import androidx.compose.material3.Text

@Composable
fun PickupNotice() {
    Text("Punkt otwarty do 18:00. Odbiór przy wejściu od ogrodu.")
}

W aplikacji osadzić w układzie oraz temacie i przenieść tekst do zasobu lokalizacji. Image z contentDescription jest grafiką; sam opis nie przywraca wizualnych liter. Przegląd API wykonany; kompilacja i uruchomienie Compose niewykonane. Androida nie uruchamiano.

React Native

import React from 'react';
import { Text } from 'react-native';
export function PickupNotice() {
  return (
    <Text allowFontScaling style={{ fontSize: 17, lineHeight: 26 }}>
      Punkt otwarty do 18:00. Odbiór przy wejściu od ogrodu.
    </Text>
  );
}

Text przechowuje i pokazuje tekst, a skalowanie pozostaje dostępne. Docelowy układ sprawdź po powiększeniu; fragment nie potwierdza wszystkich rozmiarów. Przegląd API wykonany; typecheck, kompilacja i uruchomienie RN niewykonane;

HTML / CSS

<p class="pickup-notice">
  Punkt otwarty do 18:00. Odbiór przy wejściu od ogrodu.
</p>
<style>
  .pickup-notice {
    font-size: 1rem;
    line-height: 1.5;
    padding: 1rem;
  }
</style>

Widoczny akapit z tekstem pozostaje tekstem mimo stylowania. Nie zastępować go obrazem tła i ukrytym span bez działającej alternatywnej prezentacji. Składnia JS i rzeczywiste wykonanie pełnego WWW przeszły; nie ma osobnej kompilacji HTML. Przegląd API/style wykonany; browser zoom, custom stylesheet i warianty bez JS/CSS/obrazów niewykonane. W demonstracji good domyślnie jest tekstem.

Jak sprawdzić

  1. Obejrzyj grafikę i jej funkcję, sprawdź renderer/DOM i zasób. OCR, rola Image lub same słowa nie rozstrzygają, czy to obraz tekstu.
  2. Ustal, czy technologia może osiągnąć wygląd tekstem. Oceń istotną inną treść i rzeczywistą niezbędność. Przy wyjątku dostosowania sprawdź wszystkie cztery właściwości i wynik.
  3. Porównaj tę samą instrukcję bad/good; poprawny alt w bad nie tworzy żywego akapitu. Wpisz notatkę, pokaż adres, przejdź warianty i reset.
  4. W control potwierdź funkcję marki, a nie tylko nazwę pliku lub etykietę wariantu.
  5. W WWW oceń widoczny parallel i przełączenie switch z zachowaniem danych. Oddziel tę obserwację od wyniku silnika ACT, jeżeli nie był uruchamiany.

Historyczne wyniki z 2026-10-04

Sprawdzenie Wynik i granica
Flutter 3.44.9 / Dart 3.12.2 Analiza, 61 hostowych testów, build aplikacji i driverów PASS.
Pierwszy XCTest FAIL, 1 test / 1 błąd / 19,327 sekundy: getter StaticText wywołano dla informacji renderowanej obrazem. Częściowa próba pozostaje historyczna.
Końcowy XCTest v2 PASS, 1 test / 0 błędów / 43,304 sekundy; 17 stanów i drzew, 15 wejść, 4 PNG. Usunięto błędny getter, zachowując obraz i normalne działania.
WWW Mechanika PASS; 12 odczytów DOM/AX, 16 wejść, 5 JPEG, w tym parallel i switch. Bez oceny całej strony lub ACT engine.
Odczyt renderera Istniejące RenderImage, RenderParagraph i RenderEditable: typ, treść, ramka i rozmiar zdekodowanego obrazu, bez zadanej oceny.
SwiftUI, Compose i React Native Dokumentacja sprawdzona; kompilacje i działanie niewykonane.

iOS: iPhone 17 Simulator / iOS 26.5, Xcode 27.0, jasny wygląd, systemowy tekst large bez zmiany, 402×874 pt, DPR 3. Surowe PNG 1206×2622. WWW miało DOM viewport 1280×720 bez override; silnik i DPR nieustalone. Rozmiar screenshotu nie jest automatycznie viewportem. Dane DOM/AX/obrazu są sekwencyjne.

Weryfikacja i ograniczenia

ACT 0va7u6 ma zakres renderowanych zasobów WWW, także obrazów tła, przycisków obrazowych i zewnętrznego SVG. Inline SVG text obsługiwany jako tekst różni się od SVG załadowanego przez img. Założenia reguły nie obejmują wszystkich mechanizmów dostosowania; wykonanie silnika pozostaje niewykonane.

RenderImage pokazuje raster, ale nie rozstrzyga jego znaczenia. RenderParagraph lub tekst DOM mogą istnieć bez widocznej prezentacji. OCR daje kandydata, bez rozstrzygnięcia logo, wykresu, próbki kroju i kompletnego równoległego akapitu. Ocena potrzebuje obrazu, kontekstu, technologii, widocznego odpowiednika i faktycznego działania wyjątków.

Jak sprawdza Clearship

Clearship szuka węzłów obrazów z napisem rozpoznanym przez OCR na zrzucie. Detektor images-of-text-1 przygotowuje kandydatów, a ocena AI analizuje znaczenie napisu oraz możliwy wyjątek logotypu lub niezbędnej formy. Sam detektor nie zgłasza usterek; nazwa grafiki jest wskazówką, bez kwalifikacji wyjątku.

Próg pomiaru rozwojowego Androida z AI nie został spełniony; pomiar kontrolny jest niewykonany. iOS ma wykonany detektor bez oceny AI i bez pomiaru kontrolnego. Katalog zachowuje ocenę ręczną. Przyciski Fluttera i iOS o nieznanej formie, niepewny wyjątek, customizable, obraz obok tego samego tekstu oraz brak OCR lub obrazu wymagają człowieka. Tekst rysowany bez węzła i WWW w WebView pozostają poza zakresem. Brak kandydata nie dowodzi spełnienia.

Powiązane kryteria