Feil: dekorative elementer i lenker leses opp av skjermlesere

[wkillerud]

Feilbeskrivelse

De forskjellige pilene i Link og NavLink leses opp av skjermlesere

Steg for å gjenskape

• Gå til https://jokul.fremtind.no/komponenter/link
• Velg Ekstern for å få fram pila på Link
• Test med skjermleser og hør at pila blir lest opp

Det samme gjelder NavLink, både den vanlige og bakover-varianten.

Forventet oppførsel

Pilene bør ikke leses opp, siden de er dekorative.

[wkillerud]

Feilen kommer av at vi bruker CSS og content for å vise pilene, og disse leses automatisk opp. Det er en CSS-spec for alternativ tekst for CSS content, men den er ikke implementert ennå i Firefox og Safari i skrivende stund.

• https://www.w3.org/TR/css-content-3/#accessibility
• https://developer.mozilla.org/en-US/docs/Web/CSS/content#browser_compatibility
• https://caniuse.com/mdn-css_properties_content_alt_text

content: "\2192";
content: "\2192" / ""; /* tilsvarer alt="" på <img /> */

• Bug i Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1281158
• Bug i WebKit: https://bugs.webkit.org/show_bug.cgi?id=159022

Safari har visstnok et custom attributt alt vi kan bruke fram til de får støtte for den nye content-syntaksen:

https://www.stefanjudis.com/today-i-learned/css-content-accepts-alternative-text/#edits-part-2-–-improve-browser-support-using-feature-detection

Hvis vi kan få dette til å fungere bra i dag i alle nettlesere vi støtter som ikke er Firefox, med viten om at Firefox vil få støtte på sikt, så tenker jeg det er godt nok. Det er en kjempestor bonus å beholde disse dekorative elementene som innhold i pseudoelementer, siden det gjør det mye enklere å få riktig utseende i de tilfellene man ikke bruker React-komponentene. Det gjelder sannsynligvis ganske mange (f. eks. diverse routeres Link-komponenter, generert HTML fra Markdown i Gatsby, o. l.).