Ukrywanie i aktualizowanie treści

Ukrywanie treści przed technologiami wspomagającymi osoby z niepełnosprawnością

Alice Boxhall

Dave Gash

Meggin Kearney

aria-ukryta

Kolejna ważna technika dostrajania obsługi aplikacji wspomagających korzystanie z technologii wymaga, aby tylko istotne części strony były na dostęp do technologii wspomagających osoby z niepełnosprawnością. Istnieje kilka sposobów na zapewnienie, że sekcja interfejsu DOM nie są udostępniane interfejsom API ułatwień dostępu.

Po pierwsze, nie będzie uwzględniane wszystko, co jest bezpośrednio ukryte w modelu DOM. w drzewie ułatwień dostępu. Zatem wszystkie elementy, które mają styl CSS visibility: hidden lub display: none albo korzystają z atrybutu HTML5 hidden, również zostaną uwzględnione. ukryte przed użytkownikami technologii wspomagających osoby z niepełnosprawnością.

Element, który nie jest renderowany wizualnie, ale nie jest wyraźnie ukryty, jest jednak w drzewie ułatwień dostępu. Jedną z popularnych technik jest uwzględnianie „tekst tylko dla czytnika ekranu” w elemencie, który znajduje się absolutnie poza ekranem.

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

Ponadto, jak zaobserwowaliśmy, można przesyłać tekst tylko dla czytnika ekranu Atrybut aria-label, aria-labelledby lub aria-describedby odnoszący się do który jest ukryty.

Zobacz ten artykuł WebAIM na temat technik ukrywania tekst więcej informacji o tworzeniu opcji „tylko czytnik ekranu” tekstu.

Dodatkowo ARIA udostępnia mechanizm wykluczania treści ze wspomaganych technologię, która nie jest ukryta wizualnie, za pomocą atrybutu aria-hidden. Zastosowanie tego atrybutu do elementu skutecznie usuwa go oraz elementów potomnych z drzewa ułatwień dostępu. Jedynym wyjątkiem są elementy które 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>

Możesz na przykład użyć aria-hidden, jeśli tworzysz interfejs modalny, blokuje dostęp do strony głównej. W takim przypadku widzący użytkownik może zobaczyć półprzezroczystej nakładki wskazującej, że obecnie nie można użytkownika, ale użytkownik czytnika ekranu może nadal mieć możliwość poznania innych części strony. W tym przypadku, a także o stworzeniu pułapki klawiatury, omówiono, wcześniej, musisz upewnić się, że te części strony są również aria-hidden.

Znasz już podstawy ARIA i wiesz, jak działa ona z natywnym kodem HTML. o semantyce i sposobie jej użycia do przeprowadzenia dość poważnej operacji chirurgicznej drzewo ułatwień dostępu oraz zmienić semantykę pojedynczego elementu, jak wykorzystać go do przekazywania ważnych informacji.

aria-live

aria-live umożliwia programistom oznaczenie części strony jako „opublikowanej”. w tym sensie, aktualizacje powinny być natychmiast przekazywane użytkownikom niezależnie od strony na określonej pozycji, a nie tylko na przeglądaniu tej części strony. Kiedy element ma atrybut aria-live, część strony, która go zawiera, jego elementy podrzędne są nazywane aktywnym regionem.

Aktywny region może być wyświetlany jako komunikat o stanie wyświetlany w wyniku działanie użytkownika. Jeśli komunikat jest na tyle ważny, aby przyciągnąć uwagę użytkownika uwagi, ważne jest, aby skierować użytkownika technologii wspomagających ustawiając jej atrybut aria-live. Porównaj to zwykły div

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

wraz z „aktywnym” .

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

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

• aria-live="polite" informuje technologię wspomagającą osoby z niepełnosprawnością, aby powiadomiła użytkownika o tym i zmianę tego, co właśnie robi. To bardzo przydatna funkcja jeśli coś jest ważne, ale niepilne i stanowi większość aria-live.
• aria-live="assertive" nakazuje technologii wspomagającej osoby z niepełnosprawnością przerwanie działania natychmiast po wprowadzeniu zmian i niezwłoczne powiadomienie użytkownika o tej zmianie. Dotyczy tylko ważne i pilne powiadomienia, np. komunikat o stanie, wystąpił błąd serwera i zmiany nie zostały zapisane; odśwież stronę” lub aktualizacji pola do wprowadzania danych w bezpośrednim wyniku działania użytkownika, np. w widżecie z krokami.
• aria-live="off" informuje technologię wspomagającą osoby z niepełnosprawnością, aby tymczasowo zawiesić Liczba przerw: aria-live.

Istnieją sztuczki, dzięki którym będziesz mieć pewność, że aktywne regiony będą działać prawidłowo.

Po pierwsze, region aria-live powinien być prawdopodobnie ustawiony podczas wstępnego wczytywania strony. Nie jest to sztywna zasada, ale jeśli masz problem z aria-live – to może stanowić problem.

Po drugie, różne czytniki ekranu reagują inaczej w zależności od typu zmian. Można na przykład wywołać alert w niektórych czytnikach ekranu zmieniając styl hidden elementu podrzędnego z „true” na „false”.

Inne atrybuty, które działają z usługą aria-live, pomagają doprecyzować powiadamiane użytkownika o zmianie aktywnego regionu.

aria-atomic wskazuje, czy cały region należy uznać za podczas przekazywania aktualizacji. Jeśli na przykład widżet daty składający się z dzień, miesiąc i rok ma aria-live=true i aria-atomic=true, a użytkownik korzysta z elementu sterującego do zmiany wartości tylko miesiąca, pełna zawartość widżetu daty zostałby odczytany na głos. Parametr aria-atomic może mieć wartość true lub false (domyślnie).

Pole aria-relevant wskazuje typy zmian, które powinny zostać wyświetlone użytkownikowi. Niektórych opcji można używać oddzielnie lub w formie listy tokenów.

• dodatki, co oznacza, że każdy element dodawany do aktywnego regionu jest istotne. Na przykład dołączenie spanu do istniejącego logu stanu oznacza, że span jest wypowiadany użytkownikowi (przy założeniu, że że aria-atomic to false).
• text, co oznacza, że zawartość tekstowa dodawana do każdego węzła podrzędnego jest istotne. np. modyfikacja właściwości textContent niestandardowego pola tekstowego. odczyta zmodyfikowany tekst użytkownikowi.
• removals, co oznacza, że usunięcie tekstu lub węzłów podrzędnych nie powinno która ma być widoczna dla użytkownika.
• wszystkie, co oznacza, że wszystkie zmiany są istotne. Domyślna wartość dla aria-relevant to additions text, co oznacza, że jeśli nie określisz aria-relevant spowoduje zaktualizowanie użytkownika w przypadku dodania elementu do elementu, czyli tego, co powinno wam pomóc.

aria-busy umożliwia też powiadomienie technologii wspomagającej osoby z niepełnosprawnością, że powinna tymczasowo ignorować zmiany w elemencie, na przykład podczas wczytywania elementów. Jednorazowo wszystko jest ustawione, więc dla znormalizowania wartości funkcji aria-busy należy ustawić wartość false (fałsz). działania czytnika.