Ukrywanie treści przed technologiami wspomagającymi osoby z niepełnosprawnością
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
aria-label
, aria-labelledby
lub aria-describedby
odnoszący się do atrybutu
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
pozwala programistom oznaczyć część strony jako aktywną. 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.
![Funkcja transmisji na żywo ARIA włącza aktywny region.](https://web.developers.google.cn/static/articles/hiding-and-updating-content/image/aria-live-establishes-li-acc61d8956fc7.jpg?authuser=3&hl=pl)
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
tofalse
). - 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
toadditions text
, co oznacza, że jeśli nie określiszaria-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.