Ukrywanie treści przed technologią wspomagającą osoby z niepełnosprawnością
aria-hidden
Kolejną ważną metodą optymalizacji wrażeń użytkowników technologii wspomagających jest zapewnienie, że tylko odpowiednie części strony będą narażone na działanie tych technologii. Jest kilka sposobów na zapewnienie, że sekcja DOM nie będzie miała dostępu do interfejsów API ułatwień dostępu.
Po pierwsze, wszystko, co jest wyraźnie ukryte w modelu DOM, nie zostanie uwzględnione w drzewie ułatwień dostępu. Dzięki temu wszystkie elementy o stylu CSS visibility:
hidden
lub display: none
albo korzystające z atrybutu HTML5 hidden
również nie będą widoczne dla użytkowników technologii wspomagających.
Jednak element, który nie jest renderowany wizualnie, ale nie jest ukryty, jest nadal zawarty w drzewie ułatwień dostępu. Jedną z popularnych metod jest umieszczanie „tekstu tylko z czytnika ekranu” w elemencie, który znajduje się bezwzględnie poza ekranem.
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
Poza tym, jak widzieliśmy, można podać tekst tylko z czytnika ekranu za pomocą atrybutu aria-label
, aria-labelledby
lub aria-describedby
odwołującego się do elementu, który w przeciwnym razie jest ukryty.
Zapoznaj się z tym artykułem WebAIM na temat technik ukrywania tekstu, aby dowiedzieć się więcej o tworzeniu tekstu przeznaczonego tylko za pomocą czytnika ekranu.
I na koniec, ARIA udostępnia mechanizm wykluczania za pomocą atrybutu aria-hidden
treści z technologii wspomagających, które nie są ukryte wizualnie.
Zastosowanie tego atrybutu do elementu skutecznie spowoduje usunięcie tego atrybutu i wszystkich jego elementów podrzędnych z drzewa ułatwień dostępu. Jedynymi wyjątkami są elementy, do których odwołuje się atrybut aria-labelledby
lub aria-describedby
.
<div class="deck">
<div class="slide" aria-hidden="true">
Sales Targets
</div>
<div class="slide">
Quarterly Sales
</div>
<div class="slide" aria-hidden="true">
Action Items
</div>
</div>
Elementu aria-hidden
możesz użyć na przykład wtedy, gdy tworzysz interfejs modalny, który blokuje dostęp do strony głównej. W takiej sytuacji użytkownik może zobaczyć półprzezroczystą nakładkę wskazującą, że w danej chwili nie można korzystać z większości strony, ale użytkownik czytnika ekranu może nadal przejść do innych części strony. W tym przypadku oprócz utworzenia pułapki klawiatury wyjaśnionej wcześniej musisz też zadbać o to, aby części strony, które obecnie wykraczają poza zakres, również mają wartość aria-hidden
.
Skoro już znasz podstawy ARIA, jej współdziałanie z natywną semantyką kodu HTML i wiesz, jak można ją wykorzystać do przeprowadzenia dość dużych operacji na drzewie ułatwień dostępu oraz zmiany semantyki pojedynczego elementu, przyjrzyjmy się, jak użyć jej do przekazywania informacji, które pilnie wymagają czasu.
aria-live
aria-live
umożliwia programistom oznaczenie części strony jako „aktywnej” w takim sensie, że użytkownicy powinni być powiadamiani o aktualizacjach natychmiast, niezależnie od jej pozycji, a nie wtedy, gdy tylko przeglądają jej fragment. Gdy element ma atrybut aria-live
, część strony, która go zawiera, oraz jego elementy podrzędne są nazywane regionem aktywnym.
Na przykład aktywny region może być komunikatem o stanie, który pojawia się w wyniku działania użytkownika. Jeśli komunikat jest na tyle ważny, aby przyciągnąć uwagę użytkownika, należy ustawić atrybut aria-live
, aby skierować na niego uwagę użytkownika technologii wspomagającej osoby z niepełnosprawnością. Porównaj ją: div
<div class="status">Your message has been sent.</div>
z jego „aktywnym” odpowiednikiem.
<div class="status" aria-live="polite">Your message has been sent.</div>
aria-live
ma 3 dopuszczalne wartości: polite
, assertive
i off
.
aria-live="polite"
informuje technologię wspomagającą, że ma powiadomić użytkownika o tej zmianie po zakończeniu jej wykonywania. Przyda się, jeśli coś jest ważne, ale nie pilne, i jest przydatne w większości przypadkówaria-live
.aria-live="assertive"
nakazuje technologii wspomagającej przerwanie jej działania i natychmiastowe powiadomienie użytkownika o tej zmianie. Dotyczy to tylko ważnych i nagłych aktualizacji, np. komunikatu o stanie, np. „Wystąpił błąd serwera i wprowadzone zmiany nie zostały zapisane. Odśwież stronę” lub zmiany w polu do wprowadzania danych w wyniku bezpośredniego działania użytkownika, np. przez użycie przycisków na widżecie schodkowym.aria-live="off"
nakazuje technologii wspomagającej tymczasowe zawieszeniearia-live
powiadomień.
Oto kilka sztuczek, które sprawią, że aktywne regiony będą działać prawidłowo.
Najpierw region aria-live
należy prawdopodobnie ustawić przy wstępnym wczytaniu strony.
Nie jest to sztuczna reguła, ale jeśli masz problem z regionem aria-live
, może to być przyczyną problemu.
Po drugie, różne czytniki ekranu reagują w różny sposób na różne rodzaje zmian. Można na przykład wywołać alert w niektórych czytnikach ekranu, przełączając styl hidden
elementu podrzędnego z prawda na fałsz.
Inne atrybuty współpracujące z aria-live
pomagają dostrajać informacje, które są przekazywane użytkownikowi, gdy zmieni się aktywny region.
aria-atomic
wskazuje, czy przy przekazywaniu aktualizacji należy traktować cały region jako całość. Jeśli na przykład widżet daty składający się z dnia, miesiąca i roku ma parametry aria-live=true
i aria-atomic=true
, a użytkownik używa elementu sterującego, aby zmienić tylko wartość miesiąca, pełna zawartość widżetu daty zostanie ponownie odczytana. aria-atomic
może mieć wartość true
lub false
(wartość domyślna).
aria-relevant
wskazuje typy zmian, które mają zostać przedstawione użytkownikowi.
Niektóre opcje mogą być używane oddzielnie lub jako lista tokenów.
- additions (dodatków), co oznacza, że każdy element dodawany do aktywnego obszaru jest ważny. Na przykład dołączenie spanu do istniejącego logu komunikatów o stanie oznaczałoby, że ten zakres zostanie przekazany użytkownikowi (przy założeniu, że
aria-atomic
ma wartośćfalse
). - text, co oznacza, że treść dodana do dowolnego węzła podrzędnego jest istotna. Na przykład zmiana właściwości
textContent
niestandardowego pola tekstowego spowoduje odczytanie zmodyfikowanego tekstu użytkownikowi. - usunięcie oznacza, że użytkownik musi przekazać użytkownikowi informacje o usunięciu tekstu i węzłów podrzędnych.
- wszystkie, co oznacza, że wszystkie zmiany są istotne. Jednak domyślna wartość parametru
aria-relevant
toadditions text
, co oznacza, że jeśli nie określisz wartościaria-relevant
, użytkownik będzie otrzymywać dowolne dodatki do tego elementu, a właśnie tego oczekujesz.
aria-busy
umożliwia też powiadamianie technologii wspomagającej, że powinna tymczasowo ignorować zmiany w elemencie, np. podczas wczytywania elementów. Gdy wszystko jest gotowe, zasada aria-busy
powinna mieć wartość false (fałsz), aby znormalizować działanie czytnika.