Dostępność
Kurs HTML · Wyjaśnienie, przykłady, oczekiwany wynik i ćwiczenie.
Dobrze napisany HTML pomaga użytkownikom klawiatury i technologii wspomagających.
Jak to działa?
Używaj prawdziwych przycisków do akcji i linków do nawigacji. Dbaj o etykiety formularzy, logiczne nagłówki i tekst alternatywny zdjęć.
Unikaj klikalnych elementów <div> udających przyciski.
Przykład 1 — poznaj zapis
<button type="button" aria-label="Zamknij okno">
×
</button>Nazwa dostępności wyjaśnia funkcję przycisku z samym symbolem.
Przeczytaj kod linijka po linijce
<button type="button" aria-label="Zamknij okno">Dodajemy przycisk dostępny dla użytkownika.</button>Ten znacznik określa element lub strukturę dokumentu.
Przycisk ze znakiem × i opisem dostępnym dla czytnika ekranu.
Przykład 2 — podobny problem, inne dane
Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.
<button type="button">Otwórz menu</button>Prawdziwy przycisk, który można obsługiwać klawiaturą.
Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.
Spróbuj samodzielnie
Popraw formularz, w którym pole nie ma etykiety.
Jeśli rozumiesz przykład, oznacz lekcję jako ukończoną i przejdź dalej.