Etykiety i teksty alternatywne

Rob Dodson

Aby czytnik ekranu mógł wyświetlić użytkownikowi interfejs mowy, elementy o znaczeniu muszą mieć odpowiednie etykiety lub tekstowe alternatywy. Etykieta lub tekst alternatywny nadają elementowi nazwę na potrzeby ułatwień dostępu. Jest to jedna z kluczowych właściwości wyrażających semantykę elementu w drzewie ułatwień dostępu.

Gdy nazwa elementu jest połączona z jego rolą, użytkownik otrzymuje kontekst, dzięki któremu może zrozumieć, z jakim typem elementu ma do czynienia i jak jest on reprezentowany na stronie. Jeśli nazwa jest nieobecna, czytnik ekranu wypowiada tylko rolę elementu. Wyobraź sobie, że próbujesz poruszać się po stronie i słyszysz „przycisk”, „pole wyboru”, „obraz” bez żadnego dodatkowego kontekstu. Dlatego etykiety i teksty alternatywne są kluczowe dla zapewnienia dobrej, dostępnej obsługi.

Sprawdzanie nazwy elementu

Łatwo można sprawdzić nazwę elementu w Narzędziach deweloperskich w Chrome:

  1. Kliknij element prawym przyciskiem myszy i wybierz Zbadaj. Otworzy się panel Elementy w Narzędziach dla programistów.
  2. W panelu Elementy odszukaj panel Ułatwienia dostępu. Może być ukryty za symbolem ».
  3. W menu Obliczone właściwości odszukaj właściwość Nazwa.
Panel ułatwień dostępu w Narzędziach deweloperskich pokazujący obliczoną nazwę przycisku.

Niezależnie od tego, czy widzisz element img z tekstem alt czy element input z tekstem label, w każdym z tych scenariuszy element ma nazwę na potrzeby ułatwień dostępu.

Sprawdzanie, czy nie brakuje nazw

W zależności od typu elementu możesz dodać do niego nazwę w różne sposoby. W tabeli poniżej znajdziesz listę najpopularniejszych typów elementów, które wymagają nazwy zrozumiałej dla osób z niepełnosprawnością, oraz linki do wyjaśnień, jak je dodać.

Typ elementu Jak dodać nazwę
Dokument HTML Etykietowanie dokumentów i ramek
elementy <frame> lub <iframe> Etykietowanie dokumentów i ramek
Elementy graficzne Uwzględnij tekstowe alternatywy dla obrazów i obiektów
Elementy: <input type="image"> Uwzględnij tekstowe alternatywy dla obrazów i obiektów
Elementy: <object> Uwzględnij tekstowe alternatywy dla obrazów i obiektów
Przyciski Etykietowanie przycisków i linków
Linki Etykietowanie przycisków i linków
Elementy formularza Etykietowanie elementów formularzy

Oznaczanie dokumentów i ramek etykietami

Każda strona powinna zawierać element title, który krótko opisuje jej temat. Element title nadaje stronie nazwę na potrzeby ułatwień dostępu. Gdy czytnik ekranu wejdzie na stronę, najpierw odczyta ten tekst.

Na przykład strona poniżej ma tytuł „Mary's Maple Bar Fast-Baking Recipe” (Przepis na szybkie ciasteczka z klonowym syropem):

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

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

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

Treści elementu iframe mogą zawierać wewnętrzny element title, ale czytnik ekranu zazwyczaj zatrzymuje się na granicy ramki i ogłasza rolę elementu („ramka”) oraz jego nazwę na potrzeby ułatwień dostępu, podaną w atrybucie title. Pozwala to użytkownikowi zdecydować, czy chce wejść w ramkę, czy ją ominąć.

Dołącz tekst alternatywny do obrazów i obiektów

