Strona: Zdjęcia, grafiki w kontekście WCAG 2.1 / Dostępność / Politechnika Rzeszowska

Zdjęcia, grafiki (treść nietekstowa)

Opis alternatywny

Wszelkie treści nietekstowe (zdjęcia, grafiki, wykresy itp.) przenoszące znaczenie (niosące w sobie informacje dla odbiorcy) użyte na stronie internetowej muszą posiadać opis alternatywny.

Opis alternatywny jest przeznaczony w szczególności dla osób korzystających z czytników ekranu.

Pomaga również wyszukiwarkom internetowym w interpretacji tego, co widnieje np. na zdjęciu. Przyczynia się do lepszego indeksowania zawartości stron przez wyszukiwarki internetowe (SEO).

Opis alternatywny powinien spełniać tę samą rolę, co element opisywany - zapewnić odbiorcy równoważny przekaz. Opis powinien być krótki (1-2 zdania, optymalnie do 125 znaków) i wyrażony prostymi zdaniami. Powinien uwzględniać kontekst, opisywać kogo/co przedstawia grafika i w jakiej sytuacji ("co robi?"). Nie należy również powielać treści opisu alternatywnego dla różnych elementów graficznych (opis powinien być unikalny).

Przykład prawidłowo wykonanego opisu alternatywnego

Dla poniższego zdjęcia opis alternatywny (zamieszczony w atrybucie <alt>) mógłby mieć następującą treść:

Uroczyste posiedzenie Senatu Politechniki Rzeszowskiej. Rektor Piotr Koszelnik wygłasza przemówienie.

Uroczyste posiedzenie Senatu Politechniki Rzeszowskiej. Rektor Piotr Koszelnik wygłasza przemówienie.

Jak dodać opis alternatywny

HTML

W HTML opis alternatywny należy wprowadzić za pomocą atrybutu alt, np.:

<img src="nazwa-pliku.png" alt="alternatywa tekstowa" />

System portalowy

W systemie portalowym należy uzupełnić dedykowane do tego celu pole "Opis alternatywny".

Grafiki dekoracyjne (nie przenoszące znaczenia)

W przypadku grafik pełniących wyłącznie funkcje dekoracyjne (nie przenoszących znaczenia) atrybut zawierający opis alternatywny powinien pozostać pusty.

Obrazy tekstu

Nie należy stosować grafiki do przekazywania informacji tekstowych, z wyjątkiem gdy prezentacja tekstu w postaci graficznej jest istotna do zrozumienia przekazywanej informacji.

Kryteria sukcesu WCAG - alternatywa tekstowa 

Na podstawie autoryzowanego tłumaczenie na język polski.
Kryteria sukcesu - definicja.

WCAG 2.1, kryterium sukcesu: 1.1.1 Treść nietekstowa (poziom A)

Wszelkie treści nietekstowe przedstawione użytkownikowi mają swoją tekstową alternatywę, która służy tym samym celom, z wyjątkiem sytuacji ...

WCAG 2.1, kryterium sukcesu: 1.4.5 Obrazy tekstu (poziom AA)

Jeśli wykorzystywane technologie mogą przedstawiać treść wizualnie, do przekazywania informacji wykorzystuje się tekst , a nie obraz tekstu, z wyjątkiem następujących sytuacji:

  • Możliwy do dostosowania: Obraz tekstu może być dostosowany wizualnie do wymagań użytkownika;
  • Istotny: Prezentacja tekstu w postaci graficznej jest istotna dla zrozumienia przekazywanej informacji.

Nasze serwisy używają informacji zapisanych w plikach cookies. Korzystając z serwisu wyrażasz zgodę na używanie plików cookies zgodnie z aktualnymi ustawieniami przeglądarki, które możesz zmienić w dowolnej chwili. Więcej informacji odnośnie plików cookies.