Uživatelské nástroje

Nástroje pro tento web


pristupnost:pismo_a_formatovani_textu

Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

Odkaz na výstup diff

Obě strany předchozí revizePředchozí verze
Následující verze
Předchozí verze
pristupnost:pismo_a_formatovani_textu [2020/09/16 13:15] – ↷ Stránka přejmenována z 'pristupnost:formatovani_textu' na 'pristupnost:pismo_a_formatovani_textu' lindapristupnost:pismo_a_formatovani_textu [2020/09/24 13:33] (aktuální) epub
Řádek 1: Řádek 1:
 ====== -#19 Písmo a formátování textu ====== ====== -#19 Písmo a formátování textu ======
  
-Čitelnost textu je jednou ze základních předpokladů přístupnosti stránky. Týká se širokého spektra uživatelů:  nejen lidí se zrakovým postižením nebo sníženým barvocitem, seniorů nebo lidí s poruchami čtení ale třeba také těch, kdo pro přístup ke stránce používají mobilní zařízení.+Čitelnost textu je jedním ze základních předpokladů přístupnosti stránky. Týká se širokého spektra uživatelů:  nejen lidí se zrakovým postižením nebo sníženým barvocitem, seniorů nebo lidí s poruchami čteníale např. i těch, kteří pro přístup ke stránce používají mobilní zařízení.
  
-Čitelnost textu může být ovlivněna mnoha faktory. Kromě kontrastunevhodného vzorku na pozadí apod. je to především využití vhodného písma a formátování textu.+Čitelnost textu může být ovlivněna různými faktory. Kromě nedostatečného kontrastu nebo nevhodného vzorku na pozadí je to především využití vhodného písma a formátování textu.
  
 ===== Výběr fontu ===== ===== Výběr fontu =====
 Výběr fontu pro webové stránky obvykle vychází z grafického stylu organizace. Ten v určitých případech vyžaduje použití speciálních fontů. Výběr fontu pro webové stránky obvykle vychází z grafického stylu organizace. Ten v určitých případech vyžaduje použití speciálních fontů.
-I v případě, že vizuální styl vaší organizace obsahuje neobvyklé fonty, na webu je doporučeno vždy **používat obvyklá písma bez typografických zvláštností**, která se uživatelům webu nejlépe čtou. Vhodná jsou písma bezpatková, proporcionální.+I v případě, že vizuální styl vaší organizace obsahuje neobvyklé fonty, je na webu doporučeno vždy **používat obvyklá písma bez typografických zvláštností**, která se uživatelům webu nejlépe čtou. Vhodná jsou písma bezpatková, proporcionální.
  
-Naopak se nedoporučují tyto typy písem+Naopak se nedoporučují: 
-  * písma úzká (tj. narrow, compressed nebo condensed)nebo písma, které mají příliš tenké linky;+  * písma úzká (tj. narrow, compressed nebo condensed) nebo písma, která mají příliš tenké linky;
   * efekty písma, např. stínování či obrysy;   * efekty písma, např. stínování či obrysy;
   * texty psané pouze velkými písmeny;   * texty psané pouze velkými písmeny;
   * fonty s typografickými zvláštnostmi.   * fonty s typografickými zvláštnostmi.
 +Ukázky nedoporučených písem si můžete prohlédnout na obr. 1. \\ 
  
 {{:pristupnost:neobvykle_fonty.png|Ukázka neobvyklých typů fontů, kterým je vhodné se na webu vyhnout}} \\  {{:pristupnost:neobvykle_fonty.png|Ukázka neobvyklých typů fontů, kterým je vhodné se na webu vyhnout}} \\ 
-//Obr. 1: Ukázka neobvyklých fontů, jejichž použití na webu je vhodné se vyhnout (zdroj: archiv autorky)//+//Obr. 1: Ukázka neobvyklých fontů, jejichž použití na webu je vhodné se vyhnout (zdroj: archiv autorky)// \\ \\  
 <WRAP center info> <WRAP center info>
