Grafika, grafika klikalne
W sklepach internetowych zdjęcia robią ogromną robotę. Pokazują kolor, krój, fakturę, układ przycisków, opakowanie, czasem nawet to, czy dany produkt w ogóle jest tym, czego szukamy. Problem zaczyna się wtedy, gdy dla czytnika ekranu te zdjęcia są tylko komunikatem: „grafika”, „graphic 153428” albo „grafika klikalne”.
Dla osoby widzącej to jest galeria produktu. Dla osoby korzystającej z czytnika ekranu może to być kilka albo kilkanaście elementów, z których nie wynika prawie nic. Da się wejść na stronę, da się przejść po elementach, ale trudno podjąć normalną decyzję zakupową. I to nie dlatego, że użytkownik nie potrafi korzystać ze strony. Po prostu strona nie mówi mu tego, co pokazuje innym.
Nie musi tak być. Obrazek produktu może mieć krótki, sensowny opis. Nie każdy opis musi być poematem. Jeśli sklep sprzedaje buty, opis zdjęcia może powiedzieć, że to czarne buty sportowe z białą podeszwą i sznurowaniem. Jeśli zdjęcie jest tylko ozdobą, można je ukryć przed czytnikiem ekranu pustym tekstem alternatywnym. Jeśli obrazek działa jak przycisk albo link, opis powinien mówić, co ten przycisk robi, a nie jak wygląda ikonka.
Tak, to oznacza trochę więcej pracy i trochę więcej kodu. Trzeba pomyśleć, które grafiki coś wnoszą, które są dekoracyjne, a które są elementami obsługi strony. Ale w zamian sklep, serwis albo aplikacja przestaje być loterią. Więcej osób może zrozumieć ofertę, porównać produkty i samodzielnie zrobić to, po co przyszły.
Dostępność nie polega na tym, żeby usunąć zdjęcia ze stron. Zdjęcia są potrzebne i wielu osobom pomagają. Chodzi raczej o to, żeby informacja pokazana obrazem nie znikała dla tych, którzy obrazu nie widzą. Dobry tekst alternatywny jest trochę jak cichy tłumacz: nie robi przedstawienia, ale pozwala zrozumieć, co jest na rzeczy.
Najbardziej lubię proste zasady. Zdjęcie produktu? Opisz to, co ma znaczenie przy wyborze. Ikona-przycisk? Opisz działanie. Ozdobnik? Nie zmuszaj czytnika ekranu do czytania dekoracji. To naprawdę nie jest magia. To zwykła uprzejmość wpisana w kod.