0Pricing
Web Accessibility Academy icon
HTMLFrontendWebEnterprisePoziomy A1 → B215 języków

Web Accessibility Academy

Twórz dostępne strony internetowe, z których mogą korzystać wszyscy. Opanuj semantyczny HTML, ARIA, obsługę klawiatury i czytników ekranu oraz zgodność z WCAG 2.2. Ścieżka nauki CoddyKit obejmująca 30 krótkich kursów i 120 interaktywnych lekcji, z tutorem AI dostępnym przez całą dobę.

Kursy
30
Lekcje
120
Interaktywne kroki
1,560
Bezpłatny start
Kurs 1
Program nauczania

30 kursów w tej ścieżce

Każdy kurs w ścieżce Web Accessibility Academy, w kolejności nauki. Pierwszy jest bezpłatny.

1

A14 lekcjiBezpłatny

Wyjaśnij, komu pomaga dostępność, oraz poznaj biznesowe i etyczne argumenty za inkluzywnym tworzeniem produktów

  1. 1Jak naprawdę wygląda niepełnosprawność w Internecie
  2. 2Poznaj użytkowników: niewidomych, słabowidzących, niesłyszących oraz osoby z ograniczeniami ruchowymi i poznawczymi
  3. 3Technologie wspomagające 101: czytniki ekranu, przełączniki, lupy
  4. +1 więcej
Zacznij naukę bezpłatnie
2

A14 lekcjiPRO

Zastosuj cztery zasady WCAG, aby ocenić dostępność dowolnej strony

  1. 1Postrzegalność: czy każdy może odebrać treść?
  2. 2Obsługiwalność: czy każdy może korzystać z elementów sterujących?
  3. 3Zrozumiałość: czy treść jest czytelna i przewidywalna?
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
3

A14 lekcjiPRO

Wybieraj znaczące elementy, aby strona była dostępna, zanim dodasz choć jeden atrybut

  1. 1Znaczniki mają znaczenie: dlaczego zupa div nie działa
  2. 2Elementy tekstowe: akapity, listy i wyróżnienia
  3. 3Drzewo dostępności: co słyszą czytniki ekranu
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
4

A14 lekcjiPRO

Zbuduj logiczny konspekt nagłówków, po którym użytkownicy czytników ekranu mogą się poruszać

  1. 1Jeden h1 na stronę: nazwanie głównego tematu
  2. 2Poziomy zagnieżdżenia bez pomijania
  3. 3Nagłówki służą do nawigacji, nie tylko do wyświetlania dużego tekstu
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
5

A14 lekcjiPRO

Korzystaj z obszarów orientacyjnych, aby użytkownicy mogli od razu przejść do potrzebnej części

  1. 1header, nav, main, footer: wielka czwórka
  2. 2Umieszczanie treści w main i tylko jednym main
  3. 3Nazywanie wielu regionów za pomocą aria-label
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
6

A24 lekcjiPRO

Pisz alternatywy dla obrazów, które przekazują znaczenie zamiast wprowadzać chaos

  1. 1Informacyjne czy dekoracyjne: pierwsza decyzja
  2. 2Pisanie tekstu alt, który przekazuje znaczenie, a nie piksele
  3. 3Pusty alt i ukryty obraz dekoracyjny
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
7

A24 lekcjiPRO

Wybieraj właściwy element interaktywny, aby zachowanie odpowiadało semantyce

  1. 1Linki prowadzą w różne miejsca, a przyciski wykonują działania
  2. 2Tekst linku zrozumiały poza kontekstem
  3. 3Przyciski jasno informujące o swoim działaniu
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
8

A24 lekcjiPRO

Buduj formularze, w których każdy element sterujący ma nazwę i jest łatwy w obsłudze

  1. 1Każde pole wejściowe potrzebuje prawdziwego label
  2. 2Placeholder to nie etykieta
  3. 3Grupowanie pól za pomocą fieldset i legend
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
9

A24 lekcjiPRO

Zadbaj o wystarczające wyróżnienie tekstu i interfejsu dla osób słabowidzących i nierozróżniających kolorów

  1. 1Dlaczego istnieją współczynniki kontrastu
  2. 2Osiąganie poziomu AA: progi dla zwykłego i dużego tekstu
  3. 3Nigdy nie polegaj wyłącznie na kolorze
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
10

