Meddelanden för tillgänglighet (aria-live)
Använd aria-live-regioner för att meddela ändringar utan att stjäla fokus. Välj polite eller assertive, ange aria-atomic och centralisera meddelandena.
Meddelanden för tillgänglighet (aria-live) är en gratis lektion i React Academy på CoddyKit. Detta är lektion 3 av 3. 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 React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 3 lektioner.
Varför aviseringar?
Mål: Meddela skärmläsare om ändringar utan att ta fokus.
- aria-live: polite eller assertive
- role="status" / role="alert"
- aria-atomic för fullständiga meddelanden
Polite jämfört med assertive
- Polite: meddela snart; avbryt inte
- Assertive: brådskande; kan avbryta
- Atomic: läs upp hela noden när den ändras
- Föredra status för information om lyckade resultat; alert för fel
Demo: artigt statusområde
Ett status-område meddelar textuppdateringar utan att flytta fokus.
<div id="root"></div>Demo: useAnnounce-hook (polite)
Centralisera aviseringar med en liten Announcer-context och hook.
<div id="root"></div>Demo: assertive-felavisering
Använd assertive (eller role="alert") sparsamt för fel som behöver uppmärksammas omedelbart.
<div id="root"></div>Tips och checklista
- Föredra polite (role=status) för lyckade resultat och information
- Använd alert/assertive för brådskande fel
- Ange aria-atomic="true" för fullständiga meddelanden
- Flytta inte fokus om det inte behövs
Kontroll av grunderna i aviseringar
Sammanfattning
Sammanfattning: Lägg till ett centralt aria-live-område (polite) för rutinmässiga uppdateringar och använd assertive/alert för brådskande fel. Håll meddelanden atomära och undvik att ta fokus.
Lär dig React 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
- 88
- Lektioner
- 324
Vanliga frågor
Är lektionen ”Meddelanden för tillgänglighet (aria-live)” gratis?
Ja – hela texten till ”Meddelanden för tillgänglighet (aria-live)” 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 React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Meddelanden för tillgänglighet (aria-live)”?
Använd aria-live-regioner för att meddela ändringar utan att stjäla fokus. Välj polite eller assertive, ange aria-atomic och centralisera meddelandena. Ni övar på React 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 React Academy?
Du behöver inga förkunskaper. Utbildningen i React 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 3 av 3.
Hur lång tid tar lektionen ”Meddelanden för tillgänglighet (aria-live)”?
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 React Academy-lektionen?
Ja. Varje React 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
- Portaler, fokusfälla och stängning med Escape
- Global hanterare för överlagringar (Context + Reducer)
- Meddelanden för tillgänglighet (aria-live)