Antywzorzec kotwicy bez href
Dlaczego fikcyjny link utrudnia korzystanie z klawiatury i czytnika ekranu
Antywzorzec kotwicy bez href to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 4 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.
Fałszywy link
Częstym antywzorcem jest element anchor bez href, któremu za pomocą obsługi kliknięcia nadaje się działanie przycisku. Wygląda to poprawnie, ale powoduje problemy.
<a onclick="openMenu()">Menu</a>Bez href nie ma linku
Anchor jest prawdziwym linkiem tylko wtedy, gdy ma href. Bez niego przeglądarka w ogóle nie traktuje go jako elementu interaktywnego.
Wypada z kolejności tabulacji
Anchor bez href nie może otrzymać fokusu, więc użytkownicy klawiatury przechodzący klawiszem Tab przez stronę pomijają go i nigdy nie mogą do niego dotrzeć.
Klawiatura nie może go aktywować
Nawet jeśli wymusisz na nim fokus, fałszywy link domyślnie ignoruje klawisze Enter i spację, więc użytkownicy klawiatury nadal nie mogą go aktywować.
Czytniki ekranu się gubią
Bez href czytnik ekranu może w ogóle nie ogłosić elementu anchor jako linku, więc użytkownicy nie dowiedzą się, że mogą z niego korzystać.
Sztuczka z href ustawionym na hash
Niektórzy próbują naprawić to za pomocą href zawierającego tylko hash. Element można wtedy objąć fokusem, ale strona przeskakuje również na górę, co jest irytujące.
<a href="#" onclick="openMenu()">Menu</a>Prawdziwe rozwiązanie
Jeśli element sterujący wykonuje działanie, użyj prawdziwego przycisku. Otrzymasz fokus, obsługę klawiatury i właściwą rolę bez dodatkowej pracy.
<button type="button" onclick="openMenu()">Menu</button>Kiedy powinien to być link
Jeśli element rzeczywiście służy do nawigacji, pozostaw anchor, ale dodaj do niego prawdziwy href wskazujący miejsce docelowe.
<a href="/menu">Menu</a>Dlaczego ludzie tak robią
Programiści często wybierają element anchor ze względu na jego podkreślony wygląd. Przycisk można jednak ostylować w ten sam sposób bez rezygnowania z dostępności.
Kursor również wprowadza w błąd
Anchor bez href domyślnie traci nawet kursor wskazujący, sugerując użytkownikom widzącym, że w tym miejscu nic naprawdę nie można kliknąć.
Najważniejszy wniosek
Nie udawaj interaktywności. Wybierz prawdziwy przycisk dla działań albo element anchor z href dla nawigacji i pomiń rozwiązania zastępcze.
Szybkie sprawdzenie
Dlaczego element anchor bez href, ale z obsługą kliknięcia, stanowi problem?
Podsumowanie
Anchor bez href to fałszywy link: nie można na nim umieścić fokusu i nie obsługuje klawiatury. Używaj przycisku do działań, a prawdziwego href do nawigacji. ✅
Często zadawane pytania
Czy lekcja „Antywzorzec kotwicy bez href” jest bezpłatna?
Tak — pełny tekst „Antywzorzec kotwicy bez href” 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 „Antywzorzec kotwicy bez href”?
Dlaczego fikcyjny link utrudnia korzystanie z klawiatury i czytnika ekranu Ć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 4 z 4.
Ile czasu zajmuje lekcja „Antywzorzec kotwicy bez href”?
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