ARIA i HTML

Większość programistów zna standardowy język znaczników naszego nowoczesnego narzędzia internet, HyperText Markup Language (HTML). Możesz jednak nie znać Aplikacje z dostępem do multimediów (ARIA) (Oficjalna nazwa WAI-ARIA): co to jest, jak jest używane oraz kiedy – a kiedy nie – aby z nich korzystać.

HTML i ARIA odgrywają ważną rolę w ułatwianiu dostępu do produktów cyfrowych, zwłaszcza w przypadku technologii wspomagających osoby z niepełnosprawnością (AT), takich jak czytniki ekranu. Oba służą do konwertowania treści na alternatywny format, na przykład na alfabet Braille'a Usługa Text-to-Speech (TTS).

Omówmy teraz krótką historię ARIA, jej znaczenie oraz czas i sposób z jednej strony.

Wprowadzenie do ARIA

Metoda ARIA została opracowana po raz pierwszy w 2008 r. Grupa Web Accessibility Initiative (WAI): podzbioru nadrzędnego konsorcjum World Wide Web Consortium (W3C), który reguluje reguluje internet.

ARIA nie jest prawdziwym językiem programowania, ale zbiorem atrybutów, do których można dodawać elementy HTML, aby zwiększyć ich dostępność. Te atrybuty komunikują się roli, stanu i właściwości na potrzeby technologii wspomagających osoby z niepełnosprawnością za pomocą interfejsów API ułatwień dostępu. dostępnych w nowoczesnych przeglądarkach. Komunikacja odbywa się przez ułatwienia dostępu drzewo.

„WAI-ARIA, Accessible Rich Internet Applications Suite określa sposób treści i aplikacji internetowych, które są bardziej przystępne dla osób z niepełnosprawnościami. it szczególnie przydatne w przypadku zawartości dynamicznej i zaawansowanych elementów interfejsu użytkownika opracowanych za pomocą HTML, JavaScriptu i powiązanych technologii”.

Grupa WAI

Drzewo ułatwień dostępu

ARIA modyfikuje nieprawidłowy lub niekompletny kod, by zapewnić lepsze wrażenia użytkownikom osób korzystających z AT przez zmianę, ujawnienie i rozszerzenie części ułatwień dostępu. drzewo.

Drzewo ułatwień dostępu jest tworzone przez przeglądarkę na podstawie Drzewo obiektu Document Object Model (DOM). Podobnie jak drzewo DOM, drzewo ułatwień dostępu zawiera obiekty reprezentujące wszystkie elementy znaczników, atrybuty i tekst węzłów. Drzewo ułatwień dostępu jest też używane przez funkcje ułatwień dostępu na poszczególnych platformach Interfejsy API w celu przedstawienia w sposób zrozumiały dla technologii wspomagających osób z niepełnosprawnością.

Sama w standardzie ARIA nie zmienia funkcjonalności ani wyglądu elementu. Oznacza to, że tylko użytkownicy AT zauważą różnice między produktem cyfrowym ARIA i jeden bez niej. Oznacza to też, że odpowiedzialność za to, kto jest odpowiedzialny, za wprowadzenie odpowiednich zmian w kodzie i stylu, tak aby element w jak najszerszym zakresie.

Trzy główne funkcje ARIA to role, właściwości oraz stany/wartości.

Role określają, co element jest lub robi na stronie lub w aplikacji.

<div role="button">Self-destruct</div>

Właściwości określają cechy lub relacje z obiektem.

<div role="button" aria-describedby="more-info">Self-destruct</div>

<div id="more-info">This page will self-destruct in 10 seconds.</div>

Stany/wartości określają bieżące warunki lub wartości danych powiązane z elementem.

<div role="button" aria-describedby="more-info" aria-pressed="false">
  Self-destruct
</div>

<div id="more-info">
  This page will self-destruct in 10 seconds.
</div>

Choć wszystkie 3 elementy ARIA można wykorzystać w jednym wierszu kodu, Zamiast tego nakładaj na siebie role, właściwości i stany/wartości ARIA, dopóki nie zrealizował ostateczny cel związany z ułatwieniami dostępu. Prawidłowe zastosowanie ARIA w zapewnia użytkownikom AT dostęp do wszystkich informacji korzystać z Twojej witryny, aplikacji lub innego produktu cyfrowego zgodnie z zasadami.

W Narzędziach deweloperskich w Chrome wprowadziliśmy niedawno funkcje zobacz pełne drzewo ułatwień dostępu co ułatwia programistom zrozumienie wpływu ich kodu. ułatwienia dostępu.

Kiedy używać ARIA

W 2014 r. organizacja W3C oficjalnie opublikowała rekomendację HTML5. Już jest duże zmiany, takie jak dodanie elementów orientacyjnych, takich jak <main>, <header>, <footer>, <aside>, <nav> oraz atrybuty takie jak hidden i required Te nowe elementy i atrybuty HTML5 w połączeniu obsługi przeglądarek, niektóre elementy ARIA mają teraz mniejsze znaczenie.

Gdy przeglądarka obsługuje tag HTML z niejawną rolą z ARIA nie trzeba zazwyczaj dodawać do elementu ARIA. Jednak ARIA nadal obejmuje wiele ról, stanów i usług, które są niedostępne w żadnej wersji HTML. Te atrybuty są na razie przydatne.

Tu pojawia się najważniejsze pytanie: kiedy należy używać ARIA? Na szczęście grupa WAI opracowała 5 reguł ARIA, które pomogą Ci określić, aby elementy stały się dostępne.

Reguła 1. Nie używaj ARIA

