Na pierwszy rzut oka łatwo dostępne obrazy mogą wydawać się proste – wystarczy dodać do obrazu „tekst alternatywny” i gotowe. Jednak temat jest bardziej złożony, niż myślisz. W tej sekcji omówimy:
- Jak zaktualizować kod, aby umożliwić dostęp do obrazów.
- jakie informacje należy udostępniać użytkownikom i gdzie.
- Dodatkowe sposoby na ulepszenie zdjęć dla osób z niepełnosprawnościami.
Przeznaczenie i kontekst obrazu
Zanim zostanie napisany nawet 1 wiersz kodu, musisz zastanowić się nad tym, jaki jest punkt obrazu i jak będzie on używany. Zadaj sobie pytania na temat przeznaczenia i kontekstu obrazu, aby dowiedzieć się, jak najlepiej przekazać informacje osobie za pomocą technologii wspomagającej osoby z niepełnosprawnością (AT), np. czytników ekranu.
Możesz zadać sobie pytanie:
- Czy obraz jest niezbędny do zrozumienia kontekstu funkcji lub strony?
- Jaki rodzaj informacji ma przekazać obraz?
- Czy obraz jest prosty czy złożony?
- Czy obraz wywołuje emocje lub skłania użytkownika do działania?
- A może jest to tylko wizualne cukierki dla oczu bez żadnego celu?
Wizualny schemat blokowy, taki jak drzewo decyzyjne dotyczące obrazu, pomoże Ci zdecydować, do której kategorii należy obraz.
Spróbuj ukryć obrazy w witrynie lub aplikacji internetowej, korzystając z rozszerzenia przeglądarki lub w inny sposób. Następnie zadaj sobie pytanie „Czy rozumiem treści, które pozostają?” Jeśli odpowiedź brzmi „tak”, najprawdopodobniej jest to obraz dekoracyjny. W przeciwnym razie obraz przedstawia w jakiś sposób informacje oraz jest niezbędny pod względem kontekstu. Po określeniu przeznaczenia obrazu możesz znaleźć najdokładniejszy sposób jego kodowania.
Obrazy dekoracyjne
Obraz dekoracyjny to element wizualny, który nie dodaje kontekstu ani informacji, które pomagają użytkownikom lepiej zrozumieć kontekst. Zdjęcia dekoracyjne są uzupełnieniem i mogą pokazać styl, a nie substancję.
Jeśli zdecydujesz, że obraz ma charakter dekoracyjny, należy go automatycznie ukrywać przed reklamami AT. Zaprogramowanie, że obraz ma być ukryty, jest sygnałem dla dostawcy treści, że nie jest on potrzebny do zrozumienia treści, kontekstu ani działania na stronie. Jest wiele sposobów na ukrycie obrazów, w tym użycie alternatywnej pustej/null tekstu, zastosowanie funkcji ARIA lub dodanie obrazu jako tła CSS. Poniżej znajdziesz kilka przykładów ukrycia obrazu dekoracyjnego przed użytkownikami.
Pusta lub wartość null alt
Pusty/null atrybut tekstu alternatywnego różni się od brakującego atrybutu tekstu alternatywnego. Jeśli nie ma atrybutu tekstu alternatywnego, dostawca może odczytać nazwę pliku lub otaczającą go zawartość, aby przekazać użytkownikowi więcej informacji o obrazie.
Rola ustawiona na presentation lub none
Rola ustawiona na presentation lub none usuwa semantyka elementu z ekspozycji na drzewo ułatwień dostępu. Tymczasem aria-hidden= "true" usunie cały element i wszystkie jego elementy podrzędne z interfejsu Accessibility API.
<!-- 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">
Zachowaj ostrożność podczas korzystania z elementu aria-hidden, ponieważ może to spowodować ukrycie elementów, których nie chcesz ukryć.
Obrazy w CSS
Gdy dodasz obraz tła za pomocą CSS, czytnik ekranu nie wykryje pliku obrazu. Przed zastosowaniem tej metody upewnij się, że obraz został ukryty.
Obrazy informacyjne
Obraz informujący to obraz, który przekazuje prostą koncepcję, koncepcję lub emocje. Rodzaje obrazów zawierających przydatne informacje to m.in. zdjęcia rzeczywistych obiektów, najważniejszych ikon, proste rysunki i obrazy tekstu.
Jeśli obraz zawiera treści informacyjne, należy dołączyć automatyczny tekst zastępczy opisujący jego przeznaczenie. Alternatywne opisy obrazów – często w skrócie „tekst alternatywny” – dostarczają użytkownikom w USA szerszego kontekstu na temat obrazu i pomagają im lepiej zrozumieć przekaz lub intencję obrazu.
Proste opisy alternatywne z użyciem elementów <img> można uzyskać dzięki dodaniu atrybutu alt niezależnie od typu pliku, do którego on wskazuje, np. .jpg, .png, .svg i inne.
<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">
Jeśli jednak używasz elementów <svg> w tekście, trzeba zwrócić uwagę na ułatwienia dostępu.
Po pierwsze, pliki SVG są kodowane semantycznie, więc AT domyślnie je pomija.
Jeśli masz obraz dekoracyjny, nie jest to problemem – AT zignoruje go zgodnie z oczekiwaniami. Jeśli jednak masz obraz informacyjny, parametr ARIA role="img" musi zostać dodany do wzorca, aby usługa AT rozpoznawała go jako obraz.
Po drugie, elementy <svg> nie korzystają z atrybutu alt, dlatego aby dodać alternatywne opisy do obrazów informacyjnych, użyj innych metod kodowania.
<svg role="img"...>
<title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>
Obrazy funkcjonalne
Obraz działający jest powiązany z działaniem. Przykładem działającego obrazu może być logo, które prowadzi do strony głównej, lupa używana jako przycisk wyszukiwania lub ikona mediów społecznościowych przekierowująca do innej witryny lub aplikacji.
Podobnie jak obrazy informacyjne, obrazy funkcjonalne muszą zawierać alternatywny opis, który informuje wszystkich użytkowników o swoim przeznaczeniu. W przeciwieństwie do obrazów informacyjnych każdy obraz funkcjonalny musi opisywać działanie, a nie aspekty wizualne.
Przykład logo ma charakter informacyjny i daje możliwość podjęcia działań, ponieważ jest zarówno obrazem, który przekazuje informacje, jak i działa jak link. W takich przypadkach do każdego elementu możesz dodać alternatywne opisy, ale nie jest to obowiązkowe.
Jednym ze sposobów dodawania alternatywnych opisów do obrazów jest wizualnie ukryty tekst. W przypadku tej metody tekst jest odczytywany przez czytniki ekranu, ponieważ znajduje się on w modelu DOM, ale jest ukryty za pomocą niestandardowego kodu CSS.
Fragment kodu zawiera tytuł „Przejdź na stronę główną”, a tekst zastępczy obrazu to „Urocze biedronki dla Twojego trawnika”. Gdy słuchasz kodu logo za pomocą czytnika ekranu, słyszysz zarówno obraz, jak i czynność przekazywaną na jednym obrazie.
<div title="Navigate to the homepage">
<a href="/">
<img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"></img>
</a>
</div>
Złożone obrazy
Złożony obraz często wymaga więcej wyjaśnień niż obraz dekoracyjny, informacyjny czy funkcjonalny. Pełen przekaz oddaje zarówno krótki, jak i długi opis alternatywny. Złożone obrazy obejmują infografiki, mapy, wykresy, wykresy i złożone ilustracje. Podobnie jak w przypadku innych typów obrazów, istnieją też różne metody dodawania alternatywnych opisów do złożonych obrazów.
<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 dodania dodatkowego objaśnienia do obrazu jest podanie linku do źródła lub przekazania linku do dłuższego wyjaśnienia na dalszej części strony. To dobry wybór, nie tylko w przypadku użytkowników w AT, ale także dla osób z niepełnosprawnościami (np. z zaburzeniami poznawczymi, zdolnościami uczenia się i czytaniem), które powinny mieć dostęp do dodatkowych informacji o obrazach bezpośrednio na ekranie, a nie w kodzie.
Możesz też dołączyć atrybut aria-describedby do elementu <img>. Możesz automatycznie 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 wizualnie ukryty, ale zastanów się nad pozostawieniem go w widocznym miejscu, aby wspierać jeszcze więcej osób.
Innym sposobem grupowania krótkich opisów alternatywnych i dłuższych jest użycie elementów <figure> i <figcaption> HTML5. Elementy te działają podobnie do elementu aria-describedby, ponieważ grupuje je semantycznie, 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ą natywnej semantyki elementu <figure>.
Sprawdzone metody dotyczące tekstu alternatywnego
Oczywiście dołączenie tekstu alternatywnego nie wystarczy. Tekst powinien też mieć znaczenie. Jeśli np. obraz przedstawia stado biedronek żujących liście krzewu różanego, a treść alternatywna to „robaki”, to czy udałoby się oddać pełny przekaz i intencję obrazu? Zdecydowanie nie.
Alternatywne opisy muszą uwzględniać jak najwięcej istotnych informacji wizualnych i być zwięzłe. Chociaż nie ma limitu liczby znaków, które może odczytać czytnik ekranu, zwykle zalecamy ograniczenie tekstu alternatywnego do 150 znaków, aby nie znudzić się nim. Jeśli musisz dodać do obrazu dodatkowy kontekst, możesz użyć jednego ze złożonych wzorców obrazów, dodać tekst napisów lub dokładniej opisać obraz w głównej kopii.
Oto kilka dodatkowych sprawdzonych metod dotyczących tekstu alternatywnego:
- Unikaj używania w opisie takich słów jak „zdjęcie” czy „zdjęcie”, ponieważ czytnik ekranu automatycznie rozpozna takie typy plików.
- Nazwy obrazów powinny być jak najdokładniejsze i spójne. Nazwy obrazów są używane w sytuacjach, gdy brakuje tekstu alternatywnego lub został on zignorowany.
- Unikaj znaków spoza liter (np. #, 9 czy &) i używaj w nazwach obrazów i tekstu alternatywnego myślników, a nie podkreśleń.
- W miarę możliwości stosuj odpowiednie znaki interpunkcyjne. Bez niego opisy obrazów będą brzmiały jak jedno długie, niekończące się zdanie.
- Napisz tekst zastępczy jak człowiek, a nie robot. Upychanie słów kluczowych nikomu nie przynosi korzyści – osoby korzystające z czytników ekranu będą irytować, a algorytmy wyszukiwarek nałożą na Ciebie karę.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o ARIA i HTML
Jak sprawić, aby złożone obrazy były bardziej dostępne?
aria-describedby.