Pojęcie obrazu

Obrazy
Samouczki > Obrazy > Pojęcie obrazu

Technologie omówione w tym samouczku: Czcionki  i Transformacje CSS, MathML, HTML5, WAI-ARIA

Obrazy muszą zawierać alternatywne teksty, które opisują informacje lub funkcje reprezentowane przez nie. Zapewnia to, że obrazy mogą być używane przez osoby z różnymi niepełnosprawnościami. Ten samouczek pokazuje, jak zapewnić odpowiednie alternatywy tekstowe w oparciu o cel obrazu:
  • Obrazy informacyjne: obrazy przedstawiające graficznie pojęcia i informacje, typowe obrazy, zdjęcia i ilustracje. Alternatywa tekstowa powinna być co najmniej krótkim opisem przekazującym istotne informacje przedstawione przez obraz.
  • Obrazy ozdobne: podaj alternatywną wartość tekstu (alt=""), jeśli jedynym celem obrazu jest dodanie wizualnej dekoracji na stronie, a nie przekazywanie informacji, które są ważne dla zrozumienia strony.
  • Obrazy funkcjonalne: Alternatywa tekstowa obrazu używana jako link lub jako przycisk powinna opisywać funkcjonalność łącza lub przycisku, a nie obraz. Przykładami takich obrazów są ikony drukarki służące do reprezentowania funkcji drukowania lub przycisku do przesłania formularza.
  • Obrazy tekstu: Tekst jest czasem prezentowany na obrazie. Jeśli nie jest to logo, unikaj tekstu w obrazach. Jeśli jednak wykorzystywane są obrazy tekstu, alternatywa tekstowa powinna zawierać takie same słowa, jak na obrazku.
  • Złożone obrazy, takie jak wykresy i diagramy: Aby przekazać dane lub szczegółowe informacje, należy zamieścić pełny tekst odpowiadający danym lub informacją zamieszczonym w obrazach jako alternatywie.
  • Grupy obrazów: jeśli wiele obrazów przekazuje jeden fragment informacji, tekst alternatywny dla jednego obrazu powinien przekazać informacje dla całej grupy.
  • Mapy zdjęć: Alternatywa tekstowa zawierająca wiele klikalnych obszarów powinna zapewnić ogólny kontekst zbioru łączy. Ponadto każdy indywidualnie klikalny obszar powinien zawierać alternatywny tekst opisujący cel lub przeznaczenie linku.
Aby uzyskać przegląd dotyczący kategorii, do której ma zostać przydzielony określony obraz, zobacz drzewo decyzji. Alternatywa tekstowa musi być określona przez autora, w zależności od sposobu użycia, kontekstu i zawartości obrazu. Na przykład dokładny typ i wygląd ptaka na zdjęciu może być mniej trafny i opisany tylko na krótko na stronie internetowej o parkach, ale może być odpowiedni na stronie internetowej poświęconej konkretnym ptakom.

Dlaczego to jest ważne?

Obrazy i grafika sprawiają, że treść jest przyjemniejsza i łatwiejsza do zrozumienia dla wielu osób, a zwłaszcza dla osób z zaburzeniami poznawczymi i uczącymi się. Służą jako wskazówki, które są używane przez osoby z upośledzonym wzrokiem, w tym osoby o słabym wzroku, do orientowania się w treść.
Jednak obrazy są szeroko stosowane w witrynach internetowych i mogą powodować poważne przeszkody, jeśli nie są dostępne. Dostępne obrazy są korzystne w wielu sytuacjach, takich jak:
  • Osoby korzystające z czytników ekranu: alternatywę tekstową mogą czytać na głos lub wyświetlać jako brajl
  • Osoby korzystające z oprogramowania do wprowadzania mowy: użytkownicy mogą ustawić ostrość na przycisk lub połączyć obraz jednym poleceniem głosowym
  • Osoby przeglądające witryny internetowe z wymową głosową: można zastąpić tekstową alternatywę
  • Użytkownicy internetowi mobilni: zdjęcia mogą zostać wyłączone, szczególnie w przypadku transmisji danych w roamingu
  • Optymalizacja wyszukiwarek: obrazy są indeksowane przez wyszukiwarki
Uwaga: usunięcie zdjęć ze stron internetowych (tak zwanych "wersje tekstowe") sprawia, że ​​są one mniej dostępne i funkcjonalne dla tych użytkowników i sytuacji.




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:
Kryteria powodzenia:
  • 1.1.1 Treści nietekstowe: cała zawartość nietekstowa prezentowana użytkownikowi ma alternatywę tekstową, która służy podobnemu celowi, z wyjątkiem sytuacji wymienionych [...]. (Poziom A)
  • 1.4.5 Obrazy tekstu: jeśli wykorzystywane technologie mogą osiągnąć wizualną prezentację, tekst jest używany do przekazywania informacji, a nie obrazów tekstowych, z wyjątkiem [dostosowujących i niezbędnych obrazów] (poziom AA)
  • 1.4.9 Obrazy tekstu (bez wyjątku): Obrazy tekstu są używane wyłącznie do dekoracji czystej lub gdzie szczególna prezentacja tekstu ma zasadnicze znaczenie dla przekazywanej informacji (poziom AAA)
Dalej: obrazy informacyjne

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

Popularne posty z tego bloga

Walidatory

Notepad++

Github