Etykiety i teksty alternatywne

Rob Dodson

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:

  1. Kliknij element prawym przyciskiem myszy i wybierz Zbadaj. Otworzy się Narzędzia deweloperskie. Elementy.
  2. W panelu Elementy poszukaj panelu Ułatwienia dostępu. Może być ukryty za symbolem ».
  3. W menu Obliczone właściwości odszukaj właściwość Nazwa.
.
. Panel ułatwień dostępu w Narzędziach deweloperskich z obliczoną nazwą przycisku.
.
.

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ć:

  1. Sprawdź, czy obraz zawiera treści, które byłyby trudne do wyświetlenia z czytania otaczającego tekstu.
  2. 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.

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>

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>

Formularz mobilny z opcją „Zarezerwuj pokój” Przycisk

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:

Ikona wyrównania do lewej ikony.

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>

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”.

Zbyt mało opisowe
Check out our guide to web performance <a href="/guide">here</a>.
Przydatna treść
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:

Menu linków VoiceOver zawiera słowo „tutaj”.
Przykład czytnika ekranu VoiceOver dla systemu macOS pokazującego nawigację według w menu linków.

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 for etykiety i skorzystać z atrybutu id elementu
<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:

Tekstowa odpowiedź VoiceOver z komunikatem „Otrzymywać oferty promocyjne?”

DO ZROBIENIA: DevSite – test Think and Check