Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.
Obě strany předchozí revizePředchozí verzeNásledující verze | Předchozí verze | ||
pristupnost:odkazy [2020/09/17 21:28] – linda | pristupnost:odkazy [2023/11/06 17:35] (aktuální) – epub | ||
---|---|---|---|
Řádek 1: | Řádek 1: | ||
====== -#18 Odkazy ====== | ====== -#18 Odkazy ====== | ||
- | U základů | + | Základem |
===== Ovládání odkazů z klávesnice ===== | ===== Ovládání odkazů z klávesnice ===== | ||
- | Většina z nás používá | + | Většina z nás k ovládání odkazů |
<WRAP center tip > | <WRAP center tip > | ||
- | Uživatelé, | + | Uživatelé, |
- | Odkazy jsou při použití klávesnice procházeny postupně, v pořadí, | + | |
+ | Odkazy jsou při použití klávesnice procházeny postupně, v pořadí, | ||
</ | </ | ||
Mezi nejčastější problémy patří: | Mezi nejčastější problémy patří: | ||
* **nedostupnost druhé úrovně rozbalovacího menu** – uživatel se sice dostane na první úroveň menu, ale vnořené položky jsou pro něj z klávesnice nedostupné; | * **nedostupnost druhé úrovně rozbalovacího menu** – uživatel se sice dostane na první úroveň menu, ale vnořené položky jsou pro něj z klávesnice nedostupné; | ||
- | * **nedostupnost některých oblastí webu**: při postupném přecházení mezi odkazy se uživatel bez použití myši nedostane do některé | + | * **nedostupnost některých oblastí webu** |
- | * **tzv. past**, ze které se uživatel nedostane ven: kvůli chybnému kódu apod. se uživatel dostane na nějaký prvek stránky, pomocí kláves nebo jejich kombinací se však nedostane | + | * **tzv. past**, ze které se uživatel nedostane ven – kvůli chybnému kódu apod. se uživatel dostane na nějaký prvek stránky, pomocí kláves nebo jejich kombinací se však nedostane vpřed ani zpět. |
<WRAP center info> | <WRAP center info> | ||
Řádek 20: | Řádek 21: | ||
Někteří uživatelé nemohou používat myš. Jde např. o: | Někteří uživatelé nemohou používat myš. Jde např. o: | ||
* nevidomé uživatele, kteří pro pohyb na webové stránce používají odečítač obrazovky v kombinaci s klávesnicí; | * nevidomé uživatele, kteří pro pohyb na webové stránce používají odečítač obrazovky v kombinaci s klávesnicí; | ||
- | * slabozraké uživatele, pro které je obtížené se trefit na konkrétní místo na stránce; | + | * slabozraké uživatele, pro které je obtížné se trefit na konkrétní místo na stránce; |
- | * lidi s tělesným postižením, | + | * lidi s tělesným postižením, |
- | * lidi s poruchami jemné motoriky, s třasem rukou apod.; | + | * uživatele |
- | * někdy také lidi, kteří sice myš používat mohou, ale třeba neradi používají touchpad na notebooku nebo jim prostě ovládání webu z klávesnice v některých případech připadá rychlejší a šikovnější. | + | * někdy také uživatele, kteří sice myš používat mohou, ale třeba neradi používají touchpad na notebooku nebo jim prostě ovládání webu z klávesnice v některých případech připadá rychlejší a šikovnější. |
</ | </ | ||
<WRAP center tip> | <WRAP center tip> | ||
- | ==== Kontrola | + | ==== Jak zkontrolovat |
- | Tvorba menu nebo správnost zdrojového kódu, která zaručí bezproblémový pohyb pomocí klávesnice je záležitost vývojářů či programátorů. Funkčnost odkazů si však můžete | + | Tvorba menu nebo správnost zdrojového kódu, která zaručí bezproblémový pohyb pomocí klávesnice, je záležitost vývojářů či programátorů. Funkčnost odkazů si však můžete zkontrolovat |
* klávesou tab přesunete kurzor na další odkaz nebo aktivní prvek; | * klávesou tab přesunete kurzor na další odkaz nebo aktivní prvek; | ||
- | * pomocí klávesy | + | * klávesou |
* pomocí šipek se pohybujete po stránce; | * pomocí šipek se pohybujete po stránce; | ||
- | * případně pomocí mezerníku, který umožňuje výběr | + | * mezerníkem vybíráte |
</ | </ | ||
Řádek 42: | Řádek 43: | ||
===== Zvýraznění odkazů ===== | ===== Zvýraznění odkazů ===== | ||
- | Pro snadnější orientaci jsou odkazy na webové stránce zvýrazněny. Od samého vzniku webu byly odkazy zvýrazněny podtržením a tento způsob přetrvává ve výchozím nastavení prohlížečů i nyní a většina uživatelů podtržený text okamžitě chápe jako odkaz. Bohužel se však v poslední době (údajně z estetických důvodů) na mnoha webech setkáváme tím, že je odkaz odlišen od okolního textu pouze barevně, případně v kombinaci s tučným řezem písma. | + | Pro snadnější orientaci jsou odkazy na webové stránce zvýrazněny. Od samého vzniku webu byly odkazy zvýrazněny podtržením a tento způsob přetrvává ve výchozím nastavení prohlížečů i nyní. Většina uživatelů |
Pokud můžete, zvýrazněte odkazy podtržením, | Pokud můžete, zvýrazněte odkazy podtržením, | ||
Řádek 49: | Řádek 50: | ||
==== Proč je důležité odlišit odkazy podtržením ==== | ==== Proč je důležité odlišit odkazy podtržením ==== | ||
- | Odlišení odkazu od okolního textu pouze odlišnou | + | Odlišení odkazu od okolního textu pouze barvou komplikuje identifikaci odkazu lidem s poruchami barvocitu nebo s jiným zrakovým postižením. Může být problematické |
Podtržený odkaz je dobře viditelný pro všechny uživatele, nejen pro uživatele se zrakovým postižením. To může přispět i k většímu využívání odkazů nebo prodloužit čas, který uživatel na webu stráví. | Podtržený odkaz je dobře viditelný pro všechny uživatele, nejen pro uživatele se zrakovým postižením. To může přispět i k většímu využívání odkazů nebo prodloužit čas, který uživatel na webu stráví. | ||
Řádek 57: | Řádek 58: | ||
==== Odlišení navštívených odkazů ==== | ==== Odlišení navštívených odkazů ==== | ||
- | Orientaci na stránce uživatelům zjednoduší také barevné odlišení odkazů, které již navštívili. Při výběru barev odkazů nezapomínejte na dostatečný poměr kontrastu odkazu jak vůči ostatnímu textu, tak i vůči pozadí. | + | Orientaci na stránce uživatelům zjednoduší také barevné odlišení odkazů, které již navštívili. Při výběru barev odkazů nezapomínejte na dostatečný poměr kontrastu odkazu jak vůči ostatnímu textu, tak vůči pozadí. |
- | Minimálně | + | Minimální |
- | Ke kontrole barev odkazu můžete použít nástroj [[https:// | + | Ke kontrole barev odkazu můžete použít nástroj [[https:// |
==== Zvýraznění odkazu, na kterém je umístěn kurzor ==== | ==== Zvýraznění odkazu, na kterém je umístěn kurzor ==== | ||
- | Pokud uživatel ovládá web pomocí klávesnice a přesouvá kurzor pomocí klávesy | + | Pokud uživatel ovládá web pomocí klávesnice a přesouvá kurzor pomocí klávesy tab na další odkaz, je pro něj důležité, |
<WRAP center tip> | <WRAP center tip> | ||
Ke zvýraznění odkazu s kurzorem se používá tzv. focus, který webový vývojář nastaví ve stylu stránky((Pro nastavení vzhledu webu se používají kaskádové styly (Cascading Style Sheets, CSS).)). | Ke zvýraznění odkazu s kurzorem se používá tzv. focus, který webový vývojář nastaví ve stylu stránky((Pro nastavení vzhledu webu se používají kaskádové styly (Cascading Style Sheets, CSS).)). | ||
Řádek 72: | Řádek 73: | ||
Příklad zvýraznění odkazu vidíte na snímku webové stránky se seznamy literatury (obr. 1). Kurzor je umístěn na odkazu **Etnické a menšinové skupiny**, který je zvýrazněn hnědou barvou. Zdrojová stránka je dostupná na adrese https:// | Příklad zvýraznění odkazu vidíte na snímku webové stránky se seznamy literatury (obr. 1). Kurzor je umístěn na odkazu **Etnické a menšinové skupiny**, který je zvýrazněn hnědou barvou. Zdrojová stránka je dostupná na adrese https:// | ||
- | {{: | + | {{: |
//Obr. 1: Zvýraznění odkazu při procházení stránky pomocí klávesnice (zdroj: [[https:// | //Obr. 1: Zvýraznění odkazu při procházení stránky pomocí klávesnice (zdroj: [[https:// | ||
Řádek 78: | Řádek 79: | ||
===== Srozumitelnost zástupného textu odkazu ===== | ===== Srozumitelnost zástupného textu odkazu ===== | ||
- | Zástupný text odkazu (tj. to, jak se odkaz zobrazí v textu webové stránky) by měl sám o sobě jednoznačně vystihovat, kam odkaz vede a to i bez okolního kontextu (aniž by uživatel musel číst text okolo). | + | Zástupný text odkazu (tj. to, jak se odkaz zobrazí v textu webové stránky) by měl sám o sobě jednoznačně vystihovat, kam odkaz vede, a to i bez okolního kontextu (aniž by uživatel musel číst text okolo). |
- | Pokud je to možné, nepoužívejte jako označení odkazu výrazy typu **zde** apod. Je-li totiž takových odkazů na stránce víc, stávají se nepřehledné. Velkou překážkou jsou zejména pro uživatele, kteří používají odečítač obrazovky a tudíž běžně nevidí okolní kontext odkazu. | + | Pokud je to možné, nepoužívejte jako označení odkazu výrazy typu **__zde__**. Je-li totiž takových odkazů na stránce víc, stávají se nepřehlednými. Velkou překážkou jsou zejména pro uživatele, kteří používají odečítač obrazovky, a tudíž běžně nevidí okolní kontext odkazu. |
Velice často se zástupné texty typu **__zde__**, | Velice často se zástupné texty typu **__zde__**, | ||
Řádek 91: | Řádek 92: | ||
//Obr. 3: Nesprávně použitý zástupný text ZJISTIT VÍCE; bez okolního kontextu uživatel neví, čeho se odkaz týká (zdroj: [[https:// | //Obr. 3: Nesprávně použitý zástupný text ZJISTIT VÍCE; bez okolního kontextu uživatel neví, čeho se odkaz týká (zdroj: [[https:// | ||
- | Odkazy na podrobnosti k jednotlivým aktualitám se však dají jednoduše řešit i jinak, např. tak, že odkazem vedoucím na detaily aktuality je název dané aktuality | + | Odkazy na podrobnosti k jednotlivým aktualitám se však dají jednoduše řešit i jinak, např. tak, že odkazem vedoucím na detaily aktuality je název dané aktuality. Na obr. 4 je uveden příklad správně použitých zástupných textů odkazů na detaily aktualit, z nichž uživatel snadno zjistí, čeho se odkazy týkají, aniž by musel číst související text. |
{{: | {{: | ||
Řádek 97: | Řádek 98: | ||
- | Dalšími případy bývají odkazy na různé oficiální dokumenty. | + | Dalšími případy bývají odkazy na různé oficiální dokumenty. |
- | " | + | " |
- | * Podrobnosti o cenách služeb najdete **__v Ceníku__**. | + | * "Podrobnosti o cenách služeb najdete **__v Ceníku__**"; |
- | * Podrobnosti o ceně služeb viz **__Ceník__**. | + | * "Podrobnosti o ceně služeb viz **__Ceník__**"; |
- | * **__Ceník služeb__** | + | * "**__Ceník služeb__**". |
<WRAP center tip > | <WRAP center tip > | ||
Řádek 111: | Řádek 112: | ||
<WRAP center info> | <WRAP center info> | ||
- | ==== Proč je důležité aby odkazy dávaly smysl i bez okolního textu ==== | + | ==== Proč je důležité, aby odkazy dávaly smysl i bez okolního textu ==== |
- | Odkaz označený | + | Odkaz označený |
- | Nevhodné označení odkazů může komplikovat práci s webem také uživatelům s dalšími poruchami zraku, kteří sice s omezením vidí, ale je pro ně obtížné používat myš, a proto se pohybují | + | Nevhodné označení odkazů může komplikovat práci s webem také uživatelům s dalšími poruchami zraku, kteří sice s omezením vidí, ale je pro ně obtížné používat myš, a proto se po odkazech |
</ | </ | ||
===== Odkaz na jiný web nebo dokument ===== | ===== Odkaz na jiný web nebo dokument ===== | ||
- | V některých případech je vhodné připojit k odkazu vysvětlení, | + | V některých případech je vhodné připojit k odkazu vysvětlení, |
- | * jde o dokument ke stažení, jehož otevření je nutná další aplikace nebo program, | + | * jde o dokument ke stažení, |
- | * odkaz směřuje na jiný, externí web. | + | * odkaz směřuje na jiný (externí) web. |
- | Někdy je tato informace | + | Někdy je cíl odkazu dostatečně |
- | * " | + | * " |
- | * " | + | * " |
- | * " | + | * " |
+ | |||
+ | V ostatních případech je třeba přidat informace o externím zdroji. Jde-li o dokument ke stažení (k jehož otevření je nutná jiná aplikace než webový prohlížeč), | ||
+ | * " | ||
+ | * " | ||
+ | * " | ||
+ | * " | ||
- | V ostatních případech je třeba připojit informace o externím zdroji jiným způsobem. Jde-li o dokument ke stažení (k jehož otevření je nutná jiná aplikace než webový prohlížeč), je nutné připojit také informaci o typu a velikosti dokumentu a to přímo do zástupného textu odkazu. (nikoliv až za odkaz). Např.: | + | U některých webů může být u externích odkazů automaticky zobrazena ikona symbolizující, |
- | * " | + | |
- | * " | + | |
- | * " | + | |
- | * " | + | |
- | U některých webů může být u externích odkazů automaticky zobrazena ikona symbolizující, | + | {{: |
- | {{: | + | |
//Obr. 5: Ikona symbolizující otevření odkazu na externím webu// | //Obr. 5: Ikona symbolizující otevření odkazu na externím webu// | ||
<WRAP center tip> | <WRAP center tip> | ||
- | ==== Jak lze zjistit informace o velikosti souboru ve Windows ==== | + | ==== Jak zjistit informace o velikosti souboru ve Windows ==== |
- | * | + | * |
- | * V programu Total Commander po označení souboru (např. klávesou | + | * V programu Total Commander |
</ | </ | ||
Řádek 149: | Řádek 151: | ||
==== Proč je důležité uvést informace o odkazu na jiný web nebo dokument ==== | ==== Proč je důležité uvést informace o odkazu na jiný web nebo dokument ==== | ||
- | Informace o tom, že odkaz vede na jiný web nebo že jde o dokument ke stažení, je obzvláště důležitá pro uživatele s postižením zraku, kteří mají zhoršenou vizuální orientaci nebo kteří pracují s odečítačem obrazovky. Pro tyto uživatele může být obtížné zjistit, že se prostřednictvím odkazu dostali do jiného okna, a tudíž jim **nefunguje klávesa zpět**, nebo dokonce, | + | Informace o tom, že odkaz vede na jiný web nebo že jde o dokument ke stažení, je obzvláště důležitá pro uživatele s postižením zraku, kteří mají zhoršenou vizuální orientaci nebo kteří pracují s odečítačem obrazovky. Pro tyto uživatele může být obtížné zjistit, že se prostřednictvím odkazu dostali do jiného okna, a tudíž jim **nefunguje klávesa zpět**, nebo že se dostali **na jiný web, který má jinou strukturu a odlišnou navigaci**, případně že se jim otevřela **jiná aplikace než webový prohlížeč**. |
- | Informace o typu dokumentu a jeho velikosti je však důležitá také pro **uživatele mobilních zařízení**. Pokud uživatel hledá pouze dílčí informaci, nechce **zbytečně do svého zařízení stahovat velký soubor**. Stahování souborů může být problematické také kvůli **omezení datového tarifu**, **nekvalitnímu připojení** | + | Informace o typu dokumentu a jeho velikosti je však důležitá také pro **uživatele mobilních zařízení**. Pokud uživatel hledá pouze dílčí informaci, nechce **zbytečně do svého zařízení stahovat velký soubor**. Stahování souborů může být problematické také kvůli **omezení datového tarifu** |
</ | </ | ||
< | < |