ARIA (Accessible Rich Internet Applications) to system atrybutów, które można dodawać do kodu strony, żeby ułatwić użytkownikom czytników ekranu korzystanie z niej.
Dzięki ARIA można określać role nietypowych elementów interfejsu, powodować, żeby istotne informacje były odczytywane automatycznie przez czytnik i itp.
Nieprawidłowo użyta, może jednak spowodować więcej problemów niż korzyści.
Złe przykłady
Kilka lat temu cała strona jednego z banków była oznaczona jako aplikacja (role=application), co sprawiało, że nie dało się jej czytać w trybie wirtualnego kursora.
Co jakiś czas zdarzają się strony, na których listy punktowane elementów treści są oznaczane role=list, co powoduje, że czytnik ekranu myśli, że taka lista jest kontrolką interfejsu (listą rozwijaną), więc pomija jej zawartość.
Na stronie wprost.pl jest dzięki ARIA automatycznie odczytywany widget z aktualnymi kursami walut, więc można zapomnieć o sensownym czytaniu treści artykułu, bo co sekundę dostajemy info o kursie GBP, EUR i innych, co skutecznie przerywa odczyt samego tekstu, albo przeglądanie elementów strony.
Problemy takie mogą pojawić się z dnia na dzień i z dnia na dzień zniknąć po jakiejś aktualizacji, więc powyższy portal, popsuty w chwili pisania tego tekstu, może działać całkiem poprawnie w momencie jego czytania.
Nie ma sposobu tymczasowego wyłączenia obsługi ARIA w przeglądarce lub czytniku ekranu, co byłoby optymalnym rozwiązaniem, więc pozostaje ignorować takie problemowe strony, albo jakoś sobie radzić z istniejącymi udziwnieniami.
Chyba, że nie da się ich ignorować.
Po problemach ze wspomnianym bankiem, napisałem dodatek dla Firefox, który usuwał znaczniki ARIA z kodu strony.
Później Mozilla zmieniła system tworzenia dodatków, więc rozwiązanieprzestało działać.
Co z tego, że pierwsza zasada ARIA mówi: nie używać, skoro i tak deweloperzy wiedzą lepiej i używają, często źle.
Gorzej, że często te błędy nie leżą po stronie twórców konkretnych portali, lecz autorów frameworków, czyli rozwiązań służących do ich łatwiejszego budowania. W takim przypadku dany błąd po aktualizacji frameworka będzie występował na dużej liczbie używających go stron.
Apple rozbija bank
Appstore connect, to portal Apple dla programistów, umożliwiający m.in. zarządzanie testowymi wersjami aplikacji.
Prosta operacja dodawania testerów do grupy, do niedawna działała dość poprawnie pod kontrolą czytnika ekranu.
Klikając ostatnio w przycisk „Add new testers” w oknie przeglądarki dostałem w trybie czytnika ekranu tylko adres dokumentu.
Tak się czasem dzieje, jeśli serwer ma awarię i nie może dostarczyć podstrony, więc po sprawdzeniu, że nie działa na FF i Chrome, postanowiłem poczekać na naprawienie usterki.
Następnego dnia problem nie ustąpił, więc spróbowałem go zbadać.
Włączenie ignorowania stylów, które czasem pomaga przy problemach dostępnościowych, nie pomogło.
Korzystając z narzędzia badania kodu strony ustaliłem, że treść strony jest generowana, ale też odkryłem coś, co mnie zaszokowało, czyli zapis:
<body ... aria-hidden="true">
Oznacza to ni mniej ni więcej, że na głównym elemencie dokumentu, został ustawiony atrybut aria-hidden, nakazujący czytnikowi ekranu ignorować cały element, czyli cały dokument.
Z czymś takim się nigdy wcześniej nie spotkałem – brawo Apple, a może błąd dotyczy używanego przez nich frameworka.
Pewnie naprawią w dłuższym lub krótszym czasie, ale ten przypadek skłonił mnie do intensywnego przemyślenia możliwych rozwiązań.
Co robić, jak żyć?
- Zgłaszanie problemu twórcom stron to jest dobry pomysł, ale nie zawsze jest z nimi kontakt, niekoniecznie też będą potrafili problem zdiagnozować i usunąć.
- Dodatek do przeglądarki tymczasowo usuwający ARIA jest rozwiązaniem specyficznym dla konkretnego narzędzia.
- Dodatek do czytnika ekranu, realizujący tę samą funkcję, mógłby działać w wielu przeglądarkach, chociaż też byłby specyficzny dla konkretnego czytnika. Nie wiem, czy w używanym przeze mnie NVDA da się to szybko oprogramować.
Jednak coś trzeba z tym zrobić, a ekspertom od dostępności polecam zwracać szczególną uwagę na tę grupę problemów związanych z nieprawidłowym używaniem ARIA.
CDN.
Linki zewnętrzne
Accessible Rich Internet Applications (WAI-ARIA) 1.1 – W3C Recommendation
Dziękuję za wprowadzenie w temat ARIA i wskazanie zarówno jego zalet, jak i potencjalnych problemów. Widać, że jest to obszar wymagający dużej uwagi i ostrożności ze strony deweloperów. Gratuluję także pomysłu na dodatek do przeglądarki, który mógł pomóc w rozwiązaniu problemu. Liczę, że w przyszłości uda się stworzyć lepsze rozwiązania w zakresie ARIA, aby zwiększyć dostępność stron internetowych dla użytkowników korzystających z czytników ekranu.
Dziękuję za zainteresowanie tematem. Okazało się, że taki dodatek już powstał dość dawno temu dla Firefox, jest to AxsHammer[1].
Co do lepszych rozwiązań, to nawet najlepsze z nich będzie mogło być użyte w niewłaściwy sposób, a ARIA sama w sobie jest dobrze przemyślana, tylko źle używana.
[1]: https://addons.mozilla.org/pl/firefox/addon/axshammer/