Strukturacja treści dla czytników ekranu

Czytniki ekranu interpretują strony internetowe zupełnie inaczej niż wzrokowi użytkownicy. Kluczem do ich poprawnego działania jest odpowiednia struktura HTML – semantyczna, logiczna i spójna. Dzięki niej użytkownik może „przeskanować” zawartość strony bez patrzenia, korzystając wyłącznie z klawiatury i komend głosowych.

Czym jest strukturacja treści?

To sposób organizowania kodu HTML tak, aby:

nagłówki tworzyły logiczną hierarchię,
sekcje były jasno wyodrębnione,
lista elementów była oznaczona jako lista, a nie zbudowana z <div>,
elementy interfejsu miały znaczenie semantyczne (np. <nav>, <aside>, <article>).

Nagłówki jako punkty orientacyjne

Większość czytników pozwala użytkownikowi przeskakiwać po nagłówkach. Dlatego ich struktura musi być logiczna i konsekwentna:

<h1> – tytuł strony (jeden na stronę)
<h2> – główne sekcje
<h3> – podsekcje
itd.

<h1>Strona główna</h1>
<h2>O nas</h2>
<h3>Nasza misja</h3>
<h3>Zespół</h3>
<h2>Usługi</h2>

Unikaj pomijania poziomów nagłówków – np. nie używaj <h4> bez wcześniejszego <h3>.

Znaczniki semantyczne

Używaj znaczeń w HTML, nie tylko „pudełek”:

<nav> – nawigacja
<main> – główna zawartość strony
<header>, <footer> – nagłówek i stopka sekcji
<section> – tematycznie spójna część strony
<article> – samodzielny blok treści (np. wpis na blogu)

<main>
  <section>
    <h2>Kontakt</h2>
    <p>Skontaktuj się z nami przez formularz lub telefonicznie.</p>
  </section>
</main>

Elementy interfejsu z kontekstem

Nie wszystkie elementy są zrozumiałe dla czytnika, jeśli ich kontekstu nie dopiszemy. Przykład – ikonka koszyka bez opisu:

<button aria-label="Dodaj do koszyka">
  <svg>...</svg>
</button>

Bez aria-label screen reader powiedziałby: „przycisk” – ale użytkownik nie wiedziałby, do czego służy.

Przykład dobrze ustrukturyzowanej strony

<header>
  <h1>Moja firma</h1>
  <nav>
    <ul>
      <li><a href="#onas">O nas</a></li>
      <li><a href="#uslugi">Usługi</a></li>
    </ul>
  </nav>
</header>

<main>
  <section id="onas">
    <h2>O nas</h2>
    <p>Jesteśmy zespołem pasjonatów...</p>
  </section>

  <section id="uslugi">
    <h2>Usługi</h2>
    <article>
      <h3>Projektowanie stron</h3>
      <p>Tworzymy strony internetowe dla firm.</p>
    </article>
  </section>
</main>

<footer>
  <p>Copyright © 2025</p>
</footer>

Taka struktura pozwala czytnikowi odczytać logicznie zbudowaną hierarchię strony: nagłówki, sekcje, artykuły, nawigację.

Dobre praktyki

Twórz jeden <h1> na stronę i zachowuj logiczną strukturę nagłówków
Używaj semantycznych znaczników HTML5 zamiast <div> wszędzie
Dodawaj opisy do ikon i przycisków (aria-label, aria-describedby)
Unikaj pustych linków i przycisków – muszą mieć treść lub opis ARIA

🧠 Ćwiczenie

Stwórz stronę-wizytówkę o następującej strukturze:

<header> z nazwą i menu
<main> z sekcją „O mnie”, „Usługi”, „Kontakt”
każda sekcja powinna mieć nagłówek i minimum 1 podsekcję

Sprawdź strukturę nagłówków za pomocą WAVE lub Lighthouse.

💡 Wniosek

Poprawna strukturacja treści to fundament dostępnej strony. Nawet bez stylów i JavaScriptu użytkownik powinien być w stanie odnaleźć się w jej układzie – i to właśnie zapewnia dobrze przemyślany, semantyczny HTML.

Previous Temat

Back to Zagadnienie

Next Temat