Tak, zgadza się. Dodanie ARIA do elementu nie powoduje automatycznie przy ułatwieniach dostępu. Coroczny raport o ułatwieniach dostępu WebAIM Million stwierdziliśmy, że strony główne z ARIA wykrywają średnio o 70% więcej błędów niż te bez ARIA, z powodu nieprawidłowej implementacji atrybutów ARIA.

Istnieją wyjątki od tej reguły. Identyfikator ARIA jest wymagany, gdy element HTML nie obsługuje ułatwień dostępu. Być może projekt nie lub elementu HTML, albo żądana funkcja/działanie nie jest dostępne w języku HTML. Takie sytuacje powinny być jednak rzadkością.

<a role="button">Submit</a>

<button>Submit</button>

W razie wątpliwości użyj semantycznych elementów HTML.

Reguła 2. Nie dodawaj (niepotrzebnych) ARIA do kodu HTML

W większości przypadków elementy HTML działają od razu po uruchomieniu i nie wymagają dodawania do nich dodatkowych elementów ARIA. Deweloperzy korzystający z ARIA często muszą dodawać dodatkowy kod, aby w przypadku elementów interaktywnych działały prawidłowo.

<h2 role="tab">Heading tab</h2>

<div role="tab"><h2>Heading tab</h2></div>

Aby wykonywać mniej pracy i uzyskać lepszy kod, używaj elementów HTML jako: zamierzone.

Reguła 3. Zawsze obsługuj nawigację za pomocą klawiatury

Wszystkie interaktywne (niewyłączone) elementy sterujące ARIA muszą być dostępne przy użyciu klawiatury. Ty można dodać tabindex= "0" do dowolnego elementu, który wymaga wyróżnienia. odbierać fokus za pomocą klawiatury. Unikaj używania indeksów tabulacji z dodatnimi liczby całkowite w miarę możliwości, aby zapobiec potencjalnym problemom z kolejnością zaznaczenia.

<span role="button" tabindex="1">Submit</span>

<span role="button" tabindex="0">Submit</span>

Reguła 4. Nie ukrywaj elementów, które można zaznaczyć

Nie dodawaj atrybutów role= "presentation" ani aria-hidden= "true" do elementów, które wymagają aby mieć zaznaczenie, w tym elementy z atrybutem tabindex= "0". Po dodaniu tych ról/stanów, wysyła do AT komunikat, że te są mało ważne i można je pominąć. Może to wprowadzać w błąd lub zakłócania interakcji użytkowników z elementem.

<div aria-hidden="true"><button>Submit</button></div>

<div><button>Submit</button></div>

Reguła 5. Używaj nazw elementów interaktywnych na potrzeby ułatwień dostępu

Przeznaczenie elementu interaktywnego musi zostać najpierw przekazane użytkownikowi wiedzą, jak z niej korzystać. Upewnij się, że wszystkie elementy mają atrybut nazwa ułatwień dostępu dla osób korzystających z AT urządzenia.

Nazwą z ułatwieniami dostępu mogą być treści otoczone elementem (w przypadku <a>), tekst zastępczy lub etykietę.

W każdym z tych przykładów kodu dostępna nazwa to „Czerwona skóra”. buty”.

<!-- A plain link with text between the link tags. -->
<a href="shoes.html">Red leather boots</a>

<!-- A linked image, where the image has alt text. -->
<a href="shoes.html"><img src="shoes.png" alt="Red leather boots"></a>

<!-- A checkbox input with a label. -->
<input type="checkbox" id="shoes">
<label for="shoes">Red leather boots</label>

Jest wiele sposobów na sprawdzenie dostępnej nazwy elementu. Możesz na przykład sprawdzić drzewo ułatwień dostępu za pomocą Narzędzi deweloperskich w Chrome lub przetestować je przy użyciu czytnika ekranu.

ARIA w kodzie HTML

Chociaż używanie samych elementów HTML jest sprawdzoną metodą, elementy ARIA można dodawane w określonych sytuacjach. Możesz na przykład połączyć ARIA z HTML w które wymagają wyższego poziomu obsługi AT ze względu na lub jako metodę zastępczą w przypadku elementów HTML, które nie są w pełni obsługiwane przez wszystkie przeglądarki.

Oczywiście istnieją zalecenia dotyczące implementacji ARIA w HTML. Najważniejsze: nie zastępuj domyślnych ról HTML, ogranicz nadmiarowość i pamiętaj o niezamierzonych efektach ubocznych.

Przyjrzyjmy się kilku przykładom.

<a role="heading">Read more</a>

<a aria-label="Read more about some awesome article title">Read More</a>

<ul role="list">...</ul>

<ul>...</ul>

<details>
  <summary role="button">more information</summary>
  ...
</details>

<details>
  <summary>more information</summary>
  ...
</details>

Złożoność ARIA

Interfejs ARIA jest skomplikowany i należy zawsze zachować ostrożność podczas korzystania z niego. Natomiast które przykłady kodu z tej lekcji są dość proste, wzory niestandardowe mogą szybko się skomplikować.

Jest wiele rzeczy, na które trzeba zwrócić uwagę, w tym między innymi: interakcje z klawiaturą, interfejsy dotykowe, obsługa AT/przeglądarki, potrzeby tłumaczenia, ograniczenia środowiskowe, starszy kod i preferencje użytkownika. Raczej dobrze w przypadku programowania wiedzy o kodowaniu może być szkodliwe – lub po prostu irytujące – nieprawidłowo. Pamiętaj, że kod musi być prosty.

Pomijając te ostrzeżenia, dostęp do informacji cyfrowych nie wystarczy. jest to widmo, które dopuszcza niektóre szare obszary, takie jak ten. Kilka rozwiązań do kodowania można uznać za „prawidłowe”, w zależności od sytuacji. Ważne jest, aby ciągle się uczyć, testować i dostosowywać do naszych bardziej otwarty na wszystkich użytkowników.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o ARIA i HTML