Semantyczny HTML a dostępność

W Starożytnym Egipcie hieroglify miały scisle okreslone znaczenie - każdy symbol pelnil konkretna funkcje. Podobnie jest z semantycznym HTML - każdy znacznik niesie że soba informacje o roli i znaczeniu treści, co jest kluczowe dla technologii wspomagajacych.

Dlaczego semantyka jest tak ważna?

Czytniki ekranowe (screen readers) nie "widza" strony - odczytuja strukturę HTML. Gdy uzywasz

<div>

na wszystko, czytnik nie wie, co jest nawigacja, co naglowkiem, a co trescia główna.

1<!-- ŹLE - "zupa z divow" -->
2<div class="header">
3    <div class="nav">
4        <div class="nav-item">Strona główna</div>
5        <div class="nav-item">O nas</div>
6    </div>
7</div>
8<div class="content">
9    <div class="title">Witaj w muzeum</div>
10    <div class="text">Opis wystawy...</div>
11</div>
12
13<!-- DOBRZE - semantyczny HTML -->
14<header>
15    <nav aria-label="Nawigacja główna">
16        <ul>
17            <li><a href="/">Strona główna</a></li>
18            <li><a href="/about">O nas</a></li>
19        </ul>
20    </nav>
21</header>
22<main>
23    <h1>Witaj w muzeum</h1>
24    <p>Opis wystawy...</p>
25</main>

Kluczowe znaczniki semantyczne

Elementy sekcjonujace

1<header>  <!-- Nagłówek strony lub sekcji -->
2<nav>     <!-- Nawigacja -->
3<main>    <!-- Główna tresc strony (tylko jeden na stronę!) -->
4<article> <!-- Samodzielna tresc (post, artykul) -->
5<section> <!-- Tematyczna grupa treści -->
6<aside>   <!-- Tresc poboczna (sidebar) -->
7<footer>  <!-- Stopka strony lub sekcji -->

Hierarchia nagłówków

Naglowki tworza strukturę dokumentu - czytniki ekranowe pozwalaja uzytkownikam nawigowac po naglowkach, wiec ich hierarchia musi być poprawna.

1<!-- ŹLE - pominiety poziom h2 -->
2<h1>Muzeum Egipskie</h1>
3<h3>Wystawy stale</h3>     <!-- Powinno być h2! -->
4<h4>Skarby faraonów</h4>   <!-- Powinno być h3! -->
5
6<!-- DOBRZE - poprawna hierarchia -->
7<h1>Muzeum Egipskie</h1>
8<h2>Wystawy stale</h2>
9<h3>Skarby faraonów</h3>
10<h3>Mumie krolewskie</h3>
11<h2>Wystawy czasowe</h2>
12<h3>Zloce Tutanchamona</h3>

Listy

1<!-- Nawigacja jako lista - czytnik powie "lista, 4 elementy" -->
2<nav>
3    <ul>
4        <li><a href="/">Strona główna</a></li>
5        <li><a href="/exhibitions">Wystawy</a></li>
6        <li><a href="/tickets">Bilety</a></li>
7        <li><a href="/contact">Kontakt</a></li>
8    </ul>
9</nav>
10
11<!-- Lista definicji -->
12<dl>
13    <dt>Skarabeusz</dt>
14    <dd>Swiety zuk symbolizujacy odrodzenie</dd>
15    <dt>Ankh</dt>
16    <dd>Symbol zycia wiecznego</dd>
17</dl>

Landmark roles

Semantyczne znaczniki HTML automatycznie tworza tzw. landmarks (punkty orientacyjne), po których uzytkownicy czytników ekranowych mogą szybko nawigowac:

| Znacznik HTML | Landmark Role | Opis | |:---|:---|:---| |

<header>

| banner | Nagłówek strony | |

<nav>

| navigation | Nawigacja | |

<main>

| main | Główna tresc | |

<aside>

| complementary | Tresc uzupelniajaca | |

<footer>

| contentinfo | Stopka | |

<section>

| region* | Sekcja tematyczna | |

<form>

| form* | Formularz |

*Wymaga atrybutu

aria-label

lub

aria-labelledby

Praktyczny przykład

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <title>Muzeum Starożytnego Egiptu</title>
6</head>
7<body>
8    <header>
9        <h1>Muzeum Starożytnego Egiptu</h1>
10        <nav aria-label="Nawigacja główna">
11            <ul>
12                <li><a href="/">Strona główna</a></li>
13                <li><a href="/exhibitions">Wystawy</a></li>
14            </ul>
15        </nav>
16    </header>
17
18    <main>
19        <article>
20            <h2>Wystawa: Skarby Tutanchamona</h2>
21            <p>Odkryj niesamowite artefakty...</p>
22            <figure>
23                <img src="mask.jpg" alt="Zlota maska posmiertna Tutanchamona">
24                <figcaption>Maska posmiertna Tutanchamona, ok. 1323 p.n.e.</figcaption>
25            </figure>
26        </article>
27    </main>
28
29    <aside aria-label="Informacje dodatkowe">
30        <h2>Godziny otwarcia</h2>
31        <p>Pn-Pt: 9:00-17:00</p>
32    </aside>
33
34    <footer>
35        <p>Muzeum Starożytnego Egiptu 2024</p>
36    </footer>
37</body>
38</html>

Typowe błędy semantyczne

Unikaj tych częstych pomyłek:

1<!-- ŹLE: div zamiast button -->
2<div onclick="submit()">Wyślij</div>
3
4<!-- DOBRZE: natywny button -->
5<button onclick="submit()">Wyślij</button>
6
7<!-- ŹLE: span jako nagłówek -->
8<span class="big-text">Ważny tytuł</span>
9
10<!-- DOBRZE: właściwy nagłówek -->
11<h2>Ważny tytuł</h2>
12
13<!-- ŹLE: br do tworzenia odstępów -->
14<br><br><br>
15
16<!-- DOBRZE: CSS margin/padding -->
17<p style="margin-top: 2rem;">Tekst z odstępem</p>

Walidacja semantyki

Mozesz sprawdzic semantykę swojej strony za pomocą:

W3C Validator - sprawdza poprawnosc HTML
WAVE - analizuje dostępnosc strony
Lighthouse - audyt dostępności w Chrome DevTools

Semantyczny HTML to fundament dostępności - tak jak solidne fundamenty piramidy zapewniaja jej trwalosc na tysiaclecia, tak poprawna semantyka zapewnia, że strona będzie dostępna dla wszystkich użytkowników. Każdy element HTML powinien odpowiadac swojej roli - nagłówek powinien być nagłówkiem, nawigacja nawigacją, a przycisk przyciskiem.

Przejdź do CodeWorlds→