Objaśnienie KS 2.5.3:Etykieta w nazwie (Poziom A)
W skrócie
- Cel
- Widoczne etykiety kontrolek są wyzwalaczem aktywacji mowy.
- Co zrobić
- Tam, gdzie jest to możliwe, należy dopasować etykietę tekstową i nazwę kontrolki.
- Dlaczego to jest ważne
- Osoby posługujące się interakcją głosową używają widocznych etykiet w swoich poleceniach
Intencja
Intencją tego kryterium sukcesu jest zapewnienie, że słowa wizualnie oznaczające komponent są jednocześnie słowami powiązanymi z komponentem programowo. Dzięki temu osoby z niepełnosprawnościami mogą polegać na widocznych etykietach jako sposobie interakcji z komponentami.
Większości kontrolek towarzyszy widoczna etykieta tekstowa. Te same kontrolki mają nazwę programową, znaną również jako dostępna nazwa. Użytkownicy zazwyczaj czują się znacznie lepiej, jeśli słowa i znaki w widocznej etykiecie kontrolki pasują do dostępnej nazwy lub są zawarte w niej. Gdy tak jest, użytkownicy wprowadzający mowę (tj. użytkownicy aplikacji do rozpoznawania mowy) mogą nawigować, wypowiadając widoczne etykiety tekstowe komponentów, takich jak menu, łącza i przyciski, które pojawiają się na ekranie. Użytkownicy widzący, którzy korzystają z funkcji zamiany tekstu na mowę (np. czytników ekranu) również będą mieli lepsze wrażenia, jeśli tekst, który słyszą, będzie zgodny z tekstem, który widzą na ekranie.
Zauważ, że jeśli dla komponentu nie istnieje widoczna etykieta tekstowa, to kryterium sukcesu nie ma zastosowania do tego komponentu
Tam, gdzie istnieją etykiety tekstowe i są one odpowiednio powiązane z komponentami
interfejsu użytkownika za pomocą ustalonych praktyk programistycznych, etykieta i
nazwa będą zwykle zgodne. Jeśli nie są one zgodne, użytkownicy wprowadzający mowę,
którzy próbują użyć widocznej etykiety tekstowej jako środka nawigacji lub wyboru
(np. przejdź do hasła
), nie odniosą sukcesu. Nawigacja oparta na mowie kończy się niepowodzeniem, ponieważ
widoczna etykieta wymawiana przez użytkowników nie pasuje (lub nie jest częścią) dostępnej
nazwy włączonej jako polecenie wprowadzania mowy. Ponadto, gdy dostępna nazwa różni
się od widocznej etykiety, może działać jako ukryte polecenie, które może zostać przypadkowo
aktywowane przez użytkowników wprowadzania mowy.
Rozbieżności między widocznymi etykietami a programowymi nazwami elementów sterujących stanowią jeszcze większy problem dla użytkowników korzystających z funkcji wprowadzania mowy i zamiany tekstu na mowę, którzy również mają problemy poznawcze. Niedopasowanie powoduje dodatkowe obciążenie poznawcze dla użytkowników wprowadzania mowy, którzy muszą pamiętać o wypowiedzeniu polecenia głosowego, innego niż etykieta widoczna na kontrolce. Stwarza to również dodatkowe obciążenie poznawcze dla użytkownika syntezatora mowy, aby przyswoić i zrozumieć wyjście mowy, która nie odpowiada widocznej etykiecie
Aby dopasować tekst etykiety i dostępną nazwę, należy najpierw określić, który tekst na ekranie powinien być uważany za etykietę dla danej kontrolki. W interfejsie użytkownika często występuje wiele ciągów tekstowych, które mogą być istotne dla kontrolki. Istnieją jednak powody, dla których najlepiej jest konserwatywnie interpretować etykietę jako tylko tekst w bliskim sąsiedztwie.
Zazwyczaj etykietą dla komponentów interfejsu użytkownika jest sąsiadujący ciąg tekstowy. Typowe pozycjonowanie dla języków od lewej do prawej to:
- bezpośrednio po lewej stronie pól kombi, list rozwijanych, wejść tekstowych i innych widżetów (lub w przypadku braku etykiet po lewej stronie, bezpośrednio nad i wyrównane z lewą krawędzią każdego wejścia)
- bezpośrednio po prawej stronie pól wyboru i przycisków radiowych
- wewnątrz przycisków i zakładek lub bezpośrednio pod ikonami służącymi jako przyciski
Uzasadnienie niektórych z tych konwencji wyjaśniono na stronie G162: Umieszczanie etykiet w bezpośredniej bliskości kontrolek, aby zmaksymalizować postrzeganie relacji.
Ważne jest, aby dążyć do traktowania tylko sąsiedniego tekstu jako etykiety, ponieważ liberalne interpretacje tego, co stanowi etykietę tekstową, mogą zagrozić wartości tego kryterium sukcesu poprzez zmniejszenie przewidywalności. Wyizolowanie etykiety do pojedynczego ciągu znaków w pobliżu komponentu ułatwia programistom, testerom i użytkownikom końcowym identyfikację etykiety przeznaczonej do oceny w tym kryterium sukcesu. Przewidywalna interpretacja etykiet pozwala użytkownikom technologii rozpoznawania mowy na interakcję z elementem za pośrednictwem jego konwencjonalnie umieszczonej etykiety, a użytkownikom technologii odczytu ekranu pozwala cieszyć się spójnością między pobliską widoczną etykietą a ogłoszoną nazwą komponentu.
Należy pamiętać, że tekst zastępczy w polu formularza nie jest uważany za odpowiedni
sposób zapewniania etykiety. Specyfikacja HTML5 stanowi, że atrybut placeholder nie powinien być używany jako alternatywa dla <label>
. Warto jednak zauważyć, że „etykieta” w tym oświadczeniu HTML5 znajduje się w nawiasach
kodowych i łączy się z elementem label
. Dla celów tego kryterium sukcesu Etykieta w nazwie, „etykieta” nie jest używana
w takim programistycznym znaczeniu, ale po prostu odnosi się do ciągu tekstowego znajdującego
się w bezpośredniej bliskości komponentu. Dlatego, w przypadku braku jakiegokolwiek
innego ciągu tekstowego w pobliżu (jak opisano na poprzedniej liście), jeśli pole
formularza zawiera tekst zastępczy (placeholder
, taki tekst może być kandydatem do etykiety w nazwie. Jest to wspierane zarówno przez
obliczanie dostępnej nazwy (omówione później), jak i z praktycznego punktu widzenia,
że jeśli widoczna etykieta nie jest dostarczana w inny sposób, prawdopodobne jest,
że użytkownik wprowadzania mowy może próbować użyć zastępczej wartości tekstowej jako
sposobu interakcji z danymi wejściowymi.
Etykiety tekstowe „wyrażają coś w języku naturalnym”
Symboliczne znaki tekstowe
Dla celów tego kryterium tekst nie powinien być uważany za widoczną etykietę, jeśli
jest używany w sposób symboliczny, a nie bezpośrednio wyrażający coś w naturalnym
języku, zgodnie z definicją tekstu w WCAG. Na przykład, 1.4.5 Obrazy tekstu opisuje rozważania dotyczące „symbolicznych znaków tekstowych”. Na obrazach przykładowego
tekstu „B”, „I” oraz „ABC” pojawiają się na ikonach w edytorze tekstu, gdzie mają
symbolizować odpowiednio funkcje pogrubienia, kursywy i pisowni. W takim przypadku
dostępną nazwą powinna być funkcja przycisku (np. „Sprawdź pisownię”), a nie widoczne
znaki symboliczne. Podobny edytor tekstu pokazano na poniższym rysunku.
Podobnie, gdy autor użył symbolu większego niż („ > ”), aby naśladować wygląd strzałki skierowanej w prawo, tekst nie przekazuje czegoś w języku naturalnym. Jest to symbol, w tym scenariuszu prawdopodobnie mający naśladować ikony używane dla przycisku „Odtwórz” lub strzałki „Dalej”.
Interpunkcja i wielkie litery
Z tego samego powodu stosowanie interpunkcji i wielkich liter w etykietach można również uznać za opcjonalne. Na przykład dwukropek dodawany konwencjonalnie na końcu etykiet wejściowych nie wyraża czegoś w języku naturalnym, a wielkie litery na pierwszej literze każdego słowa w etykiecie zwykle nie zmieniają znaczenia słów. Jest to szczególnie istotne w kontekście tego kryterium sukcesu, ponieważ jest ono skierowane przede wszystkim do użytkowników rozpoznawania mowy; wielkie litery i większość znaków interpunkcyjnych są często ignorowane, gdy użytkownik wypowiada etykietę jako sposób interakcji z kontrolką.
Chociaż uwzględnienie dwukropka i wielkich liter w dostępnej nazwie z pewnością nie
jest błędem, obliczona nazwa „Imię” nie powinna być traktowana jako błąd „Imię:”.
Podobnie, „Dalej...” widoczne na przycisku może mieć „Dalej” jako dostępną nazwę.
W razie wątpliwości, gdy istnieje znacząca widoczna etykieta, należy dokładnie dopasować
ciąg znaków do dostępnej nazwy.
Wyrażenia i wzory matematyczne
Wyrażenia matematyczne stanowią wyjątek od poprzedniego podrozdziału dotyczącego znaków
symbolicznych. Symbole matematyczne mogą być używane jako etykiety; na przykład "11×3=33"
i "A>B" przekazują znaczenie. Etykieta nie powinna być nadpisywana w dostępnej nazwie
i należy unikać zastępowania słów, gdy używana jest formuła, ponieważ istnieje wiele
sposobów wyrażenia tego samego równania. Na przykład, nadanie nazwy „jedenaście pomnożone
przez trzy równa się trzydzieści trzy” może oznaczać, że użytkownik, który powiedział
„jedenaście razy trzy równa się trzydzieści trzy” może nie pasować. Najlepiej jest
pozostawić formuły tak, jak zostały użyte w etykiecie i liczyć na to, że użytkownik
będzie zaznajomiony ze swoim oprogramowaniem mowy, aby uzyskać dopasowanie. Co więcej,
przekształcenie etykiety wzoru matematycznego w dostępną nazwę, która jest pisanym
odpowiednikiem, może powodować problemy z tłumaczeniem. Nazwa powinna być zgodna z
tekstem formuły etykiety. Należy pamiętać, że twórcy powinni używać odpowiedniego
symbolu w formule. Na przykład 11x3 (z małą lub dużą literą X), 11*3 (z symbolem gwiazdki)
i 11×3 (z symbolem &razy
;
) są łatwe do zinterpretowania przez widzących użytkowników jako oznaczające tę samą
formułę, ale nie wszystkie mogą być dopasowane do „11 razy 3” przez oprogramowanie
do rozpoznawania mowy. Należy użyć odpowiedniego symbolu operatora (w tym przypadku
symbolu czasu).
Specyfikacja obliczania dostępnej nazwy i dostępnego opisu
Ważne jest, aby zrozumieć, skąd wzięła się dostępna nazwa. Accessible Name and Description Computation 1 . 1 i HTML Accessibility API Mappings 1. 0 opisują, w jaki sposób obliczana jest dostępna nazwa, w tym które atrybuty są brane pod uwagę przy jej obliczaniu i w jakiej kolejności. Jeśli komponent ma wiele możliwych wartości atrybutów, które mogą być użyte dla jego dostępnej nazwy, tylko najbardziej preferowana z tych wartości zostanie obliczona. Żadna z innych, mniej preferowanych wartości nie będzie częścią nazwy. W większości przypadków specyfikacja wzmacnia istniejące relacje programowe między etykietami i kontrolkami.
Inny tekst wyświetlany na ekranie, który jest poprawnie zakodowany zgodnie z kryterium sukcesu 1.3.1: Informacje i relacje nie są zwykle uwzględniane w obliczeniach dostępnej nazwy komponentu interfejsu użytkownika bez interwencji twórcy (za pomocą technik etykietowania ARIA). Najpopularniejsze z nich to:
- nagłówki i instrukcje
- etykiety grup dla zestawów komponentów (tj. używane z
legendą/zestawem
pól
lub z rolągrupy
lubgrupą przycisków opcji
)
Takie informacje tekstowe mogą stanowić część opisu komponentu. Tak więc zarówno z programowego punktu widzenia, jak i z konserwatywnej
taktyki uznawania etykiety za sąsiadujący tekst
, ani nagłówki, ani instrukcje, ani etykiety
grup nie powinny być zwykle uważane za etykiety do celów tego kryterium sukcesu.
Należy zauważyć, że specyfikacja pozwala autorom na zastąpienie nazwy obliczonej za
pomocą natywnej semantyki. Zarówno aria-label
, jak i aria-labelledby
mają pierwszeństwo w obliczaniu nazwy, zastępując widoczny tekst jako dostępną nazwę,
nawet jeśli widoczna etykieta tekstowa jest programowo powiązana z kontrolką. Z tego
powodu, gdy istnieje już widoczna etykieta, należy unikać lub ostrożnie używać aria-label
, a aria-labelledby
powinien być używany jako uzupełnienie z ostrożnością.
Wreszcie, aria-describedby
nie jest uwzględniana w obliczeniach Accessible Name (zamiast tego jest częścią obliczeń
dostępnego opisu). Zgodnie z konwencją, tekst powiązany z kontrolką poprzez aria-describedby
jest ogłaszany natychmiast po dostępnej nazwie przez czytniki ekranu. W związku z
tym kontekst nagłówków, instrukcji i etykiet grup może być dostarczany za pośrednictwem
dostępnego opisu, aby pomóc użytkownikom czytników ekranu bez wpływu na doświadczenia
tych, którzy nawigują za pomocą oprogramowania do rozpoznawania mowy.
Korzyści
- Użytkownicy wprowadzający mowę mogą bezpośrednio aktywować elementy sterujące na stronie z mniejszą liczbą zaskakujących zmian ostrości.
- Użytkownicy korzystający z funkcji zamiany tekstu na mowę będą mieli lepsze wrażenia, ponieważ etykiety, które słyszą, odpowiadają widocznym etykietom tekstowym, które widzą na ekranie.
Przykłady
- Dostępna nazwa pasuje do widocznej etykiety: Dostępna nazwa i widoczna etykieta kontrolki są takie same.
- Dostępna nazwa zaczyna się od widocznej etykiety: Dostępna nazwa
Szukaj wartości
zaczyna się od tekstu widocznej etykietySzukaj
.
Powiązane zasoby
Zasoby służą wyłącznie celom informacyjnym. Nie należy traktować ich jako zaleceń.
- Accessible Name and Description Computation (Obliczanie dostępnej nazwy i opisu)
- Accessible Name and Description Computation in HTML Accessibility API Mappings 1.0 (Obliczanie dostępnych nazw i opisów w HTML Accessibility API Mappings 1.0)
Techniki
Każdy numerowany element w tej sekcji reprezentuje technikę lub kombinację technik, które Grupa Robocza WCAG uważa za wystarczające do spełnienia tego kryterium sukcesu. Nie jest jednak konieczne stosowanie tych konkretnych technik. Aby uzyskać informacje na temat stosowania innych technik, zobacz Objaśnienie technik dla kryteriów sukcesu WCAG, szczególnie w sekcji „Inne techniki”.
Techniki wystarczające
Techniki pomocnicze
Chociaż nie jest to wymagane do uzyskania zgodności, należy rozważyć następujące dodatkowe techniki, aby zwiększyć dostępność treści. Nie wszystkie techniki mogą być stosowane lub byłyby skuteczne we wszystkich sytuacjach.
- G162: Umieszczanie etykiet w bezpośredniej bliskości kontrolek, aby zmaksymalizować postrzeganie relacji
- Jeśli ikona nie ma towarzyszącego jej tekstu, należy rozważyć użycie jej tekstu unoszącego się nad ikoną jako dostępnej nazwy (Potencjalna przyszła technika)
Błędy
Poniżej wymieniono typowe błędy, które Grupa Robocza WCAG uważa za niespełnienie tego kryterium sukcesu.
- F96: Błąd spowodowany dostępną nazwą, która nie zawiera widocznego tekstu etykiety
- Dostępna nazwa zawiera widoczny tekst etykiety, ale słowa widocznej etykiety nie są w tej samej kolejności, co w widocznym tekście etykiety (Potencjalna przyszła technika).
- Dostępna nazwa zawiera widoczny tekst etykiety, ale jedno lub więcej innych słów w etykiecie występuje w innej kolejności (Potencjalna przyszła technika)
Kluczowe pojęcia
tekst lub inny komponent z tekstem alternatywnym, który jest prezentowany użytkownikowi w celu identyfikacji komponentu w treści internetowej
Uwaga
Etykieta jest widoczna dla wszystkich użytkowników, podczas gdy nazwa może być przekazywana tylko technologiom wspomagającym. W wielu przypadkach (choć nie we wszystkich) etykieta i nazwa są takie same.
Uwaga
Pojęcie etykiety nie ogranicza się tylko do elementu label
w HTML.
język stosujący kombinację gestów dłoni i ramion, mimiki twarzy i pozycji ciała, w celu przekazania informacji.
język mówiony, pisany lub język migowy (znaków zarówno wizualnych, jak dotykowych) służący do komunikowania się między ludźmi.
Uwaga
Zobacz także język migowy.
fragment treści internetowej odbierany przez użytkownika jako pojedyncza kontrolka dla określonej funkcji
Uwaga
Wiele komponentów interfejsu użytkownika może być implementowanych w postaci pojedynczego elementu. Tutaj komponenty nie są związane z konkretną techniką programistyczną, a raczej z tym, co użytkownik odbiera jako pojedynczą kontrolkę.
Uwaga
Do komponentów interfejsu użytkownika należą elementy formularzy i linków, jak również komponenty generowane przez skrypty.
Uwaga
To, co jest tutaj rozumiane jako „komponent” lub „komponent interfejsu użytkownika” jest również czasami nazywane „elementem interfejsu użytkownika”.
tekst, po którym oprogramowanie może zidentyfikować obiekty w treści
Uwaga
Nazwa może być ukryta i przekazywana tylko poprzez technologie wspomagające, w odróżnieniu od etykiet, które są prezentowane wszystkim użytkownikom. W niektórych, ale nie wszystkich wypadkach, etykieta i nazwa są tożsame.
Uwaga
To nie jest to samo, co atrybut „name” w HTML.
tekst, który jest renderowany w postaci nietekstowej (np. jako grafika) w celu uzyskania określonych efektów wizualnych
Uwaga
Nie dotyczy to tekstu znajdującego się na obrazie, w którym ważna jest inna treść wizualna.
takie przedstawienie danych przez oprogramowanie dostawcy, które pozwala różnym programom użytkownika, w tym technologiom wspomagającym, odczytać i przedstawić daną informację w sposób, jakiego potrzebuje użytkownik
renderowanie treści w sposób, który jest postrzegalny dla użytkownika
oprogramowanie umożliwiające pobieranie i przeglądanie treści internetowych
nieosadzony zasób uzyskany z pojedynczego identyfikatora URI za pomocą protokołu HTTP wraz z wszelkimi innymi zasobami użytymi do renderowania strony w programie użytkownika lub takimi, które potencjalnie mogą być użyte do renderowania
Uwaga
Mimo że każdy z „pozostałych zasobów” mógłby być renderowany razem z podstawowym zasobem, to niekoniecznie muszą być renderowane równocześnie.
Uwaga
W celu zgodności z niniejszymi wytycznymi, zasób nie może być „osadzony” w innym zasobie wchodzącym w zakres oceny zgodności, aby można go było uznać za stronę internetową.
- Sposób, w jaki poszczególne części strony internetowej są ułożone i połączone ze sobą; oraz
- Sposób ułożenia zbioru stron internetowych.
albo ASCII art - proste rysunki tworzone za pomocą znaków lub glifów układanych na obszarze o stałej szerokości kolumn oraz o stałej wysokości znaków (zazwyczaj z 95 możliwych do wydrukowania znaków zdefiniowanych przez ASCII). Ten sposób tworzenia grafiki, a raczej jej symbolizowania, nazywa się semigrafiką lub pseudografiką. ASCII art były początkowo tworzone z myślą o wydrukowaniu ich na drukarkach znakowych.
sprzęt i oprogramowanie, które działa jako program użytkownika lub współdziała z popularnymi programami użytkownika, aby zapewnić osobom z niepełnosprawnościami niezbędne funkcjonalności, wykraczające poza możliwości oferowane przez popularne programy użytkownika;
Uwaga
Funkcjonalności zapewniane przez technologie wspomagające obejmują alternatywny sposób prezentacji treści (np. mowa syntetyczna lub powiększenie obrazu), alternatywne sposoby wprowadzania danych (np. za pomocą głosu), dodatkowe mechanizmy nawigacji i orientacji oraz przekształcania treści (np. w celu uczynienia tabel bardziej dostępnymi).
Uwaga
Technologie wspomagające często przekazują informacje i dane do standardowych aplikacji za pośrednictwem specjalnych API.
Uwaga
Rozróżnienie pomiędzy popularnymi programami użytkownika a technologiami wspomagającymi nie jest oczywiste. Wiele popularnych programów użytkownika posiada różne rozwiązania wspomagające osoby z niepełnosprawnościami. Główna różnica pomiędzy nimi polega na tym, że popularne programy użytkownika są ukierunkowane na szerokie i zróżnicowane grupy odbiorców, zarówno z niepełnosprawnościami, jak i bez niepełnosprawności. Natomiast technologie wspomagające skierowane są do wąskiej grupy odbiorców z określonymi rodzajami niepełnosprawności. Wsparcie świadczone za pomocą technologii wspomagających jest zatem bardziej wyspecjalizowane i nakierowane na odbiorcę z konkretnymi potrzebami. Popularne programy użytkownika mogą dostarczać technologiom wspomagającym niezbędne funkcjonalności, takie jak pobieranie treści internetowych z obiektów programowych lub odwzorowanie kodu do postaci przyjaźniejszej dla tych technologii.
- lupy ekranowe i inne programy wspomagające czytanie wzrokowe, używane przez osoby z niepełnosprawnościami wzroku, percepcyjnymi i innymi związanymi z korzystaniem z druku, pozwalające na zmianę czcionki, jej rozmiaru, odstępów, koloru oraz na synchronizację głosu z tekstem itp., w celu poprawienia czytelności wyświetlanego tekstu i obrazów;
- czytniki ekranu, używane przez osoby niewidome do odczytu treści tekstowych za pomocą mowy syntetycznej lub brajla;
- programy przetwarzające tekst na mowę syntetyczną, używane przez niektóre osoby z niepełnosprawnościami poznawczymi, językowymi i trudnościami w nauce w celu przekształcenia tekstu w mowę syntetyczną;
- programy rozpoznające mowę, używane przez niektóre osoby z niepełnosprawnościami fizycznymi;
- specjalne klawiatury, używane przez osoby z niektórymi niepełnosprawnościami fizycznymi, które symulują standardową klawiaturę (w tym klawiatury specjalne wyposażone we wskaźniki nagłowne, przełączniki, urządzenia „wciągnij/dmuchnij” (sip-and-puff) i inne specjalne urządzenia do wprowadzania danych);
- specjalne wskaźniki, używane przez osoby z niektórymi rodzajami niepełnosprawności fizycznych w celu symulowania kursora myszy i naciskania przycisków.
ciąg znaków, który można programowo określić, gdzie ciąg ten wyraża coś w języku naturalnym
tekst skojarzony programowo z treścią nietekstową lub odnoszący się do tekstu programowo skojarzonego z treścią nietekstową. Tekst programowo skojarzony to taki tekst, którego położenie może być programowo określone w stosunku do treści nietekstowej.
Uwaga
Więcej na ten temat: Objaśnienie pojęcia „alternatywa tekstowa”
informacje i wrażenia sensoryczne, które mają być przekazywane użytkownikowi za pośrednictwem programu użytkownika, w tym kod lub znaczniki definiujące strukturę, prezentację i interakcje
każda treść, która nie jest sekwencją znaków, które mogą być programowo określone lub nie wyraża niczego w jakimkolwiek języku naturalnym
Uwaga
Obejmuje to sztukę tekstową (ASCII art, będącą układanką złożoną ze znaków), emotikony, slang na forach (korzystający z zastępowania znaków) i obrazy przedstawiające tekst.