Kiedy użyć aria-label, aria-labelledby, aria-describedby lub zwykłego widocznego tekstu: 20 fragmentów kodu przed i po poprawce, typowe błędy oraz narzędzie do sprawdzania nazwy dostępnej.
Używaj aria-label tylko wtedy, gdy element nie ma widocznego tekstu, który go nazywa, na przykład przycisk z samą ikoną: <button aria-label="Close dialog">. Jeśli widoczny tekst już go nazywa, polegaj na nim albo wskaż go przez aria-labelledby. aria-describedby dodaje dodatkową wskazówkę odczytywaną po nazwie. Natywne etykiety HTML zawsze mają pierwszeństwo.
Którego sposobu nazywania użyć
Każdy przycisk, link, pole i punkt orientacyjny potrzebuje nazwy dostępnej, czyli krótkiej frazy, którą technologia asystująca wypowiada, gdy trafi tam fokus. Ta strona pokazuje, jak ta nazwa jest wyznaczana, dwadzieścia błędnych wzorców obok ich poprawionych wersji oraz narzędzie, które czyta wklejony fragment kodu i podaje nazwę, jaką otrzyma.
aria-label przechowuje nazwę jako tekst wewnątrz atrybutu. aria-labelledby wskazuje identyfikatory jednego lub kilku elementów i buduje nazwę z ich tekstu, więc nazwa zawsze zgadza się z tym, co widzą osoby widzące. Gdy obecne są oba, wygrywa aria-labelledby.
Tak. W przypadku większości kontrolek wartość aria-label nadpisuje treść tekstową, więc przycisk z napisem Buy, który ma aria-label="Add to basket", zostanie odczytany jako Add to basket. Taka niezgodność dezorientuje użytkowników sterowania głosowego i narusza kryterium WCAG 2.5.3 Label in Name.
Używaj go do informacji pomocniczych, które nie są nazwą: zasady hasła, wskazówki dotyczącej formatu lub komunikatu o błędzie. Czytniki ekranu zwykle odczytują opis po nazwie i roli, często po krótkiej pauzie, a niektórzy użytkownicy wyłączają opisy.
Tylko wtedy, gdy div ma rolę, która pozwala na nazywanie, na przykład role="region" lub role="dialog". Na ogólnym elemencie div lub span ARIA zabrania nazywania, a większość czytników ekranu ignoruje ten atrybut.
Nie. Obrazy biorą nazwę z atrybutu alt. Użyj alt="" dla dekoracji, aby obraz został pominięty. aria-label na elemencie img działa, ale nie daje nic, czego nie zapewnia alt.
Przechodź tę listę od góry i zatrzymaj się na pierwszej pasującej opcji. Widoczny tekst jest pierwszy, bo jednym ciągiem znaków obsługuje osoby widzące, użytkowników czytników ekranu i sterowania głosowego.
Cztery sposoby nadania elementowi nazwy lub opisu
Każdy fragment pokazuje błędny wzorzec, poprawkę i w przybliżeniu to, co czytnik ekranu mówi po poprawce. Komunikaty różnią się w zależności od produktu i ustawień.
Bez nazwy przycisk jest zwykle odczytywany po prostu jako przycisk. Ukryj grafikę, aby nie została odczytana jako obraz bez etykiety. Po poprawce zwykle jest odczytywany jako: Close, przycisk.
Pusty link jest często odczytywany jako jego adres URL, na niektórych konfiguracjach litera po literze. Po poprawce zwykle jest odczytywany jako: Our shop on Instagram, link.
Prawdziwy tekst w wizualnie ukrytym elemencie span przetrwa narzędzia do tłumaczenia, które zwykle pomijają wartości atrybutów. Po poprawce zwykle jest odczytywany jako: Cart, 3 items, link.
Przy dwóch nienazwanych elementach nav lista punktów orientacyjnych pokazuje nawigację dwa razy i nikt nie potrafi ich odróżnić. Po poprawce zwykle jest odczytywany jako: Main, nawigacja.
Tekst placeholdera to słaba nazwa zastępcza, która znika, gdy ktoś zacznie pisać. Po poprawce zwykle jest odczytywany jako: Search products, pole wyszukiwania.
Prawdziwy element label sprawia też, że podpis jest klikalny, co powiększa obszar kliknięcia. Po poprawce zwykle jest odczytywany jako: Email, pole edycji.
Opisy są łączone w kolejności, w jakiej podano id. Po poprawce zwykle jest odczytywany jako: Password, bezpieczne pole edycji, nieprawidłowa wartość, At least 12 characters, Too short....
Element legend nazywa grupę, więc każda opcja jest zrozumiała sama w sobie. Po poprawce zwykle jest odczytywany jako: Delivery speed, grupa, Standard, przycisk opcji, 1 z 2.
Wskazanie widocznego nagłówka sprawia, że wypowiadany i wyświetlany tytuł są identyczne. Otwieraj je przez showModal(), aby było prawdziwym oknem modalnym. Po poprawce zwykle jest odczytywane jako: Delete project?, okno dialogowe, This removes all 14 pages..
Zostaw nazwę bez zmian i pozwól zmieniać się stanowi. Nie zamieniaj dodatkowo etykiety na Unbold. Po poprawce zwykle jest odczytywany jako: Bold, przycisk przełączający, wciśnięty.
Jednoczesna zmiana etykiety i stanu wciśnięcia brzmi jak podwójne zaprzeczenie. Po poprawce zwykle jest odczytywany jako: Mute, przycisk przełączający, niewciśnięty.
Skrypt musi przełączać aria-expanded i atrybut hidden jednocześnie. Po poprawce zwykle jest odczytywany jako: Products, przycisk, zwinięty.
Klikalny div w ogóle nie jest dostępny z klawiatury ani odczytywany jako kontrolka. Po poprawce zwykle jest odczytywany jako: Menu, przycisk, zwinięty.
Opisz, co obraz przekazuje czytelnikowi. Pusty alt oznacza dekorację, więc obraz zostaje pominięty. Po poprawce zwykle jest odczytywany jako: Sales rose from 40 to 65 orders a week in May, grafika.
role=img sprawia, że SVG jest jednym obiektem zamiast drzewa kształtów. Po poprawce zwykle jest odczytywany jako: Northgate Bakery, grafika.
Widoczny podpis nazywa tabelę dla wszystkich. Używaj aria-labelledby tylko wtedy, gdy tytuł znajduje się poza nią. Po poprawce zwykle jest odczytywana jako: Opening hours, tabela, 2 kolumny, 8 wierszy.
Region musi istnieć, zanim zmieni się jego tekst, inaczej wiele czytników przegapi aktualizację. Po poprawce zwykle jest odczytywany jako: Saved (wypowiadane bez przesuwania fokusu).
aria-roledescription zmienia wypowiadaną rolę. Używaj go oszczędnie i nigdy na ogólnych elementach. Po poprawce zwykle jest odczytywany jako: Customer photos, karuzela.
Unikalny tekst linku pomaga każdemu, kto przegląda listę linków. Zaczynanie od widocznych słów zachowuje zgodność z Label in Name. Po poprawce zwykle jest odczytywany jako: Read more about winter opening hours, link.
Ktoś, kto mówi do sterowania głosowego kliknij Send, musi trafić w ten przycisk, więc widoczne słowo powinno znaleźć się w nazwie. Po poprawce zwykle jest odczytywany jako: Send, przycisk.
Błędy spotykane w audytach i sposoby ich naprawy
Sprawdź nazwy przed publikacją
Wklej fragment kodu. Narzędzie analizuje go w Twojej przeglądarce bez uruchamiania żadnych skryptów, znajduje pierwszy element interaktywny lub nazwany i wyznacza nazwę według uproszczonej wersji oficjalnej kolejności. Pomija kilka kroków specyfikacji, więc traktuj wynik jako szybką wskazówkę i potwierdź go w narzędziach deweloperskich lub czytnikiem ekranu.
Przycisk z ikoną
Poprawiony przycisk z ikoną
Pole z etykietą
Niezgodna etykieta
Okno dialogowe z labelledby
Fragment HTML
We fragmencie nie znaleziono przycisku, linku, pola, punktu orientacyjnego, obrazu ani tabeli.
Element
Wyliczona nazwa
(pusta)
Źródło nazwy
Ostrzeżenia
To uproszczone sprawdzenie niczego nie znalazło.
element label
treść tekstowa
tytuł svg
title (słabe źródło zastępcze)
placeholder (słabe źródło zastępcze)
aria-labelledby wskazuje nieistniejące id "{id}".
aria-label na elemencie div lub span bez roli jest ignorowany przez większość czytników ekranu.
Obraz nie ma atrybutu alt.
Placeholder jest jedyną nazwą. Dodaj etykietę.
Nie znaleziono nazwy dostępnej.
Widoczny tekst "{visible}" nie znajduje się na początku nazwy (WCAG 2.5.3 Label in Name).
Nazwa kończy się słowem roli, więc rola zostanie wypowiedziana dwa razy.
Sam element ma aria-hidden.
Zacznij za darmo · Bez karty kredytowej