[Innspill til komponent]: <Button> med ikoner UU

[ivoiv]

Tilbakemelding

Det er per i dag et par ting man må ha i bakhodet når det gjelder Button med ikon.
Man må huske å manuelt sette aria-hidden på selve ikonet, eller sette Title på den dersom knappen ikke har tekst.

Kunne vi hatt en måte å automatisk legge til slike props til ikonet som sendes til icon?
F.eks. dersom Button har tekst, alltid sett aria-hidden på SVG-ikonet.

Når man ikke har children/tekst og kun ikon, kunne vi kanskje også satt aria-hidden, dersom man setter title på selve Button? (usikker om det er mer riktig å ha title på button eller selve ikonet i button).

Det kan i min mening gjøre det lettere å ha mer UU-vennlige og compliant sider ettersom det vil bli mer vanskelig for utviklerne å "gjøre feil", med noe så viktig som knapper.

[ivoiv]

Evt. bare ha alle Aksel-ikoner med aria-hidden som default, ettersom ikoner skal jo egentlig ikke være interaktive komponenter selv, men heller brukes i andre interaktive kontekster (i f.eks. knapper, lenker, osv) ?

[KenAJoh]

Kunne vi hatt en måte å automatisk legge til slike props til ikonet som sendes til icon? F.eks. dersom Button har tekst, alltid sett aria-hidden på SVG-ikonet.

Dette er noe vi kanskje kan vurdere å gjøre for Button og andre lignende komponenter som tar inn ikon 👍 Vi må bare være litt forsiktig med at vi ikke forværrer noen løsninger som kanskje har valgt å bruke beskrivende ikoner og tekst sammen i dag (som ikke er anbefalt).

Når man ikke har children/tekst og kun ikon, kunne vi kanskje også satt aria-hidden, dersom man setter title på selve Button? (usikker om det er mer riktig å ha title på button eller selve ikonet i button).

Vi kan i teorien gjøre dette ref forrige kommentar, men vi anbefaler å sette title på ikonet og ikke button. Sist vi sjekket dette var det litt bedre for skjermlesere, men i praksis er forskjellen minimal så 🤷

Evt. bare ha alle Aksel-ikoner med aria-hidden som default, ettersom ikoner skal jo egentlig ikke være interaktive komponenter selv, men heller brukes i andre interaktive kontekster (i f.eks. knapper, lenker, osv) ?

Vår hypotese er at dette vil gjøre løsningene våre mindre tilgjengelig, da feil bruk av ikoner ikke vil bli plukket opp av automatiserte a11y-tester eller andre manuelle tester. Eksempelvis vil f.eks Siteimprove eller ARC-toolkit ikke plukke opp feil bruk av enkeltstående ikoner hvis de har aria-hidden og man har glemt title. Vi ønsker derfor at man tar et bevisst valg hver gang man bruker et ikon, selv om det kanskje er litt tungvint til tider.

[github-actions]

Hei! Det ser ut som det ikke har vært aktivitet her på en stund. Etter 30 dager vil saken bli lukket automatisk.

Om saken fortsatt er relevant eller du har oppdateringer, vil en kommentar hindre at den lukkes. Du kan alltids åpne den igjen hvis det skulle være nødvendig!