Treść nietekstowa

Co oznacza to kryterium

Grafika przekazująca informację potrzebuje tekstu, z którego można uzyskać tę samą informację bez oglądania obrazu. Ikona działania potrzebuje nazwy celu kontrolki. Dekorację oznacz tak, by technologia asystująca mogła ją pominąć. Rodzaj treści i jej cel określają zakres alternatywy.

Tekst wspiera osoby niewidome i słabowidzące, a także odbiorców brajla przy jednoczesnym ograniczeniu wzroku i słuchu. Trafny opis pomaga rozumieć symbole. Dla informacji dźwiękowych pomaga osobom niesłyszącym; przykład wykresu nie zawiera dźwięku. Sama nazwa przycisku nie potwierdza dostępności jego obsługi.

Przykłady błędów i poprawek

Wykres i przycisk z ikoną

Własna „Pracownia” pokazuje syntetyczne dane: poniedziałek — 4 dostawy, wtorek — 6, środa — 3. Oba warianty mają te same słupki, cyfry i podpisy. Rysunek CustomPainter nie tworzy automatycznie tekstowych węzłów dostępności. W poprawce pełny opis wykresu trafia do Semantics, a pod nim od razu widać trzy tekstowe wiersze. Przycisk z ikoną listy otrzymuje nazwę „Pokaż dane dostaw”.

Sam rysunek

Pełna alternatywa

Surowe PNG końcowej demonstracji Flutter/Cupertino, iOS Simulator, 2026-10-02. Screenshoty pokazują tekst; niewidoczne etykiety potwierdzają osobne drzewa XCTest. To własny przykład, bez testu VoiceOver.

Problem

Nagłówek Liczba dostaw nie przekazuje wartości wykresu, a sąsiedni tekst nie nazywa przycisku.

Skutek

Odbiorca bez widzenia nie może porównać dni ani rozpoznać działania ikony.

Poprawka

Udostępnij pełne pary dzień–liczba i nazwę właściwego przycisku. Nie dodawaj opisów dekoracyjnym punktom.

Przycisk ujawnia dodatkowe zdanie o danych. Reset chowa tylko to zdanie, zachowując tekstowe zestawienie poprawnej wersji. Pełna alternatywa istnieje już przed uruchomieniem przycisku. Pierwotne, identyczne wizualnie ujęcia z wcześniejszego kodu pozostają historyczne; pokazana para pochodzi z późniejszej poprawki.

Niepusta nazwa może nadal być niepełna

„Wykres”, „obraz” i nazwa pliku nie przekazują wartości 4/6/3. Przy większym wykresie krótka identyfikacja może prowadzić do dostępnej tabeli lub pełnego opisu, który zachowuje istotne relacje i wnioski. To przykład tekstowy, bez trzeciego uruchomionego wariantu. Usunięcie cyfr ze słupków nie definiuje tej usterki: również rysunek z widocznymi cyframi potrzebuje równoważnej informacji bez oglądania.

Kiedy obowiązuje i gdzie są wyjątki

Wymaganie obejmuje m.in. zdjęcia, wykresy, diagramy, obrazy tekstu, SVG, canvas i układy znaków takie jak ASCII art. Narysowane litery nie stają się tekstem dostępnym programowo. Alternatywa musi być programowo powiązana z treścią albo wskazana z powiązanego tekstu. Luźny opis na innej stronie nie wystarcza.

Dekoracja nie przekazuje informacji ani nie pełni funkcji. Pusty opis informacyjnego wykresu nie czyni go dekoracją; logo identyfikujące firmę również nie jest nią automatycznie. Grafika powtarzająca pełną informację odpowiednio powiązanego tekstu nie wymaga ponownego odczytu tych samych danych. Techniki pomocnicze i interpretacja WCAG2ICT pomagają dobrać rozwiązanie, ale nie są jedyną drogą spełnienia wymagania.

Platformy

Źródłowy przegląd AI z 2026-10-02 stosuje WCAG 2.2 do WWW oraz WCAG2ICT do dokumentów i oprogramowania bez zmiany wymagania. Draft nie podaje daty wydania WCAG2ICT. Zastosowanie zależy od treści; nie ustala obowiązku prawnego ani nie potwierdza wykonania testu.

W hybrydzie oceń część natywną, WWW i przejście między nimi. Brak grafiki w jednym ekranie nie wyłącza platformy.

Rozwiązania w technologiach

Oficjalne API przejrzano 2026-10-02. Poniższe przykłady dotyczą prostego zestawienia 4/6/3 i działania otwarcia danych. Nazwa wynika z celu elementu, nie z wyglądu ikony. Teksty użytkowe wymagają lokalizacji w języku treści.

W HTML obraz informacyjny zwykle otrzymuje adekwatne alt, dekoracja alt="" bez tytułu, a natywny przycisk może czerpać nazwę z widocznego tekstu albo właściwej etykiety. Dla SVG/canvas trzeba sprawdzić nazwę oraz dostęp do pełnych danych; samo istnienie alt na innym elemencie nie wystarcza. W dokumentach potrzebne jest poprawne powiązanie alternatywy z ilustracją i zachowanie go po eksporcie; tag dekoracyjnego artefaktu nie służy do ukrycia istotnego wykresu. Status: przegląd interpretacji i technik, bez wykonania demonstracji tych formatów.

