Stikkord: aria-hidden, aria-label, role="alert"

En indikator som oppdateres og som det er nyttig for brukeren å følge med på.

Hamburgermenyen over (med aria-label Hovedmeny) har ingen menyvalg. Menyen kan få en statusindikator (antall). Dette er enda vanligere for eksempel på handlekurver. Da vi laget dette skulle indikatoren vise antall personlige meldinger i en kø. Dette er et tall brukeren selv ikke initierer (slik som når en vare legges i handlekurven).

Endre-knappen nedenfor gir et tilfeldig tall til statusindikatoren. Denne kan trykkes flere ganger dersom du vil teste. Har hamburgermenyen en statusindikator kan du velge menyen for å fjerne indikatoren.

Slike endringer er det vanskelig å få med seg for mange, og spesielt for de som bruker skjermleser. For å gjøre dette noe enklere med skjermleser har vi:

• Lagt role="alert" på en div rundt hamburgermenyen.
• Tallet som vises visuelt skjules med aria-hidden="true".
• aria-label på hamburgermenyen oppdateres når statusindikatoren endres. Her har vi valgt å ikke kun bruke tallet, men legge til en parentes: (personlig kø: antall). Dette er gjort fordi et enkelt tall lett forsvinner i taleflommen når man jobber med syntetisk tale. Endres indikatoren veldig ofte kan det hende at kun tallet er nok, eller kanskje det ikke bør være en alert i det hele tatt.

Endre antall personlige meldinger (se hamburger-meny)