Linki prowadzą w różne miejsca, a przyciski wykonują działania
Jedna zasada, która rozstrzyga niemal każdy przypadek
Linki prowadzą w różne miejsca, a przyciski wykonują działania to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 1 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 Web Accessibility Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Jedna zasada
Oto zasada, która rozwiązuje niemal każdy przypadek: link przenosi w inne miejsce, a przycisk powoduje wykonanie działania tutaj. 🧭
Czym jest link
Link służy do nawigacji. Kliknięcie go zmienia stronę lub adres URL, na przykład przenosi do innego artykułu albo nowej sekcji.
<a href="/pricing">See pricing</a>Czym jest przycisk
Przycisk wykonuje działanie w bieżącym miejscu: wysyła formularz, otwiera menu lub przełącza ustawienie bez opuszczania strony.
<button type="button">Add to cart</button>Dlaczego ma to znaczenie
Czytniki ekranu głośno ogłaszają rolę elementu. Użytkownicy słyszą link lub „przycisk”, dlatego właściwy element tworzy właściwe oczekiwanie przed wykonaniem działania.
Różne klawisze, różne zadania
Nie chodzi tu tylko o wygląd. Przycisk reaguje na spację lub Enter, natomiast link aktywuje się tylko klawiszem Enter. Klawisze są dopasowane do roli.
Szybki test
Zadaj jedno pytanie: czy ten element sterujący zmienia moje położenie, czy zmienia zawartość ekranu? Nawigacja oznacza link, a działanie — przycisk.
Otwieranie w nowej karcie
Jeśli dany element można sensownie otworzyć w nowej karcie lub dodać do zakładek, służy on do nawigacji, więc należy użyć prawdziwego linku z href.
Wygląd nie określa roli
Stylizacja nie zmienia znaczenia. Przycisk może wyglądać jak link, a link może wyglądać jak przycisk, ale to element określa rolę.
Częsty błąd
Użytkownicy często sięgają po ostylowany element div lub span i dodają do niego obsługę kliknięcia. Wygląda to poprawnie, ale element nie ma roli ani obsługi klawiatury.
<div class="btn" onclick="save()">Save</div>Wysyłanie formularza
Aby wysłać formularz, należy użyć przycisku typu submit. Jest to działanie, a nie nawigacja, więc użycie linku byłoby nieprawidłowe.
<button type="submit">Sign up</button>Przejście do innej strony
Aby przenieść użytkownika na stronę kontaktową, należy użyć linku. To czysta nawigacja, dlatego przycisk wprowadzałby wszystkich w błąd.
<a href="/contact">Contact us</a>Szybkie sprawdzenie
Dodajesz element sterujący, który otwiera menu bez opuszczania strony. Który element będzie właściwy?
Podsumowanie
Linki prowadzą w różne miejsca, a przyciski wykonują działania. Dopasuj element do zamiaru, a uzyskasz właściwą rolę, właściwe klawisze i zadowolonych użytkowników. 🎉
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
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Linki prowadzą w różne miejsca, a przyciski wykonują działania” jest bezpłatna?
Tak — pełny tekst „Linki prowadzą w różne miejsca, a przyciski wykonują działania” 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 Web Accessibility Academy, przejdź na CoddyKit PRO. Kurs Web Accessibility Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Linki prowadzą w różne miejsca, a przyciski wykonują działania”?
Jedna zasada, która rozstrzyga niemal każdy przypadek Ćwiczysz Web Accessibility 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ąć Web Accessibility Academy?
Nie wymagamy żadnego doświadczenia. Web Accessibility 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 1 z 4.
Ile czasu zajmuje lekcja „Linki prowadzą w różne miejsca, a przyciski wykonują działania”?
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 Web Accessibility Academy?
Tak. Każda lekcja Web Accessibility 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
- Linki prowadzą w różne miejsca, a przyciski wykonują działania
- Tekst linku zrozumiały poza kontekstem
- Przyciski jasno informujące o swoim działaniu
- Antywzorzec kotwicy bez href