KWALIFIKACJA PGF4 - PAŹDZIERNIK 2016

PYTANIE NR 16.
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, który jest odczytywany przez technologie asystujące i pojawia się, gdy grafika nie może zostać wyświetlona.
To kluczowy element spełniania zasad dostępności dla treści nietekstowych; atrybuty id, name i target nie zastępują opisu obrazu.

Pełne wyjaśnienie:

W znaczniku <img> atrybut alt definiuje tekst alternatywny (opis), czyli informację tekstową równoważną treści obrazu. Jest to istotne dla dostępności: czytniki ekranu mogą odczytać opis, a użytkownik otrzymuje sensowną informację także wtedy, gdy obraz się nie wczyta. W praktyce alt powinien opisywać funkcję lub znaczenie grafiki w kontekście strony (np. dla ikony będącej przyciskiem ważniejsza jest funkcja niż wygląd).

Odpowiedź "id" jest niepoprawna, ponieważ id służy do jednoznacznej identyfikacji elementu w dokumencie (np. dla CSS, skryptów, kotwic), ale nie dostarcza użytkownikowi opisu treści i nie jest mechanizmem tekstu alternatywnego. Odpowiedź "name" również nie rozwiązuje problemu dostępności obrazów: name bywa używany w niektórych elementach/formularzach do identyfikacji, lecz nie pełni roli opisu grafiki dla technologii asystujących. Odpowiedź "target" jest błędna, bo target dotyczy zachowania odnośników (gdzie otworzyć link) i nie jest atrybutem służącym do opisywania obrazu.

Wskazówka egzaminacyjna: jeśli pytanie dotyczy dostępności grafiki i WCAG, szukaj mechanizmu, który zamienia treść nietekstową na równoważną informację tekstową. W HTML jest to właśnie alt w <img>.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Atrybut alt to tekst alternatywny obrazu. Jest odczytywany przez czytniki ekranu i może być pokazany, gdy grafika nie wczyta się. Dzięki temu użytkownik dostaje informację o znaczeniu lub funkcji grafiki, co wspiera dostępność i użyteczność strony.
WCAG kładzie nacisk na to, aby treści nietekstowe miały równoważną informację w tekście. Bez tego osoba niewidoma lub słabowidząca (korzystająca z czytnika ekranu) może nie zrozumieć treści strony. alt jest podstawowym sposobem przekazania takiej informacji.
Dobry alt opisuje sens obrazu w kontekście strony. Dla zdjęcia produktowego zwykle podaje nazwę i cechy istotne dla użytkownika, a dla ikony będącej przyciskiem opisuje działanie (np. "Szukaj"). Unikaj zbędnych słów typu "obrazek", jeśli nie są potrzebne.
Nie. id identyfikuje element w kodzie (np. do stylowania lub skryptów), ale nie przekazuje opisu obrazu użytkownikowi ani technologiom asystującym jako tekst alternatywny. W kontekście dostępności obrazów kluczowy jest alt, a nie identyfikator.
Pusty alt (alt="") stosuje się, gdy obraz jest czysto dekoracyjny i nie wnosi informacji ani funkcji. Wtedy czytnik ekranu może pominąć taki element, co zmniejsza "szum" informacyjny. Nie należy stosować pustego alt, jeśli grafika przekazuje treść lub jest elementem interaktywnym.
Typowe błędy to: brak atrybutu alt, wpisywanie przypadkowych słów kluczowych zamiast opisu, zbyt długi opis nieadekwatny do kontekstu oraz opisywanie wyglądu zamiast funkcji (np. "lupa" zamiast "Szukaj" dla przycisku). Warto opisywać to, co użytkownik ma zrozumieć.
Tak, tekst alternatywny bywa wykorzystywany przez wyszukiwarki do lepszego zrozumienia treści grafiki i kontekstu strony. Najważniejszy cel to dostępność, ale dobrze napisany alt może dodatkowo wspierać indeksowanie, o ile jest rzeczowy i zgodny z treścią.
"Treść nietekstowa" to informacje przekazywane nie przez tekst, np. zdjęcia, ilustracje, ikony, wykresy czy grafiki z tekstem. Zasada jest taka, aby użytkownik miał dostęp do równoważnej informacji w formie tekstowej. W HTML podstawą dla obrazów jest atrybut alt.
Możesz przejrzeć kod HTML i wyszukać elementy <img> bez alt lub z nieadekwatnym opisem. Pomagają też narzędzia audytu dostępności w przeglądarkach oraz test z czytnikiem ekranu. Najlepszy wynik daje połączenie automatycznej kontroli i oceny sensu opisów.
Zwykle nie w kontekście tekstu alternatywnego. target dotyczy zachowania linków (gdzie otworzyć odnośnik), a name pełni role identyfikacyjne w pewnych elementach. Żaden z nich nie dostarcza opisu grafiki dla użytkownika. Dla obrazów kluczowy jest alt.
info

Około 66% zdających odpowiada poprawnie na to pytanie. średnie

Źródła:

  • W3C HTML Living Standard (WHATWG), element img — sekcja dotycząca atrybutu alt: https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element - dostęp 2026-03-02
  • W3C WAI, Web Content Accessibility Guidelines (WCAG) 2.1 — kryterium sukcesu 1.1.1 Non-text Content (treści nietekstowe): https://www.w3.org/TR/WCAG21/#non-text-content - dostęp 2026-03-02
  • MDN Web Docs, "HTMLImageElement: alt" / "&lt;img&gt;: The Image Embed element" (opis atrybutu alt i zastosowań): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img - dostęp 2026-03-02

Materiały:

  • Dokumentacja HTML dotycząca elementu &lt;img&gt; i atrybutu alt
  • Materiały W3C/WAI o tekstach alternatywnych i dostępności obrazów
  • Checklisty i poradniki audytu dostępności treści nietekstowych

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego