Etykiety i teksty alternatywne

Rob Dodson

Aby czytnik ekranu przedstawił użytkownikowi interfejs głosowy, odpowiednie elementy muszą mieć odpowiednie etykiety lub alternatywne teksty. Etykieta lub alternatywny tekst nadaje elementowi jego dostępną nazwę, która jest jedną z najważniejszych właściwości wyrażających semantykę elementu w drzewie ułatwień dostępu.

Połączenie nazwy elementu z jego rolą zapewnia kontekst, dzięki któremu użytkownik może zrozumieć, z jakim rodzajem elementu wchodzi w interakcję i jak jest on reprezentowany na stronie. Jeśli jej nie ma, czytnik ekranu wypowie tylko rolę elementu. Wyobraź sobie, że próbujesz poruszać się po stronie i słyszysz słowa „przycisk”, „pole wyboru” i „obraz” bez dodatkowego kontekstu. Dlatego etykiety i teksty alternatywne są tak istotne dla wygody użytkowników.

Sprawdzanie nazwy elementu

Dostępność elementu można łatwo sprawdzić za pomocą Narzędzi deweloperskich w Chrome:

  1. Kliknij element prawym przyciskiem myszy i wybierz Zbadaj. Otworzy się panel Elementów narzędzi deweloperskich.
  2. W panelu Elementy znajdź panel Ułatwienia dostępu. Może być ukryty pod symbolem ».
  3. W menu Obliczone usługi znajdź właściwość Nazwa.
Panel ułatwień dostępu Narzędzi deweloperskich z wyliczoną nazwą przycisku.

Niezależnie od tego, czy analizujesz element img z tekstem alt czy input z label, wszystkie te scenariusze skutkują tym samym wynikiem: nadanie elementowi jego dostępnej nazwy.

Sprawdź, czy nie brakuje żadnych imion i nazwisk

W zależności od jego typu nazwę na potrzeby ułatwień dostępu można dodać do elementu na różne sposoby. W tabeli poniżej znajdziesz najpopularniejsze typy elementów, które wymagają nazw na potrzeby ułatwień dostępu oraz linki do wyjaśnień, jak je dodać.

Typ elementu Jak dodać nazwę
Dokument HTML Oznaczanie dokumentów i ramek etykietami
Elementy <frame> lub <iframe> Oznaczanie dokumentów i ramek etykietami
Elementy graficzne Uwzględnij tekstowe alternatywne wersje obrazów i obiektów
Elementy: <input type="image"> Uwzględnij tekstowe alternatywne wersje obrazów i obiektów
Elementy: <object> Uwzględnij tekstowe alternatywne wersje obrazów i obiektów
Przyciski Przyciski i linki etykiet
Linki Przyciski i linki etykiet
Elementy formularza Oznaczanie elementów formularza etykietami

Oznaczanie dokumentów i ramek

Każda strona powinna zawierać element title, który krótko wyjaśnia, o czym jest. Element title nadaje stronie nazwę na potrzeby ułatwień dostępu. Gdy czytnik ekranu wchodzi na stronę, jest to pierwszy tekst, który usłyszysz.

Na przykład poniższa strona ma tytuł „Przepis na szybkie pieczenie klonów Marysi”:

<!doctype html>
  <html lang="en">
    <head>
      <title>Mary's Maple Bar Fast-Baking Recipe</title>
    </head>
  <body>
    …
  </body>
</html>

Podobnie wszystkie elementy frame i iframe powinny mieć atrybuty title:

<iframe title="An interactive map of San Francisco" src="…"></iframe>

Zawartość elementu iframe może zawierać własny wewnętrzny element title, ale czytnik ekranu zazwyczaj zatrzymuje się na granicy ramki i odczytuje rolę elementu („ramka”) oraz jego dostępną nazwę podaną w atrybucie title. Dzięki temu użytkownik decyduje, czy chce wejść do ramki czy ją pominąć.

Uwzględnij tekstowe alternatywne wersje obrazów i obiektów

Elementowi img zawsze powinien towarzyszyć atrybut alt, aby nadać obrazowi jego dostępną nazwę. Jeśli nie uda się wczytać obrazu, używany jest tekst alt jako obiekt zastępczy, aby użytkownicy wiedzieli, co próbuje przekazać obraz.

Pisanie dobrego tekstu w języku alt to trochę sztuczna sprawa, ale poniżej znajdziesz kilka wskazówek, których możesz przestrzegać:

  1. Sprawdź, czy obraz zawiera treści, które w przeciwnym razie trudno byłoby odczytać z otaczającego go tekstu.
  2. Jeśli tak, przekaż treść możliwie zwięźle.

