Treegrid og andre avanserte mønstre
Ta fatt på de mest krevende sammensatte widgetene med trygghet.
Treegrid og andre avanserte mønstre er en gratis leksjon i Web Accessibility Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Web Accessibility Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Web Accessibility Academy inneholder totalt 4 leksjoner.
Gå inn i vanskelig modus
Noen widgets er genuint komplekse: treegrids, rutenett og trær kombinerer rader, kolonner og noder som kan utvides, på én gang. 🌳
Hva et treegrid er
Et treegrid er et rutenett der radene kan utvides og skjules som i et tre – perfekt for en filleser med nestede mapper og detaljkolonner.
De viktigste rollene
Bruk role="treegrid" på beholderen, role="row" på hver rad og role="gridcell" på cellene. Strukturen gjenspeiler et ekte rutenett.
<div role="treegrid">
<div role="row">
<span role="gridcell">src</span>
</div>
</div>Rader som kan utvides
En rad som kan åpnes, har aria-expanded, med verdien true når underordnede elementer vises, og false når raden er skjult. Bladrader utelater attributtet helt.
<div role="row" aria-expanded="false"
aria-level="1">Folder</div>Dybde med aria-level
Bruk aria-level for å fortelle brukerne hvor dypt en rad ligger i treet. Nivå 1 er øverst, og hver nestede rad får ett nivå høyere.
Bevegelse langs to akser
I et treegrid flytter piltastene seg langs begge akser: Opp og Ned endrer rad, mens Venstre og Høyre flytter mellom celler eller skjuler og utvider.
Taster for å utvide og skjule
På en overordnet rad utvider Right Arrow raden, mens Left Arrow skjuler den. Dette samsvarer med hvordan filtrefunksjoner på skrivebordet alltid har fungert.
Ett tabulatorstopp
Hele treegrid-et er ett enkelt tabulatorstopp. Roterende tabindex flytter det faktiske fokuset mellom cellene, slik at widgeten føles som én sammensatt kontroll.
Angi størrelse og posisjon
For dynamiske eller virtualiserte rader bruker du aria-setsize og aria-posinset, slik at brukerne hører posisjon og antall selv når ikke alle radene gjengis.
Home, End og hopp
Avanserte rutenett legger til Home og End for å hoppe til den første eller siste cellen, og Ctrl sammen med Home eller End for å hoppe helt til begynnelsen eller slutten av dataene.
Bruk APG
Disse mønstrene tåler lite feil, så følg APG-eksempelet nøye og test med en ekte skjermleser. Små feil kan ødelegge hele widgeten.
Kort kontroll
De bygger en filleser der rader åpnes for å vise nestede rader i et rutenett. Hvilken rolle passer?
Oppsummering
Et treegrid kombinerer rutenett og tre: rader med aria-expanded og aria-level, piltaster langs to akser og ett tabulatorstopp via roterende tabindex. Bruk APG som støtte og test grundig. ✅
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Treegrid og andre avanserte mønstre» gratis?
Ja – hele teksten i «Treegrid og andre avanserte mønstre» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Web Accessibility Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Web Accessibility Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Treegrid og andre avanserte mønstre»?
Ta fatt på de mest krevende sammensatte widgetene med trygghet. Du øver på Web Accessibility Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Web Accessibility Academy?
Ingen tidligere erfaring er nødvendig. Web Accessibility Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.
Hvor lang tid tar leksjonen «Treegrid og andre avanserte mønstre»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Web Accessibility Academy-leksjonen?
Ja. Alle Web Accessibility Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Lese APG: Mønstre, taster og eksempler
- Combobox og autoutfylling på riktig måte
- Meny, menylinje og menyknappen
- Treegrid og andre avanserte mønstre