Wprowadzenie do ARIA

Wprowadzenie do ARIA i nienatywnej semantyki HTML

Alice Boxhall
Alice Boxhall
X
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

Na razie zachęcamy do korzystania z natywnych elementów HTML, ponieważ pozwalają one obsługi klawiatury i wbudowanej semantyki, ale zdarzają się sytuacje, ani natywny kod HTML nie zadziałają. Na przykład obecnie nie ma funkcji ustandaryzowany element HTML dla bardzo popularnego konstrukcji interfejsu użytkownika, czyli wyskakującego menu. Norwegia Czy występuje element HTML, który charakteryzuje się właściwością semantyczną, taką jak „tag użytkownik musi dowiedzieć się o tym jak najszybciej”.

W tej lekcji omówimy sposoby wyrażania semantyki, której HTML nie potrafi nie były spontaniczne.

Ułatwienia dostępu dla aplikacji internetowych w ramach inicjatywy Web Accessibility Initiative specyfikacja (WAI-ARIA lub tylko ARIA) dobrze nadaje się do łączenia obszarów, w których występują problemy z ułatwieniami dostępu, których nie można zarządzać. z natywnym kodem HTML. Działa, ponieważ umożliwia określenie atrybutów, które modyfikują przekształcenia elementu w drzewo ułatwień dostępu. Spójrzmy na przykład.

W poniższym fragmencie kodu używamy elementu listy jako niestandardowego pola wyboru. „Pole wyboru” CSS nadaje elementowi wymagane cechy wizualne.

<li tabindex="0" class="checkbox" checked>
    Receive promotional offers
</li>

Ta funkcja działa dobrze w przypadku użytkowników widzących, ale czytnik ekranu nie informuje o tym. że element ma być polem wyboru, przez co niedowidzący użytkownicy mogą przeoczyć elementu.

Korzystając jednak z atrybutów ARIA, możemy podać elementowi brakujące informacje aby czytnik ekranu mógł go poprawnie zinterpretować. Dodaliśmy tu role oraz aria-checked, aby jednoznacznie wskazać element jako pole wyboru oraz aby wskazać, że pole jest domyślnie zaznaczone. Element listy zostanie dodany do drzewo ułatwień dostępu i czytnik ekranu prawidłowo zgłosi to jako pole wyboru.

<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
    Receive promotional offers
</li>

ARIA zmienia i rozszerza standardowe drzewo ułatwień dostępu DOM.

Standardowe drzewo ułatwień dostępu DOM.
Drzewo rozszerzonych ułatwień dostępu ARIA.

Chociaż ARIA pozwala na subtelną (lub nawet radykalną) modyfikację ułatwień dostępu, drzewa dla każdego elementu na stronie, to jedyna rzecz, jaką on zmienia. ARIA nie wzbogaca żadnego z wrodzonego zachowania elementu; nie sprawi, że element, który można zaznaczyć, lub dodać mu detektory zdarzeń klawiatury. Nadal jest to część .

Trzeba pamiętać, że nie ma potrzeby zmiany ustawień domyślnych semantyka. Niezależnie od użycia standardowy tag HTML <input type="checkbox"> nie wymaga dodatkowego atrybutu ARIA role="checkbox", by poprawnie ogłoszone.

Warto również zauważyć, że niektóre elementy HTML mają ograniczenia dotyczące możesz używać w nich ról i atrybutów. Na przykład standardowy element <input type="text"> nie może mieć żadnej dodatkowej roli ani atrybutu.

Zobacz specyfikację ARIA w kodzie HTML. .

Zobaczmy, jakie jeszcze możliwości oferuje ARIA.

Co potrafi ARIA?

Tak jak w przykładzie pola wyboru, ARIA może zmieniać semantykę istniejącego elementu. lub dodawać semantykę do elementów, w których nie ma natywnej semantyki. Może też wyraźne wzorce semantyczne, których nie ma w kodzie HTML, np. menu lub karta. panel. ARIA często pozwala nam tworzyć elementy widżetowe, które są niedostępne. za pomocą zwykłego kodu HTML.

  • Na przykład ARIA może dodać dodatkową etykietę i tekst opisu, który jest interfejs API technologii wspomagających osoby z niepełnosprawnością.
<button aria-label="screen reader only label"></button>
  • ARIA może wyrażać semantyczne relacje między elementami, które rozszerzają standardowe połączenie wydawcy nadrzędnego i podrzędnego, np. niestandardowy pasek przewijania do sterowania w określonym regionie.
    <div role="scrollbar" aria-controls="main"></div>
    <div id="main">
    . . .
    </div>
  • Dodatkowo ARIA może uatrakcyjnić fragmenty strony, natychmiast informują o tym, technologii wspomagających osoby z niepełnosprawnością.
    <div aria-live="polite">
      <span>GOOG: $400</span>
    </div>

Jednym z podstawowych aspektów systemu ARIA jest zbiór ról. Rola w terminach związanych z ułatwieniami dostępu to skrócony wskaźnik dla konkretnego interfejsu wzorcem. ARIA zawiera słownik wzorców, których można używać za pomocą funkcji role w dowolnym elemencie HTML.

Stosując role="checkbox" w poprzednim przykładzie, mówiliśmy, technologii wspomagającej osoby z niepełnosprawnością, aby element powinien znajdować się za polem wyboru. wzorcem. To gwarantujemy, że zostanie zaznaczone pole wyboru (zaznaczone lub nie) zaznaczono), a stan można przełączać za pomocą myszy lub spacji, jak w przypadku standardowego pola wyboru HTML.

Interakcje z klawiaturą są tak ważne w czytniku ekranu, pamiętaj, aby podczas tworzenia widżetu niestandardowego Atrybut role jest zawsze stosowany w tym samym miejscu co tabindex atrybutu; Dzięki temu zdarzenia klawiatury pojawiają się we właściwym miejscu ostrość skupia się na elemencie, jego rola jest prawidłowo oddana.

Specyfikacja ARIA opisuje taksonomia możliwych wartości dla atrybutu role i powiązanego z nim atrybutu ARIA które mogą być używane w połączeniu z tymi rolami. To jest najlepsze Źródło ostatecznych informacji o działaniu ról i atrybutów ARIA razem ze sobą oraz o tym, jak można ich używać w sposób obsługiwany przez przeglądarki technologiami wspomagającymi osoby z niepełnosprawnością.

Lista wszystkich dostępnych ról ARIA.

Specyfikacja jest jednak bardzo gęsta. łatwiejszym punktem wyjścia jest ARIA Dokument z zasadami tworzenia , w którym opisujemy sprawdzone metody korzystania z dostępnych ról ARIA oraz usług.

ARIA udostępnia też role punktów orientacyjnych, które rozszerzają opcje dostępne w HTML5. Zobacz projekt punktów orientacyjnych Wzorce , aby dowiedzieć się więcej.