Wymagania dostępności
-
1.1.1 Treść nietekstowa - poziom A: Wszelkie treści nietekstowe przedstawione użytkownikowi mają swoją alternatywę tekstową, która pełni tę samą funkcję, z wyjątkiem sytuacji opisanych poniżej.
- Kontrolki użytkownika i wprowadzanie danych przez użytkownika: Jeśli treść nietekstowa jest kontrolką użytkownika lub polem wprowadzania danych, wtedy posiada nazwę opisującą jej przeznaczenie. (Kryterium sukcesu 4.1.2 podaje dodatkowe wymagania dotyczące kontrolek oraz wprowadzania danych przez użytkownika.)
- Media oparte na czasie: Jeśli treścią nietekstową są media oparte na czasie, wtedy alternatywa tekstowa zawiera przynajmniej opisowe określenie treści nietekstowej. (Wytyczna 1.2 podaje dodatkowe wymagania, jeśli chodzi o media.)
- Test: Jeśli treść nietekstowa jest testem lub ćwiczeniem, które utraciłoby swój sens ze względu na przedstawienie tej samej treści w postaci tekstu, wtedy alternatywa w postaci tekstu podawać powinna przynajmniej opis pozwalający zrozumieć przeznaczenie treści nietekstowej.
- Odczucie zmysłowe: Jeśli treść nietekstowa ma za zadanie przede wszystkim tworzyć konkretne odczucie zmysłowe, wtedy alternatywa w postaci tekstu jest opisem pozwalającym zrozumieć przeznaczenie treści nietekstowej.
- CAPTCHA: Jeśli celem treści nietekstowej jest potwierdzenie, że do treści ma dostęp człowiek, a nie komputer, wtedy zapewnia się alternatywę w postaci tekstu, która identyfikuje oraz opisuje cel treści nietekstowej. Zapewnia się również alternatywne zabezpieczenia typu CAPTCHA, dostosowane do różnych możliwości percepcji użytkowników, uwzględniając różne rodzaje niepełnosprawności.
- Cele dekoracyjne, formatowanie, treść niewidoczna: Jeśli treść nietekstowa pełni funkcję czysto dekoracyjną, używana jest do formatowania wizualnego lub też nie jest przedstawiana użytkownikowi, powinna być wdrożona w sposób umożliwiający technologiom wspomagającym jej zignorowanie.
-
1.4.5 Obrazy tekstu - poziom AA: Jeśli wykorzystywane technologie mogą przedstawiać treść wizualnie, do przekazywania informacji wykorzystuje się tekst, a nie obraz tekstu, z wyjątkiem następujących sytuacji:
- Możliwy do dostosowania: Obraz tekstu może być dostosowany wizualnie do wymagań użytkownika;
- Istotny: Prezentacja tekstu w postaci graficznej jest istotna dla zrozumienia przekazywanej informacji.
Uwaga: Tekst, który jest częścią logo lub nazwy własnej produktu, jest w tym przypadku uznawany za istotny.
- 4.1.2 Nazwa, rola, wartość - poziom AA: Dla wszystkich komponentów interfejsu użytkownika (w tym, ale nie tylko, elementów formularzy, łączy oraz komponentów wygenerowanych przez skrypty) nazwa oraz rola mogą być określone programowo; stan, właściwości oraz wartości, które mogą być ustawione przez użytkownika, mogą również być ustawione programowo; powiadomienie o zmianach w tych elementach dostępne jest dla programów użytkownika, w tym technologii wspomagających.
Uzasadnienie metody testowej
- Testowanie obrazów ocenia obrazy jako elementy zakodowane, aby ustalić, czy autor treści określił je jako znaczące lub dekoracyjne. Istnieją jednak pewne scenariusze, opisane w testach, w których programowe określenie autora może być nieprawidłowe.
- Testy wykorzystują wskazówki z samouczka WAI W3C Images Tutorial
- Wszystkie obrazy znaczące i dekoracyjne muszą zostać ocenione. Do obrazu może mieć zastosowanie wiele testów.
Ograniczenia, założenia lub wyjątki
- Obraz, który ma alternatywę w postaci niepustego tekstu
alt
, został uznany przez autora treści za znaczący. Autor zdecydował, że ten obraz nie powinien być ignorowany przez technologię wspomagającą. - Obraz, który ma alternatywę w postaci pustego tekstu
alt
, został uznany przez autora treści za dekoracyjny. Autor zdecydował, że ten obraz powinien być ignorowany przez technologię wspomagającą. - Użycie
role="presentation"
lubrole="none"
w znaczniku obrazu z innymi atrybutami lub rolami może powodować konflikty. Ten warunek podstawowy testuje te konflikty, ponieważ rozwiązywanie konfliktów ról prezentacyjnych ma niespójną obsługę dostępności i może skutkować niedostępną treścią. - „Jeśli element z rolą
"presentation"
ma fokus lub jest w inny sposób interaktywny, programy użytkownika MUSZĄ zignorować normalny efekt roli i wyeksponować element z niejawną rdzenną semantyką, aby zapewnić, że element jest zarówno zrozumiały, jak i funkcjonalny”.- Ponieważ obsługa dostępności jest niespójna, ten warunek podstawowy sprawdza, czy obraz z pustą alternatywą tekstową nie znajduje się w kolejności tabulacji, ani nie jest obrazem funkcjonalnym.
- „Programy użytkownika MUSZĄ zawsze ujawniać globalne stany i właściwości WAI-ARIA interfejsom API dostępności, nawet jeśli element ma jawną lub odziedziczoną rolę
"presentation"
. W takim przypadku program użytkownika ignoruje rolę"presentation"
i eksponuje element zgodnie z jego domyślną (niejawną) rdzenną semantyką”. - „Autorzy NIE POWINNI dodawać sensownego tekstu alternatywnego (na przykład używać
alt=""
w HTML), gdy rola"presentation"
jest stosowana do obrazu.” (WAI-ARIA 1.1, presentation (role). - Ponieważ obsługa dostępności jest niespójna jest niespójna, ten warunek podstawowy sprawdza, czy obraz z atrybutem
role="presentation"
lubrole="none"
nie ma niepustego atrybutualt
, a obraz, który ma niepustą alternatywę tekstową, nie marole="presentation"
lubrole="none"
. - Powszechnie używane formaty obrazów to .jpg, .png, .svg, .gif, .tiff, .bmp. W użyciu są również inne formaty graficzne, które powinny być brane pod uwagę w tym teście.
- Cele dekoracyjne, formatowanie, treść niewidoczna: Jeśli treść nietekstowa pełni funkcję czysto dekoracyjną, używana jest do formatowania wizualnego lub też nie jest przedstawiana użytkownikowi, powinna być wdrożona w sposób umożliwiający technologiom wspomagającym jej zignorowanie.
- CAPTCHA: Jeśli celem treści nietekstowej jest potwierdzenie, że do treści ma dostęp człowiek, a nie komputer, wtedy zapewnia się alternatywę w postaci tekstu, która identyfikuje oraz opisuje cel treści nietekstowej. Zapewnia się również alternatywne zabezpieczenia typu CAPTCHA, dostosowane do różnych możliwości percepcji użytkowników, uwzględniając różne rodzaje niepełnosprawności.
- Obrazy tekstu, które są niezbędne do przekazywania informacji, są wyłączone z KS 1.4.5. Tekst, który jest częścią logo lub nazwy własnej produktu, jest w tym przypadku uznawany za istotny.
- Definicja obrazu tekstu zawiera uwagę: „Uwaga: Nie dotyczy to tekstu znajdującego się na obrazie, w którym ważna jest inna treść wizualna.” Przykładami takich obrazów są wykresy, zrzuty ekranu i diagramy, które wizualnie przekazują ważne informacje nie tylko za pomocą tekstu.
- Zawarte w ilustrowanym tekście strony równoważne opisy obrazu pozwalają uznać obraz za dekoracyjny. Nie wymaga to jednak usunięcia ze znacznika obrazu żadnych istniejących atrybutów tekstowych.
- Chociaż historycznie w celu zapewnienia długiego opisu obrazu używany był atrybut
longdesc
, nadal wymieniony jako wystarczająca technika w WCAG (H45), technika ta nie jest obecnie dobrze obsługiwana pod względem dostępności i nie jest częścią dostępnej nazwy, ani sposobem zapewnienia dostępnego opisu dla obrazu; dlatego ten test podstawowy nie akceptuje wspomnianej techniki. - Połączenie dostępnej nazwy elementu i dostępnego opisu jest jego alternatywą tekstową.
6.A Procedura testowa dla obrazów z niepustą alternatywą tekstową
Identyfikator testu podstawowego: 6.A-MeaningfulImage
Identyfikacja treści
Znajdź wszystkie obrazy (np. elementy img
lub element z role="img"
), które mają niepustą alternatywę tekstową (kombinację dostępnej nazwy i dostępnego opisu) zgodnie z mapowaniami API dostępności HTML 1.0 dla img
Instrukcja testowania
- Sprawdź, czy żaden z poniższych warunków nie jest prawdziwy:
- Obraz jest projektem strony/formatowaniem i może zostać zignorowany przez technologię wspomagającą bez utraty znaczenia strony.
- Obraz nie jest widoczny na stronie.
- Sprawdź, czy NIE określono dla obrazu atrybutu
role="presentation"
.[ SC 4.1.2] - Sprawdź, czy NIE określono dla obrazu atrybutu
role="none"
.[ SC 4.1.2] - Sprawdź, czy niepusta tekstowa alternatywa (połączenie dostępnej nazwy i dostępnego opisu) zapewnia równoważny opis celu obrazu.[SC 1.1.1].
Wynik testów
Jeśli którykolwiek z powyższych testów zakończy się niepowodzeniem, test podstawowy 6.A-MeaningfulImage kończy się niepowodzeniem.
6.B Procedura testowa dla obrazów z pustą alternatywą tekstową
Identyfikator testu podstawowego: 6.B-DecorativeImage
Identyfikacja treści
Znajdź wszystkie obrazy (np. elementy img lub element z role=”img” lub element, który zawiera obraz tła CSS), które mają pustą alternatywę tekstową.
Instrukcja testowania
- Sprawdź, czy alternatywa pustego tekstu została przypisana programowo przy użyciu jednej z następujących technik [SC 1.1.1]:
- obraz ma atrybut
role="prezentation"
. - obraz ma atrybut
role="none"
. - atrybut `aria-hidden’ jest ustawiony na wartość “true”.
- obraz ma arybut
alt=""
. - Obraz jest wstawiany za pomocą CSS (tzn. jest obrazem tła).
Uwaga: Jeśli żadna z tych technik nie została użyta, test kończy się niepowodzeniem.
- obraz ma atrybut
- Sprawdź, czy żaden z poniższych warunków nie jest prawdziwy [SC 1.1.1]:
- Obraz jest jedynym sposobem na przekazanie istotnych informacji.
- Obraz jest w kolejności tabulacji.
- Obraz jest obrazem funkcjonalnym, który inicjuje działanie.
- W przypadku obrazów z
role="presentation"
lubrole="none"
sprawdź, czy nie ma niepustych atrybutów tekstu alternatywnego. Obecność takich atrybutów może spowodować, że technologia wspomagająca nie będzie ignorować obrazu, tj. zapewni użytkownikowi alternatywę tekstową obrazu. [SC 1.1.1]- Przykład niepowodzenia 1:
<img role="none" alt="Użyj swoich notatek">
- Przykład niepowodzenia 2:
<img aria-label="żółw" role="prezentation">
Wynik testów
Jeśli którykolwiek z powyższych testów zakończy się niepowodzeniem, test podstawowy 6.B-DecorativeImage kończy się niepowodzeniem.
- Przykład niepowodzenia 1:
6.C Procedura testowa dla captcha
Identyfikator testu podstawowego: 6.C-Captcha
Identyfikacja treści
Znajdź wszelkie CAPTCHA przeznaczone do potwierdzenia, że dostęp do treści uzyskuje osoba, a nie komputer.
Instrukcja testowania
- Sprawdź, czy alternatywa tekstowa (kombinacja dostępnej nazwy i dostępnego opisu) nie jest pusta. [SC 1.1.1]
- Sprawdź, czy alternatywa w postaci niepustego tekstu (połączenie dostępnej nazwy i dostępnego opisu) określa i opisuje cel CAPTCHA. [SC 1.1.1]
- Sprawdź, czy zapewnione są alternatywne formy CAPTCHA dla użytkowników niewidomych i niedosłyszących. [SC 1.1.1]
Wynik testów
Jeśli którykolwiek z powyższych testów zakończy się niepowodzeniem, test podstawowy 6.C-Captcha kończy się niepowodzeniem.
6.D Procedura testowa dla obrazów tekstu
Identyfikator testu podstawowego: 6.D-ImageText
Identyfikacja treści
Zidentyfikuj wszelkie obrazy tekstu, z wyjątkiem przypadków, w których konkretna prezentacja tekstu jest niezbędna dla przekazywanych informacji (np. logotypy lub tekst, który jest częścią logo lub nazwy marki).
Instrukcja testowania
- Sprawdź, czy za pomocą tekstu nie można uzyskać takiej samej wizualnej prezentacji i efektu, jak za pomocą obrazu tekstu. [SC 1.4.5]
- Sprawdź, czy obraz tekstu można dostosować wizualnie do wymagań użytkownika.
- Na przykład strona internetowa pozwala użytkownikom określić ustawienia czcionki, rozmiaru, koloru i tła, a następnie wszystkie obrazy tekstu są dostarczane na podstawie tych ustawień.
Wynik testów
Jeśli którykolwiek z powyższych testów zakończy się niepowodzeniem, test podstawowy 6.D-ImageText kończy się niepowodzeniem.
Poradnik: Wskazówki dotyczące usprawniania procesu testowego
brak
Techniki WCAG 2.2
Przy opracowywaniu tej procedury testowej, wzięto pod uwagę następujące wystarczające techniki i typowe błędy:
-
ARIA6: Użycie atrybutu aria-label, aby zapewnić etykiety dla obiektów
- ARIA15: Użycie atrybutu aria-describedby, aby zapewnić odpowiedniki tekstowe dla obrazów
- C9: Użycie CSS do dodawania obrazów dekoracyjnych
- G143: Zapewnienie tekstu alternatywnego opisującego zadanie CAPTCHA
- G144: Zapewnienie, że strona internetowa zawiera inny CAPTCHA służący temu samemu celowi przy użyciu innej modalności
- H36: Użycie atrybutów alt dla obrazów używanych jako przyciski przesyłania
- H37: Użycie atrybutów alt w elementach img
- H67: Użycie pustego tekstu alternatywnego i nieużywanie atrybutu title w elementach img dla obrazów, które powinny być zignorowane przez technologię wspomagającą
- H86: Zapewnienie tekstowych alternatyw dla sztuki ASCII, emotikonów i tekstu szyfrowanego
- F3: Niespełnienie kryterium sukcesu 1.1.1 z powodu użycia CSS do osadzania obrazów, które przekazują ważne informacje
- F20: Niespełnienie kryterium sukcesu 1.1.1 i 4.1.2 ze względu na brak aktualizacji tekstów alternatywnych w przypadku wystąpienia zmian w treści nietekstowej
- F30: Niespełnienie kryterium sukcesu 1.1.1 i 1.2.1 z powodu użycia alternatyw tekstowych, które nie są alternatywne (np. nazw plików lub tekstu zastępczego)
- F38: Niespełnienie kryterium sukcesu 1.1.1 z powodu pominięcia w HTML atrybutu alt dla treści nietekstowych wykorzystywanych wyłącznie w celach dekoracyjnych
- F39: Niespełnienie kryterium sukcesu 1.1.1 ze względu na dostarczenie tekstu alternatywnego, który nie jest pusty (np. alt=”spacja” lub alt=”obraz”) dla obrazów, które powinny zostać zignorowane przez technologię asystującą
- F65: Niespełnienie kryterium sukcesu 1.1.1 z powodu pominięcia atrybutu alt lub tekstu alternatywnego w elementach img, elementach area i polach typu “image”