Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA PGF4 - WRZESIEŃ 2014


PYTANIE NR 28.
Jaki atrybut znacznika <img> należy podać, aby dołączyć grafikę do strony WWW w sposób zgodny z wytycznymi WCAG użyteczności i dostępności stron www?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Atrybut "alt" w znaczniku <img> służy do podania tekstu alternatywnego obrazu.
Jest on kluczowy dla dostępności: gdy grafika nie wczyta się lub użytkownik korzysta z czytnika ekranu, treść z "alt" przekazuje znaczenie obrazka. Pozostałe atrybuty nie zapewniają opisu treści.

Pełne wyjaśnienie:

W HTML element <img> osadza obraz na stronie, ale sam obraz jest treścią nietekstową. Z perspektywy dostępności trzeba zapewnić użytkownikom równoważną informację w formie tekstu. Do tego służy atrybut alt (tekst alternatywny).

Odpowiedź "alt" jest poprawna, ponieważ:

  • umożliwia czytnikom ekranu odczytanie sensu grafiki (np. opis zdjęcia, komunikatu, ikony pełniącej funkcję),
  • pojawia się jako zamiennik, gdy obraz nie może zostać załadowany (błąd sieci, blokada zasobów),
  • wspiera poprawne projektowanie dostępności: obraz informacyjny powinien mieć opis, a obraz dekoracyjny zwykle ma pusty alt (alt="").

Dlaczego pozostałe odpowiedzi są niepoprawne:

  • "id" identyfikuje element w dokumencie (np. do CSS/JS lub kotwic), ale nie opisuje treści grafiki i nie rozwiązuje problemu braku tekstowego odpowiednika.
  • "name" jest atrybutem historycznie spotykanym w niektórych elementach (np. starsze wzorce), jednak nie jest mechanizmem opisu obrazu dla potrzeb dostępności; nie zastępuje tekstu alternatywnego.
  • "target" dotyczy sposobu otwierania odnośników (typowo dla <a> lub formularzy), więc nie ma związku z opisem obrazu ani z wymaganiem dostępności dla treści nietekstowych.

Wskazówka egzaminacyjna: gdy w pytaniu pojawia się WCAG/dostępność i grafika (<img>), szukaj odpowiedzi związanej z tekstem alternatywnym. To najczęstszy i podstawowy wymóg dla obrazów używanych informacyjnie.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest atrybut alt w znaczniku <img>?
Atrybut alt to tekst alternatywny obrazu w elemencie <img>. Jest odczytywany przez technologie asystujące i wyświetlany, gdy obraz nie może się wczytać. Powinien opisywać sens grafiki (funkcję lub informację), a nie tylko jej wygląd.
Dlaczego WCAG wymaga tekstu alternatywnego dla obrazów?
Ponieważ część użytkowników nie widzi obrazów (np. osoby niewidome używające czytników ekranu) albo obrazy nie ładują się z powodów technicznych. Tekst alternatywny zapewnia równoważny dostęp do informacji zawartej w grafice, co jest podstawą dostępności treści.
Jak napisać dobry tekst alternatywny alt do zdjęcia?
Opisz znaczenie zdjęcia w kontekście strony: kto/co jest na fotografii i po co obraz jest użyty. Unikaj "zdjęcie przedstawia…", chyba że to potrzebne. Jeśli obraz niesie informację (np. wykres), alt powinien streszczać wniosek, a szczegóły można dodać w tekście obok.
Kiedy stosuje się pusty alt (alt="")?
Pusty alt="" stosuje się dla grafik dekoracyjnych, które nie dodają informacji (np. ozdobne tło, separatory). Dzięki temu czytnik ekranu pomija taki obraz, a użytkownik nie jest zasypywany zbędnymi komunikatami. To poprawia użyteczność i dostępność.
Czy atrybut id poprawia dostępność obrazów tak jak alt?
Nie. id służy do identyfikacji elementu w kodzie (CSS, JavaScript, linkowanie do fragmentu strony), ale nie dostarcza opisu treści obrazu. Dostępność w kontekście grafiki zapewnia przede wszystkim alt, czyli tekstowy odpowiednik informacji wizualnej.
Jakie są najczęstsze błędy w atrybucie alt na egzaminie?
Najczęstsze pomyłki to: wpisywanie losowych słów kluczowych, kopiowanie nazwy pliku (np. "DSC001.jpg"), zbyt ogólne opisy ("obrazek"), brak alt dla ikon będących przyciskami oraz opisywanie wyglądu zamiast funkcji. W zadaniach WCAG zawsze myśl o informacji i celu grafiki.
Czy alt wpływa na SEO i indeksowanie strony?
Alt jest przede wszystkim dla dostępności, ale pośrednio może pomagać w zrozumieniu treści strony przez roboty wyszukiwarek. Ważniejsze jest jednak, by alt był rzetelny i kontekstowy. Należy unikać upychania słów kluczowych, bo pogarsza to jakość i może szkodzić ocenie treści.
Jak odróżnić obraz informacyjny od dekoracyjnego przy pisaniu alt?
Zadaj sobie pytanie: "Czy po usunięciu obrazu użytkownik traci informację potrzebną do zrozumienia treści lub wykonania zadania?". Jeśli tak, obraz jest informacyjny i wymaga opisowego alt. Jeśli nie (grafika tylko ozdabia), zwykle stosuje się alt="".
Co wpisać w alt dla ikony, która działa jak przycisk?
Dla ikony pełniącej funkcję sterującą alt powinien opisywać działanie, np. "Szukaj", "Pobierz plik", "Zamknij". Nie opisuj kształtu ("lupka", "krzyżyk"), tylko efekt kliknięcia. Dzięki temu użytkownik czytnika ekranu rozumie cel kontrolki.
Jak szybko rozpoznać poprawną odpowiedź w pytaniu o WCAG i <img>?
Jeśli pytanie łączy dostępność/WCAG i element <img>, najczęściej chodzi o zapewnienie tekstu alternatywnego, czyli atrybut alt. Atrybuty typu id, name czy target nie opisują treści obrazu i nie spełniają wymogu równoważnej informacji.
info

Statystycznie 68% uczniów zna prawidłową odpowiedź. średnie

W praktyce zawodowej kluczowe jest to, że pozostałe atrybuty nie zapewniają opisu treści.

Źródła:

  • W3C – HTML Living Standard (WHATWG), element &lt;img&gt; i atrybut alt: https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element - dostęp: 2026-03-05
  • W3C – WCAG 2.2, Success Criterion 1.1.1 Non-text Content: https://www.w3.org/TR/WCAG22/#non-text-content - dostęp: 2026-03-05
  • MDN Web Docs – &lt;img&gt;: The Image Embed element (alt i zastosowanie): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img - dostęp: 2026-03-05

Materiały:

  • Dokumentacja HTML (sekcja elementu &lt;img&gt; i atrybutu alt)
  • WCAG: kryteria dotyczące tekstowych odpowiedników treści nietekstowych
  • MDN Web Docs: opis elementu &lt;img&gt; i dobre praktyki pisania tekstów alternatywnych
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego