Ukrywanie i aktualizowanie treści

Ukrywanie treści przed technologiami wspomagającymi

Alice Boxhall

Dave Gash

Meggin Kearney

aria-hidden

Inną ważną techniką pozwalającą na dostosowanie interfejsu do potrzeb użytkowników technologii wspomagających jest zapewnienie, aby technologia wspomagająca miała dostęp tylko do odpowiednich części strony. Istnieje kilka sposobów na to, aby sekcja DOM nie była widoczna dla interfejsów API ułatwień dostępu.

Po pierwsze, w drzewie ułatwień dostępu nie będzie uwzględniane nic, co jest wyraźnie ukryte w DOM. Dzięki temu wszystkie elementy, które mają styl CSS visibility: hidden lub display: none albo korzystają z atrybutu HTML5 hidden, będą ukryte przed użytkownikami technologii wspomagających osoby z niepełnosprawnością.

Element, który nie jest renderowany wizualnie, ale nie jest też wyraźnie ukryty, jest nadal uwzględniany w drzewie ułatwień dostępu. Jedną z popularnych technik jest umieszczenie „tekstu tylko dla czytnika ekranu” w elemencie, który jest umieszczony absolutnie poza ekranem.

.sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

Jak już zauważyliśmy, można też podać tekst tylko dla czytnika ekranu za pomocą atrybutu aria-label, aria-labelledby lub aria-describedby, który odwołuje się do elementu, który jest w innej sytuacji ukryty.

Aby dowiedzieć się więcej o tworzeniu tekstu „tylko dla czytnika ekranu”, przeczytaj ten artykuł WebAIM o technikach ukrywania tekstu.

ARIA udostępnia też mechanizm wykluczania treści z technologii wspomagających, które nie są wizualnie ukryte, za pomocą atrybutu aria-hidden. Zastosowanie tego atrybutu do elementu powoduje usunięcie go i wszystkich jego elementów podrzędnych z drzewa ułatwień dostępu. Jedynymi wyjątkami są elementy odwołujące się do atrybutu 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>

Możesz na przykład użyć aria-hidden, jeśli tworzysz okno modalne, które blokuje dostęp do strony głównej. W takim przypadku użytkownik pełnosprawny może zobaczyć półprzezroczyste nakładanie wskazujące, że większość strony jest obecnie niedostępna, ale użytkownik korzystający z czytnika ekranu może nadal przeglądać inne części strony. W takim przypadku, oprócz opisanego wcześniej ustawienia pułapki klawiatury, musisz się upewnić, że te części strony, które są obecnie poza zakresem, również są aria-hidden.

Teraz, gdy już znasz podstawy ARIA, wiesz, jak stosować je w połączeniu z domyślną semantyką HTML oraz jak można ich używać do przeprowadzania dość poważnych zmian w drzewie ułatwień dostępu, a także do zmiany semantyki pojedynczego elementu. Teraz przyjrzyjmy się, jak można ich używać do przekazywania informacji o charakterze czasowym.

aria-live

aria-live umożliwia programistom oznaczanie części strony jako „opublikowanej” w takim sensie, że informacje o aktualizacjach powinny być od razu przekazywane użytkownikom niezależnie od pozycji strony, a nie tylko wtedy, gdy przeglądają tę część. Jeśli element ma atrybut aria-live, część strony zawierająca go i jego potomków nazywana jest aktywnym regionem.

Aktywny region może na przykład być komunikatem o stanie, który pojawia się w odpowiedzi na działanie użytkownika. Jeśli wiadomość jest na tyle ważna, że przyciąga uwagę widzących użytkowników, jest też na tyle ważna, aby zwrócić na nią uwagę użytkowników korzystających z technologii wspomagających, ustawiając atrybut aria-live. Porównaj to zwykły div

<div class="status">Your message has been sent.</div>

z odpowiednikiem „na żywo”.

<div class="status" aria-live="polite">Your message has been sent.</div>

aria-live ma 3 dozwolone wartości: polite, assertive i off.

• aria-live="polite" informuje technologię wspomagającą, aby po zakończeniu bieżącej czynności powiadomiła użytkownika o tej zmianie. Jest to świetne rozwiązanie, jeśli coś jest ważne, ale nie pilne, i stanowi większość aria-liveużytkowania.
• aria-live="assertive" informuje technologię wspomagającą, aby przerwała to, co robi, i natychmiast powiadomiła użytkownika o tej zmianie. Ta funkcja jest przeznaczona tylko do ważnych i pilnych aktualizacji, takich jak komunikat o stanie, np. „Wystąpił błąd serwera i Twoje zmiany nie zostały zapisane. Odśwież stronę”. Możesz też używać jej do aktualizacji pola wprowadzania danych, które są bezpośrednim wynikiem działania użytkownika, np. przycisków w widżecie suwaka.
• aria-live="off" informuje technologię wspomagającą osoby z niepełnosprawnością, aby tymczasowo zawiesić aria-live zakłócenia.

Istnieją pewne sztuczki, które pomogą Ci upewnić się, że regiony na żywo działają prawidłowo.

Po pierwsze, region aria-live powinien być prawdopodobnie ustawiony podczas początkowego wczytywania strony. Nie jest to ścisłe reguła, ale jeśli masz problemy z regionem aria-live, może to być przyczyną.

Po drugie, różne czytniki ekranu inaczej reagują na różne typy zmian. Na przykład w niektórych czytnikach ekranu można wywołać alert, przełączając styl elementu potomnego hidden z wartości Prawda na wartość Fałsz.

Inne atrybuty, które działają z aria-live, pomagają dostosować to, co jest przekazywane użytkownikowi, gdy zmienia się region transmisji na żywo.

aria-atomic wskazuje, czy przy przekazywaniu aktualizacji należy traktować cały region jako cały. Jeśli na przykład widżet daty zawierający dzień, miesiąc i rok ma wartości aria-live=true i aria-atomic=true, a użytkownik użyje kontrolki krokowej, aby zmienić wartość tylko miesiąca, cały zawartość widżetu daty zostanie odczytana ponownie. aria-atomic może mieć wartość true lub false (domyślna).

aria-relevant wskazuje, jakie zmiany powinny być wyświetlane użytkownikowi. Niektóre opcje można używać osobno lub jako listę tokenów.

• dodatki, co oznacza, że każdy element dodawany do aktywnego regionu jest ważny. Dodanie zakresu do istniejącego dziennika wiadomości o stanie oznaczałoby, że użytkownik zostanie o nim poinformowany (zakładając, że aria-atomic to false).
• text, co oznacza, że tekst dodawany do dowolnego węzła potomnego jest istotny. Na przykład modyfikacja właściwości textContent niestandardowego pola tekstowego spowoduje odczytanie zmodyfikowanego tekstu przez użytkownika.
• usunięcia, co oznacza, że użytkownik powinien usunąć tekst lub węzły podrzędne.
• all, co oznacza, że wszystkie zmiany są istotne. Domyślną wartością parametru aria-relevant jest jednak additions text, co oznacza, że jeśli nie określisz właściwości aria-relevant, użytkownik zaktualizuje dane o każdym uzupełnieniu elementu, co jest najbardziej zgodne z Twoimi oczekiwaniami.

Na koniec aria-busy pozwala powiadomić technologię wspomagającą, że powinna tymczasowo ignorować zmiany w elemencie, np. podczas wczytywania. Gdy wszystko będzie gotowe, wartość aria-busy powinna zostać ustawiona na „fałsz”, aby znormalizować działanie czytnika.