A24 lekcjiPRO

Zapewnij dostęp do każdej interakcji i jej widoczność przy użyciu samej klawiatury

  1. 1Tab, Shift+Tab, Enter, Spacja: podstawowe klawisze
  2. 2Widoczny fokus: nigdy nie ukrywaj obrysu
  3. 3Logiczna kolejność tabulatora podąża za treścią
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
11

B14 lekcjiPRO

Korzystaj z ARIA poprawnie, aby dodać znaczenie, którego nie wyraża natywny HTML

  1. 1Pierwsza zasada: żadna ARIA jest lepsza niż zła ARIA
  2. 2Role określają, czym jest dany element
  3. 3Stany i właściwości: rozwinięty, zaznaczony, wyłączony
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
12

B14 lekcjiPRO

Precyzyjnie kontroluj komunikaty ogłaszane przez technologie asystujące dla dowolnego elementu

  1. 1Obliczanie dostępnej nazwy bez tajemnic
  2. 2aria-label a aria-labelledby
  3. 3aria-describedby dla dodatkowego kontekstu
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
13

B14 lekcjiPRO

Przenoś i ograniczaj fokus, aby dynamiczne interfejsy pozostały użyteczne

  1. 1tabindex 0, -1 i nigdy dodatni
  2. 2Przenoszenie fokusu po wykonaniu akcji
  3. 3Przywracanie fokusu po zamknięciu warstwy
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
14

B14 lekcjiPRO

Pozwól użytkownikom klawiatury pominąć powtarzalną treść i przejść do tego, co ważne

  1. 1Dlaczego istnieje opcja przejścia do głównej treści
  2. 2Budowanie działającego odnośnika pomijającego
  3. 3Widoczny dopiero po uzyskaniu fokusu
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
15

B14 lekcjiPRO

Sygnalizuj błędy formularza tak, aby każdy użytkownik mógł je znaleźć i naprawić

  1. 1Powiązywanie błędów z polami za pomocą aria-describedby
  2. 2Oznaczanie nieprawidłowego stanu za pomocą aria-invalid
  3. 3Przenoszenie fokusu do pierwszego błędu
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
16

B14 lekcjiPRO

Oznaczaj tabele tak, aby relacje między komórkami a nagłówkami były jasne

  1. 1th, scope i element caption
  2. 2Prawidłowe nagłówki wierszy i kolumn
  3. 3Złożone tabele: parowanie headers i id
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
17

B14 lekcjiPRO

Udostępniaj znaczące grafiki i ukrywaj te wyłącznie dekoracyjne

  1. 1Wbudowany SVG: role img i title
  2. 2Ukrywanie dekoracyjnych ikon za pomocą aria-hidden
  3. 3Przyciski ikonowe, które nadal mają nazwę
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
18

B14 lekcjiPRO

Buduj dialogi, które przechwytują fokus, poprawnie się zamykają i są ogłaszane

  1. 1Role dialogu i natywny element dialog
  2. 2Uwięzienie fokusu w oknie modalnym
  3. 3Escape do zamykania i przywracania fokusu
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
19

B14 lekcjiPRO

Implementuj popularne widżety ujawniania treści z poprawnym ARIA i obsługą klawiszy

  1. 1Wzorzec kart: tablist, tab, tabpanel
  2. 2Nawigacja między kartami za pomocą klawiszy strzałek
  3. 3Akordeony z button i aria-expanded
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
20

B14 lekcjiPRO

Testuj własne rozwiązania tak, jak faktycznie doświadczają ich osoby niewidome

  1. 1Włączanie NVDA, VoiceOver i TalkBack
  2. 2Podstawowe gesty i skróty klawiszowe
  3. 3Tryb przeglądania a tryb fokusu
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
21

B24 lekcjiPRO

Powiąż rzeczywiste kryteria sukcesu z konkretnymi poprawkami dla strony zgodnej z poziomem AA

  1. 1A, AA, AAA: wybór właściwego poziomu
  2. 2Nowości w wersji 2.2: wygląd fokusu i rozmiar celu
  3. 3Ruchy przeciągania i uwierzytelnianie dostępne
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
22

B24 lekcjiPRO

