Treegrid och andra avancerade mönster
Ta er an de svåraste sammansatta widgetarna med trygghet
Treegrid och andra avancerade mönster är en gratis lektion i Web Accessibility Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Web Accessibility Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Web Accessibility Academy innehåller totalt 4 lektioner.
Avancerat läge
Vissa widgetar är verkligen komplexa: treegrids, gitter och träd kombinerar rader, kolumner och expanderbara noder på samma gång. 🌳
Vad ett treegrid är
Ett treegrid är ett gitter där raderna kan expanderas och fällas ihop som ett träd – perfekt för en filhanterare med nästlade mappar och detaljkolumner.
De grundläggande rollerna
Använd role="treegrid" på behållaren, role="row" på varje rad och role="gridcell" på cellerna. Strukturen motsvarar ett riktigt gitter.
<div role="treegrid">
<div role="row">
<span role="gridcell">src</span>
</div>
</div>Expanderbara rader
En rad som kan öppnas har aria-expanded: true när dess underordnade visas och false när den är hopfälld. Bladrader utelämnar attributet helt.
<div role="row" aria-expanded="false"
aria-level="1">Folder</div>Djup med aria-level
Använd aria-level för att tala om för användarna hur djupt en rad ligger i trädet. Nivå 1 är överst, och varje nästlad rad räknas som en nivå högre.
Förflyttning i två riktningar
I ett treegrid flyttar piltangenterna fokus längs båda axlarna: Upp och Ned byter rad, medan Vänster och Höger flyttar mellan celler eller fäller ihop och expanderar.
Tangenter för att expandera och fälla ihop
På en överordnad rad expanderar Right Arrow den och Left Arrow fäller ihop den. Det stämmer med hur skrivbordets filträd alltid har fungerat.
Ett enda tabb-stopp
Hela treegridet är ett enda tabb-stopp. Roterande tabindex flyttar det faktiska fokuset mellan cellerna, så att widgeten känns som en enda sammansatt kontroll.
Ange storlek och position
För dynamiska eller virtualiserade rader använder du aria-setsize och aria-posinset, så att användarna hör positionsantal även när inte alla rader renderas.
Home, End och hopp
Avancerade gitter lägger till Home och End för att hoppa till den första eller sista cellen, samt Ctrl tillsammans med Home eller End för att hoppa till början eller slutet av datamängden.
Ta hjälp av APG
Dessa mönster är oförlåtande, så följ APG-exemplet noggrant och testa med en riktig skärmläsare. Små misstag kan förstöra hela widgeten.
Snabb kontroll
Du bygger en filhanterare där rader öppnas och visar nästlade rader i ett gitter. Vilken roll passar?
Sammanfattning
Ett treegrid kombinerar gitter och träd: rader med aria-expanded och aria-level, piltangenter i två riktningar och ett enda tabb-stopp via roterande tabindex. Förlita dig på APG och testa grundligt. ✅
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Treegrid och andra avancerade mönster” gratis?
Ja – hela texten till ”Treegrid och andra avancerade mönster” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Web Accessibility Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Web Accessibility Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Treegrid och andra avancerade mönster”?
Ta er an de svåraste sammansatta widgetarna med trygghet Ni övar på Web Accessibility Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Web Accessibility Academy?
Du behöver inga förkunskaper. Utbildningen i Web Accessibility Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Treegrid och andra avancerade mönster”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Web Accessibility Academy-lektionen?
Ja. Varje Web Accessibility Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Läsa APG: mönster, tangenter och exempel
- Combobox och autocomplete på rätt sätt
- Meny, menyrad och menyknappen
- Treegrid och andra avancerade mönster