Elementowi img powinien zawsze towarzyszyć atrybut alt, aby nadać obrazowi nazwę, która będzie dostępna dla osób z ograniczonymi możliwościami. Jeśli obraz nie wczytuje się, tekst alt jest używany jako element zastępczy, aby użytkownicy wiedzieli, co obraz miał przedstawiać.

Pisanie dobrego tekstu alt to trochę sztuka, ale możesz się kierować kilkoma wskazówkami:

  1. Określ, czy obraz zawiera treści, które trudno byłoby uzyskać z tekstu otaczającego obraz.
  2. Jeśli tak, prześlij jak najkrócej treść.

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

Obraz otoczony linkiem powinien używać atrybutu img alt, aby określić, dokąd użytkownik zostanie przekierowany 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 do utworzenia przycisku obrazkowego użyto elementu <input type="image">, powinien on zawierać tekst alt opisujący działanie, które nastąpi po kliknięciu przycisku przez użytkownika:

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

Osadzone obiekty

Elementy <object>, które są zwykle używane do umieszczania treści takich jak Flash, PDF lub ActiveX, powinny również zawierać tekst alternatywny. Podobnie jak w przypadku obrazów, ten tekst wyświetla się, gdy nie uda się renderować elementu. Tekst alternatywny jest umieszczany w elemencie object jako zwykły tekst, np. „Sprawozdanie roczne”:

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

Przyciski i linki są często kluczowe dla wygody korzystania z witryny, dlatego ważne jest, aby miały one odpowiednie nazwy dostępne dla czytników ekranu.

Przyciski

Element button zawsze próbuje obliczyć nazwę dostępną za pomocą zawartości tekstowej. W przypadku przycisków, które nie są częścią form, aby utworzyć nazwę dostatecznie przystępną, wystarczy podać jasną treść.

<button>Book Room</button>

Formularz na urządzeniu mobilnym z przyciskiem „Zarezerwuj pokój”.

Jednym z częstych wyjątków od tej zasady są przyciski z ikonami. Przycisk z ikoną może zawierać obraz lub czcionkę z ikonami. Na przykład przyciski używane w edytorze WYSIWYG do formatowania tekstu to zwykle tylko symbole graficzne:

Ikona przycisku do wyrównania do lewej.

Podczas pracy z przyciskami z ikonami warto nadać im nazwy dostępne dla czytników ekranu za pomocą atrybutu aria-label. aria-label zastępuje dowolny tekst w przycisku, umożliwiając jasne opisanie działania dla każdego, kto używa czytnika ekranu.

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

Podobnie jak w przypadku przycisków, nazwy dostępnych linków pochodzą głównie z ich tekstu. Podczas tworzenia linku warto umieścić w nim najbardziej istotny fragment tekstu, zamiast słów wypełniających, takich jak „Tutaj” czy „Więcej informacji”.

Niewystarczająco szczegółowe
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 dla czytników ekranu, które oferują skróty do wszystkich linków na stronie. Jeśli linki są pełne powtarzającego się tekstu wypełniającego, te skróty stają się znacznie mniej przydatne:

Menu linków w VoiceOver wypełnione słowem „tutaj”.
Przykład czytnika ekranu VoiceOver w systemie macOS, pokazujący menu nawigacji za pomocą linków.

Etykietowanie elementów formularzy

Etykietę można powiązać z elementem formularza, np. z polem wyboru, na 2 sposoby. W obu przypadkach tekst etykiety staje się też celem kliknięcia dla pola wyboru, co jest przydatne dla użytkowników myszy lub ekranu dotykowego. Aby powiązać etykietę z elementem:

  • Umieść element wejściowy 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>

Gdy pole wyboru jest prawidłowo opisane, czytnik ekranu może poinformować, że element ma rolę pola wyboru, jest zaznaczone i ma nazwę „Otrzymuj oferty promocyjne?”, jak w przykładzie poniżej:

Tekst lektora pokazujący „Otrzymać oferty promocyjne?”

TODO: DevSite – Think and Check assessment