Ved skalering av tekststørrelse til 200%, i mobilvisning, flyter tekst ut over containeren til komponenten samt skjermen og introduserer horisontal skroll.
Dette skal ikke være brudd på lovkravet siden innholdet fortsatt er tilgjengelig og forståelig, ved hjelp av skroll. Mener fortsatt vi bør løse det siden todimensjonal skroll bør unngås, i tråd med WCAG 2.1/2.2, 1.4.10 Reflow (ekstern lenke).
CardBase med standard tekststørrelse:
CardBase med med tekststørrelse 200%:
IconCard, default og condensed, med standard tekststørrelse:
IconCard, default og condensed, med tekststørrelse 200%:
StippledCard, default og condensed, med standard tekststørrelse:
StippledCard, default og condensed, med tekststørrelse 200%:
Det er også mulig for kunder/brukere å velge enda større tekststørrelse enn 200% (200% er bare minimumskravet, i loven). Det vil bare forsterke problemet.
Forslag til løsning
Legge til word-break: break-all eller overflow-wrap: anywhere;. Kanskje overflow-wrap: anywhere; er beste løsning, for å unngå at ord brekkes der de heller kan havne på ny linje?
CardBase, IconCard condenced og StippledCard condensed med tekststørrelse 200% og word-break: break-word;:
Lovkrav
https://www.uutilsynet.no/wcag-standarden/144-endring-av-tekststorrelse-niva-aa/96
Tester
https://github.com/sparebank1utvikling/designsystem-uustatus/blob/main/reports/Cards/CardBase/wcag-1.4.4_endring_av_tekstst_rrelse.yml
https://github.com/sparebank1utvikling/designsystem-uustatus/blob/main/reports/Cards/IconCard/wcag-1.4.4_endring_av_tekstst_rrelse.yml
https://github.com/sparebank1utvikling/designsystem-uustatus/blob/main/reports/Cards/StippledCard/wcag-1.4.4_endring_av_tekstst_rrelse.yml
Beskrivelse
Ved skalering av tekststørrelse til 200%, i mobilvisning, flyter tekst ut over containeren til komponenten samt skjermen og introduserer horisontal skroll.
Dette skal ikke være brudd på lovkravet siden innholdet fortsatt er tilgjengelig og forståelig, ved hjelp av skroll. Mener fortsatt vi bør løse det siden todimensjonal skroll bør unngås, i tråd med WCAG 2.1/2.2, 1.4.10 Reflow (ekstern lenke).
CardBase med standard tekststørrelse:
CardBase med med tekststørrelse 200%:
IconCard, default og condensed, med standard tekststørrelse:
IconCard, default og condensed, med tekststørrelse 200%:
StippledCard, default og condensed, med standard tekststørrelse:
StippledCard, default og condensed, med tekststørrelse 200%:
Det er også mulig for kunder/brukere å velge enda større tekststørrelse enn 200% (200% er bare minimumskravet, i loven). Det vil bare forsterke problemet.
Forslag til løsning
Legge til
word-break: break-all
elleroverflow-wrap: anywhere;
. Kanskjeoverflow-wrap: anywhere;
er beste løsning, for å unngå at ord brekkes der de heller kan havne på ny linje?CardBase, IconCard condenced og StippledCard condensed med tekststørrelse 200% og
word-break: break-word;
: