Elementy graficzne

Jakich rozwiązań to dotyczy

Strony internetowe
Aplikacje mobilne
Media społecznościowe
Dokumenty

Dlaczego jest to ważne

Użytkownicy, którzy nie mogą zobaczyć lub wyświetlić elementu graficznego, potrzebują tekstu alternatywnego. To zwięzły opis tekstowy elementu graficznego. Z tekstu alternatywnego korzystają na przykład osoby niewidome.

Tekst alternatywny to nie to samo, co podpis lub tytuł elementu graficznego. Dodajesz go we właściwościach danego elementu graficznego, a nie w tekście pod elementem.

Proste elementy graficzne

Zdjęcia, grafiki, ikony czy logo — to najczęściej proste elementy graficzne.

Tekst alternatywny dla takiego elementu powinien zwięźle opisywać, co przedstawia ten element.
W tekście alternatywnym nie stosuj sformułowań: „Grafika przedstawiająca”..., „Na zdjęciu widać”... — bo czytniki ekranu automatycznie mówią, że jest to element graficzny.
Do opisu użyj czasu teraźniejszego i strony czynnej, na przykład: Dwaj starsi mężczyźni siedzą na ławce w parku i rozmawiają.

Ten sam element graficzny może być użyty, w różnych dokumentach czy artykułach, z zupełnie różnych powodów. Tekst alternatywny powinien pokazywać ten kontekst.

Szczegółowy poradnik jak tworzyć opisy alternatywne przygotowała Spółdzielnia Socjalna AkcesLab. Możesz zapoznać się też z naszą prostą instrukcją, jak dodawać tekst alternatywny w dokumentach.

Złożone elementy graficzne

Przy wykresach i schematach — sam tekst alternatywny może nie wystarczyć, żeby zrozumieć informacje, które przekazują takie elementy graficzne. Wówczas możesz zamieścić obok dane z wykresu w formie tabeli (dostępnej cyfrowo).
Przy infografikach — niezbędny może być dodatkowy opis poszerzony. Dodaj obok infografiki taki opis lub zamieść do niego link.

Te szczegółowe opisy nie są opcją tekstu alternatywnego, tylko oddzielnym dodatkowym rozwiązaniem, dlatego powinny być stosowane łącznie.

Dekoracyjne elementy graficzne

Wyłącznie dekoracyjne elementy graficzne, na przykład separatory, ramki, czy tła, możesz ukryć przed czytnikami ekranu (z których korzystają np. osoby niewidome). Takie dekoracyjne elementy nie są konieczne aby zrozumieć treść, a ukryte nie będą niepotrzebnie rozpraszać użytkowników.

Takie elementy graficzne nie wymagają tekstu alternatywnego, ale mogą wymagać odpowiednich znaczników. Na przykład w HTML niezbędny jest tzw. pusty znaczniki tekstu alternatywnego, czyli: alt=””.

Linki graficzne

Tekst alternatywny linku graficznego (ikony, bannery itp.) powinien skupiać się na informacji, dokąd ten link prowadzi, a nie jak on wygląda. Przykładowo, bardziej użyteczny będzie tekst alternatywny: „Wróć do poprzedniego kroku” niż „Strzałka w lewo”.

Więcej o linkach dowiesz się w części Linki i przyciski. Użyteczne informacje możesz też znaleźć w naszej prostej instrukcji, jak zrozumiale opisywać linki w dokumentach.

Tekst w formie grafiki

Unikaj, tam, gdzie to możliwe, prezentowania tekstów w formie grafiki, czyli tak zwanych obrazów tekstu. Treść w formie obrazu tekstu jest niedostępna dla osób, które z różnych powodów nie korzystają z narządu wzroku, czy tych, które korzystają z czytników ekranu. Nie da się jej także przetłumaczyć narzędziami automatycznymi, zmienić koloru jej tekstu czy tła.

Nie można uniknąć obrazów tekstu, jeśli są częścią logotypu instytucji czy firmy — w takich sytuacjach koniecznie dodawaj tekst alternatywny dla takiego elementu graficznego.