Role określają, czym jest dany element
Przekaż technologiom asystującym, że element jest kartą, alertem lub oknem dialogowym.
Role określają, czym jest dany element to bezpłatna lekcja Web Accessibility Academy na CoddyKit. To lekcja 2 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.
Rola określa tożsamość
Rola informuje technologie asystujące, czym jest dany element: przyciskiem, kartą, alertem czy oknem dialogowym. Odpowiada na pytanie: czym to jest?
Natywne elementy już mają role
Większość znaczników HTML ma wbudowaną niejawną rolę. Element nav ma rolę nawigacji, h1 jest nagłówkiem, a button jest przyciskiem.
<nav>...</nav>
<!-- implicit role: navigation -->Atrybut role
Gdy nie pasuje żaden natywny znacznik, można ręcznie ustawić atrybut role, aby nadać ogólnemu elementowi rozpoznawalną tożsamość.
<div role="alert">Saved!</div>Role widżetów
Role widżetów opisują interaktywne elementy, które czasem trzeba zbudować ręcznie: tab, slider, switch, menuitem i treeitem.
Role punktów orientacyjnych
Role punktów orientacyjnych dzielą stronę na regiony, takie jak banner, main i navigation, dzięki czemu użytkownicy mogą od razu przejść do wybranej sekcji.
Role struktury dokumentu
Role struktury opisują statyczną zawartość: heading, list, listitem i figure. Określają strukturę zawartych informacji.
Jedna rola na element
Element otrzymuje jedną rolę. Nie można jednocześnie uczynić czegoś przyciskiem i odnośnikiem, dlatego należy wybrać tożsamość odpowiadającą rzeczywistemu przeznaczeniu elementu.
Role oznaczają wymagania
Wybór roli jest zobowiązaniem. role=tab oznacza konieczność zapewnienia nadrzędnego tablist, obsługi klawiatury oraz powiązanego tabpanel.
<div role="tab" aria-selected="true">Profile</div>Nie nadpisuj poprawnej semantyki
Nigdy nie należy umieszczać roli na elemencie, który już ma właściwą rolę. Zbędna rola na prawdziwym przycisku tylko dodaje szum i ryzyko błędów.
<button role="button">Save</button>
<!-- the role is pointless here -->role=presentation usuwa znaczenie
role=presentation usuwa semantykę elementu. Jest przydatne w przypadku tabeli służącej do układu, ale niebezpieczne dla wszystkiego, co użytkownicy muszą zrozumieć.
Role są fundamentem
Najpierw należy poprawnie ustawić rolę. Stany i właściwości mają sens dopiero wtedy, gdy element ma jasno określoną tożsamość, do której można je przypisać.
Szybkie sprawdzenie
W elemencie div umieszczono niestandardowe okno wyskakujące, które przerywa działanie użytkownika. Która rola będzie odpowiednia?
Podsumowanie: najpierw role
Dowiedział się Pan/Dowiedziała się Pani, że rola określa, czym jest element. Proszę preferować natywne role niejawne, dodawać jedną jawną rolę tylko wtedy, gdy jest potrzebna, i przestrzegać wynikających z niej wymagań.
Często zadawane pytania
Czy lekcja „Role określają, czym jest dany element” jest bezpłatna?
Tak — pełny tekst „Role określają, czym jest dany element” 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 „Role określają, czym jest dany element”?
Przekaż technologiom asystującym, że element jest kartą, alertem lub oknem dialogowym. Ć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 2 z 4.
Ile czasu zajmuje lekcja „Role określają, czym jest dany element”?
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