Semantyczny HTML jako fundament
Proszę używać natywnych elementów HTML, takich jak button, nav i heading, aby bez dodatkowego wysiłku uzyskać wbudowaną dostępność, zanim sięgnie Pan/Pani po ARIA.
Semantyczny HTML jako fundament to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Semantyczny HTML zapewnia dostępność bez dodatkowego wysiłku
Używanie właściwego elementu HTML zapewnia obsługę klawiatury, komunikaty czytnika ekranu i prawidłowe role ARIA bez dodatkowego wysiłku. Większość problemów z dostępnością wynika z używania div i JavaScriptu zamiast natywnego elementu.
button a div z onClick
Element <button> można zaznaczyć fokusem, czytnik ekranu rozpoznaje go jako „przycisk”, reaguje na kliknięcie po naciśnięciu Enter lub spacji i działa z wysyłaniem formularza. Element <div onClick> nie zapewnia żadnej z tych funkcji.
<!-- BAD: not keyboard accessible, not announced -->
<div class="btn" onclick="submit()">Save</div>
<!-- GOOD: full accessibility for free -->
<button type="button" onclick="submit()">Save</button>Używaj button do przycisków, a do linków
Jeśli działanie prowadzi do adresu URL, należy użyć <a href>. Jeśli działanie wykonuje coś na stronie, należy użyć <button>. Nie należy używać kotwic jako przycisków (bez href, tylko z onclick) — jest to mylące dla technologii asystujących.
Nagłówki tworzą strukturę dokumentu
Należy używać elementów h1–h6 w odpowiedniej kolejności, aby utworzyć logiczną strukturę dokumentu. Użytkownicy czytników ekranu nawigują za pomocą nagłówków — pomijanie poziomów (h1 -> h3) tworzy mylące luki.
<h1>Article Title</h1>
<h2>Section One</h2>
<h3>Subsection</h3>
<h2>Section Two</h2>
<!-- BAD: skipping levels -->
<h1>Title</h1>
<h4>Section</h4>Elementy punktów orientacyjnych
Elementy punktów orientacyjnych HTML5 (header, nav, main, aside, footer) pozwalają użytkownikom czytników ekranu przechodzić między głównymi obszarami strony. Na każdej stronie powinien znajdować się jeden element <main>.
<header>
<nav>
<a href="/">Home</a>
</nav>
</header>
<main>
<h1>Page Title</h1>
<article>...</article>
<aside>Sidebar</aside>
</main>
<footer>...</footer>Elementy list
Należy używać <ul> dla list nieuporządkowanych, <ol> dla uporządkowanych i <dl> dla list definicji. Czytniki ekranu informują o „liście zawierającej N elementów” — to przydatna wskazówka nawigacyjna.
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
<!-- Announced: 'list with 3 items' -->Formularze: każdy element input potrzebuje etykiety
Każdy element input potrzebuje powiązanego elementu <label>. Para for/id łączy te elementy — kliknięcie etykiety ustawia fokus na polu, a czytnik ekranu odczytuje etykietę, gdy pole otrzyma fokus.
<label for="email">Email</label>
<input id="email" name="email" type="email">
<!-- Or wrap (no for/id needed): -->
<label>
Email
<input name="email" type="email">
</label>fieldset i legend dla grup
Powiązane pola (np. przyciski opcji) należy grupować za pomocą <fieldset> + <legend>. Czytniki ekranu odczytują legendę za każdym razem, gdy należące do grupy pole otrzyma fokus.
<fieldset>
<legend>Choose a plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>Elementy table dla danych tabelarycznych
Należy używać <table> wraz z <thead>, <tbody> i <th scope="col"> — nigdy nie należy używać tabel do układu strony. Czytniki ekranu umożliwiają poruszanie się po komórkach w dwóch wymiarach i odczytują nagłówki.
article, section i figure
<article>: samodzielna treść (wpis na blogu, komentarz). <section>: grupa tematyczna z nagłówkiem. <figure> + <figcaption>: multimedia z podpisem.
ARIA tylko wtedy, gdy jest konieczna
Pierwsza zasada ARIA brzmi: nie używaj ARIA. Natywny HTML zawsze jest lepszym wyborem. Po ARIA należy sięgać tylko wtedy, gdy żaden element semantyczny nie pasuje do niestandardowego komponentu (combobox, tabs, tree).
Szybkie sprawdzenie
Dlaczego <button onclick="..."> jest lepszym wyborem niż <div onclick="...">?
Podsumowanie: semantyczny HTML
Należy używać właściwego elementu: button do działań, a do nawigacji, h1-h6 w odpowiedniej kolejności do tworzenia struktury, elementów punktów orientacyjnych (header, nav, main, footer), ul/ol do list, label dla każdego pola, fieldset/legend dla grup przycisków opcji oraz table dla tabel danych. Natywny HTML zapewnia dostępność bez dodatkowego wysiłku. ARIA to ostateczność.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „Semantyczny HTML jako fundament” jest bezpłatna?
Tak — pełny tekst „Semantyczny HTML jako fundament” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Semantyczny HTML jako fundament”?
Proszę używać natywnych elementów HTML, takich jak button, nav i heading, aby bez dodatkowego wysiłku uzyskać wbudowaną dostępność, zanim sięgnie Pan/Pani po ARIA. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Semantyczny HTML jako fundament”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Poziomy WCAG: A, AA, AAA
- Semantyczny HTML jako fundament
- Role i atrybuty ARIA
- Nawigacja klawiaturą i zarządzanie fokusem