Co to jest aria-label i jak go używać?

321

Kilka godzin temu przeczytałem o atrybucie aria-label , który:

Definiuje wartość ciągu, która oznacza bieżący element.

Ale moim zdaniem właśnie to titlepowinien mieć ten atrybut. Poszukałem dalej w Mozilla Developer Network, aby uzyskać przykłady i wyjaśnienia, ale jedyną rzeczą, jaką znalazłem, było

<button aria-label="Close" onclick="myDialog.close()">X</button>

Co nie zapewnia mi żadnej etykiety (zakładam, że źle zrozumiałem ten pomysł). Próbowałem tego tutaj w jsfiddle .

Więc moje pytanie brzmi: dlaczego potrzebuję aria-labeli jak mam go używać?

html assistive-technology Salvador Dali
źródło
3
Patrząc na zasób, który podłączyłeś, wydaje się, że aria-labelmożna go użyć, jeśli nie chcesz wyświetlać podpowiedzi dostarczanej przez atrybut title: W przypadkach, gdy widoczna etykieta lub widoczna podpowiedź jest niepożądana, autorzy MOGĄ ustawić dostępną nazwę element z wykorzystaniem aria-label
Fabrizio Calderan
13
fyi ARIA = Dostępne bogate aplikacje internetowe
Eric D'Souza
Czy ktoś wie, czy należy zastosować etykietę aria dla bardziej opisowego tekstu <h1>, gdy rzeczywisty widoczny tekst wewnątrz elementu <h1> jest zbyt krótki i nie jest pożądane, aby cały tekst był widoczny? W przykładach w tym wątku można użyć etykiety. Ale etykiety nie dotyczą nagłówków, dlatego pytam
HelloWorld,
Jedyną odpowiednią, podobną rzeczą, o którą prosisz, jest właściwość „longdesc” (tylko dla obrazów), która potrzebuje więcej informacji - nie wyobrażam sobie, że byłaby taka dla tekstu, ponieważ i tak powinna być zawsze opisowa. Obawiam się. - @HelloWorld
Jamie Paterson

Odpowiedzi:

427

Jest to atrybut zaprojektowany, aby pomóc technologii wspomagającej (np. Czytników ekranu) dołączyć etykietę do anonimowego elementu HTML.

Jest więc <label>element:

<label for="fmUserName">Your name</label>
<input id="fmUserName">

<label>Wyraźnie informuje użytkownika, aby wpisać swoje nazwisko w inputpolu gdzie id="fmUserName".

aria-labelrobi to samo, ale dotyczy to przypadków, w których labelekran nie jest praktyczny lub pożądany . Weźmy przykład MDN :

<button aria-label="Close" onclick="myDialog.close()">X</button>`

Większość osób może wnioskować wizualnie, że ten przycisk zamyka okno dialogowe. Osoba niewidoma korzystająca z technologii asystującej może po prostu usłyszeć „X” czytane na głos, co nie znaczy wiele bez wskazówek wizualnych. aria-labelwyraźnie mówi im, co zrobi przycisk.

Olly Hodgson
źródło
4
Dzięki za wyjaśnienie, ale jak usłyszy blisko? Co mogę zrobić w przeglądarce (chrome), aby to usłyszeć? Jak niewidomy może wybrać ten przycisk, jeśli nie ma pojęcia, gdzie on jest?
Salvador Dali
1
Myślę, że rozszerzenie takie jak ChromeVox byłoby dobrym miejscem do rozpoczęcia? Jednak nigdy tego nie użyłem. Pracują, czytając ekran użytkownikowi na głos, pobierając wskazówki z HTMLa (np. h1Należy podkreślić więcej niż a p, ato wyraźnie , forma linku` wskazuje gdzie wpisać informacje, aria-*atrybuty dają dalsze wskazówki co do działania elementów itp.) .
Olly Hodgson
2
W tym konkretnym przypadku dodałbym go do tytułu attribute. Nie szkodzi w wyświetlaniu podpowiedzi dla „widzących” użytkowników, gdy
zatrzymają się
3
Oprócz ChromeVox istnieje NVDA . Oba są dość łatwe w instalacji i uruchomieniu oraz dość trudne do opanowania.
ivarni,
1
@SalvadorDali - tylko dla informacji. w telefonii komórkowej osoba niewidoma może włączyć narzędzie ułatwień dostępu, takie jak dla telefonu komórkowego z systemem Android, to TalkBack, a dla telefonów z systemem iOS to VoiceOver. dzięki temu strona jest czytana wiersz po wierszu.
Rahul J. Rane
71

W podanym przykładzie masz całkowitą rację, musisz ustawić atrybut title.

Jeśli aria-labeljest to jedno narzędzie wykorzystywane przez technologie wspomagające (takie jak czytniki ekranu), nie jest natywnie obsługiwane w przeglądarkach i nie ma na nie wpływu. Nie przyniesie żadnej pomocy większości osób, na które celuje WCAG (z wyjątkiem użytkowników czytników ekranu), na przykład osób z niepełnosprawnością intelektualną.

„X” nie wystarcza, aby przekazać informacje o akcji prowadzonej przez przycisk (pomyśl o kimś bez znajomości komputera). Może to oznaczać „zamknij”, „usuń”, „anuluj”, „zmniejsz”, dziwny krzyż, doodle, nic.

