W ubiegłym roku, w badaniu Kuby Dębskiego “Kto zajmuje się dostępnością cyfrową w Polsce - 2019” przy pytaniu o “Znajomość ARIA” musiałem zaznaczyć odpowiedź: “Świetnie, widziałem jak zabiła Nocnego Króla”. Owszem wiedziałem czym jest WAI-ARIA i po co się ją stosuje, jednak moja praktyczna znajomość tej technologii była bardzo mała. Można powiedzieć, że polegała głównie na ustawianiu na chybił trafił atrybutów role i aria, tak by czytnik ekranu wypowiedział mniej więcej to co chciałem. Zresztą nadal uważam, że ARIA to coś czego znajomość mogę określić raczej jako średnią.
Chcąc dowiedzieć się więcej o WAI-ARIA zerknąłem kiedyś na strony W3C gdzie znalazłem dokument o nazwie WAI-ARIA Authoring Practices. Jedną z rzeczy, która utkwiła mi wtedy w pamięci był tytuł sekcji: “No ARIA is better than Bad ARIA” (Brak ARIA jest lepszy niż zła ARIA).
Ostatnio przeglądając kod projektu, przy którym pracuję, trafiłem na doskonały przykład braku zrozumienia jak działają atrybuty ARIA i dlaczego nie używanie ich jest lepsze niż ich błędne użycie. Problematycznym elementem był link prowadzący do koszyka. Przedstawiał on ikonę wózka sklepowego i czerwone koło z liczbą pokazującą ilością produktów w koszyku.
Fragment tego kodu wyglądał mniej więcej tak:
<a href="/koszyk" class="cart">
<span class="icon-cart"></span>
<span class="sr-only">Twój koszyk</span>
<span class="item-quantity" aria-label="Ilość produktów w koszyku">5</span>
</a>
Autor prawdopodobnie błędnie założył, żę atrybut aria-label spowoduje dodnie tekst do danego elementu, podczas gdy jego zadaniem jest zastąpienie treści elementu. W związku z tym zamiast zamierzonego “Twój koszyk, Ilość produktów w koszyku 5” otrzymamał “Twój koszyk, Ilość produktów w koszyku”. Odbierając użytkownikowi korzystającemu z czytnika możliwość dowiedzenia się ile produktów obecnie znajduje się w koszyku.
Co ciekawe, NVDA pomija czytanie aria-label wewnątrz elementu znajdującego się w linku i odczytuje “Twój koszyk 5”
Rozwiązaniem tego problemu może być przeniesienie tekstu z atrybutu aria-label do elementu span przeznaczonego do odczytu tylko dla czytników ekranu.
<a href="/koszyk" class="cart">
<span class="icon-cart"></span>
<span class="sr-only">Twój koszyk, ilość produktów w koszyku:</span>
<span class="item-quantity">5</span>
</a>
W tym przypadku czytnik ekranu odczyta “Twój koszyk, ilość produktów w koszyku: 5”
Gdyby ktoś szukał informacji o WAI ARIA to oprócz WAI-ARIA Authoring Practices na stronach W3C można znaleźć dwa inne bardzo przydatne dokumenty: