Stany i właściwości: rozwinięty, zaznaczony, wyłączony
Przekaż bieżący stan kontrolki.
Stany i właściwości: rozwinięty, zaznaczony, wyłączony to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 3 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.
Od „czym” do „jak”
Rola mówi, czym jest element. Stany i właściwości mówią, jak obecnie działa: czy jest otwarty, zaznaczony, zajęty lub niedostępny?
Stany się zmieniają, właściwości zazwyczaj pozostają niezmienne
Stan zmienia się podczas interakcji użytkownika, na przykład gdy przełączany jest stan expanded. Właściwość zwykle pozostaje niezmienna, tak jak flaga required kontrolki.
aria-expanded dla przełączników
aria-expanded informuje użytkowników, czy region kontrolki jest otwarty. Za każdym razem, gdy stan się zmienia, trzeba zmienić ten atrybut w JavaScript.
<button aria-expanded="false">Menu</button>aria-checked dla niestandardowych kontrolek
aria-checked informuje, czy niestandardowe pole wyboru lub przełącznik jest włączony. Natywne pole wyboru przekazuje tę informację automatycznie.
<div role="switch" aria-checked="true">Dark mode</div>Natywny sposób wyłączania
W przypadku prawdziwych kontrolek formularza atrybut HTML disabled automatycznie usuwa je z kolejności fokusu i oznacza jako niedostępne.
<button disabled>Submit</button>aria-disabled dla pozostałych elementów
aria-disabled informuje, że niestandardowa kontrolka jest wyłączona, ale nie blokuje kliknięć. Działanie nadal trzeba zatrzymać w kodzie.
<div role="button" aria-disabled="true">Submit</div>aria-selected w zestawach
aria-selected oznacza wybrany element w tablist, listbox lub grid, dzięki czemu użytkownicy wiedzą, która opcja jest obecnie aktywna.
<div role="tab" aria-selected="true">Inbox</div>aria-pressed dla przycisków przełączających
Przycisk przełączający używa aria-pressed, aby informować o stanie włączenia lub wyłączenia — podobnie jak przycisk pogrubienia, który pozostaje podświetlony, gdy tekst jest pogrubiony.
<button aria-pressed="true">Bold</button>Synchronizuj stany
Najczęstszy błąd to nieaktualne stany. Jeśli zmieni się wygląd, ale aria-expanded nadal ma wartość false, użytkownicy czytników ekranu usłyszą nieprawidłową informację.
Wartości, nie tylko wartości logiczne
Niektóre stany zawierają liczby. Suwak udostępnia swoją pozycję za pomocą aria-valuenow, a aria-valuemin i aria-valuemax określają zakres.
<div role="slider" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>aria-required i aria-invalid
Dwie przydatne właściwości formularzy: aria-required oznacza pole, które trzeba wypełnić, a aria-invalid informuje o polu, które nie przeszło walidacji.
<input aria-required="true" aria-invalid="true">Szybkie sprawdzenie
Budują Państwo niestandardowy przycisk akordeonu. Który atrybut informuje, czy jego panel jest otwarty?
Podsumowanie: informuj o stanie
Dowiedział się Pan/Dowiedziała się Pani, że stany i właściwości opisują stan elementu. Proszę preferować natywne atrybuty i zawsze synchronizować stany ARIA z interfejsem.
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 „Stany i właściwości: rozwinięty, zaznaczony, wyłączony” jest bezpłatna?
Tak — pełny tekst „Stany i właściwości: rozwinięty, zaznaczony, wyłączony” 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 „Stany i właściwości: rozwinięty, zaznaczony, wyłączony”?
Przekaż bieżący stan kontrolki. Ć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 3 z 4.
Ile czasu zajmuje lekcja „Stany i właściwości: rozwinięty, zaznaczony, wyłączony”?
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