Zachowaj dostępność aplikacji jednostronicowych mimo routingu po stronie klienta i ponownych renderowań

  1. 1Zmiany tras bez ponownego ładowania strony
  2. 2Zarządzanie fokusem za pomocą refs i useEffect
  3. 3Fragmenty, portale i pułapka kolejności DOM
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
23

B24 lekcjiPRO

Powiadamiaj użytkowników czytników ekranu o zmianach zachodzących bez ponownego wczytania strony

  1. 1polite a assertive: wybór pilności
  2. 2Role status, alert i log
  3. 3Informowanie o toastach, loaderach i licznikach
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
24

B24 lekcjiPRO

Buduj solidne niestandardowe widżety, korzystając ze sprawdzonych wzorców APG

  1. 1Czytanie APG: wzorce, klawisze i przykłady
  2. 2Combobox i autouzupełnianie bez błędów
  3. 3Menu, menubar i przycisk menu
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
25

B24 lekcjiPRO

Respektuj preferencje dotyczące ruchu i unikaj wywoływania dyskomfortu lub napadów

  1. 1prefers-reduced-motion w CSS i JS
  2. 2Zaburzenia przedsionkowe i zagrożenia związane z paralaksą
  3. 3Próg trzech błysków a napady padaczkowe
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
26

B24 lekcjiPRO

Spraw, aby wykresy były zrozumiałe także bez polegania na kolorze i kształcie

  1. 1Każdy wykres potrzebuje tekstowej alternatywy
  2. 2Tabela danych jako rozwiązanie zastępcze
  3. 3Kolor, wzór i bezpośrednie etykiety
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
27

B24 lekcjiPRO

Automatycznie wykrywaj klasę błędów dostępności w swoim potoku

  1. 1Co automatyzacja może wykryć, a czego nie
  2. 2Skanowanie za pomocą axe DevTools i Lighthouse
  3. 3Podłączanie axe-core do testów Playwright
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
28

B24 lekcjiPRO

Przeprowadź uporządkowany audyt manualny i ustal priorytety najważniejszych poprawek

  1. 1Budowanie procesu ręcznego audytu
  2. 2Priorytetyzacja według ważności i wpływu
  3. 3Pisanie zgłoszeń błędów, które deweloperzy mogą wykorzystać
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
29

B24 lekcjiPRO

Poznaj prawa i standardy, które sprawiają, że dostępność trafia do planu działania

  1. 1ADA, Section 508 i pozwy dotyczące stron internetowych w USA
  2. 2Europejski akt o dostępności i EN 301 549
  3. 3WCAG jako wspólny punkt odniesienia w prawie
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
30

B24 lekcjiPRO

Proszę włączyć dostępność do pracy zespołu, aby wykraczała poza jeden projekt.

  1. 1Przesuwanie dostępności na początek: a11y w projektach i zadaniach
  2. 2Definicja ukończenia uwzględniająca a11y
  3. 3Praktyczna lista kontrolna dostępności dla każdej funkcji
  4. +1 więcej
Zacznij naukę bezpłatnieOdblokuj w PRO
CoddyKit PRO

Odblokuj 30 kursów w tej ścieżce oraz wszystkie kursy w pozostałych ścieżkach

Tutor AI, egzamin certyfikacyjny i certyfikat. Działa w przeglądarce, na iOS i Androidzie.

Zobacz wszystkie plany
Rocznie$29.90 / rokOkoło $2.49 miesięcznieZapłać razDożywotnio$69.99 jednorazowoBez odnowień. PRO na zawsze.
Przegląd kursu

Web Accessibility (a11y): Build for Everyone

Twórz dostępne strony internetowe, z których mogą korzystać wszyscy. Opanuj semantyczny HTML, ARIA, obsługę klawiatury i czytników ekranu oraz zgodność z WCAG 2.2. Ta ścieżka obejmuje 30 progresywnych mini-kursów od poziomu początkującego (A1) do zaawansowanego (B2), z krótkimi skoncentrowanymi lekcjami i szybkimi quizami, które utrwalą każdą koncepcję.

Co się nauczysz

Zaczynasz od podstaw i budujesz przez tematy pośrednie i zaawansowane, gdzie każdy kurs nawiązuje do poprzedniego. Każda lekcja jest praktyczna i w małych porcjach, z dostępnym 24/7 tutorem AI, gdy potrzebujesz pomocy.

Jak to działa

