Standarder · WCAG 2.2

SC 1.4.12 Niveau AA WCAG 2.1

Tekstafstand

Når brugere tilsidesætter tekstafstand — linjehøjde 1,5x, afsnitafstand 2x skriftstørrelse, bogstavafstand 0,12 em, ordafstand 0,16 em — må siden ikke miste indhold eller funktionalitet.

Hvad kriteriet kræver

Brugere med ordblindhed, synsnedsættelse eller kognitive funktionsnedsættelser installerer ofte browserudvidelser eller brugertypografiark, der løsner tæt sats. Succeskriteriet definerer fire specifikke tilsidesættelser — linjehøjde 1,5x skriftstørrelse, afsnitafstand 2x skriftstørrelse, bogstavafstand 0,12 em, ordafstand 0,16 em — og kræver, at siden stadig fungerer, når de anvendes. Ingen beskåret tekst, ingen overflow, intet manglende indhold.

Sådan opfyldes det

  • Angiv containerhøjder med min-height frem for fast height, så de vokser, når teksten udvides.
  • Undgå faste pixel-højder på knapper, navigationselementer, kort og badges — lad dem vokse med indholdet.
  • Test ved at indsætte et velkendt bookmarklet (WCAG 1.4.12-tekstafstands-bookmarklet findes), der anvender alle fire tilsidesættelser samtidigt.
  • Tillad naturlig tekstombrydning; brug ikke white-space: nowrap på etiketter, der kan vokse.
  • Kontrollér, at navigationsmenuer, faner og faneetiketter stadig passer, når bogstavafstand udvides.

Hyppige fejl

  • Knapper med height: 40px, der beskærer etiketten, når linjehøjden vokser til 1,5.
  • Faneetiketter med white-space: nowrap, der flyder ud af deres container ved større bogstavafstand.
  • Kort med faste højder, hvor teksten skjules bag et „læs mere“-fade.
  • Tooltips og badges, der beskærer deres tekst, når afsnitafstand vokser.
  • Sticky-headere med faste højder, der overlapper siden, når navigasjonsteksten vokser.

Hvorfor det er vigtigt

Dette succeskriterium fanger layouts, der er designet til ét sæt afstandsindstillinger, og hvor designeren har låst alt til en Figma-perfekt linjehøjde. Rigtige brugere af læsestøtteværktøjer anvender løbende afstandstilsidesættelser. Rettelsen er normalt at skifte fra height til min-height og fjerne white-space: nowrap — små, mekaniske ændringer, der giver udbytte i hele UI’et.