Tekst alternatywny i opisy grafik – obowiązkowe elementy dostępnej strony

Tekst alternatywny i opisy grafik – obowiązkowe elementy dostępnej strony

W dzisiejszym świecie, gdzie internet stał się nieodłączną częścią codziennego życia, zapewnienie dostępności cyfrowej jest kluczowym aspektem tworzenia stron internetowych. Jednym z kluczowych elementów, który sprawia, że strona jest bardziej dostępna, jest dodawanie tekstu alternatywnego oraz opisów grafik.

Dlaczego teksty alternatywne i opisy grafik są ważne?

Użytkownicy, którzy nie mogą zobaczyć lub wyświetlić elementu graficznego, potrzebują tekstowej alternatywy, aby zrozumieć jego przekaz. Osoby niewidome lub słabowidzące, a także ci, którzy korzystają z czytników ekranu, polegają na tych tekstowych opisach, aby mieć pełny dostęp do treści. Bez nich, elementy wizualne byłyby całkowicie niedostępne dla tej grupy użytkowników.

Ponadto, teksty alternatywne są ważne w przypadku, gdy grafika nie może być wyświetlona z powodu słabego połączenia internetowego lub problemu technicznego. W takich sytuacjach, tekst zastępuje obraz, zapewniając, że użytkownik nadal ma dostęp do kluczowych informacji.

Czym jest tekst alternatywny?

Tekst alternatywny to zwięzły opis tekstowy elementu graficznego. Jest on dodawany we właściwościach danego elementu, a nie w tekście pod nim. Nie jest to to samo, co podpis lub tytuł grafiki.

Dobrze napisany tekst alternatywny powinien:

  • Krótko i precyzyjnie opisywać zawartość i funkcję elementu graficznego
  • Uwzględniać kontekst, w jakim dany obraz jest używany
  • Nie zawierać zbędnych informacji, które nie są bezpośrednio związane z treścią grafiki

Przykładowo, dla zdjęcia przedstawiającego zespół pracowników firmy, dobry tekst alternatywny mógłby brzmieć: “Zespół pracowników firmy IT pozujący do zdjęcia grupowego w biurze”. Natomiast tekst “Zdjęcie pracowników” byłby zbyt ogólny i nie dostarczałby wystarczającej informacji.

Jak dodawać teksty alternatywne?

W większości narzędzi do tworzenia stron internetowych, takich jak WordPress, Drupal czy Joomla, dodawanie tekstów alternatywnych odbywa się poprzez edycję właściwości danego elementu graficznego. Zazwyczaj znajduje się tam pole, w którym można wpisać odpowiedni opis.

Podobnie w pakiecie MS Office 365, aby dodać tekst alternatywny do grafiki, należy kliknąć obiekt prawym przyciskiem myszy, wybrać “Formatuj obiekt” i w oknie dialogowym wpisać opis.

Ważne, aby pamiętać, że jeśli element graficzny pełni funkcję dekoracyjną, a nie niesie żadnej istotnej informacji, nie ma potrzeby dodawania do niego tekstu alternatywnego. Można w takim przypadku po prostu oznaczyć go jako element dekoracyjny.

Opisy grafik – więcej niż tekst alternatywny

Tekst alternatywny to podstawowy element dostępności grafik, ale w wielu przypadkach może być konieczne dodanie szczegółowego opisu grafiki. Takie rozwiązanie jest przydatne, gdy sama krótka alternatywa nie wystarcza do pełnego zrozumienia zawartości i znaczenia obrazu.

Szczegółowy opis grafiki to oddzielny element, który uzupełnia tekst alternatywny. Może on zawierać więcej informacji na temat kontekstu, kolorów, kształtów czy relacji pomiędzy elementami graficznymi. Taki opis powinien być umieszczony w pobliżu danej grafiki, na przykład jako podpis.

Wykorzystanie zarówno tekstu alternatywnego, jak i bardziej szczegółowego opisu grafiki, zapewnia kompleksową dostępność treści wizualnych na stronie internetowej.

Linki graficzne i ich opisy

Szczególną uwagę należy poświęcić tekstom alternatywnym dla linków graficznych, takich jak ikony czy banery. W tym przypadku, tekst alternatywny powinien skupiać się na informacji, dokąd dany link prowadzi, a nie na opisie wyglądu grafiki.

Przykładowo, lepszym tekstem alternatywnym dla ikony strzałki w lewo będzie “Wróć do poprzedniej strony” zamiast “Strzałka w lewo”. Dzięki temu użytkownicy korzystający z czytników ekranu będą wiedzieli, jaka jest funkcja danego łącza, a nie tylko jak wygląda element graficzny.

Unikaj obrazów tekstu

Kolejnym ważnym aspektem dostępności grafik jest unikanie prezentowania tekstów w formie graficznej, czyli tzw. “obrazów tekstu”. Treść w postaci obrazu tekstu jest niedostępna dla osób korzystających z czytników ekranu, a także uniemożliwia automatyczne tłumaczenie czy zmianę koloru.

Oczywiście, istnieją sytuacje, gdy użycie obrazu tekstu jest konieczne, na przykład jako część logo firmy. W takich przypadkach należy pamiętać o dodaniu odpowiedniego tekstu alternatywnego.

Podsumowanie

Teksty alternatywne i szczegółowe opisy grafik są kluczowymi elementami, które zapewniają dostępność treści wizualnych na stronach internetowych. Dzięki nim, użytkownicy z różnymi niepełnosprawnościami zyskują pełny dostęp do informacji prezentowanych za pomocą elementów graficznych.

Dodawanie tych opisów nie jest trudne, a przynosi wymierne korzyści dla wszystkich odwiedzających Twoją stronę. Warto więc zadbać o te aspekty podczas projektowania i tworzenia nowych witryn internetowych. Tylko wtedy możesz mieć pewność, że Twoja strona jest naprawdę dostępna dla każdego.

Więcej informacji na temat tekstów alternatywnych znajdziesz na stronie Ministerstwa Cyfryzacji.

Standardy przygotowywania dostępnych treści cyfrowych zgodnie z WCAG 2.1

Jak dodawać tekst alternatywny do obrazów, grafik i wykresów

Zapoznaj się z naszymi usługami tworzenia stron internetowych

Nasze inne poradniki

Chcemy być Twoim partnerem w tworzeniu strony internetowej, a Ty chcesz mieć profesjonalnie zaprojektowaną witrynę?

Zrobimy to dla Ciebie!