Innhold skal kunne endres til 400 % størrelse uten tap av informasjon eller funksjonalitet.

Sektor:

    Hva er kravet?

    1.4.10 Dynamisk tilpasning (Reflow).

    Hva bør jeg teste?

    Alt innhold på siden.

    Hva er forventet resultat?

    Det er mulig å vise innholdet i både stående og liggende visning. Brukeren får tilgang til samme innhold og funksjonalitet.

    Når innholdet er zoomet inn til 400 %-visning, brekkes innholdet om til én kolonne. Da er det ikke nødvendig å scrolle i mer enn en retning og innholdet blir lettere å lese. Dersom innholdet strekker seg utover rammene på nettleservinduet/skjermen, må brukeren scrolle horisontalt for å lese innholdet. Da er det vanskelig å følge linjene med tekst.

    Løsningsforslag for 1.4.10 Dynamisk tilpasning (Reflow)

    Brukeren skal kunne nå innhold og funksjonalitet enten direkte, via en mekanisme på nettsiden (for eksempel en hamburgermeny), eller via en lenke. Bredden på 320 CSS-piksler tilsvarer et nettleservindu som er 1280 piksler bredt og hvor innholdet er zoomet opp til 400 %-visning. Kravet gjelder både språk som skrives horisontalt og språk som skrives vertikalt. På norsk, som er et språk som skrives horisontalt, scroller nettsiden vanligvis vertikalt. Da er det et brudd på suksesskriteriet dersom nettsiden krever horisontal scrolling.

    Eksempel: Responsivt design

    Når zoomprosenten øker, endres navigasjonen først for å skjule alternativer bak en "Mer"-nedtrekksmeny ("More" i videoen). Når zoomingen fortsetter, legger de fleste navigasjonselementene seg til slutt bak en hamburgermeny-knapp. All informasjon og funksjonalitet er fortsatt tilgjengelig fra denne nettsiden, og det er ingen horisontal scrolling.

    Se videoeksempel av responsivt design (engelsk).

    Eksempel på feil

    Det er ikke mulig å bruke nettsiden uten å måtte scrolle i begge retninger (bortsett fra unntakene).

    Kommentar

    Nettlesere på mobiltelefoner og nettbrett tilbyr ikke reflow på samme måte som nettlesere på PC. For mobile enheter er mangel på reflow et «user agent support issue» og ikke et brudd. Dette suksesskriteriet ivaretar at brukerne kan forstørre innholdet uten å måtte scrolle i begge retninger.

    Suksesskriterium 1.4.4 Endring av tekststørrelse gjelder i tillegg, og det skal også være mulig å forstørre teksten til 200 %-visning. Dersom teksten blir mindre når brukeren zoomer inn, skal det fortsatt finnes en måte å forstørre teksten på.

    Det er ikke et krav at det skal være mulig å forstørre teksten til 200 % ved alle brekkpunkter i et responsivt design. Det et tilstrekkelig at det er mulig å forstørre teksten i en av visningene.