status-, alert- ja log-roolit
Valitkaa kullekin päivitystyypille sopiva live-rooli.
status-, alert- ja log-roolit on ilmainen Web Accessibility Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Web Accessibility Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
Roolit sisältävät kohteliaisuustason
Jotkin ARIA-roolit muuttavat elementin live-alueeksi puolestanne ja määrittävät automaattisesti järkevän kohteliaisuustason, joten merkintää tarvitaan vähemmän.
role status on kohtelias
status-rooli merkitsee alueen, joka päivittyy kohteliaasti. Se sopii erinomaisesti vähäeleisiin vahvistuksiin, kuten tallennus- tai kopiointiviestiin. 📋
<div role="status">Copied to clipboard</div>status tarkoittaa aria-live polite
role status on lyhyt tapa ilmaista, että aria-live-arvoksi asetetaan polite. Saatte saman toiminnan selkeämmin ja semanttisemmin.
role alert on assertive
alert-rooli ilmoittaa sisällön assertive-tasolla heti sen ilmestyessä. Käyttäkää sitä, kun jokin vaatii huomiota juuri nyt. ⚠️
<div role="alert">Payment failed</div>alert tarkoittaa aria-live assertive
alert toimii kuten aria-live assertive yhdessä aria-atomic true -asetuksen kanssa. Se keskeyttää muun lukemisen ja lukee koko tekstinsä yhtenä viestinä.
role log sopii tapahtumavirtoihin
log-rooli sopii sisällölle, johon lisätään uusia merkintöjä järjestyksessä, kuten keskusteluketjuun tai tapahtumavirtaan. Se luetaan kohteliaasti.
<ul role="log" aria-live="polite"></ul>log säilyttää järjestyksen
log ilmaisee, että vanhemmilla viesteillä on merkitystä ja järjestys on tärkeä, joten avustava teknologia lukee lisäykset niiden saapumisjärjestyksessä.
Status ja alert käytännössä
Valitse status kohteliaalle vahvistukselle ja alert ongelmasta ilmoittamiseen. Tallennuksen merkki on status; lomakkeen lähettämisen estävä virhe on alert.
Hälytykset on ansaittava
alert-roolin liiallinen käyttö saa kaiken keskeyttämään käyttäjän ja tuntumaan meluisalta. Käytä sitä vain todellisiin virheisiin ja aikakriittisiin varoituksiin.
Sijoita rooli ennen sisältöä
Kuten käsittelemättömien live-alueiden tapauksessa, role status -elementin pitäisi olla olemassa ennen tekstin lisäämistä, jotta ruudunlukija seuraa sitä jo valmiiksi.
<p role="status" id="out"></p>Roolitkin lisäävät merkitystä
Kohteliaisuuden lisäksi nämä roolit kuvaavat alueen tarkoitusta. Tämä semanttinen selkeys auttaa sekä ruudunlukijoita että seuraavaa kehittäjää.
Pikatarkistus
Sinun on ilmoitettava lomakkeen lähetysvirheestä, joka estää käyttäjän toiminnan välittömästi. Mikä rooli sopii tähän?
Kertaus: live-roolit
Tiedät nyt, että status on kohtelias, alert on painokas ja log säilyttää järjestetyt virrat. Valitse rooli, joka vastaa päivityksen merkitystä. ✅
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”status-, alert- ja log-roolit” ilmainen?
Kyllä – oppitunnin ”status-, alert- ja log-roolit” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Web Accessibility Academy-kurssin, päivitä CoddyKit PROhon. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”status-, alert- ja log-roolit”?
Valitkaa kullekin päivitystyypille sopiva live-rooli. Harjoittelet Web Accessibility Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Web Accessibility Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Web Accessibility Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”status-, alert- ja log-roolit”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Web Accessibility Academy-oppitunnilla?
Kyllä. Jokainen Web Accessibility Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- polite vai assertive: kiireellisyyden valinta
- status-, alert- ja log-roolit
- Toast-ilmoitusten, latausilmaisimien ja lukumäärien ilmoittaminen
- Miksi live-alueet epäonnistuvat ja miten ne korjataan