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.

Połączenie nazwy elementu z jego rolą daje użytkownikowi kontekst, dzięki któremu może on zrozumieć, z jakim typem elementu wchodzi w interakcję 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

Możesz łatwo sprawdzić nazwę elementu z ułatwieniami dostępu za pomocą Narzędzi deweloperskich w Chrome:

  1. Kliknij element prawym przyciskiem myszy i wybierz Zbadaj. Otworzy się panel Elementy Narzędzia deweloperskiego.
  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.
Okienko ułatwień dostępu w Narzędziach deweloperskich z 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 wyjaśnia, o czym jest strona. Element title nadaje stronie nazwę na potrzeby ułatwień dostępu. Gdy czytnik ekranu wchodzi na stronę, jest to pierwszy tekst odczytywany.

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

<!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ąć.

Dodawanie tekstu alternatywnego do obrazów i obiektów

Aby nadać obrazowi dostępną nazwę, atrybut img powinien zawsze towarzyszyć atrybutowi alt. 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 w języku alt to nie lada wyzwanie, ale mamy dla Ciebie kilka wskazówek:

  1. Określ, czy obraz zawiera treści, które trudno byłoby uzyskać z okolicznego tekstu.
  2. Jeśli tak, przekaż treść w jak najbardziej zwięzły sposób.

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 obrazu używany jest element <input type="image">, powinien on zawierać tekst alt opisujący działanie, które następuje 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 zostanie umieszczony wewnątrz elementu object jako zwykły tekst, np. „Raport roczny” poniżej:

<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ą elementami składowymi form, do utworzenia dobrej przystępnej nazwy może wystarczyć tekst tekstowy.

<button>Book Room</button>

Formularz mobilny 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 „What You See Is What You Get” (WYSIWYG) do formatowania tekstu są zwykle tylko symbolami graficznymi:

Ikona wyrównania do lewej ikony.

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, dzięki czemu możesz wyraźnie opisać działanie 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. Przy tworzeniu linku warto umieścić w nim najbardziej znaczący fragment tekstu, a nie jako uzupełnienie, np. „Tutaj” czy „Czytaj więcej”.

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 w przypadku czytników ekranu, które oferują skróty do listy wszystkich linków na stronie. Jeśli linki są pełne powtarzających się tekstów-wypełniaczy, 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:

  • Umieszczanie elementu wejściowego 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?”

DO ZROBIENIA: DevSite – test Think and Check