Pomimo faktu, że W3C wydaje się promować aria-labelraczej ten titleatrybut tutaj: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/ARIA14 w podobnym przykładzie, widać, że technologia obsługa nie obejmuje standardowych przeglądarek: http://www.w3.org/WAI/WCAG20/Techniques/ua-notes/aria#ARIA14

W rzeczywistości aria-labelw tej dokładnej sytuacji można zastosować więcej kontekstu dla akcji:

Na przykład osoby niewidome nie postrzegają wyskakujących okienek, takich jak te z nami, które mają dobrą wizję, to jak zmiana kontekstu. „Powrót do strony” będzie wygodniejszą alternatywą dla czytnika ekranu, gdy „Zamknij” ma większe znaczenie dla osoby bez czytnika ekranu.

  <button
      aria-label="Back to the page"
      title="Close" onclick="myDialog.close()">X</button>
Adam
źródło
35

Jeśli chcesz wiedzieć, jak aria-labelCi to praktycznie pomóc ... postępuj zgodnie z instrukcjami ... zdobędziesz to sam ...

Utwórz stronę HTML z poniższym kodem

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <button title="Close"> X </button>
    <br />
    <br />
    <br />
    <br />
    <button aria-label="Back to the page" title="Close" > X </button>
</body>
</html>

Teraz potrzebujesz wirtualnego emulatora czytnika ekranu, który będzie działał w przeglądarce, aby zaobserwować różnicę. Użytkownicy przeglądarki Chrome mogą zainstalować rozszerzenie chromevox, a użytkownicy Mozilli mogą korzystać z dodatku czytnika ekranu kłów

Po zakończeniu instalacji włóż słuchawki do uszu, otwórz stronę HTML i skoncentruj się na obu przyciskach (naciskając tabulator) jeden po drugim .. i usłyszysz ... skupienie się na first x button... powie Ci tylko x button... ale w przypadku second x button… usłyszysz back to the page buttontylko…

mam nadzieję, że teraz masz to dobrze !!

Moumit
źródło
1
Ważną kwestią jest to, że titleatrybut jest ignorowany, nawet na pierwszym przycisku. Więcej informacji: silktide.com/…
Sphinxxx
2
Czy nadal tak jest? Nadal lepiej podać jedno title i drugie aria-label?
Kamafeather
2
Właśnie tego chciałem. Chciałem tylko zobaczyć i usłyszeć, jak to działa w prawdziwym świecie, a chromevoxdziała jak urok i będzie recytować pola aria. Dzięki.
Raj Rajeshwar Singh Rathore
7

Warunek wstępny:

Aria służy do poprawy komfortu użytkowania dla użytkowników niedowidzących. Użytkownicy niedowidzący poruszają się po aplikacji za pomocą oprogramowania do odczytu ekranu, takiego jak JAWS, NVDA, .. Podczas poruszania się po aplikacji oprogramowanie czytnika ekranu informuje użytkowników o treści. Aria może być używana do dodawania treści do kodu, co pomaga użytkownikom czytników ekranu zrozumieć rolę, stan, etykietę i cel kontroli

Aria niczego nie zmienia wizualnie. (Aria boi się również projektantów).

aria-label

Atrybut aria-label służy do przekazywania etykiety użytkownikom czytników ekranu. Zwykle pole wyszukiwania nie ma etykiety wizualnej (dzięki projektantom). Aria-label może być używana do przekazywania etykiety sterowania użytkownikom czytników ekranu

Jak używać:

<input type="edit" aria-label="search" placeholder="search">

Nie ma wizualnej zmiany w aplikacji. Ale czytniki ekranu mogą zrozumieć cel kontroli

aria-labelledby

Zarówno aria-label, jak i aria-labelledby są używane do przekazywania etykiety. Ale aria-labelledby może służyć do odwoływania się do dowolnej etykiety już znajdującej się na stronie, podczas gdy aria-label służy do przekazywania etykiety, której nie wyświetlałem wizualnie

Podejście 1:

<span id="sd">Search</span>

<input type="text" aria-labelledby="sd">

Podejście 2:

aria-labelledby może być również używana do łączenia dwóch etykiet dla użytkowników czytników ekranu

<span id="de">Billing Address</span>

<span id="sd">First Name</span>

<input type="text" aria-labelledby="de sd">
ndioewbnc
źródło
3

The titleAtrybut wyświetla podpowiedź, gdy mysz jest uciążliwy element. Chociaż jest to świetny dodatek, nie pomaga on osobom, które nie mogą korzystać z myszy (z powodu niepełnosprawności ruchowej) lub osobom, które nie widzą tej podpowiedzi (np. Osoby z niepełnosprawnością wzrokową lub osoby korzystające z czytnika ekranu).

Jako takie, rozważne podejście tutaj byłoby służyć wszystkim użytkownikom. Dodam, zarówno titlei aria-labelatrybutów (obsługujących różne typy użytkowników i różnych rodzajów korzystania z sieci Web).

Oto dobry artykuł, który wyjaśnia, aria-labelw głębi

Lucalanca
źródło