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:
- Kliknij element prawym przyciskiem myszy i wybierz Zbadaj. Otworzy się panel Elementów narzędzi deweloperskich.
- W panelu Elementy znajdź panel Ułatwienia dostępu. Może być ukryty pod symbolem
»
. - W menu Obliczone usługi znajdź właściwość Nazwa.
![](https://web.developers.google.cn/static/articles/labels-and-text-alternatives/image/38c68DmamTCqt2LFxTmu.png?authuser=6&hl=pl)
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ć:
- Sprawdź, czy obraz zawiera treści, które w przeciwnym razie trudno byłoby odczytać z otaczającego go tekstu.
- 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.
obrazy jako linki i dane wejściowe.
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 etykiet
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>
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:
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>
Linki
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”.
Check out our guide to web performance <a href="/guide">here</a>.
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”.](https://web.developers.google.cn/static/articles/labels-and-text-alternatives/image/voiceovers-links-menu-fi-ded4907601b74.jpg?authuser=6&hl=pl)
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 atrybutuid
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?”](https://web.developers.google.cn/static/articles/labels-and-text-alternatives/image/voiceover-text-output-sho-06b78b7590326.png?authuser=6&hl=pl)
DO ZROBIENIA: DevSite – ocena „Think and Check”