Spojrzenie na standardy internetowe ARIA i dostępność aplikacji HTML
Prawdziwie otwarty i wszechstronny internet potrzebuje technologii, które pozwalają niepełnosprawnym użytkownikom polegającym na technologiach wspomagających korzystać z dynamicznych treści internetowych i nowoczesnych aplikacji internetowych. Standardy sieci W3C w zakresie dostępności mają na celu zapełnienie Internetu dostępnymi bogatymi aplikacjami internetowymi (ARIA), które użytkownicy niepełnosprawni mogą efektywnie wykorzystywać.
ARIA jest jednym z licznych standardów dostępności i wytycznych opublikowanych przez Web Accessibility Intitiative (WAI). Zapewnia dodatkowy znacznik, który można łatwo wstawić do dokumentów HTML. WAI-ARIA to wieloplatformowe rozwiązanie wieloplatformowe skierowane do platformy Open Web, więc nie tylko myśl o stronach internetowych, ale także o grach, rozrywce cyfrowej, opiece zdrowotnej, telefonii komórkowej i innych rodzajach aplikacji.
W tym poście przyjrzymy się, w jaki sposób można zwiększyć dostępność dokumentów HTML za pomocą standardów WAI-ARIA.
Ramy ARIA
Składnia HTML nie zawsze pozwala programistom poprawnie opisywać elementy, identyfikować ich role i określać relacje między nimi. Chociaż rzadko jest to problem dla odwiedzających, którzy są w pełni w posiadaniu zmysłów, może przeszkodzić użytkownikom technologii wspomagających w zrozumieniu tego, co dzieje się na ekranie i zbadaniu ich opcji.
To jest punkt, w którym ARIA przychodzi nam z pomocą, ponieważ umożliwia zdefiniowanie celu różnych elementów za pomocą przełomowe role, i opisz ich naturę atrybuty z prefiksem aria. Atrybuty z prefiksem Aria mają dwa typy: nieruchomości opisujące funkcje, których prawdopodobieństwo zmiany w całym cyklu życia strony jest mniejsze, oraz stany które dostarczają informacji o rzeczach, które mogą często zmieniać się w wyniku interakcji użytkownika.
Role punktów orientacyjnych
Role punktów orientacyjnych są najbardziej znanymi formami Roles Model ARIA (inne to abstrakcyjne role, role widgetów i role struktury dokumentów). Role punktów orientacyjnych umożliwiają programistom identyfikację dużych dostrzegalne regiony na stronie internetowej, do której użytkownicy technologii wspomagających mogą chcieć uzyskać szybki dostęp.
Istnieje 8 rodzajów głównych ról ARIA i należy je dodać jako atrybuty powiązanych znaczników HTML.
rola =”transparent”
Rola bannera jest przeznaczona głównie do treści związanych z całą witryną, a nie tylko do poszczególnych stron. Zazwyczaj jest dodawany jako atrybut do głównego nagłówka witryny dla logo i innych ważnych informacji w całej witrynie. Ważne jest, aby użyć roli bannera tylko raz w dowolnym dokumencie lub aplikacji HTML.
rola =”Główny”
Główna przełomowa rola związana jest z główną treścią dokumentu. Nie można go używać więcej niż raz na dowolnej stronie HTML. Zwykle następuje po Rola nawigacji służy do wskazania obszaru, który zawiera elementy nawigacyjne, takie jak łącza i listy w witrynie. Komplementarna rola charakterystyczna opisuje dodatkowe treści związane z główną treścią witryny. Musi być umieszczony na podobnym poziomie w hierarchii DOM, jak Rola contentinfo informuje agentów użytkownika o obecności regionu, w którym można znaleźć różne rodzaje metadanych, takich jak informacje o prawach autorskich, informacje prawne i oświadczenia o ochronie prywatności. Zwykle jest używany do stopki witryny. Rola w kształcie formularza wskazuje formularz oczekujący na wprowadzenie danych przez użytkownika. Do formularzy wyszukiwania należy użyć Rola wyszukiwania jest dość oczywista, ma na celu pomóc technologiom wspomagającym zidentyfikować funkcję wyszukiwania witryny. Możesz użyć głównej roli aplikacji dla regionu, który chcesz zadeklarować jako aplikację internetową, a nie dokumentu internetowego. Nie zaleca się umieszczania go w tradycyjnych witrynach internetowych, ponieważ sugeruje on technologie wspomagające, aby przełączyć się z normalnego trybu przeglądania do trybu przeglądania aplikacji. Tę przełomową rolę powinieneś używać tylko z wielką ostrożnością. Podczas gdy role umożliwiają definiowanie znaczenia znaczników HTML, stany i właściwości zapewniają użytkownikowi dodatkowe informacje na temat interakcji z nimi. Oba stany i właściwości są oznaczone atrybuty z prefiksem aria ze składnią aria-*. Najbardziej znanymi atrybutami ARIA są prawdopodobnie właściwości wymagane przez aria i stan sprawdzany przez aria. Wymagana aria to własność ponieważ jest to trwała funkcja elementu wejściowego (tzn. użytkownik musi go wypełnić), podczas gdy sprawdzanie arii to stan ponieważ pole wyboru może często zmieniać swoją wartość z powodu interakcji użytkownika. Stany i właściwości czasami przyjmują wartości tokena (ograniczony zestaw predefiniowanych wartości), na przykład właściwość aria-live może mieć 3 różne wartości: poza, uprzejmy, stanowczy. Składnia w tym przykładzie wygląda następująco: W innych przypadkach wartości atrybutów z prefiksem aria są reprezentowane przez smyczki, liczby, liczby całkowite, Identyfikatory ID lub prawda fałsz wartości. Użyj atrybutów relacji, aby wskazać relacje między różnymi elementami w witrynie, których nie można inaczej określić na podstawie struktury dokumentu. Na przykład Po ustawieniu przełomowej roli ARIA dla dostrzegalnego obszaru na stronie HTML, może on bardzo pomóc technologiom wspomagającym, jeśli zmienisz stany prefiksu ARIA i właściwości elementów potomnych zgodnie ze zdarzeniami na ekranie. Może to mieć kluczowe znaczenie, gdy użytkownicy muszą wchodzić w interakcję z witryną, na przykład wypełniając formularz lub uruchamiając zapytanie. Ogólna zasada projektowania dostępności polega na tym, że obecny stan interfejsu użytkownika zawsze musi być dostrzegalny przez technologie wspomagające. Na przykład, jeśli użytkownik wybierze opcję w formularzu, musi pojawić się jako wybrany dla technologii wspomagających. Można to łatwo osiągnąć, wykorzystując stan wybrany przez arię z następującą składnią: Wytyczne W3C WAI-ARIA Authoring Practices mogą dostarczyć wielu innych wspaniałych pomysłów dotyczących prawidłowej harmonizacji wizualnych i dostępnych interfejsów witryny. Używanie ról i atrybutów ARIA czasami może być zbędne. Kiedy używasz znaczników semantycznych HTML5, takich jak Na przykład nie ma potrzeby używania Formularz przełomową rolę do zdefiniowania Więc jeśli już dodałeś ukryty Atrybut HTML do wejścia formularza, nie trzeba dodawać ukryty w arii stan, ponieważ przeglądarka domyślnie to uwzględnia.. Ten ostatni został dodany do specyfikacji W3C w celu mapowania Główny Przełomowa rola ARIA dla semantycznego elementu HTML. rola =”nawigacja”
rola =”uzupełniający”
role = "main". Podobne posty, popularne artykuły, najnowsze komentarze są typowymi przykładami autonomicznych treści uzupełniających.rola =”contentinfo”
rola =”Formularz”
rola = „szukaj” zamiast.rola =”Szukaj”
rola =”podanie”
Stany i właściwości
Składnia atrybutów z prefiksem Aria
Jak korzystać ze stanów i właściwości ARIA
1. Buduj relacje między elementami z atrybutami relacji
aria-labelled przez właściwość identyfikuje element, który etykietuje bieżący element.aria-labelled przez - wśród wielu innych rzeczy - można powiązać nagłówki z przełomowymi regionami ARIA w następujący sposób:To jest nagłówek
Główna zawartość… 2. Synchronizuj stany i właściwości z cyklem życia elementu
3. Dopasuj wizualne i dostępne interfejsy
.Nie nadużywaj ARIA
lub , nowoczesne przeglądarki internetowe domyślnie dodają odpowiednią semantykę ARIA. W tym przypadku nie ma sensu osobno ustawić przełomowych ról ARIA. element. Zamiast tego składnia jest w zupełności wystarczająca do użycia tylko . Zbędne jest również używanie natywnych atrybutów HTML wraz z odpowiednim atrybutem ARIA.
