Pierwsza zasada: żadna ARIA jest lepsza niż zła ARIA
Dlaczego natywny HTML jest niemal zawsze lepszym wyborem
Pierwsza zasada: żadna ARIA jest lepsza niż zła ARIA 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.
Czym właściwie jest ARIA
ARIA to zestaw atrybutów HTML, które informują technologie asystujące, czym jest dany element i co robi, gdy sam kod znaczników nie wystarcza, aby to określić.
ARIA nie zmienia działania
Jest jednak pewien haczyk: ARIA zmienia tylko to, co jest ogłaszane. Sama nie dodaje obsługi kliknięć, fokusu ani klawiatury.
<div role="button">Save</div>
<!-- looks like a button, does nothing -->Pierwsza zasada ARIA
Oficjalna pierwsza zasada brzmi: jeśli natywny element HTML może wykonać dane zadanie, należy go użyć, zamiast odtwarzać go za pomocą ARIA.
Natywne elementy mają wszystko w standardzie
Prawdziwy przycisk może otrzymać fokus, reaguje na Enter i spację oraz bezpłatnie komunikuje swoją rolę. Nie trzeba samodzielnie implementować żadnej z tych funkcji.
<button>Save</button>
<!-- focus, keyboard, role: all built in -->Dlaczego błędne ARIA jest gorsze
Nieprawidłowa rola aktywnie wprowadza użytkowników w błąd. Niepoprawne ARIA jest gorsze niż jego brak, ponieważ może ukrywać treść lub opisywać ją nieprawidłowo.
Pułapka nadpisywania
ARIA nadpisuje natywne znaczenie semantyczne. Jeśli przypisze Pan/Pani nagłówkowi role=presentation, czytniki ekranu całkowicie przestaną traktować go jak nagłówek.
<h2 role="presentation">Pricing</h2>
<!-- no longer a heading to AT -->Trzy rzeczy, które zapewnia ARIA
ARIA zapewnia dokładnie trzy rodzaje informacji: rolę (czym coś jest), stany i właściwości. To cały zestaw dostępnych narzędzi.
ARIA nie wpływa na CSS
Ustawienie aria-hidden na elemencie ukrywa go przed czytnikami ekranu, ale element pozostaje w pełni widoczny na ekranie. Te dwie warstwy są niezależne.
<span aria-hidden="true">decorative star</span>
<!-- seen, not heard -->Kiedy warto użyć ARIA
Proszę sięgnąć po ARIA, gdy nie pasuje żaden natywny element, na przykład w przypadku tablist lub niestandardowego suwaka. Następnie proszę używać go precyzyjnie i przeprowadzić testy.
Połącz ARIA z JavaScript
Jeśli trzeba zbudować niestandardowy widżet, ARIA i JavaScript muszą iść w parze. ARIA nadaje mu nazwę i opisuje go, a JS zapewnia obsługę fokusu oraz klawiatury.
Mniej znaczy więcej
Najlepiej dostępna strona często zawiera bardzo niewiele ARIA. Najpierw semantyczny HTML, a ARIA tylko do uzupełniania braków, które pozostają.
Szybkie sprawdzenie
Potrzebny jest klikalny element Save. Jaki wybór zapewnia największą dostępność?
Podsumowanie: mądre używanie ARIA
Dowiedział się Pan/Dowiedziała się Pani, że ARIA opisuje, ale nigdy nie zapewnia działania. Proszę preferować natywny HTML, dodawać ARIA tylko w celu uzupełnienia rzeczywistych braków i za każdym razem przeprowadzać testy. 🎯
Często zadawane pytania
Czy lekcja „Pierwsza zasada: żadna ARIA jest lepsza niż zła ARIA” jest bezpłatna?
Tak — pełny tekst „Pierwsza zasada: żadna ARIA jest lepsza niż zła ARIA” 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 „Pierwsza zasada: żadna ARIA jest lepsza niż zła ARIA”?
Dlaczego natywny HTML jest niemal zawsze lepszym wyborem Ć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 „Pierwsza zasada: żadna ARIA jest lepsza niż zła ARIA”?
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
- Pierwsza zasada: żadna ARIA jest lepsza niż zła ARIA
- Role określają, czym jest dany element
- Stany i właściwości: rozwinięty, zaznaczony, wyłączony
- Odczytywanie drzewa dostępności podczas debugowania ARIA