Podstawy dostępności
Dodawanie tekstu alternatywnego do obrazów i tworzenie przyjaznych dla użytkownika stron internetowych
Podstawy dostępności to bezpłatna lekcja HTML for Kids 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 HTML for Kids, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML for Kids zawiera 4 lekcji w sumie.
Tworzenie dostępnych stron
Podstawy dostępności
Witamy w kolejnej lekcji! Dzisiaj nauczymy się tworzyć strony internetowe dostępne dla wszystkich, w tym dla osób z niepełnosprawnościami. Dostępność jest ważnym elementem tworzenia stron przyjaznych użytkownikom.
Czym jest dostępność?
Dostępność zapewnia wszystkim użytkownikom, niezależnie od ich możliwości, możliwość korzystania ze stron internetowych. Dotyczy to osób, które:
- Mają niepełnosprawność wzroku lub słuchu.
- Korzystają z czytników ekranu lub innych technologii asystujących.
- Nawigują po stronach za pomocą klawiatury zamiast myszy.
Nauczmy się tworzyć strony bardziej dostępne dla wszystkich!
Dodawanie tekstu alternatywnego do obrazów
Użyj atrybutu alt w znaczniku <img>, aby opisać obraz. Dzięki temu czytniki ekranu mogą przekazać użytkownikom z niepełnosprawnością wzroku informacje o jego treści.
Przykład:
<img src="sunrise.jpg" alt="A beautiful sunrise over the mountains" />
Używanie semantycznego HTML
Znaczniki semantyczne, takie jak <header>, <nav> i <footer>, pomagają technologiom asystującym zrozumieć strukturę strony.
Przykład:
<header>
<h1>My Blog</h1>
</header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<footer>
<p>© 2024 My Blog</p>
</footer>
Nawigacja za pomocą klawiatury
Upewnij się, że do wszystkich elementów interaktywnych, takich jak linki i przyciski, można uzyskać dostęp za pomocą klawisza Tab. Użyj atrybutu tabindex, aby kontrolować kolejność przechodzenia za pomocą klawisza Tab.
Przykład:
<a href="#section1" tabindex="1">Go to Section 1</a>
<a href="#section2" tabindex="2">Go to Section 2</a>
Dodawanie etykiet do pól wejściowych
Użyj tagu <label>, aby dodać jasne opisy do pól wejściowych. Połącz etykietę z polem wejściowym za pomocą atrybutu for.
Przykład:
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
</form>
Kontrast kolorów
Upewnij się, że kontrast między kolorami tekstu i tła jest wystarczający, aby każdy mógł łatwo odczytać treść. Użyj narzędzi online do sprawdzania współczynników kontrastu kolorów.
Wskazówka: Wysoki kontrast poprawia czytelność dla osób z niepełnosprawnościami wzroku.
Przykład:
<p style="color: black; background-color: white;">This text is easy to read.</p>
<p style="color: gray; background-color: lightgray;">This text is hard to read.</p>
Wypróbuj samodzielnie
Utwórzmy dostępny formularz. Oto przykład:
<!DOCTYPE html>
<html>
<head>
<title>Accessible Form</title>
</head>
<body>
<h1>Sign Up</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<br />
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
<br />
<button type="submit">Sign Up</button>
</form>
</body>
</html>
Podsumowanie dostępności
Świetna robota!
Gratulacje! Dowiedziałeś się, jak tworzyć strony internetowe dostępne dla każdego. Dostępność jest niezbędnym elementem nowoczesnego tworzenia stron internetowych. W następnej lekcji nauczymy się walidować kod HTML, aby upewnić się, że spełnia standardy internetowe. Przygotuj się na doskonalenie swoich umiejętności!
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
- 16
- Lekcje
- 35
Często zadawane pytania
Czy lekcja „Podstawy dostępności” jest bezpłatna?
Tak — pełny tekst „Podstawy dostępności” 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 HTML for Kids, przejdź na CoddyKit PRO. Kurs HTML for Kids zawiera 4 lekcji w sumie.
Co nauczysz się w „Podstawy dostępności”?
Dodawanie tekstu alternatywnego do obrazów i tworzenie przyjaznych dla użytkownika stron internetowych Ćwiczysz HTML for Kids 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ąć HTML for Kids?
Nie wymagamy żadnego doświadczenia. HTML for Kids 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 „Podstawy dostępności”?
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 HTML for Kids?
Tak. Każda lekcja HTML for Kids 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
- Pisanie przejrzystego kodu
- Podstawy dostępności
- Sprawdzanie poprawności kodu HTML
- Komentarze HTML