import 'package:flutter/cupertino.dart';

Semantics(
  container: true,
  image: true,
  label: 'Liczba dostaw: Poniedziałek: 4, Wtorek: 6, Środa: 3.',
  child: ExcludeSemantics(child: chartWidget),
)
// Osobny element zapobiega scaleniu przycisku z sąsiednim tekstem.
Semantics(
  container: true,
  child: CupertinoButton(
    onPressed: showDetails,
    child: const Icon(
      CupertinoIcons.list_bullet,
      semanticLabel: 'Pokaż dane dostaw',
    ),
  ),
)
const ExcludeSemantics(child: Text('•  •  •'))

import SwiftUI

VStack {
    Image("delivery-chart")
        .accessibilityLabel("Liczba dostaw: Poniedziałek: 4, Wtorek: 6, Środa: 3.")
    Button(action: showDetails) {
        Image(systemName: "list.bullet")
    }
    .accessibilityLabel("Pokaż dane dostaw")
    Image("divider")
        .accessibilityHidden(true)
}

import androidx.compose.foundation.Image
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton

Image(
    painter = chart,
    contentDescription = "Liczba dostaw: Poniedziałek: 4, Wtorek: 6, Środa: 3."
)
IconButton(onClick = showDetails) {
    Icon(painter = listIcon, contentDescription = "Pokaż dane dostaw")
}
Image(painter = decoration, contentDescription = null)

import { Image, Pressable } from 'react-native';

<>
  <Image
    source={require('./delivery-chart.png')}
    accessible={true}
    accessibilityLabel="Liczba dostaw: Poniedziałek: 4, Wtorek: 6, Środa: 3."
  />
  <Pressable
    onPress={showDetails}
    accessible={true}
    accessibilityRole="button"
    accessibilityLabel="Pokaż dane dostaw"
  >
    <Image
      source={require('./list.png')}
      accessible={false}
      accessibilityElementsHidden={true}
      importantForAccessibility="no-hide-descendants"
    />
  </Pressable>
  <Image
    source={require('./divider.png')}
    accessible={false}
    accessibilityElementsHidden={true}
    importantForAccessibility="no-hide-descendants"
  />
</>;

Jak sprawdzić

1. Ustal cel każdej grafiki: informacja, funkcja, dekoracja lub szczególny rodzaj treści. Zbadaj właściwy stan i build.
2. Porównaj alternatywę z całymi danymi i celem. Dla wykresu sprawdź wszystkie trzy pary dzień–liczba; ogólna nazwa nie wystarcza.
3. Odczytaj nazwę właściwego przycisku. W obu wersjach jest rolą przycisku, lecz tylko poprawiona ma nazwę celu.
4. Uruchom dane, sprawdź reset i zmianę wariantu. Pełny opis ma być dostępny przed akcją, a reset nie może usuwać podstawowej alternatywy.
5. Potwierdź pominięcie dekoracji. Brak węzła wykresu niosącego informację wymaga innej oceny niż brak dekoracyjnych punktów.
6. Osobno sprawdź właściwy czytnik: odczyt wykresu, identyfikację i uruchomienie przycisku oraz pomijanie dekoracji. Zapisz rzeczywiste wypowiedzi. Ten etap nie został wykonany w źródle.

Weryfikacja i ograniczenia

Sam skaner węzłów Image może pominąć canvas, którego nie ma w drzewie. Do oceny celu potrzebne są obraz i kontekst; OCR i AI mogą pomylić dane albo znaczenie dekoracji. Istnienie niepustego opisu nie rozstrzyga równoważności, fokusu, ukrycia przez rodzica ani odczytu przez czytnik. Brak danych daje niepewność. Test znanych oczekiwań demonstracji nie mierzy skuteczności niezależnego walidatora; nazwy wariantów i odpowiedzi referencyjne powinny być poza jego wejściem.

Jak sprawdza Clearship

Bieżący katalog z 2026-10-07 określa ocenę częściową. Reguła wskazuje kontrolkę bez widocznego tekstu i nazwy oraz opis obrazu lub kontrolki będący ogólnym słowem albo nazwą pliku. Grafika bez nazwy wymaga oceny celu z obrazu i drzewa: AI może wskazać informację lub funkcję niedostępną w tekście; dekoracja i duplikat nie są automatycznie usterką. Audyty platformowe dostarczają też kandydatów.

Równoważność niepustego opisu, grafiki bez węzła, ekspozycja dekoracji, CAPTCHA, media i wyjątki wymagają dalszej oceny. Pomiar wykonawców dotyczy Androida; iOS ma w katalogu brak pomiaru. Wynik drzewa nie potwierdza działania czytnika, a brak kandydata nie wyklucza nieopisanej grafiki.

Powiązane kryteria

• 1.4.1
  Użycie koloru

  Opis semantyczny nie zastępuje widocznej alternatywy informacji kodowanej kolorem.

• 1.4.5
  Obrazy tekstu

  Obraz tekstu może mieć opis i nadal wymagać zastąpienia zwykłym tekstem.

• 4.1.2
  Nazwa, rola, wartość

  Nazwa ikony działania łączy się z rolą, stanem i obsługą kontrolki.