Læs APG: Mønster, taster og eksempler
Brug vejledningen som specifikation for enhver widget.
Læs APG: Mønster, taster og eksempler er en gratis Web Accessibility Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Web Accessibility Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Web Accessibility Academy-kurset indeholder 4 lektioner i alt.
Mød APG
ARIA Authoring Practices Guide er W3C's officielle vejledning til at bygge brugerdefinerede widgets korrekt. Når du er i tvivl, er det din specifikation. 📘
Opfind det ikke igen
APG giver dig gennemprøvede mønstre til faner, menuer, dialoger og meget mere. Du kopierer en testet opskrift i stedet for selv at gætte på roller og taster.
Et mønsters anatomi
Alle APG-mønstre har de samme afsnit: en oversigt, tastaturinteraktionen, de påkrævede ARIA-roller og -attributter samt levende eksempler, du kan studere.
Tastaturet er kontrakten
Tabellen Keyboard Interaction fortæller dig præcis, hvad hver tast skal gøre. Brugerne forventer disse taster, så behandl tabellen som et ufravigeligt krav.
Rolle-tabellen
Tabellen WAI-ARIA Roles, States, and Properties viser alle de attributter, widgetten har brug for, og hvornår hver af dem ændres. Spring ikke nogen over.
Studér eksemplerne
Hvert mønster leveres med et fungerende eksempel med den fulde kildekode. Læs det, test det med en skærmlæser, og tilpas derefter opmærkningen til din egen brugergrænseflade.
<div role="tablist" aria-label="Settings">
<button role="tab" aria-selected="true">General</button>
</div>Indbygget først, altid
APG begynder med en advarsel: Foretræk native HTML, når det findes. Brug kun disse mønstre, når intet rigtigt element kan løse opgaven.
Tilstande ændres under kørsel
Mønstre adskiller faste roller fra skiftende tilstande. Du angiver aria-expanded eller aria-selected med JavaScript, mens brugeren interagerer, ikke kun én gang i HTML.
Fokus er en del af specifikationen
Mange mønstre beskriver præcis, hvor fokus skal placeres, og hvordan det flyttes. At følge denne fokusrækkefølge er lige så vigtigt som selve ARIA.
Test op mod mønsteret
Når widgetten er bygget, skal du gennemgå APG's tastaturtabel tast for tast. Hvis alle rækker består, har du matchet den gennemprøvede adfærd.
Det er en levende vejledning
APG er versionsstyret og opdateres, efterhånden som ARIA udvikler sig, så tjek den aktuelle udgave i stedet for et gammelt blogindlæg, der kopierer den.
Hurtigt tjek
Du skal til at bygge en brugerdefineret widget. Hvad bør APG først lede dig hen imod?
Opsummering
APG er din widgets specifikation: brug indbygget funktionalitet først, og følg derefter mønsterets roller, tilstande, taster og fokus. Test op mod tabellerne, så leverer du en adfærd, brugerne allerede kender. ✅
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Læs APG: Mønster, taster og eksempler” gratis?
Ja — hele teksten til “Læs APG: Mønster, taster og eksempler” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Web Accessibility Academy-kurset, skal du opgradere til CoddyKit PRO. Web Accessibility Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Læs APG: Mønster, taster og eksempler”?
Brug vejledningen som specifikation for enhver widget. Du øver dig i Web Accessibility Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Web Accessibility Academy?
Der kræves ingen tidligere erfaring. Web Accessibility Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Læs APG: Mønster, taster og eksempler”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Web Accessibility Academy-lektion?
Ja. Alle Web Accessibility Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Læs APG: Mønster, taster og eksempler
- Combobox og autocomplete gjort rigtigt
- Menu, menulinje og menuknappen
- Treegrid og andre avancerede mønstre