Kritérium úspěšnosti 1.4.12 Rozložení textu – úroveň AA

Úvod

Zajistěte, že se neztratí žádný obsah ani funkčnost, pokud si uživatel pro značkovací jazyk nastaví svoji výšku řádku, rozteč mezi odstavci, slovy a písmeny.

Komu pravidlo pomáhá

  • Lidem se slabým zrakem: Větší prostor mezi řádky, slovy a písmeny umožní lépe přečíst vyobrazený text.
  • Lidem s dyslexií: Zvětšení mezer mezi řádky a slovy či písmeny, může ovlivnit rychlost čtení.

Podrobné informace

Zajistěte, že se neztratí žádný obsah ani funkčnost, pokud si uživatel pro značkovací jazyk nastaví styly:

  • Výška řádku (řádkování) minimálně na 1,5 násobek velikosti písma⁏
  • Rozteč mezi odstavci minimálně na dvojnásobek velikosti písma⁏
  • Rozteč písma (mezery mezi písmeny) minimálně na 0,12 násobek velikosti písma⁏
  • Rozteč mezi slovy minimálně na 0,16 násobek velikosti písma.

Výjimka: Lidské jazyky a písma, které nevyužívají jednu nebo více těchto vlastností stylu textu v psaném textu, se mohou používat pouze s vlastnostmi, které existují pro danou kombinaci jazyka a písma.

Způsob otestování

Toto kritérium lze velmi jednoduše testovat. Pokud v prohlížeči použijete níže uvedený CSS kód a web se nerozbije, máte splněno.

* {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}

p {
    margin-bottom: 2em !important;
}

Po nastavení CSS pravidel musíte zkontrolovat, že:

  • žádný text není na stránce oříznutý (ať už vertikálně či horizontálně)
  • nikde se texty nepřekrývají přes sebe

Během testování pravidla zkontrolujte všechny typové stránky webu. U každé stránky budete muset kód do prohlížeče znovu vložit.

Splnění kritéria

Pokud máte na stránce oblasti, které jsou zde pevně vymezené a takto „roztáhnutý“ text by se do nich nevešel, je to i tak řešitelné. Může se to týkat například menu v postranním panelu, záhlaví sloupců tabulky apod. V těchto případech lze na konci viditelného textu vložit elipsu (znak …). Musíte ale zajistit, aby se i tak uživatel k celému textu dostal. Je jen na Vás, jak to vyřešíte, můžete například:

  • při zaměření nebo aktivaci textu celý text zobrazit
  • vložit na konec textu včetně znaku … odkaz, který odkazuje na kompletní nezkrácený text

Doplňkové informace

Podrobné informace o kritériu 1.4.12 (anglicky)

Doporučené techniky, jak splnit kritérium 1.4.12 (anglicky)