Każdy kurs podzielony jest na cztery skoncentrowane, małe lekcje. Ukończ kilka lekcji dziennie i opanujesz całą ścieżkę w ciągu tygodni, a nie miesięcy.

Narzędzia

Ćwicz z AI, nie tylko czytaj

Przyspiesz naukę dzięki narzędziom i funkcjom napędzanym AI

Chat AICzatuj z korepetytorem AIZadaj Super PytanieUzyskaj odpowiedzi na poziomie ekspertaPROUtwórz lekcjęKonstruktor lekcji napędzany AIPRORozpocznij egzamin certyfikacyjnyZdobądź swój certyfikatPRORozpocznij wyzwaniePrzetestuj swoje umiejętności

Jak się będziesz uczyć

  1. 01

    Interaktywne lekcje

    Praktyczne ćwiczenia kodowania z opinią zwrotną w czasie rzeczywistym

  2. 02

    Tutor AI

    Uzyskaj natychmiastową pomoc od naszego AI, gdy się zatniesz

  3. 03

    Wbudowany edytor

    Pisz i uruchamiaj kod bezpośrednio w przeglądarce

  4. 04

    Certyfikat

    Uzyskaj certyfikat po ukończeniu kursu

Odkrywaj dalej

Powiązane ścieżki nauki

Angular AcademyLearn Angular to build scalable and modern web applications with Angular Academy.Frontend AcademyDevelop visually stunning and responsive websites with Frontend Development Academy.HTML for KidsIntroduce kids to web development with fun and easy HTML lessons at HTML for Kids.HTML AcademyBuild strong foundations in web development by learning HTML at HTML Academy.Micro Frontends Architecture with Module FederationMaster Micro Frontends architecture using Module Federation to build scalable and indepen…Vue AcademyCreate interactive and efficient user interfaces with Vue.js through Vue Academy.
FAQ

Często zadawane pytania

Czy kurs Web Accessibility Academy jest bezpłatny?

Tak. Możesz rozpocząć kurs Web Accessibility Academy za darmo i ukończyć jego interaktywne lekcje bez żadnych kosztów. Opcjonalna subskrypcja PRO odblokowuje zaawansowane narzędzia AI i certyfikat możliwy do udostępnienia.

Czy potrzebuję wcześniejszego doświadczenia, aby nauczyć się HTML?

Nie. Kurs zaczyna się od podstaw i stopniowo przechodzi do bardziej zaawansowanych tematów, więc możesz zacząć nawet bez wcześniejszego doświadczenia z HTML.

Jak nauczysz się HTML na CoddyKit?

Uczysz się praktycznie. Krótkie interaktywne lekcje łączą jasne wyjaśnienie z praktycznym ćwiczeniem kodowania, które działa w czasie rzeczywistym, a tutor AI dostępny 24/7 udziela spersonalizowanej pomocy, gdy się zatniesz.

Czy dostajesz certyfikat po ukończeniu Web Accessibility Academy?

Tak. Uczniowie PRO mogą przystąpić do egzaminu i uzyskać certyfikat ukończenia możliwy do udostępnienia z kodem możliwym do weryfikacji dla kursu Web Accessibility Academy.

Czy możesz nauczyć się HTML na telefonie?

Tak. CoddyKit jest dostępny na stronie internetowej i jako natywne aplikacje iOS i Android, dzięki czemu możesz nauczyć się HTML na dowolnym urządzeniu, a Twoje postępy synchronizują się między nimi.

Ile kosztuje CoddyKit PRO?

Pierwszy kurs w ścieżce Web Accessibility Academy jest bezpłatny. CoddyKit PRO odblokowuje wszystkie kursy: $5.90 tygodniowo, $7.90 miesięcznie, $29.90 rocznie lub $69.99 jednorazowo, aby uzyskać dożywotni dostęp bez odnowień.

Ile czasu zajmuje ukończenie ścieżki Web Accessibility Academy?

Ścieżka Web Accessibility Academy obejmuje 30 kursów i 120 lekcji. Większość lekcji zajmuje około 5–10 minut, więc cała ścieżka to mniej więcej 14 godzin praktyki we własnym tempie.

Zacznij Web Accessibility Academy Teraz

Dołącz do tysięcy uczniów opanowujących programowanie dzięki lekcjom wspieranym AI.

Zacznij naukę bezpłatniePrzeglądaj Wszystkie Kursy