Aby czytnik ekranu mógł prezentować użytkownikowi interfejs głosowy, elementy muszą mieć odpowiednie etykiety lub zamienniki tekstu. Etykieta lub tekst lub nadaje elementowi dostępną nazwę, jedną z kluczowych właściwości do wyrażania semantyki elementu w drzewie ułatwień dostępu.
Gdy nazwa elementu zostanie połączona z jego rolą, powstaje funkcja kontekstu użytkownika, aby było wiadomo, z jakim typem elementów wchodzą w interakcję i sposób przedstawiania jej na stronie. Jeśli nazwy nie podano, zostanie użyty parametr czytnik ekranu informuje tylko o roli elementu. Wyobraź sobie, że próbujesz nawigować strona i usłyszenie słowa „przycisk”, „pole wyboru”, „obraz” bez dodatkowych i dodaje kontekst. Dlatego etykiety i alternatywy w tekście są tak ważne dla dobra, i ułatwienia dostępu.
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ę Narzędzia deweloperskie. Elementy.
- W panelu Elementy poszukaj panelu 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 patrzysz na plik img z tekstem alt, czy input z tekstem
label, wszystkie te scenariusze dają taki sam wynik:
jego dostępną nazwa.
Sprawdź, czy nie brakuje imion i nazwisk
Istnieją różne sposoby dodawania do elementu nazwy na potrzeby ułatwień dostępu: w zależności od jej typu. W tabeli poniżej znajdziesz najpopularniejsze typy elementów , które wymagają ułatwień dostępu i linków do wyjaśnień dotyczących sposobu ich dodawania.
| 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ędniaj alternatywne wersje tekstu dla obrazów i obiektów . |
Elementy: <input type="image">
|
Uwzględniaj alternatywne wersje tekstu dla obrazów i obiektów . |
Elementy: <object>
|
Uwzględniaj alternatywne wersje tekstu dla obrazów i obiektów . |
| Przyciski | Dodawanie etykiet do przycisków i linków |
| Linki | Dodawanie etykiet do przycisków i linków |
| Elementy formularzy | Oznaczanie elementów formularza etykietami |
Oznaczanie dokumentów i ramek
Każda strona powinna mieć
title
który zawiera zwięzłe objaśnienie tematyki strony. Element title daje
jej dostępną nazwę. Gdy czytnik ekranu otwiera stronę, jest to
który jest ogłoszony jako pierwszy.
Na przykład poniższa strona ma tytuł „Przepis na szybkie wypieki w barze klonowym”:
<!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>
Choć zawartość elementu iframe może zawierać własny wewnętrzny element title, tag
Czytnik ekranu zwykle zatrzymuje się na granicy ramki i informuje o
rola – „frame” – i jej dostępna nazwa podana w atrybucie title; Ten
pozwala użytkownikowi zdecydować, czy chce zamknąć ramkę, czy ją pominąć.
Uwzględniaj alternatywne wersje tekstu dla obrazów i obiektów
Do atrybutu img zawsze powinien być dołączony komunikat
alt.
aby nadać obrazowi nazwę dostępną dla użytkowników. Jeśli nie uda się wczytać obrazu,
Tekst alt jest używany jako obiekt zastępczy, aby użytkownicy wiedzieli, czego dotyczy obraz
co chce przekazać.
Pisanie dobrego tekstu w języku alt to nie lada sztuka – pamiętaj jednak o tych wytycznych
, które możesz obserwować:
- Sprawdź, czy obraz zawiera treści, które byłyby trudne do wyświetlenia z czytania otaczającego tekstu.
- Jeśli tak, przekaż treść jak najbardziej zwięźle.
Jeśli obraz pełni funkcję dekoracji, ale nie zawiera żadnych przydatnych treści,
możesz dodać pusty atrybut alt="", aby aplikacja została usunięta z ułatwień dostępu
drzewo.
Obrazy jako linki i dane wejściowe
Obraz zawarty w linku powinien określać atrybut alt interfejsu img, aby opisać
do której trafi 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 do utworzenia obrazu zostanie użyty element <input type="image">
przycisk ten powinien zawierać tekst alt opisujący działanie wykonywane, gdy
użytkownik klika przycisk:
<form>
<label>
Username:
<input type="text">
</label>
<input type="image" alt="Sign in" src="./sign-in-button.png">
</form>
Umieszczone obiekty
<object>, które są zwykle używane w elementach umieszczanych, takich jak pliki Flash, PDF lub
Element ActiveX powinien również zawierać tekst alternatywny. Ten tekst jest podobny do obrazów.
jest wyświetlany, jeśli elementu nie uda się wyrenderować. Tekst zastępczy znajduje się wewnątrz sekcji
object element jako zwykły tekst, np. „Raport roczny” poniżej:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
Dodawanie etykiet do przycisków i linków
Przyciski i linki mają często kluczowe znaczenie dla wygody korzystania z witryny. Ważne jest, aby obie te nazwy miały dobrze dostępne nazwy.
Przyciski
Element button zawsze próbuje obliczyć swoją dostępną nazwę za pomocą
treści tekstowe. W przypadku przycisków, które nie wchodzą w skład form, nadaj im zrozumiały znak
bo często wystarczy sam tekst, by stworzyć dobry przystępny
imię i nazwisko.
<button>Book Room</button>
Częstym wyjątkiem od tej reguły są przyciski w postaci ikon. Przycisk ikony może zawierać lub czcionkę ikony z treścią tekstową przycisku. Przykład: za pomocą przycisków WYSIWYG w edytorze What You See Is What You Get (WYSIWYG), tekst są zwykle tylko symbolami graficznymi:
Przy pracy z przyciskami ikon pomocne może być nadanie im wyraźnego
nazwa na potrzeby ułatwień dostępu, która korzysta z atrybutu aria-label. aria-label zastępuje wszystkie
Tekst na przycisku pozwala jasno opisać działanie
dla każdego użytkownika czytnika ekranu.
<button aria-label="Left align"></button>
Linki
Podobnie jak w przypadku przycisków, linki zawdzięczają ułatwieniu użytkownikom nazwy z tekstu. treści. Przy tworzeniu linku warto umieścić najbardziej znaczący element, w samym linku zamiast słów-wypełniaczy takich jak „tutaj” lub „Przeczytaj 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 kilka linków na stronie. Jeśli linki są pełne powtarzającego się tekstu wypełniacza, skróty stają się znacznie mniej przydatne:
Oznaczanie elementów formularza
Istnieją 2 sposoby powiązania etykiety z elementem formularza, np. polem wyboru. Każda z tych metod powoduje, że tekst etykiety staje się też celem kliknięcia co przydaje się też użytkownikom myszy i urządzeń dotykowych. Do powiązania 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
foretykiety i skorzystać z atrybutuidelementu
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>
Jeśli pole wyboru będzie prawidłowo oznaczone, czytnik ekranu może zgłosić element ma rolę „pole wyboru”, jest zaznaczony i nosi nazwę „Odbierz ofert promocyjnych?” jak w poniższym przykładzie VoiceOver:
DO ZROBIENIA: DevSite – test Think and Check