Jeśli obraz pełni funkcję dekoracyjną i nie zawiera żadnej przydatnej zawartości, możesz dodać mu pusty atrybut alt="", aby usunąć go z drzewa ułatwień dostępu.

Obraz w linku powinien zawierać atrybut alt atrybutu img, który informuje, dokąd zostanie przekierowany użytkownik po kliknięciu linku:

<a href="https://en.wikipedia.org/wiki/Google">
  <img alt="Google's wikipedia page" src="google-logo.jpg">
</a>

Podobnie, jeśli element <input type="image"> służy do utworzenia przycisku graficznego, powinien zawierać tekst alt opisujący działanie, które następuje, gdy użytkownik kliknie przycisk:

<form>
  <label>
    Username:
    <input type="text">
  </label>
  <input type="image" alt="Sign in" src="./sign-in-button.png">
</form>

Umieszczone obiekty

Elementy <object>, zwykle używane przy umieszczaniu, takie jak pliki Flash, PDF czy ActiveX, powinny też zawierać tekst alternatywny. Podobnie jak w przypadku obrazów, ten tekst wyświetla się wtedy, gdy elementu nie uda się wyrenderować. Tekst zastępczy zostanie wstawiony do elementu object jako zwykły tekst, np. „Raport roczny”:

<object type="application/pdf" data="/report.pdf">
Annual report.
</object>

Przyciski i linki często są kluczowe dla funkcjonowania witryny, dlatego ważne jest, aby oba miały dobre, łatwo dostępne nazwy.

Przyciski

Element button zawsze próbuje obliczyć swoją dostępną nazwę na podstawie treści tekstowej. W przypadku przycisków, które nie są częścią form, do stworzenia łatwo łatwo dostępnej nazwy wystarczy napisanie wyraźnego działania, ponieważ zawiera tekst.

<button>Book Room</button>

Formularz mobilny z przyciskiem „Zarezerwuj pokój”.

Częstym wyjątkiem od tej reguły są ikony przycisków. Przycisk ikony może zawierać obraz lub czcionkę ikony. Na przykład przyciski używane w edytorze What You See Is What You Get (WYSIWYG) do formatowania tekstu są zwykle po prostu symbolami graficznymi:

Przycisk ikony wyrównywania do lewej.

W przypadku przycisków ikon warto nadać im konkretne nazwy ułatwień dostępu za pomocą atrybutu aria-label. aria-label zastępuje dowolny tekst zawarty w przycisku, dzięki czemu możesz jednoznacznie opisać działanie osobom korzystającym z czytnika ekranu.

<button aria-label="Left align"></button>

Podobnie jak przyciski, linki mają przede wszystkim dostępną nazwę z tekstu. Przy tworzeniu linku warto jest umieścić w nim najistotniejszy fragment tekstu, zamiast wypełniać go takimi słowami, jak „tutaj” czy „Czytaj więcej”.

Za mało opisowy
Check out our guide to web performance <a href="/guide">here</a>.
Przydatne treści
Check out <a href="/guide">our guide to web performance</a>.

Jest to szczególnie przydatne w przypadku czytników ekranu, które oferują skróty do listy wszystkich linków na stronie. Jeśli linki zawierają powtarzające się wypełniacze, te skróty stają się znacznie mniej przydatne:

Menu linków VoiceOver zawierające słowo „tutaj”.
Przykład VoiceOver – czytnika ekranu w systemie macOS, z menu nawigacji po linkach.

Oznacz etykietami elementy formularza

Są 2 sposoby powiązania etykiety z elementem formularza, takim jak pole wyboru. Każda z tych metod powoduje, że tekst etykiety staje się też celem kliknięcia pola wyboru, co jest przydatne także dla użytkowników myszy i ekranu dotykowego. Aby powiązać etykietę z elementem, wykonaj jedną z tych 2 czynności:

  • Umieść element wprowadzania wewnątrz elementu etykiety
<label>
  <input type="checkbox">Receive promotional offers?</input>
</label>
  • Możesz też użyć atrybutu for etykiety i odwołać się do atrybutu id elementu
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>

Jeśli pole wyboru jest prawidłowo oznaczone, czytnik ekranu może zgłosić, że element ma przypisaną rolę pola wyboru, jest on zaznaczony i nosi nazwę „Otrzymuj oferty promocyjne?” jak w tym przykładzie z VoiceOver:

Komunikator tekstowy VoiceOver o wyświetlonym komunikacie „Otrzymuj oferty promocyjne?”

DO ZROBIENIA: DevSite – ocena „Think and Check”