-===== Proč je důležité vybírat běžné fonty a vyhnout se efektům písma ===== +==== Proč je důležité vybírat běžné fonty a vyhnout se efektům písma ==== 
-Neobvyklá písma mohou být překážkou pro čtení a někdy následně i porozumění textu pro lidi s poruchami zraku, dyslektiky, lidi s mentálním postižením, cizince, prelingválně neslyšící apod.). Je však známo, že typograficky nezvyklé písmo může být rušivé i pro tzv. běžné uživatele webu, kteří pak zaměří svou pozornost na písmo a méně se soustředí na sdělení textu.((Neobvyklá písma mohou mít i technická úskalí: Na webu se obvykle využívají tzv. web safe fonty, tj. fonty, o kterých se předpokládá, že jsou k dispozici na většině počítačů a že se tudíž uživateli stránka s tímto fontem zobrazí správně, tak, jak byla navržena. Pokud však uživatel písmo na svém počítači nainstalované nemá, zobrazí se mu jiné písmo. V některých případech to může znamenat i rozsypání” designu stránky. Existují sice technická řešení, která tyto problémy eliminujívětšinou však nejsou stoprocentní a v některých případech mohou být zdrojem dalších technických problémů+Neobvyklá písma mohou být překážkou pro čtení a někdy i porozumění textu pro lidi s poruchami zraku, dyslektiky, lidi s mentálním postižením, cizince, prelingválně neslyšící apod. Je však známo, že typograficky nezvyklé písmo může být rušivé i pro běžné uživatele webu, kteří pak svou pozornost zaměří na písmo a méně se soustředí na sdělení textu.((Neobvyklá písma mohou mít i technická úskalí: Na webu se obvykle využívají tzv. web safe fonty, tj. fonty, o kterých se předpokládá, že jsou k dispozici na většině počítačů a že se uživateli stránka s tímto fontem zobrazí správně, tedy tak, jak byla navržena. Pokud však uživatel písmo na svém počítači nainstalováno nemá, zobrazí se mu jiné písmo. V některých případech to může znamenat i "rozsypánídesignu stránky. Existují sice technická řešení, která tyto problémy eliminujívětšinou však nejsou stoprocentní a v některých případech mohou být zdrojem dalších technických problémů.
- +
-Nezapomínejme také na to, že písma, která mohou vypadat zajímavě a dobře při zobrazení na monitoru počítače, nemusí vždy stejně dobře vypadat na menší ploše (tj. na mobilních zařízeních).)) +
- +
-Hůře čitelná jsou také písma která jsou příliš úzká. Např. stlačený (condensed) typ písma je oproti běžnému typu písma stejné velikosti hůře čitelný. Negativní vliv na čitelnost mají také tenké linky některých písem, různé efekty písma, texty psané kapitálkami aj.+
  
 +Nezapomínejme ani na to, že písma, která mohou vypadat zajímavě a dobře při zobrazení na monitoru počítače, nemusí vždy stejně dobře vypadat na menší ploše (tj. na mobilních zařízeních).))
  
 +Hůře čitelná jsou také příliš úzká písma. Je tomu tak např. u stlačeného (condensed) typu písma ve srovnání s běžným typem písma stejné velikosti. Negativní vliv na čitelnost mají rovněž tenké linky některých písem, různé efekty písma, texty psané kapitálkami aj.
 </WRAP> </WRAP>
  
-Na obr. 2 jsou dva bloky textu, u kterých byla použita stejná velikost písma. Horní blok je psán úzkým fontem s tenkými linkami, spodní blok je psán běžným fontem stejné velikosti. Který se vám lépe čte?((Běžný font, který byl použit pro spodní blok, je lépe čitelný než blok textu nahoře s úzkým fontem a tenkými linkami.)) \\  +Na obr. 2 jsou dva bloky textu, u kterých byla použita stejná velikost písma. Horní blok je psán úzkým fontem s tenkými linkami, dolní blok je psán běžným fontem stejné velikosti.\\  
-{{:pristupnost:fonty.png?500|Obr. 2: Srovnání úzkého fontu s tenkými linkami a běženého písma}} \\ + 
-//Obr. 2: Srovnání úzkého fontu s tenkými linkami a běženého písma (zdroj: archiv autorky)//+Který se vám čte lépe?((Běžný font, který byl použit pro druhý blok, je lépe čitelný než první blok textu s úzkým fontem a tenkými linkami.)) \\  
 +{{:pristupnost:fonty.png?500|Obr. 2: Srovnání úzkého fontu s tenkými linkami a běžného písma}} \\ 
 +//Obr. 2: Srovnání úzkého fontu s tenkými linkami a běžného písma (zdroj: archiv autorky)//
  
  
  
  
