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” czy „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:
- Kliknij element prawym przyciskiem myszy i wybierz Zbadaj. Otworzy się panel Elementy w Narzędziach deweloperskich.
- W panelu Elementy odszukaj panel Ułatwienia dostępu. Może być ukryty za symbolem
». - W menu Obliczone właściwości odszukaj właściwość Nazwa.
Niezależnie od tego, czy widzisz element img z tekstem alt czy element input z tekstem label, wszystkie te scenariusze prowadzą do tego samego wyniku: 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 ograniczonymi możliwościami, 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 tekst alternatywny dla obrazów i obiektów |
Elementy: <input type="image">
|
Uwzględnij tekst alternatywny dla obrazów i obiektów |
Elementy: <object>
|
Uwzględnij tekst alternatywny 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 wejdzie na stronę, będzie to pierwszy tekst, który zostanie odczytany.
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>
Chociaż zawartość elementu iframe może zawierać wewnętrzny element title, 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ę zrozumiałą 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:
- Określ, czy obraz zawiera treści, które trudno byłoby uzyskać z tekstu otaczającego obraz.
- Jeśli tak, prześlij jak najkrótsze treści.
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.
Obrazy jako linki i dane wejściowe
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, pliki PDF czy 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>
Etykietowanie przycisków i linków
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ę ułatwień dostępu na podstawie zawartości tekstowej. W przypadku przycisków, które nie są częścią form, aby utworzyć nazwę dostatecznie przystępną dla czytników ekranu, wystarczy podać jasną treść akcji.
<button>Book Room</button>
Jednym z częstych wyjątków od tej zasady są przyciski z ikonami. Przycisk ikony może zawierać obraz lub czcionkę ikony, aby wyświetlić tekst. Na przykład przyciski używane w edytorze WYSIWYG do formatowania tekstu to zwykle tylko symbole graficzne:
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>
Linki
Podobnie jak w przypadku przycisków, nazwy dostępnych elementów interfejsu w przypadku linków pochodzą głównie z ich treści tekstowych. Podczas tworzenia linku warto umieścić w nim najbardziej istotny fragment tekstu, zamiast słów wypełniających, takich jak „Tutaj” czy „Więcej”.
Check out our guide to web performance <a href="/https/web.developers.google.cn/guide">here</a>.
Check out <a href="/https/web.developers.google.cn/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:
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
foretykiety i odwołać się do atrybutuidelementu.
<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 VoiceOver poniżej:
