Ikoner i ContextMessage, MessageBox og SystemMessage mangler tekstalternativ eller å bli tilstrekkelig skjult for kompenserende teknologi i koden

[andrea-sb1]

Tester https://github.com/sparebank1utvikling/designsystem-uustatus/blob/main/reports/Messages/ContextMessage/wcag-1.1.1_ikke_tekstlig_innhold.yml

https://github.com/sparebank1utvikling/designsystem-uustatus/blob/main/reports/Messages/MessageBox/wcag-1.1.1_ikke_tekstlig_innhold.yml

https://github.com/sparebank1utvikling/designsystem-uustatus/blob/main/reports/Messages/SystemMessage/wcag-1.1.1_ikke_tekstlig_innhold.yml

Beskrivelse Ikonene for feil, info, nyhet, tips og suksess mangler enten tekstalternativ eller å bli tilstrekkelig skjult for kompenserende teknologi i koden. Ikonet for feil (utropstegn) er kodet med aria-hidden true i SystemMessage og MessageBox.

Forslag Legge til role="img" og tekstbeskrivelse (title) for svg-ene/ikonene.

I utgangspunktet tenker jeg det er overflødig med tekstbeskrivelse for ikonene hvis komponenten har en overordnet tekstbeskrivelse (aria-label) som forteller at det er en feilmelding/infomelding/suksessmelding/tipsmelding/nyhetsmelding (se forslag i https://github.com/sparebank1utvikling/designsystem-uustatus/blob/main/reports/Messages/MessageBox/wcag-1.3.1_informasjon_og_relasjoner.yml). Vi kunne valgt å skjule ikonene med aria-hidden="true". I noen tilfeller vil imidlertid ikke den overordnede beskrivelsen av komponenten leses opp, siden kompenserende teknologi har varierende støtte for aria-label i innhold som ikke er interaktivt. I de tilfellene tenker jeg det er nødvendig med tekstbeskrivelse for ikonene for forstå hvilken type melding det er.

[HeleneKassandra]

@andrea-sb1 Litt usikker på hvordan vi skal skille mellom når "den overordnede beskrivelsen" leses opp eller ikke?
Er hvertfall ikke noe problem å legge til role="img" og tittel for ikonene, må bare finne en tittel som gir mening

[andrea-sb1]

@andrea-sb1 Litt usikker på hvordan vi skal skille mellom når "den overordnede beskrivelsen" leses opp eller ikke? Er hvertfall ikke noe problem å legge til role="img" og tittel for ikonene, må bare finne en tittel som gir mening

@HeleneKassandra Tenker at vi ikke skiller på det, men legger til role="img" og title for ikonene :) Da vil ikontittelen leses opp i tillegg til den overordnede beskrivelsen/aria-labelen, men tenker det er bedre enn at det ikke finnes noen måte å identifisere hvilken type melding det er i de tilfellene hvor den overordnede beskrivelsen ikke leses opp

Forslag til title: «Utropstegn, ikon» «Infotegn, ikon» «Hake, ikon» «Lyspære, ikon»

Vi må ikke ha med «, ikon» siden role="img" vil gjøre at skjermlesere og annen kompenserende teknologi presenterer ikonene som «bilde», men tenker det kan være fint å tydeliggjøre at det er snakk om et ikon. Funka legger f.eks. til «, illustrasjon» i alt-tekstene for bildene i kortene på https://www.funka.com for få frem at det er illustrasjoner fremfor foto/bilder