Jaka jest różnica między atrybutami „ukryty” HTML i „ukryty aria”?


256

Cały czas widziałem atrybut arii podczas pracy z materiałem kątowym. Czy ktoś może mi wyjaśnić, co oznacza przedrostek aria? ale co najważniejsze, co usiłuję zrozumieć jest różnica między aria-hiddeni hiddenatrybut.


1
Znalazłem tu wyjaśnienie: paciellogroup.com/blog/2012/05/…
Abdul

Odpowiedzi:


363

ARIA (Accessible Rich Internet Applications) określa sposób uczynienia treści i aplikacji internetowych bardziej dostępnymi dla osób niepełnosprawnych.

Ten hiddenatrybut jest nowy w HTML5 i informuje przeglądarki, aby nie wyświetlały elementu. aria-hiddenNieruchomość mówi Screen-czytniki czy należy ignorować elementu. Więcej informacji znajdziesz w dokumentacji w3:

https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden

Korzystanie z tych standardów może ułatwić osobom niepełnosprawnym korzystanie z Internetu.


4
Więc jeśli użyjesz ukrytego atrybutu, czytnik ekranu nadal będzie czytał?
Daniel Kobe

39
Poprawny. hiddenoznacza ukryty dla wszystkich. aria-hiddenoznacza ukryte dla czytników ekranu i podobnych narzędzi. Jest to przydatne w przypadku komponentów, które są używane wyłącznie do formatowania i nie zawierają na przykład prawdziwej treści.
Andrei Bârsan

23
@ AndreiBârsan @DanielKobe Myślę, że Andrei miał na myśli „Niepoprawne”. (Reszta jego komentarza jest oparta na faktach.) hiddenPowinna uniemożliwić czytnikowi ekranu dostęp do zawartości tagu.
eenblam

6
Twoja odpowiedź na temat aria-hiddenjest poprawna; jednak nie powiedziałeś nic o tym, hiddenaby to odróżnić aria-hidden. To niestety najlepsza odpowiedź. Uściśl swoje odpowiedzi.
Pegues,

1
twoja odpowiedź wyjaśnia skutki atrybutów, ale nie ich znaczenie . nie wspominasz nic o drzewie dostępności ani czasowym znaczeniu elementu. przeczytaj specyfikację, aby uzyskać więcej informacji. [HTML 5.2 , ARIA 1.1 ]
chharvey

40

Ukryty atrybut to atrybut logiczny (prawda / fałsz). Gdy ten atrybut zostanie użyty w elemencie, usuwa on wszelkie znaczenie dla tego elementu. Gdy użytkownik wyświetla stronę HTML, elementy z ukrytym atrybutem nie powinny być widoczne.

Przykład:

    <p hidden>You can't see this</p>

Atrybuty ukryte w arii wskazują, że element i WSZYSTKIE jego potomki są nadal widoczne w przeglądarce, ale będą niewidoczne dla narzędzi ułatwień dostępu, takich jak czytniki ekranu.

Przykład:

    <p aria-hidden="true">You can't see this</p>

Spójrz na to . Powinien odpowiedzieć na wszystkie twoje pytania.

Uwaga: ARIA oznacza Accessible Rich Internet Applications

Źródła: Paciello Group


25
Nie jest to do końca poprawne (nawet oficjalna dokumentacja jest tutaj nieco mglista). Element z aria-hidden="true"jest nadal widoczny w przeglądarce, ale będzie niewidoczny dla narzędzi ułatwień dostępu, takich jak czytniki ekranu.
Andrei Bârsan

aria-hiddensłuży do ukrywania elementu przed osobami korzystającymi z Twojej witryny za pomocą narzędzi ułatwiających dostęp.
Luke Brown,

13

Różnica semantyczna

Zgodnie z HTML 5.2 :

Gdy jest określony w elemencie, [ hiddenatrybut] wskazuje, że element nie jest jeszcze lub nie jest już bezpośrednio związany z bieżącym stanem strony, lub że jest używany do zadeklarowania ponownego wykorzystania treści przez inne części strony jako w przeciwieństwie do bezpośredniego dostępu użytkownika.

Przykłady obejmują listę kart, na której niektóre panele nie są odsłonięte, lub ekran logowania, który znika po zalogowaniu się użytkownika. Lubię nazywać te rzeczy „czasowo istotnymi”, tj. Są one odpowiednie na podstawie czasu.

Z drugiej strony ARIA 1.1 mówi:

[ aria-hiddenStan] wskazuje, czy element jest narażony na interfejs API dostępności.

