Treegrid i inne zaawansowane wzorce
Z pewnością mierz się z najbardziej złożonymi widgetami.
Treegrid i inne zaawansowane wzorce 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.
Tryb zaawansowany
Niektóre widżety są naprawdę złożone: treegrid, siatki i drzewa łączą jednocześnie wiersze, kolumny oraz rozwijane węzły. 🌳
Czym jest treegrid
treegrid to siatka, której wiersze można rozwijać i zwijać jak drzewo. Doskonale sprawdza się w przeglądarce plików z zagnieżdżonymi folderami i kolumnami szczegółów.
Podstawowe role
Użyj role="treegrid" dla kontenera, role="row" dla każdego wiersza oraz role="gridcell" dla komórek. Taka struktura odzwierciedla prawdziwą siatkę.
<div role="treegrid">
<div role="row">
<span role="gridcell">src</span>
</div>
</div>Rozwijane wiersze
Wiersz, który można otworzyć, ma atrybut aria-expanded: wartość true, gdy jego elementy podrzędne są widoczne, oraz false po zwinięciu. Wiersze liści nie mają tego atrybutu.
<div role="row" aria-expanded="false"
aria-level="1">Folder</div>Głębokość za pomocą aria-level
Użyj aria-level, aby poinformować użytkowników, jak głęboko w drzewie znajduje się wiersz. Poziom 1 oznacza najwyższy poziom, a każdy zagnieżdżony wiersz zwiększa tę wartość o jeden.
Poruszanie się w dwóch osiach
W treegrid klawisze strzałek działają w obu osiach: strzałki w górę i w dół zmieniają wiersze, a strzałki w lewo i w prawo przemieszczają się między komórkami albo zwijają i rozwijają elementy.
Klawisze rozwijania i zwijania
W wierszu nadrzędnym Right Arrow rozwija element, a Left Arrow go zwija. Działa to tak samo jak w znanych od lat drzewach plików na komputerach.
Jeden przystanek tabulacji
Cały treegrid jest jednym przystankiem tabulacji. Roving tabindex przenosi właściwy fokus między komórkami, dzięki czemu widżet zachowuje się jak jeden złożony element sterujący.
Rozmiar i pozycja zbioru
W przypadku dynamicznych lub wirtualizowanych wierszy użyj aria-setsize i aria-posinset, aby użytkownicy słyszeli informacje o pozycji, nawet gdy nie wszystkie wiersze są renderowane.
Home, End i skoki
Zaawansowane siatki obsługują klawisze Home i End, które przenoszą do pierwszej lub ostatniej komórki, a Ctrl z Home lub End pozwala przejść na sam początek lub koniec danych.
Skorzystaj z APG
Te wzorce są bezlitosne dla błędów, dlatego należy dokładnie trzymać się przykładu APG i testować rozwiązanie z prawdziwym czytnikiem ekranu. Drobne pomyłki mogą zepsuć cały widżet.
Szybkie sprawdzenie
Tworzą Państwo przeglądarkę plików, w której wiersze otwierają się i ujawniają zagnieżdżone wiersze wewnątrz siatki. Która rola będzie odpowiednia?
Podsumowanie
treegrid łączy siatkę i drzewo: wiersze z aria-expanded i aria-level, strzałki działające w dwóch osiach oraz jeden przystanek tabulacji dzięki roving tabindex. Należy opierać się na APG i dokładnie testować rozwiązanie. ✅
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 „Treegrid i inne zaawansowane wzorce” jest bezpłatna?
Tak — pełny tekst „Treegrid i inne zaawansowane wzorce” 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 „Treegrid i inne zaawansowane wzorce”?
Z pewnością mierz się z najbardziej złożonymi widgetami. Ć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 „Treegrid i inne zaawansowane wzorce”?
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
- Czytanie APG: wzorce, klawisze i przykłady
- Combobox i autouzupełnianie bez błędów
- Menu, menubar i przycisk menu
- Treegrid i inne zaawansowane wzorce