Obrazy dekoracyjne
W tych przypadkach należy użyć pustego tekstu w atrybutach alt (alt=""), aby mogły zostać zignorowane przez technologie wspomagające, takie jak czytniki ekranu. Wartości tekstowe dla tych typów obrazów spowodowałyby, że wartość atrybutu będzie się wyświetlać na ekranie lub może rozpraszać użytkowników, jeśli tematyka różni się od tekstu znajdującego się w sąsiednim tekście. Opuszczenie alt nie jest również dobrą opcją, ponieważ w przypadku, gdy nie jest to możliwe odczytanie atrybutu, niektórzy czytniki ekranu opublikują nazwę pliku.
Niezależnie od tego, czy traktować obraz jako dekoracyjny czy informacyjny, jest to decyzja, którą może wykonać tylko autor, w oparciu o przyczyny umieszczenia obrazu na stronie. Obrazy mogą być dekoracyjne, gdy są:
- Wizualne stylizacje takie jak obramowania, separatory i narożniki;
- Uzupełniający tekst hiperłącza w celu poprawy jego wyglądu lub zwiększenia obszaru klikalności;
- Ilustrujący sąsiedni tekst, ale nie przyczyniający się do przekazywania informacji ("eye-candy");
- Zidentyfikowane i opisane przez otaczający tekst.
Podejście 1: Obraz używany jako część projektu strony
Ten obraz jest używany jako granica w projekcie strony i ma cel czysto dekoracyjny.PRZYKŁAD:
FRAGMENT KODU:
<img src="topinfo_bg.png" alt="" >
Czytniki ekranu umożliwiają także użycie WAI-ARIA do ukrycia elementu przy użyciu role="presentation". Jednak obecnie ta funkcja nie jest tak szeroko obsługiwana, jak użycie pustego alt.
FRAGMENT KODU:
<img src="topinfo_bg.png" role="presentation" >
Uwaga: jeśli obraz używany był do oznaczenia przerwy tematycznej, np. zmiany sceny w historii lub przejścia do innego tematu, użycie elementu <hr> byłoby właściwe w celu powiadomienia technologii wspomagającej.
Podejście 2: Obraz ozdobny jako część hiperłącza tekstowego
Ta ilustracja kielicha krokusa służy do ułatwienia identyfikacji tego łącza i zwiększenia obszaru klikalności, ale nie dodaje nic do informacji już zawartych w sąsiednim tekście linku (tego samego hiperłącza). W tym przypadku użyj pustej wartości alt dla obrazu.PRZYKŁAD:
Kielich krokusa<a href="strona_o_krokusie.html" > <img src="krokus.jpg" alt="" > <strong>Kielich krokusa</strong> </a>
Podejście 3: Obraz z alternatywą tekstu
Ten obraz śpiącego jest wystarczająco opisany przez sąsiedni tekst. Nie ma potrzeby powtarzania tej informacji, do tego obrazu można użyć pustej wartości alt .PRZYKŁAD:
FRAGMENT KODU:
<p> <img src= "spiącypies.jpg" alt= "" > <strong>O śpiących psach jest przysłowie:</strong> ... </p>
Podejście 4: Obraz stosowany w przekazywaniu atmosfery (cukierek dla oka)
Ten obraz jest używany tylko w celu przekazania atmosfery lub wizualnego zainteresowania stroną.PRZYKŁAD:
FRAGMENT KODU:
<img src="tropical.jpg" alt="" >
Uwaga: jeśli celem tego obrazu było zidentyfikowanie obiektu lub przekazanie innych informacji, a nie tylko poprawienie wyglądu strony, prawdopodobnie powinien być traktowany jako informacyjny. Autor określa cel użycia obrazu.
Powiązane zasoby WCAG 2.0
Te samouczki zapewniają najlepsze praktyczne wskazówki dotyczące wdrażania dostępności w różnych sytuacjach. Na tej stronie zostały połączone następujące kryteria sukcesu WCAG 2.0 i techniki z różnych poziomów zgodności:
Techniki:
- H2: łączenie sąsiednich obrazów i łączy tekstowych dla tego samego zasobu
- H67: Używanie pustego tekstu alt i atrybutu title na elementach img dla obrazów, które AT powinno zignorować
Poprzednie: Obrazy informacyjne
Dalej: Obrazy Funkcjonalne
Na podstawie:
https://www.w3.org/WAI/tutorials/images/decorative/
