Obrazy informacyjne

Samouczki > Obrazy > Obrazy informacyjne

Obrazy informacyjne przekazują prostą koncepcję lub informacje, które mogą być wyrażone w krótkim zdaniu. Alternatywa tekstowa powinna przekazać treść, która jest wyświetlana wizualnie, co zazwyczaj nie jest dosłownym opisem obrazu.
W niektórych sytuacjach może być potrzebny szczegółowy opis dosłowny, ale tylko wtedy, gdy zawartość obrazu jest w całości lub w części przekazywana. Niezależnie od tego, czy traktować obraz jako informacyjny czy dekoracyjny, jest to orzeczenie , które autorzy opierają na podstawie umieszczenia obrazu na stronie.

Podejście 1. Obrazy używane do oznaczania informacji

Ten przykład pokazuje dwie ikony obrazu - jedna z telefonem, jedna z faksem. Numer telefonu następuje po każdym obrazie. Zgodnie z prezentacją wizualną, do identyfikacji urządzenia skojarzonego z każdym numerem używane są alternatywne teksty "Telefon:" i "Faks:".
PRZYKŁAD:
Telefon: 0123 456 7890


Faks: 0123 456 7891


FRAGMENT KODU:
<p>
 <img src= "phone.png" alt= "Telephone:" > 0123 456 7890
</p>
 <p>
 <img src= "fax.png" alt= "Fax:" > 0123 456 7891
 </p>

Podejście 2. Obrazy używane do uzupełnienia informacji

Poniższy obraz przedstawia psa z dzwonkiem. Uzupełnia sąsiedni tekst, który wyjaśnia cel tego dzwonka. Krótka alternatywa tekstu wystarczy, aby opisać informacje, które są wyświetlane wizualnie, ale nie zostały wyjaśnione w tekście; W tym przypadku alternatywą tekstową jest "Pies z dzwonkiem przymocowanym do szyi".

PRZYKŁAD:
Psy prowadzące często noszą dzwonek. Jego dźwięk pomaga niewidomym właścicielom śledzić lokalizację psa







FRAGMENT KODU:
 <p>
<img src= "pies.jpg" alt= "Pies z dzwonkiem przymocowanym do szyi." > Psy prowadzące często noszą ... </p>

Uwaga: jeśli tekst zawiera wyjaśnienie tego, jak pies nosi dzwonek, obraz może być uważany za nadmiarowy, a zatem dekoracyjny . Jak nie jest to wymienione w tekście, obraz jest uważany za informacyjny.

Podejście 3. Obrazy przekazujące zwięzłe informacje

Ten prosty schemat ilustruje kierunek przeciwny do ruchu wskazówek zegara dla odkręcania górnej części butelki lub wieczka. Informacje można opisać w krótkim zdaniu, więc w atrybucie alt znajduje się tekst alternatywny "Wciśnij pokrywkę i przekręć w lewo (od prawej do lewej)".
PRZYKŁAD:
Wciśnij pokrywkę i obróć ją w lewo (od prawej do lewej)








FRAGMENT KODU:
<img src= "pokrywka.png" alt= "Wciśnij pokrywkę i przekręć w lewo (od prawej do lewej)" >
Uwaga 1: Alternatywną techniką byłoby dostarczanie instrukcji w głównej zawartości, a nie jako tekstu alternatywnego do obrazu. Ta technika sprawia, że ​​wszystkie informacje są dostępne w tekście dla każdego, dostarczając ilustracje dla osób, które chcą widzieć informacje wizualnie.
Uwaga 2: Jeśli o obrazie ma być przekazana większa ilość informacji niż ta, to lepiej wykonać jedną z metod opisanych w złożonych obrazach. Na przykład jeśli fakt, że ten schemat znajduje się na butelce lub jeśli kształt i rozmiar butelki były istotnymi fragmentami informacji, użyj bardziej szczegółowego tekstu alternatywnego.

Podejście 4. Obrazy przekazujące wrażenie lub emocje

To zdjęcie przedstawia szczęśliwą rodzinę. Jest to obraz akcji, więc nie należy identyfikować osób. Ma się wrażenia, że ​​witryna lub firma, którą reprezentuje, jest przyjazna dla całej rodziny. Alternatywą tekstową jest "Przyjazne dla rodziny", ponieważ najlepiej opisuje zamierzone wrażenie.

PRZYKŁAD:
Jesteśmy rodzinni.









FRAGMENT KODU:

<img src="rodzina.jpg" alt="Przyjazne dla rodziny." >

Uwaga: jeśli celem tego obrazu była po prostu poprawa wyglądu strony, a nie przekazanie wrażenia, można go uznać za ozdobny, jak pokazano na rysunku "Obrazy ozdobne: obraz używany na arenie". Autor określa cel użycia obrazu.

Podejście 5. Obrazy przekazujące format pliku

W tym przykładzie dokument jest dostępny do pobrania w trzech różnych formatach identyfikowanych przez ikony formatów w linkach tekstowych. Mają alternatywne teksty "HTML", "Word dokument" i "PDF", aby odróżnić typ pliku dla każdego linku:

PRZYKŁAD:
Sprawozdanie roczne i sprawozdania finansowe za rok 2012 w formacie (43KB), dostępne także w (254 KB) lub (353 KB) .
FRAGMENT KODU:
 <p>
 <a href= "…" >
Sprawozdanie roczne i sprawozdania finansowe za rok 2012 w formacie <img src= "html5logo.png" alt= "HTML" > (43KB)
 </a> , dostępne także w
<a href= "…" >
 <img src= "worddokument.png" alt= "Word dokument" > (254KB)
</a>
 lub
 <a href= "…" > <img src= "pdfdokument.png" alt= "PDF" > (353KB) </a>
 format.
</p>
Uwaga 1: Jeśli identyfikator formatu został opisany jako część tekstu linku, obraz może być uznany za ozdobny i posiadać atrybut alt pusty ( alt="" ). Może on pozostać w tym samym elemencie (<a>) jako tekst, aby go umieścić w obszarze klikalności. Dalsza dyskusja znajduje się w części "Obrazy funkcjonalne: obraz logo w tekście linku" .
Uwaga 2: ten konkretny przykład przypomina ikonę  Obrazy funkcjonalne: wewnątrz powiązanego tekstu , ponieważ obraz przekazuje informacje, które nie są podane w tekście linku.

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:
G94: Zapewnienie alternatywnej wersji krótkich tekstów, które służą tym samym celom i przedstawia te same informacje, co treść nietekstowa
H37: używanie atrybutów alt w elementach img

Poprzednie:
Pojęcie obrazu

Dalej:
Obrazy dekoracyjne

Na podstawie:
https://www.w3.org/WAI/tutorials/images/informative/

Popularne posty z tego bloga

Walidatory

Notepad++

Github