Innymi słowy, elementy z aria-hidden="true"są usuwane z drzewa ułatwień dostępu , które najbardziej honoruje technologia wspomagająca, a elementy z aria-hidden="false"pewnością będą narażone na działanie drzewa. Elementy bez aria-hiddenatrybutu znajdują się w stanie „niezdefiniowany (domyślny)”, co oznacza, że ​​aplikacje klienckie powinny udostępniać je drzewu na podstawie jego renderowania. Np. Klient użytkownika może zdecydować o jego usunięciu, jeśli jego kolor tekstu odpowiada kolorowi tła.

Porównajmy teraz semantykę. Właściwe jest użycie hidden, ale nie aria-hidden , elementu, który nie jest jeszcze „czasowo istotny”, ale może stać się istotny w przyszłości (w takim przypadku użyłbyś dynamicznych skryptów do usunięcia hiddenatrybutu). I odwrotnie, należy używać aria-hidden, ale nie hiddenelementu, który jest zawsze odpowiedni, ale z którym nie chcesz zaśmiecać interfejsu API dostępności; takie elementy mogą obejmować „styl wizualny”, takie jak ikony i / lub obrazy, które nie są niezbędne do konsumpcji przez użytkownika.

Różnica skuteczna

W semantyka mieć przewidywalne skutki w środkach przeglądarek / użytkowników. Rozróżniam to dlatego, że zachowanie agenta użytkownika jest zalecane , ale nie wymagane przez specyfikacje.

hiddenAtrybut powinien ukryć element z wszystkich prezentacjach, w tym drukarek i czytników ekranu (zakładając, że urządzenia te cześć HTML specyfikacje). Jeśli chcesz usunąć element z drzewa ułatwień dostępu, a także mediów wizualnych, hiddenzałatwi sprawę. Nie używaj jednak hidden tylko dlatego, że chcesz tego efektu. Zadaj sobie pytanie, czy hiddennajpierw jest poprawne semantycznie (patrz wyżej). Jeśli hiddennie jest to poprawne semantycznie, ale nadal chcesz wizualnie ukryć element, możesz użyć innych technik, takich jak CSS.

Elementy z aria-hidden="true"nie są narażone na drzewo ułatwień dostępu, więc na przykład czytniki ekranu ich nie ogłaszają. Tę technikę należy stosować ostrożnie, ponieważ zapewni ona różne wrażenia różnym użytkownikom: dostępne programy klienckie nie będą ich ogłaszać / renderować, ale nadal są renderowane na agentach wizualnych. To może być dobra rzecz, jeśli jest wykonane poprawnie, ale może być wykorzystywane.

Różnica składniowa

Na koniec istnieje różnica w składni między tymi dwoma atrybutami.

hiddenjest atrybutem boolowskim , co oznacza, że ​​jeśli atrybut jest obecny, jest prawdziwy - bez względu na jakąkolwiek wartość może mieć - a jeśli atrybut jest nieobecny, jest fałszywy. W prawdziwym przypadku najlepszą praktyką jest albo nie używanie żadnej wartości ( <div hidden>...</div>), albo pustej wartości ciągu ( <div hidden="">...</div>). Bym nie polecam hidden="true", bo ktoś odczyt / aktualizację kodu może wywnioskować, że hidden="false"miałoby skutek odwrotny, który jest po prostu błędne.

aria-hidden, przeciwnie, jest wyliczonym atrybutem , pozwalającym na skończoną listę wartości. Jeśli aria-hiddenatrybut jest obecny, jego wartość musi być "true"albo "false". Jeśli chcesz mieć stan „niezdefiniowany (domyślny)”, usuń atrybut całkowicie.


Dalsza lektura: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content


1
Ten post od Paciello Group, 2012 mówi: „aria-hidden = false nie jest mapowany w żadnej przeglądarce obsługującej aria-hidden, dlatego jego użycie nie ma znaczenia lub innymi słowy ma takie samo znaczenie jak jego brak”. Nie jestem pewien, czy tak jest nadal, ale dodam jako ostrzeżenie. Chciałbym opisać moje wszystkie stany widoku oddzielnie od mojego CSS, ale nie jestem pewien, czy jest to możliwe z ukrytą arią. developer.paciellogroup.com/blog/2012/05/…
RobW,

-1

ustawienie aria-hidden na false i przełączanie go na element.show () działało dla mnie.

na przykład

<span aria-hidden="true">aria text</span>

$(span).attr('aria-hidden', 'false');
$(span).show();

i kiedy się chowasz

$(span).attr('aria-hidden', 'true');
$(span).hide();
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.