Statusmeldinger
Denne siden er laget for å skjønne mer om hvordan noen av wai-aria attributtene fungerer i praksis (med ulike skjermlesere). Du må ha en skjermleser aktivert dersom testene skal gi mening.
Testene nedenfor gjelder statusmeldinger, altså knyhttet opp mot wcag sk 4.1.3
Litt om aktuelle attributter og mine testresultater finner du i listen nedenfor.
Attributter
-
role=status
En type live-region med veiledende innhold/informasjon for brukeren, men som ikke er viktig nok til å rettferdiggjøre et varsel (alert), ofte men ikke nødvendigvis presentert som en statuslinje.
Default: aria-live=polite, aria-atomic=true
Skjermleser
Meldingen leses av: Jaws, Windows skjermleser, NVDA, VoiceOver (iOS)
-
role=alert
En type live-region med viktig, og vanligvis tidssensitiv, informasjon.
Alert brukes til å formidle meldinger som kan være umiddelbart viktige for brukere. Ved lydadvarsler gir alert et tilgjengelig alternativ for hørselshemmede brukere. Alert-rollen brukes på elementet som inneholder varselmeldingen. Alert er en spesialisert form av statusrollen, som behandles som et atomic live-område.
Alert er assertive live-regioner, noe som betyr at de forårsaker umiddelbar varsling for hjelpemiddelbrukere. Hvis operativsystemet tillater det, BØR brukeragenten utløse en systemvarslingshendelse gjennom tilgjengelighets-APIet når WAI-ARIA-varselet opprettes.
Hverken forfattere eller brukeragenter er pålagt å sette eller administrere fokus på et varsel for at det skal kunne behandles. Siden varsler ikke er nødvendig for å få fokus, BØR forfattere IKKE kreve at brukere lukker et varsel. Hvis en forfatter ønsker fokus for å flytte til en melding når den blir formidlet, BØR forfatteren bruke alertdialog i stedet for alert.
Default: aria-live=assertive, aria-atomic=true
Skjermleser
Meldingen leses av: Jaws, Windows skjermleser, NVDA, VoiceOver (iOS)
-
role=log
En type live-region der ny informasjon legges til i meningsfull rekkefølge og gammel informasjon kan forsvinne. Se relatert marquee.
Eksempler på bruk inkluderer chatlogger, meldingslogger, spill-logger og feillogger. I motsetning til andre live-regioner er det i denne rollen en sammenheng mellom ankomsten av nye elementer i loggen og leserekkefølgen. Loggen inneholder en meningsfull sekvens og ny informasjon legges bare til på slutten av loggen, ikke på vilkårlige punkter.
For at log skal virke må du bruke appendChild (eller liknende), ikke eksisterende-tekst=eksisterende-tekst+ny-tekst
Default: aria-live=polite
Skjermleser
Kun nye meldinger leses av: Jaws, Windows skjermleser, NVDA, VoiceOver (iOS)
-
role=progressbar
Et element som viser fremdrift/sstatus for oppgaver som tar lang tid.
En fremdriftslinje indikerer at brukerens forespørsel er mottatt og at programmet gjør fremskritt mot å fullføre den forespurte handlingen. Forfattere KAN sette aria-valuemin og aria-valuemax for å indikere minimum og maksimum fremdriftsindikatorverdier. Ellers følger deres implisitte verdier de samme reglene som
- Hvis aria-valuemin mangler eller ikke er et tall, er det standard 0 (null).
- Hvis aria-valuemax mangler eller ikke er et tall, er det standard 100.
Forfatteren BØR oppgi en verdi for aria-valuenow med mindre verdien er ubestemt, i så fall SKAL forfatteren utelate aria-valuenow-attributtet. Forfattere BØR oppdatere denne verdien når den visuelle fremdriftsindikatoren oppdateres. Hvis fremdriftslinjen beskriver innlastingsforløpet til en bestemt region på en side, BØR forfatteren bruke aria-describedby for å peke på statusen, og sette aria-busy-attributtet til true på regionen til den er ferdig lastet. Det er ikke mulig for brukeren å endre verdien på en fremdriftslinje fordi den alltid er skrivebeskyttet.
MERK: Skjermlesere vil generelt gjengi verdien av aria-verdien som en prosent av et område mellom verdien av aria-valuemin og aria-valuemax, med mindre aria-valuetext er spesifisert. Kanskje dette stemte i 2008, men bare Windows skjermleser som gjør dette nå.Default: aria-live=polite
Skjermleser
Skjermlesere viser progressbar ganske ulikt:
- Jaws: viser framdrift løpende på leselist. Framdrift leses hvis du piler dit eller leser linje (Jaws+Pil opp), men ellers leses ikke framdriften med tale.
- Windows skjermleser: framdriften leses hvis du står på progressbaren. Den rekker ikke å lese alle 100 oppdateringene, men det er helt OK. Tall leses med prosent. Før progressbaren starter leser ikke Windows skjermleser at den er der.
- NVDA: som Jaws, men det spilles en lyd som blir lysere og lysere etter hvert som framdriften skrider frem. Bare støy etter min smak.
- VoiceOver (iOS): framdrift leses kun når du sveiper til progressbaren. Tallet leses som 48.00. Ingen beskjed om at det er en progressbar, så lett å ikke skjønne hva tallet betyr.
Testen med aria-valuetext
- Jaws, NVDA: som uten aria-valuetext, men teksten leses fint (synes det ga mer mening å få med prosent i akkurat denne testen).
- Windows skjermleser: aria-valuetext ødelegger herlt. Progressbaren vises ikke før den starter, og når testen er startet sier Windows skjermleser "0% fremdriftsindikator" hver gang den oppdateres.
- VoiceOver (iOS): aria-valuetext vises fint, og jeg synes denne progressbaren fungerte bedre enn uten valuetext.
-
role=marquee
En type live-region der ikke-essensiell informasjon endres ofte. Se relatert logg.
marquee kan eksempelvis brukes for å vise aksjestatus og annonsebannere. Den primære forskjellen mellom marquee og log er at log vanligvis har en meningsfull rekkefølge eller sekvens av viktige innholdsendringer.
Default: aria-live=off
Skjermleser
Jaws, Windows skjermleser, NVDA: det skjer ikke noe spesielt. Info kan leses, men oppdateringer annonseres ikke automatisk med tale (vises på list).
VoiceOver (iOS): sveiping fungerer veldig dårlig! Du kan ta på ulik info, men altså ikke sveipe. Nøyaktig det samme skjer hvis marquee fjernes.
-
role=timer
En type live-region som inneholder en numerisk teller som indikerer en mengde medgått tid fra et startpunkt, eller tiden som gjenstår til et sluttpunkt.
Tekstinnholdet til timerobjektet indikerer gjeldende tidsmåling, og oppdateres etter hvert som tiden endres. Timerverdien er ikke nødvendigvis maskinparserbar, men forfattere BØR oppdatere tekstinnholdet med faste intervaller, bortsett fra når tidtakeren er satt på pause eller når et endepunkt.
Default: aria-live=off
Skjermleser
Jaws, Windows skjermleser, NVDA: det skjer ikke noe spesielt. Info kan leses, men oppdateringer annonseres ikke automatisk med tale (vises på list). Windows skjermleser mister av en eller annen grunn fokus når knappen trykkes (er det fordi den disables?).
VoiceOver (iOS): du kan ikke sveipe til verdien. Nøyaktig det samme skjer hvis timer fjernes.
status-test
role="status"
Når status-test-knappen trykkes skal skjermlesere lese meldingen, men ikke flytte fokus. aria-controls settes når knappen trykkes, og det skal være mulig å hoppe fram/tilbake med skjermlesere som har denne funksjonaliteten (Jaws+Alt+m for Jaws).
- Test alert og status på en side der meldingene dukker opp uten en brukerhandling.
- Side der status/alert er satt når siden lastes
alert-test
role="alert"
Denne testen er identisk med status testen. status har aria-live=polite, alert har aria-live=assertive. I praksis er disse veldig like, men alert skal altså brukes for viktigere statusmeldinger.
Når status-test-knappen trykkes skal skjermlesere lese meldingen, men ikke flytte fokus. aria-controls settes når knappen trykkes, og det skal være mulig å hoppe fram/tilbake med skjermlesere som har denne funksjonaliteten (Jaws+Alt+m for Jaws).
- Test alert og status på en side der meldingene dukker opp uten en brukerhandling.
- Side der status/alert er satt når siden lastes
log-test
role="log"
I denne testen skrives det ut en melding hvert tiende sekund. Kun nye meldinger skal leses av skjermleser (alså ikke alle meldingene hver gang det dukker opp en ny).
Med skjermleser vil alle meldingene vises i lesemodus. In real life ville jeg nok ha skjult meldinger som forsvinner visuelt (fjerne fra dom, bruke aria-hidden eller liknende), men det kommer selvsagt helt ann på kontekst. Kan du scrolle i feltet kan like gjerne alle meldingene stå.
progressbar-test
role=progressbar
Progressbaren går fra 0 til 100, 1 sekund pr. bevegelse. aria-valuemin, aria-valuemax og aria-valuenow brukes.
Testen nedenfor er identisk, men her brukes i tillegg aria-valuetext.
marquee-test
role=marquee
I denne testen oppdateres status for sannsynlig ekspedient, antall i kø og estimert tid. Info. endres ganske hyppig, men jeg har naturligvis ikke prøvd å simulere noe som er typis irl.
Alt ligger pakket inn i en div med role=marquee.
Kø (MKS kontaktsenter)
Sannsynlig neste ekspedient:
Antall i kø:
Estimert ventetid: minutter
timer-test
role=timer
Timeren startes med knappen nedenfor og teller ned fra 60 s.
00