Ukrywanie i aktualizowanie treści

Ukrywanie treści przed technologią wspomagającą osoby z niepełnosprawnością

Alice Boxhall

Dave Gash

Meggin Kearney

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ów aria-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 zawieszenie aria-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 to additions text, co oznacza, że jeśli nie określisz wartości aria-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.