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:
- Kliknij element prawym przyciskiem myszy i wybierz Zbadaj. Otworzy się panel Elementy Narzędzia deweloperskiego.
- 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
, 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:
- Określ, czy obraz zawiera treści, które trudno byłoby uzyskać z okolicznego tekstu.
- 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.
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 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>
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ę 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>
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:
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>
Linki
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”.
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 są pełne powtarzających się tekstów-wypełniaczy, 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:
- 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 atrybutuid
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:
DO ZROBIENIA: DevSite – test Think and Check