Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - TEST WIEDZY NR 3



PYTANIE NR 7.
Rozważ poniższy fragment kodu HTML:
<div role="navigation">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</div>

Które z poniższych stwierdzeń jest prawdziwe na temat tego kodu?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
role="navigation" nadaje kontenerowi znaczenie "nawigacja" dla technologii asystujących, co jest zgodne z ideą stosowania landmarków i wspiera kryteria związane z nawigowalnością. Linki mają czytelne etykiety ("Home", "About", "Contact"), więc zarzut braku opisów lub "tekstu alternatywnego" nie pasuje do tego kodu.

Pełne wyjaśnienie:

Atrybut role="navigation" oznacza, że dany fragment interfejsu jest obszarem nawigacji (tzw. landmark). Dla czytników ekranu i innych technologii asystujących jest to sygnał, że w tym miejscu znajdują się elementy służące do przemieszczania się po stronie. Taka semantyczna informacja zwykle poprawia użyteczność dostępnościową, bo użytkownik może szybciej odnaleźć "nawigację" w strukturze strony.

Stwierdzenie "Kod jest zgodny z normami WCAG 2.1, ponieważ zawiera role="navigation"" jest w tym zestawie odpowiedzi najbardziej trafne, bo wskazuje realny mechanizm wspierający dostępność: wyraźne oznaczenie regionu nawigacji. W praktyce warto pamiętać, że pełna zgodność z WCAG nie zależy od jednego atrybutu — potrzebne są też m.in. poprawne działanie klawiatury, widoczny fokus, odpowiedni kontrast i właściwa struktura całej strony.

Pozostałe stwierdzenia są nietrafne z następujących powodów:

  • "Kod jest niezgodny ..., ponieważ nie ma opisów dla linków" — linki mają tekst będący ich etykietą (np. "Home"). To właśnie tekst odnośnika jest podstawowym "opisem" linku. Problem pojawia się dopiero, gdy link ma nieinformacyjny tekst typu "Kliknij tutaj" lub jest pusty.
  • "... ponieważ nie zawiera alternatywnego tekstu dla linków" — pojęcie tekstu alternatywnego dotyczy głównie obrazów (np. atrybutu alt w <img>). Dla tekstowych odnośników alternatywny tekst nie jest wymagany, bo sam tekst linku pełni funkcję etykiety.
  • "Kod jest zgodny ..., ponieważ zawiera listę linków" — lista <ul> z <li> jest dobrą praktyką do budowy menu, ale sama lista nie przesądza o dostępności. Można mieć listę linków, która nadal będzie problematyczna (np. złe etykiety, brak obsługi klawiatury w dodatkowych mechanizmach, brak widocznego fokusu w CSS).

Wskazówka egzaminacyjna: jeśli pytanie dotyczy dostępności, oceniaj sens elementu (nawigacja/landmark), etykietowanie (czy link mówi dokąd prowadzi) i semantykę. W HTML często lepszym rozwiązaniem od roli na <div> jest użycie semantycznego <nav>, ale rola nadal może poprawnie przekazać znaczenie.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co oznacza atrybut role="navigation" w HTML?

role="navigation" informuje technologie asystujące, że dany fragment jest obszarem nawigacji (landmark).

Ułatwia to użytkownikom czytników ekranu szybkie przechodzenie do menu lub sekcji linków nawigacyjnych.

Jakie są zalety użycia role="navigation" w menu strony?

Główna zaleta to lepsza semantyka dostępnościowa: czytnik ekranu może rozpoznać nawigację jako punkt orientacyjny.

To wspiera wygodne "skakanie" po regionach strony i porządkuje strukturę interfejsu.

Czy role="navigation" gwarantuje zgodność z WCAG?

Nie, pojedynczy atrybut nie gwarantuje pełnej zgodności z WCAG.

WCAG obejmuje wiele wymagań (np. obsługę klawiatury, widoczny fokus, zrozumiałe etykiety linków, kontrast). Rola może pomóc, ale nie zastąpi całościowego audytu.

Jakie są różnice między <nav> a role="navigation"?

<nav> to semantyczny element HTML przeznaczony do nawigacji.

role="navigation" to informacja ARIA dodawana zwykle do elementów ogólnych (np. <div>). W praktyce często preferuje się <nav>, ale oba sposoby mogą wskazywać region nawigacji.

Czy linki muszą mieć "tekst alternatywny" w WCAG?

Link tekstowy nie potrzebuje "tekstu alternatywnego" w sensie atrybutu alt, bo jego etykietą jest widoczny tekst odnośnika.

Ważne jest natomiast, aby tekst linku był znaczący (np. mówił dokąd prowadzi), a nie był pusty lub nieinformacyjny.

Dlaczego lista <ul> w menu jest uznawana za dobrą praktykę?

Lista <ul> + <li> odzwierciedla naturalną strukturę menu jako zbioru elementów.

Pomaga w porządkowaniu DOM, ułatwia stylowanie i bywa lepiej interpretowana przez narzędzia wspomagające. Sama lista nie zapewnia jednak automatycznie pełnej dostępności.

Jak sprawdzić, czy menu jest dostępne z klawiatury?

Najprościej przejść po stronie klawiszem Tab i sprawdzić, czy fokus jest widoczny i czy da się dotrzeć do wszystkich linków.

Jeśli w menu są rozwijane elementy, trzeba też sprawdzić obsługę klawiszami strzałek i możliwość zamknięcia podmenu.

Jakie błędy najczęściej pojawiają się w nawigacji a WCAG?

Typowe błędy to: nieinformacyjne teksty linków ("więcej"), brak widocznego fokusu w CSS, elementy nieosiągalne z klawiatury oraz zbyt małe obszary klikalne.

Częsty problem to też brak logicznej struktury nagłówków i regionów strony.

Kiedy warto stosować role ARIA zamiast semantycznych znaczników HTML?

Role ARIA warto stosować, gdy nie da się użyć właściwego znacznika semantycznego albo gdy trzeba doprecyzować rolę niestandardowego komponentu.

Zasada ogólna: najpierw semantyczny HTML (np. <nav>), a ARIA jako uzupełnienie, nie zamiennik.

Jak przygotować się do pytań o WCAG na egzamin INF.3?

Skup się na typowych obszarach: semantyka HTML, etykietowanie formularzy, nawigacja klawiaturą, fokus, kontrast i alternatywy tekstowe dla obrazów.

Ćwicz analizę krótkich fragmentów kodu i ocenę, czy wspierają technologie asystujące.

info

Statystycznie 53% uczniów zna prawidłową odpowiedź. trudne

Specjaliści zwracają uwagę: "role="navigation" nadaje kontenerowi znaczenie "nawigacja" dla technologii asystujących, co jest zgodne z ideą stosowania landmarków i wspiera kryteria związane z nawigowalnością."

Źródła:

  • W3C, "Web Content Accessibility Guidelines (WCAG) 2.1" (Recommendation), https://www.w3.org/TR/WCAG21/ - accessed 2026-02-28
  • W3C, "WAI-ARIA 1.2" (Recommendation) – role navigation, https://www.w3.org/TR/wai-aria-1.2/#navigation - accessed 2026-02-28
  • MDN Web Docs, "ARIA: navigation role", https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role - accessed 2026-02-28

Materiały:

  • Dokumentacja W3C: WCAG 2.1 (Quick Reference) – sekcja dot. nawigowalności i struktury
  • Dokumentacja W3C WAI-ARIA: definicja roli navigation oraz landmark regions
  • Dokumentacja MDN: ARIA role="navigation" oraz semantyczny znacznik &lt;nav&gt;
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego