Na pierwszy rzut oka dostępność obrazów może się wydawać prostym tematem – dodajesz do obrazu tekst alternatywny i gotowe. Jednak jest to bardziej złożony problem, niż się niektórym wydaje. W tej sekcji omówimy:
- jak zaktualizować kod, aby obrazy były dostępne;
- jakie informacje należy udostępniać użytkownikom i gdzie to robić;
- dodatkowe sposoby na ulepszenie obrazów, aby były bardziej dostępne dla osób z niepełnosprawnościami.
Cel i kontekst obrazu
Zanim napiszesz choćby jedną linijkę kodu, zastanów się, jaki jest cel obrazu, gdzie będzie się znajdować i jak będzie używany. Odpowiedzi na te pytania pomogą Ci określić, jak najlepiej przekazać informacje osobie korzystającej z technologii wspomagającej osoby z niepełnosprawnością (AT), takich jak czytnik ekranu.
Zadaj sobie te pytania:
- Czy obraz jest niezbędny do zrozumienia kontekstu funkcji lub strony?
- Jakie informacje ma przekazywać obraz?
- Czy obraz jest prosty czy złożony?
- Czy obraz wywołuje emocje lub zachęca użytkownika do działania?
- A może obraz jest tylko wizualnym „cukierkiem” bez konkretnego celu?
Wizualny schemat blokowy, np. drzewo decyzyjne dotyczące obrazów, może Ci pomóc zdecydować, do której kategorii należy Twój obraz.
Spróbuj ukryć obrazy w witrynie lub aplikacji internetowej za pomocą rozszerzenia przeglądarki lub innych metod. Następnie zadaj sobie pytanie: „Czy rozumiem pozostałą treść?”. Jeśli odpowiedź brzmi „tak”, najprawdopodobniej jest to obraz dekoracyjny. Jeśli nie, obraz jest w jakiś sposób informacyjny i niezbędny w kontekście. Gdy określisz cel obrazu, możesz wybrać najdokładniejszy sposób jego zakodowania.
Obrazy dekoracyjne
Obraz dekoracyjny to element wizualny, który nie dodaje dodatkowego kontekstu ani informacji pozwalających użytkownikowi lepiej zrozumieć kontekst. Obrazy dekoracyjne są dodatkowe i mogą służyć raczej do nadania stylu niż do przekazania treści.
Jeśli zdecydujesz, że obraz jest dekoracyjny, musi on być programowo ukryty przed technologiami wspomagającymi. Gdy zaprogramujesz ukrywanie obrazu, technologia wspomagająca otrzyma sygnał, że obraz nie jest potrzebny do zrozumienia treści, kontekstu ani działania na stronie. Istnieje wiele sposobów na ukrycie obrazów, m.in. użycie pustego lub zerowego tekstu alternatywnego, zastosowanie ARIA lub dodanie obrazu jako tła CSS. Oto kilka przykładów ukrywania obrazu dekoracyjnego przed użytkownikami.
Pusty lub wartość null alt
Pusty lub zerowy atrybut tekstu alternatywnego różni się od brakującego atrybutu tekstu alternatywnego. Jeśli atrybut tekstu alternatywnego jest nieobecny, technologia wspomagająca może odczytać nazwę pliku lub otaczającą treść, aby przekazać użytkownikowi więcej informacji o obrazie.
Rola ustawiona na presentation lub none
Rola ustawiona na
presentation lub none
usuwa semantykę elementu z drzewa dostępności.
Z kolei aria-hidden= "true"
usuwa cały element i wszystkie jego elementy podrzędne z
interfejsu API dostępności.
<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">
Używaj aria-hidden ostrożnie, ponieważ może ukryć elementy, których nie chcesz ukryć.
Obrazy w CSS
Gdy dodasz obraz tła za pomocą CSS, czytnik ekranu nie będzie mógł wykryć pliku obrazu. Zanim zastosujesz tę metodę, upewnij się, że chcesz ukryć obraz.
Obrazy informacyjne
Obraz informacyjny to obraz, który przekazuje koncepcję, pomysł lub emocje. Obrazy informacyjne obejmują zdjęcia obiektów ze świata rzeczywistego, niezbędne ikony, proste rysunki i obrazy tekstu.
Jeśli obraz jest informacyjny, należy dodać programowy tekst alternatywny opisujący jego cel. Alternatywne opisy obrazów, często skracane do „tekst alternatywny”, zapewniają użytkownikom technologii wspomagających więcej kontekstu dotyczącego obrazu i pomagają im lepiej zrozumieć jego przekaz lub intencję.
Możesz dodawać alternatywne opisy do
<img> elementów
dodając atrybut alt. Dotyczy to wszystkich typów plików, w tym JPG, PNG i SVG.
<img src=".../Ladybug_Swarm.jpg"
alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">
Gdy używasz elementów <svg> w tekście, musisz jednak zwrócić szczególną
uwagę na dostępność. Pliki SVG są kodowane semantycznie, więc technologia wspomagająca domyślnie je pomija.
Jeśli SVG jest obrazem dekoracyjnym, nie ma problemu – technologia wspomagająca zignoruje go zgodnie z oczekiwaniami. Jeśli jednak SVG jest obrazem informacyjnym, dodaj do elementu ARIA
role="img", aby technologia wspomagająca rozpoznała go jako obraz.
Po drugie, elementy <svg> nie używają atrybutu alt, więc
do dodawania alternatywnych opisów do obrazów informacyjnych należy
używać innych metod kodowania.
<svg role="img">
<title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>
Obrazy funkcjonalne
Obraz funkcjonalny jest powiązany z działaniem. Przykładem obrazu funkcjonalnego jest logo, które prowadzi do strony głównej, lupa używana jako przycisk wyszukiwania lub ikona mediów społecznościowych, która przekierowuje do innej witryny lub aplikacji.
Podobnie jak obrazy informacyjne, obrazy funkcjonalne muszą zawierać alternatywny opis, który informuje wszystkich użytkowników o ich celu. W przeciwieństwie do obrazu informacyjnego każdy obraz funkcjonalny musi opisywać działanie obrazu, a nie aspekty wizualne.
W przykładzie z logo obraz jest zarówno informacyjny, jak i interaktywny, ponieważ jest obrazem, który przekazuje informacje i działa jako link. W takich przypadkach możesz dodać alternatywne opisy do każdego elementu, ale nie jest to wymagane.
Jednym ze sposobów dodawania alternatywnych opisów do obrazów jest użycie tekstu ukrytego wizualnie. Gdy używasz tej metody, tekst jest odczytywany przez czytniki ekranu, ponieważ znajduje się w DOM, ale jest ukryty wizualnie za pomocą niestandardowego CSS.
Z fragmentu kodu widać, że „Przejdź do strony głównej” to tytuł kontenera, a tekst alternatywny obrazu to „Piękne biedronki na Twój trawnik”. Gdy odsłuchasz kod logo za pomocą czytnika ekranu, usłyszysz zarówno element wizualny, jak i działanie przekazywane na jednym obrazie.
<div title="Navigate to the homepage">
<a href="/">
<img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
</a>
</div>
Obrazy złożone
Obraz złożony często wymaga więcej wyjaśnień niż obraz dekoracyjny, informacyjny lub funkcjonalny. Do przekazania pełnego komunikatu potrzebny jest zarówno krótki, jak i długi opis alternatywny. Obrazy złożone obejmują infografiki, mapy, wykresy i złożone ilustracje.
Podobnie jak w przypadku innych typów obrazów, istnieje kilka metod dodawania alternatywnych opisów do obrazów złożonych.
<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>
Jednym ze sposobów na dodanie dodatkowych wyjaśnień do obrazu jest dodanie linku do zasobu lub linku do dłuższego wyjaśnienia na stronie. Ta metoda jest dobrym rozwiązaniem nie tylko dla użytkowników technologii wspomagających, ale też dla osób z niepełnosprawnościami, takimi jak niepełnosprawność poznawcza, trudności w uczeniu się i czytaniu, które mogą skorzystać z dodatkowych informacji o obrazie dostępnych na ekranie, a nie ukrytych w kodzie.
Inną metodą jest dodanie atrybutu aria-describedby do elementu
<img>. Możesz programowo połączyć obraz z identyfikatorem zawierającym dłuższy opis. Ta metoda tworzy silne powiązanie między obrazem a pełnym opisem. Rozszerzony opis może być wyświetlany na ekranie lub ukryty wizualnie, ale warto go pozostawić widocznym, aby dotrzeć do jeszcze większej liczby osób.
Innym sposobem na grupowanie krótkich opisów alternatywnych z dłuższym jest użycie
elementów<figure> i <figcaption>. Te elementy działają podobnie jak aria-describedby, ponieważ semantycznie grupują elementy, tworząc silniejsze powiązanie między obrazem a jego opisem.
Dodanie ARIA role="group" zapewnia zgodność wsteczną ze starszymi przeglądarkami, które nie obsługują semantyki elementu <figure>.
Sprawdzone metody dotyczące tekstu alternatywnego
Oczywiście samo dodanie tekstu zastępczego nie wystarczy. Tekst powinien być też zrozumiały. Jeśli na przykład obraz przedstawia rój biedronek obgryzających liście Twojego ulubionego krzewu róż, ale tekst alternatywny brzmi „owady”, czy przekazuje on pełny komunikat i intencję obrazu? Zdecydowanie nie.
Opisy alternatywne muszą zawierać jak najwięcej istotnych informacji wizualnych i być zwięzłe. Nie ma ograniczenia liczby znaków, które może odczytać czytnik ekranu, ale zwykle zaleca się, aby tekst alternatywny nie przekraczał 150 znaków, aby uniknąć zmęczenia czytelnika. Jeśli chcesz dodać do obrazu dodatkowy kontekst, możesz użyć jednego z wzorców obrazów złożonych, dodać tekst podpisu lub dokładniej opisać obraz w głównym tekście.
Dodatkowe sprawdzone metody dotyczące tekstu alternatywnego praktyki:
- W opisie unikaj słów takich jak „obraz” lub „zdjęcie”, ponieważ czytnik ekranu sam zidentyfikuje te typy plików.
- Podczas nazywania obrazów staraj się zachować jak największą spójność i dokładność. Nazwy obrazów są używane, gdy brakuje tekstu alternatywnego lub jest on ignorowany.
- W nazwach obrazów i tekście alternatywnym unikaj znaków innych niż alfanumeryczne (np. #, 9, &) i używaj myślników zamiast podkreśleń.
- W miarę możliwości używaj prawidłowej interpunkcji. Bez niej opisy obrazów będą brzmieć jak jedno długie, niekończące się zdanie.
- Pisz tekst alternatywny jak człowiek, a nie jak robot. Upychanie słów kluczowych nie przynosi korzyści nikomu – użytkownicy czytników ekranu będą zirytowani, a algorytmy wyszukiwarek nałożą na Ciebie karę.