-===== Styly odstavů a bloků =====+===== Styly odstavců a bloků =====
  
-Nezanedbatelný vliv na čitelnost textu má uspořádání textu, zejména řádkování, rozestupy odstavců nebo bloků. K čitelnosti přispívá čistý a vzdušný design stránek:+Nezanedbatelný vliv na čitelnost textu má uspořádání textu, zejména řádkování, rozestupy mezi odstavci nebo bloky. K čitelnosti přispívá čistý a vzdušný design stránek:
  
-  * Použijte dostatečné **rozestupy mezi řádky**, vhodné je např. řádkování 1,5 (rozhodně ne řádkování 1). +  * Použijte dostatečné **rozestupy mezi řádky**, vhodné je např. řádkování 1,5 (rozhodně ne řádkování 1). 
-  * Použijte dostatečný **odstup mezi odstavci** a mezi jednotlivými bloky.+  * Použijte dostatečný **rozestup mezi odstavci** a mezi jednotlivými bloky.
   * **Vyhněte se příliš dlouhým řádkům** a nastavte šířku textových bloků tak, aby se uživatelům dobře četla. Důležité je to zejména kvůli širokoúhlým monitorům.   * **Vyhněte se příliš dlouhým řádkům** a nastavte šířku textových bloků tak, aby se uživatelům dobře četla. Důležité je to zejména kvůli širokoúhlým monitorům.
   * **Text zarovnávejte doleva**, nikdy do bloku (při zarovnání textu do bloku vznikají mezery, které mohou ztěžovat čtení textu).   * **Text zarovnávejte doleva**, nikdy do bloku (při zarovnání textu do bloku vznikají mezery, které mohou ztěžovat čtení textu).
  
-//Na obrázcích 3 a 4 vidíte stejný text: v prvním případě (obr. 3je použito řádkování 1 a mezi odstavci nejsou mezery, ve druhém případě (obr. 4jsou dostatečné mezery mezi řádky i odstavci.+Na obr. 3 a 4 vidíte stejný text. Zatímco na obr. 3 je použito řádkování 1 a mezi odstavci nejsou mezery, na obr. 4 jsou dostatečné mezery mezi řádky i odstavci.
  
-Který text se vám lépe čte?//((První blok textu s malým rozestupem mezi řádky se čte hůře než "vzdušněji" formátovaný text níže.)) +Který text se vám čte lépe?((První blok textu s malým rozestupem mezi řádky se čte hůře než "vzdušněji" formátovaný text druhého bloku.)) 
  
-{{:pristupnost:odstavce_bez_mezer.png|Obr. 3: Ukázka textu s malým rozestupem mezi řádky a odstavci}} \\ +{{:pristupnost:odstavce_bez_mezer.png|Obr. 3: Text s malým rozestupem mezi řádky a odstavci}} \\ 
-//Obr. 3: Ukázka textu s malým rozestupem mezi řádky a odstavci (zdroj: archiv autorky)// +//Obr. 3: Text s malým rozestupem mezi řádky a odstavci (zdroj: archiv autorky)// 
  
-{{:pristupnost:odstavce_vzdusne.png|Obr. 4: Ukázka textu s dostatečnými mezerami mezi řádky a odstavci}} \\ +{{:pristupnost:odstavce_vzdusne.png|Obr. 4: Text s dostatečným rozestupem mezi řádky a odstavci}} \\ 
-//Obr. 4: Ukázka textu s dostatečnými mezerami mezi řádky a odstavci (zdroj: archiv autorky)// +//Obr. 4: Text s dostatečným rozestupem mezi řádky a odstavci (zdroj: archiv autorky)// 
  
  
 ===== Zvýraznění textu ===== ===== Zvýraznění textu =====
  
