Brukeren skal få statusbeskjeder om viktige endringer på nettsiden uten at det gir kontekstendring.

Sektor:

    Hva er kravet?

    4.1.3 Statusbeskjeder.

    Hva bør jeg teste?

    Suksesskriteriet gjelder endringer i innholdet som blir levert gjennom statusbeskjeder.

    Det er to kriterier som til sammen avgjør om noe er definert som en statusbeskjed:

    1. Beskjeden gir brukeren informasjon om
      • en handling er vellykket gjennomført
      • en ventetilstand i innholdet
      • framdriften av en prosess eller
      • at det finnes feil
    2. Beskjeden er ikke levert via en kontekstendring.

    Hva er forventet resultat?

    Statusbeskjeder er kodet med rolle eller andre egenskaper, slik at de kan presenteres av hjelpemidler uten at statusbeskjedene trenger å få fokus.

    Løsningsforslag for 4.1.3 Statusbeskjeder

    Måter å kode statusbeskjeder på:

    • Elementer som inneholder statusbeskjeder med informasjon om at en handling er vellykket, er kodet med ARIA-attributtet role="status".
    • Elementer som inneholder informasjon om en ventetilstand eller framdrift, er kodet med ARIA-attributtet role="log", role="progressbar" eller role="status".
    • Elementer som inneholder statusbeskjeder med informasjon om at det finnes en feil, er kodet med ARIA-attributtet role="alert".

    Merk at dette er kun nødvendig hvis beskjeden ikke blir gitt gjennom en kontekstendring.

    Eksempler på statusbeskjeder:

    • Informasjon om hvor mange søketreff som resulterte fra et søk på nettstedet.
    • Informasjon om hvor mange varer som ligger i handlekurven på en nettbutikk, etter at brukeren har lagt en ny vare i kurven.
    • Feilmeldinger ved utfylling med feil inndata i skjema.
    • Informasjon om at deler av innholdet laster etter at brukeren har aktivert en prosess.
    • Framdriftsanimasjon som viser hvor langt deler av innholdet er kommet med å laste inn.
    • Etter innsending av skjema, får brukeren opp en tekst som sier at skjemaet er sendt inn.

    Resultat etter et søk som viser status:

    <div role="status">5 resultat returnert. </div>

    Her er eksempel på role=status on a shopping cart (engelsk).

    Eksempel på feil

    Statusbeskjeder er ikke kodet med rolle eller andre egenskaper. Da kan de ikke presenteres av hjelpemidler uten at beskjedene får fokus.