Decyzja na start: jeśli chcesz, żeby osoby korzystające z czytników ekranu mogły szybko znaleźć i zrozumieć treść, używaj rzeczywistych znaczników nagłówków (H1–H6), a nie tylko stylów wizualnych. Dlaczego: nagłówki tworzą mapę strony, po której skaczą czytniki ekranu — to bezpośrednio wpływa na użyteczność. WebAIM: Headings. ([webaim.org)
Dla kogo ten artykuł
Dla redaktorów i twórców treści pracujących w no-code CMS (np. WordPress block editor, Webflow, Wix) — jeśli edytujesz strony bez kodu, to twoja odpowiedzialność za semantykę.
Dla product managerów i marketerów, którzy akceptują treści — bo brak H1/H2 to realny koszt czasu użytkownika.
Dla osób QA i accessibility reviewerów — szybkie kroki testowe opisane niżej.
Kluczowe pytania (i szybkie decyzje)
Czy moja strona ma jedną główną etykietę strony (H1)? Tak → OK. Nie → ustaw H1 w main.
Czy nagłówki są używane tylko do stylu (font-size) zamiast semantyki? Jeśli tak → zamień na H2/H3 w edytorze.
Czy kolejność nagłówków jest logiczna (H1→H2→H3, bez skoków)? Jeżeli nie → popraw porządek; to wpływa na zrozumienie struktury. [Use proper heading hierarchy]. ([getwcag.com)
Czym są nagłówki i dlaczego to ważne
Nagłówki to semantyczne elementy HTML (<h1>–<h6>) używane do dzielenia treści na sekcje; dla czytników ekranu są to punkty nawigacyjne. W praktyce: użytkownik z NVDA/VoiceOver może przeskakiwać między nagłówkami i w sekundach ocenić strukturę strony — bez nagłówków traci ten skrót. To nie tylko dostępność: wyszukiwarki i narzędzia indeksujące też wykorzystują nagłówki do rozumienia treści. [WebAIM: Headings]. ([webaim.org)
Jak zacząć w no-code CMS — krótka ścieżka (5 minut)
Szybkie sprawdzenie (5 min)
Otwórz stronę w edytorze CMS i znajdź komponent/format "Heading" lub opcję "Format → Heading 1/2/3".
Upewnij się, że tytuł strony (główny nagłówek) to H1 — nie używaj H1 do dekoracji.
Nadaj kolejnym sekcjom H2 i H3 zgodnie z hierarchią tematyczną.
W opublikowanej wersji użyj narzędzia WAVE lub rozszerzenia axe DevTools, żeby sprawdzić, czy nagłówki są rzeczywiście obecne w drzewie dostępności. Jeśli wolisz ręczną weryfikację — w DevTools -> Elements szukaj <h1>, <h2> itp. oraz Accessibility Tree. [GetWCAG: P as heading]. ([getwcag.com)
Fakt → Skutek → Werdykt (konkretne przypadki)
Fakt: Kopiujesz treść z Word/Google Docs.
Skutek: edytory wklejają formatowanie jako <p> lub <div> z rozmiarem czcionki, nie jako <h2>.
Werdykt: ryzyko wysokie — przy wklejaniu zawsze użyj opcji "Wklej jako tekst" i ponownie ustaw nagłówki w edytorze.
Fakt: Szablon renderuje tytuły jako <div> z klasą wyglądu.
Skutek: widocznie wygląda dobrze, ale czytnik ekranu nie rozpozna sekcji.
Werdykt: nieakceptowalne — popraw szablon lub zmień blok na semantyczny nagłówek.
Fakt: Masz wiele krótkich sekcji — każda potrzebuje nagłówka.
Skutek: bez nagłówków użytkownik traci orientację i czas.
Werdykt: proste do naprawienia — H2 dla sekcji, H3 dla podsekcji.
Mała tabela: typowe błędy i mini-werdykt
| Problem | Krótki skutek | Mini-werdykt |
|---|---|---|
| Tekst wygląda jak nagłówek, ale jest <p> | Czytnik go pomija w nawigacji | Naprawić — zamień na H2/H3 |
| Brak H1 na stronie | Trudniej zrozumieć temat strony | Konieczna zmiana |
| Skoki poziomów (H2→H4) | Niejasna hierarchia | Poprawić porządek |
Plusy i typowe skargi po wdrożeniu
Plusy: krótszy czas dotarcia do informacji, lepszy SEO, mniej zgłoszeń od użytkowników z niepełnosprawnościami.
Typowe skargi przed poprawką: „strona jest chaotyczna”, „nie mogę szybko przeskoczyć do konkretnego rozdziału”.
Synteza: niskie koszty wdrożenia, duży zwrot w użyteczności.
Jak testować i co sprawdzić (krótko)
Automatyczne: uruchom WAVE lub axe i sprawdź wykryte problemy z nagłówkami.
Manualne: włącz NVDA/VoiceOver i użyj skrótu do przechodzenia po nagłówkach (NVDA: H).
DevTools: w zakładce Elements sprawdź obecność <h1>–<h6> i Accessibility Tree. [Use proper heading hierarchy]. ([getwcag.com)
Puenta — kto powinien to zrobić i co teraz
Idealne dla: redaktorów i właścicieli treści w no-code CMS, którzy chcą szybki efekt w dostępności bez programowania.
Będzie frustrować: zespoły, które polegają na kopiowaniu formatów z edytorów tekstu bez kontroli końcowego HTML.
Prosty next step: otwórz jedną reprezentatywną stronę, ustaw H1 dla tytułu i przeglądnij strukturę nagłówków w DevTools lub za pomocą WebAIM: Headings. ([webaim.org)
Źródła i dodatkowe materiały
WebAIM — praktyczny przewodnik po nagłówkach. ([webaim.org)
GetWCAG — zalecenia dotyczące kolejności nagłówków i problemu „p as heading”. ([getwcag.com)
WCAG 2.4.10 — używaj nagłówków do organizacji treści. ([wcag.dock.codes)
Werdykt końcowy: jeśli zależy Ci na realnej dostępności — ustaw semantyczne nagłówki teraz; to najtańsza i najszybsza poprawka wpływająca na widoczność i użyteczność. Jeśli nie widzisz nagłówków po publikacji — sprawdź w DevTools lub narzędziu WAVE, bo problem zwykle tkwi w szablonie lub wklejaniu.