-Pokud je text na webové stránce psán srozumitelným jazykem a je strukturovaný pomocí nadpisů, seznamů a dalších sémantických prvků, bývá často přehledný sám o sobě. Nastavení redakčního systému se postará o zvýraznění jednotlivých prvků – např. vzhledu nadpisů apod.+Pokud je text na webové stránce psán srozumitelným jazykem a je strukturován pomocí nadpisů, seznamů a dalších sémantických prvků, bývá často přehledný sám o sobě. Nastavení redakčního systému se postará o zvýraznění jednotlivých prvkůnapř. vzhledu nadpisů.
  
-Pokud však potřebujete zvýraznit nějaký text v obsahu stránky, doporučujeme ke zvýraznění využít např. tučný řez písma nebo kurzívu, případně zvýraznění pomocí barvy písma nebo barvy pozadí textu. V tom případě však nezapomeňte, že barva by neměla být jediným způsobem sdělení informace.+Pokud však potřebujete zvýraznit nějaký text v obsahu stránky, doporučujeme ke zvýraznění využít tučný řez písma nebo kurzivu, případně zvýraznění pomocí barvy písma nebo barvy pozadí textu. V tom případě však nezapomeňte, že barva by neměla být jediným způsobem sdělení informace.
 ==== Pravidla pro zvýraznění textu ==== ==== Pravidla pro zvýraznění textu ====
-  - **Dbejte na dostatečný kontrast textu a pozadí** (není např. vhodné použít pro barevné zvýraznění světlou barvu pro světlé písmo)+  - **Dbejte na dostatečný kontrast textu a pozadí**. Pro barevné zvýraznění není např. vhodné použít světlý podklad pro světlé písmo. 
-  - **Nespoléhejte se při zvýraznění pouze na barvu**. Lidé s poruchami barvocitu nemusí barevné zvýraznění vůbec vnímat (podle typu poruchy např. nemusí rozeznat červenou, zelenou či jinou barvu, viz [[pristupnost:zrakove_postizeni#uzivatele_s_poruchami_barvocitu|lidé s poruchami barvocitu]]). Text můžete zvýraznit např. tučným řezem.+  - **Při zvýraznění se nespoléhejte pouze na barvu**. Lidé s poruchami barvocitu nemusí barevné zvýraznění vůbec vnímat (podle typu poruchy např. nemusí rozeznat červenou, zelenou či jinou barvu, viz [[pristupnost:zrakove_postizeni#uzivatele_s_poruchami_barvocitu|Uživatelé s poruchami barvocitu]]). Text můžete zvýraznit např. tučným řezem.
   - **Snažte se zvýrazněné části textu odlišit od odkazů**. Zejména nepoužívejte podtržení slov. Podtržení se na webu tradičně využívalo a využívá pro odkazy, a proto by mohlo v návštěvnících stránky vzbuzovat dojem, že zvýrazněný text je odkazem.   - **Snažte se zvýrazněné části textu odlišit od odkazů**. Zejména nepoužívejte podtržení slov. Podtržení se na webu tradičně využívalo a využívá pro odkazy, a proto by mohlo v návštěvnících stránky vzbuzovat dojem, že zvýrazněný text je odkazem.
-  - **Nepoužívejte pro zvýraznění textu více různých fontů**. Kombinace různých písem může nejen působit neesteticky, ale může také vést k tomu, že informace působí nepřehledně.+  - **Pro zvýraznění textu nepoužívejte více různých fontů**. Kombinace různých písem může nejen působit neesteticky, ale vést k tomu, že informace působí nepřehledně.
   - **Nepoužívejte neobvyklé fonty**, které mohou některým návštěvníkům webu komplikovat čtení a vnímání textu.   - **Nepoužívejte neobvyklé fonty**, které mohou některým návštěvníkům webu komplikovat čtení a vnímání textu.
  
 +<-odkazy|18. Odkazy^obsah|Obsah^obrazky|20. Obrázky->
  
pristupnost/pismo_a_formatovani_textu.1600254907.txt.gz · Poslední úprava: 2020/09/16 13:15 autor: linda