chore: add missing labels closes #100

[hegeaal]

Er teksten på labels'ene ok?

closes #100

[pooriamehregan]

Tipper det er noen av audit sjekkene som feiler. Foreslår å kjøre npm audit fix for å fikse disse. Tror det er samme issuet som får de andre pr-sjekkene dine til å feile.

[hegeaal]

Tipper det er noen av audit sjekkene som feiler. Foreslår å kjøre npm audit fix for å fikse disse. Tror det er samme issuet som får de andre pr-sjekkene dine til å feile.

@pooriamehregan Nice, takk! Var vist bare at jeg ikke viste at man måtte pushe package-lock filen også 😅

[pooriamehregan]

@pooriamehregan Nice, takk! Var vist bare at jeg ikke viste at man måtte pushe package-lock filen også sweat_smile

Bare hyggelig! 😇

[terjesyl]

Jeg lurer på om dette er et tilfelle hvor man bør bruke label og ikke aria-label til å beskrive input-feltets funksjon: MDN Dev Handbook om aria-label

[terjesyl]

Og så burde teksten være på norsk, siden det er det vi har brukt andre steder.

[hegeaal]

Jeg lurer på om dette er et tilfelle hvor man bør bruke label og ikke aria-label til å beskrive input-feltets funksjon: MDN Dev Handbook om aria-label

@terjesyl Label er ikke en property for input/textarea iallfall, mener du å lage en egen <label> -tag?

[terjesyl]

Ser i HTML-en at det er en label-tag allerede, men det er ikke så åpenbart hva den faktisk inneholder (er flere nøstede div-er i den), så er kanskje derfor WAVE klager på manglende merking av input-felter 😅

Jeg tror det blir smør på flesk med aria-label her. Det er allerede et tilgjengelig navn på input-feltet ("Valider fil") og en beskrivelse av hvordan man skal bruke det. aria-label brukes der hvor tekst mangler (f.eks. knapper/interaktive elementer som består av kun et ikon).

Med aria-label på input-feltene i validatoren tror jeg at en skjermleser vil lese opp både teksten som er synlig på siden og aria-label-en, eksempelvis for det første feltet: "Valider fil. Slipp filen her eller [knapp] velg fra maskinen. Input for fil". I det tilfellet tenker jeg aria-label er overflødig og i verste fall forringer brukeropplevelsen.

Hva tenker du @pooriamehregan ? Kunne aria-labelledby vært brukt her? Eller er det HTML-strukturen som gjør at WAVE ikke klarer å fange opp tekstbeskrivelsene av de interaktive-elementene?

[pooriamehregan]

Jeg synes det er veldig bra tråd dere har her. 👍

Jeg kom borti noe liggende i går (Lenke til issuet), hvor jeg så at form control elementene hadde enten aria-label eller label, men SiteImprove klagde fortsatt over manglende label (vil anta at WAVE også kommer til å klage her).

Så jeg tror nok du er på riktig spor @terjesyl . Jeg trodde også aria-label er en "must" for interaktive komponenter. Tror jeg må lese denne (MDN Dev Handbook om aria-label) en gang til :)

Men del gjerne hvis dere kommer frem til noe smart fiks sånn at jeg også kan gjenåpne det issuet nevnt ovenfor. 🙏

[terjesyl]

@pooriamehregan @hegeaal Fra MDN Dev Handbook

By default, a button's accessible name is the content between the opening and closing tags, an image's accessible name is the content of its alt attribute, and a form input's accessible name is the content of the associated \<label> element. (min utheving)

Videre:

aria-label can be used in cases where text that could label the element is not visible. If there is visible text that labels an element, use aria-labelledby instead.

Jeg tolker det som at vi bør bruke aria-labelledby her (forutsetter at teksten som vises nå beskriver godt nok funksjonaliteten). Hva tenker dere?

Det at teksten i label-taggen er nøstet inne i flere div-er er muligens et problem, men er ikke sikker. Vi kan høre om Aina kan teste med skjermleser.

Jeg er usikker på om det løser det andre issuet ditt, Pooria, vi må jo kunne sette aria-labelledby-attributten på elementet som mangler label.

[pooriamehregan]

@terjesyl veldig nyttig info! Kan prøve det på det issuet jeg nevnte, og se om dette var årsaken til at SiteImprove klagde. Som du var inne på, sannsynligvis både/enten nøsting og mangel av aria-labelledby kanskje skape tilgjengelighets issuet som SiteImprove peker mot. Kan evt teste/eksperimentere med WAVE for å se om det går an å bli kvitt de issuene.

[hegeaal]

Nå har jeg byttet til aria-labelledby, screenReader leser følgende:

• Valider fil: slipp filen her eller velg fra maskinen, radio button selected

• Valider lenke: Valider lenke Eks: https://(...) Edit tekst

• Valider tekst: radio button selected, text area

Funker det? @terjesyl @pooriamehregan @jeffreiffers