Jakie są te atrybuty: `aria-labelledby` i` aria-hidden`

Korzystając z modalu Bootstrap, ariaczęsto widziałem te atrybuty, ale nigdy nie wiedziałem, jak z nich korzystać.

Czy ktoś wie, w jakich przypadkach można użyć tych atrybutów? Poszukałem w Google - po prostu nie znalazłem prostych odpowiedzi.

Atrybut ARIA HTML5 jest tym, czego szukasz. Można go używać w kodzie nawet bez bootstrapu.

Dostępne bogate aplikacje internetowe (ARIA) określają sposoby na zwiększenie dostępności treści internetowych i aplikacji internetowych (zwłaszcza tych opracowanych przy użyciu Ajax i JavaScript) dla osób niepełnosprawnych.

Aby być precyzyjnym w przypadku twojego pytania, oto jak nazywają się twoje atrybuty jako stany i model atrybutów ARIA

aria-labelledby: Identyfikuje element (lub elementy), który oznacza bieżący element.

aria-hidden (state): Wskazuje, że element i wszystkie jego potomki nie są widoczne ani widoczne dla żadnego użytkownika, zgodnie z implementacją autora.

Głównymi odbiorcami tych właściwości są programy użytkownika, takie jak czytniki ekranu dla osób niewidomych. Tak więc w przypadku modalu Bootstrap, modal divma role="dialog". Kiedy czytnik ekranu zauważy, że divstaje się widoczny, który pełni tę rolę, wypowiada się na etykietę div.

Istnieje wiele sposobów znakowania rzeczy (i kilka nowych za pomocą ARIA), ale w niektórych przypadkach właściwe jest użycie istniejącego elementu jako etykiety (semantycznej) bez użycia <label>znacznika HTML. W przypadku modów HTML etykieta jest zwykle <h>nagłówkiem. Więc w przypadku modalu Bootstrap dodajesz aria-labelledby=[IDofModalHeader], a czytnik ekranu wypowie ten nagłówek, gdy pojawi się modal.

Mówiąc ogólnie, czytnik ekranu zauważy, gdy elementy DOM staną się widoczne lub niewidoczne, więc aria-hiddenwłaściwość jest często redundantna i prawdopodobnie można ją pominąć w większości przypadków.

aria-hidden="true"ukryje elementy dekoracyjne, takie jak ikony glifów, przed czytnikami ekranu, które nie mają wymownej wymowy, aby nie powodować zamieszania. To dobra rzecz, aby zrobić dobrą praktykę.

ARIA nie zmienia funkcjonalności, zmienia jedynie przedstawione role / właściwości użytkownikom czytników ekranu. Pasek WAVE WebAIM identyfikuje role ARIA na stronie.

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

ukryty w arii:

Atrybut aria-hidden służy do ukrywania treści dla użytkowników niedowidzących, którzy poruszają się po aplikacji za pomocą czytników ekranu (JAWS, NVDA, ...).

Atrybut aria-hidden jest używany z wartościami true, false.

Jak używać:

<i class = "fa fa-books" aria-hidden = "true"></i>

użycie aria-hidden = "true" na ukrytej <i>treści użytkownikom czytników ekranu bez żadnych zmian wizualnych w aplikacji.

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">

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

Podejście 2:

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

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

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