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.

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.

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

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

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();