Dokuwiki EBook

Přístupné webové stránky

Příručka pro knihovny

Eva Cerniňáková

Praha
Národní knihovna ČR – Knihovnický institut
září 2020 – (aktualizováno průběžně)

Přejít k obsahu

Obsah

1. Úvod

Uživatelé webu se specifickými potřebami

2. Uživatelé a přístupnost
3. Zrakové postižení
4. Sluchové postižení
5. Tělesné postižení
6. Kognitivní poruchy
7. Citlivost na světelné a optické podněty
8. Přehled opatření

Základy přístupnosti webu pro knihovníky

9. Knihovny a přístupnost
10. Zákon o přístupnosti
11. Metodika WCAG
12. Redakční systém
13. Funkční grafika webu
14. Struktura webu
15. Seznamy
16. Vkládání informací na web
17. Ovládání webu
18. Odkazy
19. Písmo a formátování textu
20. Obrázky
21. Formuláře
22. Multimediální obsah
23. Dokumenty
24. Zásady přístupného designu

Manuál přístupné editace webu

Titulní strana
(M.1) Vkládání obsahu na web
(M.2) Informace na webové stránce
(M.3) Nadpisy
(M.4) Seznamy
(M.5) Formátování textu
(M.6) Výběr vhodného fontu
(M.7) Zvýraznění textu
(M.8) Výběr a umístění obrázků
(M.9) Popisky obrázků a vložených videí
(M.10) Zástupný text odkazů
(M.11) Odkaz na jiný web nebo na dokument ke stažení
(M.12) Multimediální obsah
(M.13) Dokumenty

Jak ověřit přístupnost

Kontrolní seznam pro ověřování
Kontrola hierarchie nadpisů
Ověření kontrastu
Zjištění barev
Celkové ověření přístupnosti

Přílohy

Požadavky při výběrovém řízení
Doporučené zdroje

1. Úvod

Potřebu přístupnosti budov a veřejných prostor dnes již považujeme za samozřejmost. Neméně důležitá je přístupnost webových stránek. Tu však mnozí považují za okrajovou záležitost a neřeší ji. Internet, který má velký potenciál stát se nástrojem umožňujícím lidem s postižením samostatnost a nezávislost, tak pro řadu z nich zůstává plný nepřekonatelných bariér.

Přístupnost se v řadě ohledů týká nás všech: často jako uživatelů webu, zejména však jako knihovníků, kteří mají poskytovat rovný přístup ke knihovním a informačním službám všem bez rozdílu.

Přístupnost není pouze záležitostí programového kódu webových stránek a webových vývojářů. Značnou roli hraje to, jakým způsobem jsou informace na webu prezentovány, jakou má web strukturu a navigaci, zda jsou informace logicky uspořádány, zda je použit jazyk, kterému uživatel webu rozumí, zda jsou na web správným způsobem vkládány dokumenty apod. To jsou oblasti, které se netýkají ani tak webových vývojářů, ale spíše – v případě knihoven – knihovníků. Přitom vytvářet přístupné stránky není náročnější než vytvářet stránky nepřístupné. Jde jen o to, seznámit se se základními zásadami přístupnosti a při tvorbě webového obsahu je mít neustále na mysli a vědomě je aplikovat. Přístupnost však nekončí webovými stránkami, ale týká se také tvorby dokumentů v textových nebo tabulkových procesorech, e-mailové komunikace apod.

Přístupný web nemusí být výrazně nákladnější než ten, který se přístupností nezabývá. Některé aspekty přístupnosti samozřejmě souvisejí se zdrojovým kódem webu a při tvorbě webových stránek se mohou některé požadavky na přístupnost se projevit na ceně. Většinou však nejde o dramatický rozdíl.¹⁾ Navíc přístupnost webu má prokazatelně pozitivní vliv na výsledky stránek ve webových vyhledávačích. Jde také ruku v ruce s použitelností webu, s naplněním očekávání uživatelů a s responzivním designem webu. Ten je dnes, kdy značná část uživatelů používá k zobrazení webu mobilní zařízení, nesmírně důležitý.

Příručka o přístupnosti pro knihovníky

Je dobře, že v souvislosti se zákonem o přístupnosti webových stránek a mobilních aplikací[2], který vstoupil v platnost v roce 2019, se problematice přístupnosti začala věnovat o něco větší pozornost. Mnohé instituce, na které se zákon vztahuje, začaly zjišťovat, v jakém stavu jsou jejich webové stránky a co musejí udělat, aby splnily požadavky zákona.

Ve stejné situaci se ocitla také řada knihoven, z nichž mnohé se dosud potřebou přístupnosti webových stránek nezabývaly. Nevědí si proto rady, kde a jak začít, mnozí odpovědní pracovníci se v problematice webu ani jeho přístupnosti příliš neorientují. Ministerstvo vnitra ČR vydalo k zákonu o přístupnosti internetových stránek a mobilních aplikací metodický pokyn[3], ten však (jak se píše v jeho úvodu) „vyžaduje odborné znalosti související s tvorbou a správou internetových stránek a mobilních aplikací“. Ti, kdo rozhodují o webech knihoven, tento typ znalostí nepotřebují. Potřebují však porozumět tomu, co a hlavně proč je důležité a jaký to má nebo může mít vztah ke službám knihoven. Potřebují také vědět, co mají chtít po tvůrcích a správcích webových stránek při zadávání požadavků na změny webových stránek nebo na tvorbu nového webu. Potřebují vědět, jak ověřit, že je web pro uživatele se specifickými potřebami skutečně přístupný. Potřebují také informace o tom, jak s přístupným webem dále pracovat v každodenním provozu knihovny a zajistit, aby byl i nadále přístupný.

Příručka, kterou právě čtete, se snaží pracovníkům knihoven poskytnout právě tento typ informací. Ačkoliv vznikla v souvislosti se zákonem o přístupnosti internetových stránek a mobilních aplikací, není technickým návodem pro aplikaci tohoto zákona na weby knihoven a nevěnuje se ani jednotlivých požadavkům, které ze zákona vyplývají, ani přístupnosti mobilních aplikací.²⁾ Ačkoliv základní informace týkající se zmíněného zákona samozřejmě nelze zcela vynechat, cílem této příručky je spíše co nejsrozumitelněji představit stěžejní principy přístupnosti webových stránek. Jsme přesvědčeni, že pokud knihovna principy přístupnosti uvedené v této příručce na své webové stránky aplikuje, neměla by mít žádné problémy se splněním požadavků zákona. Především však aplikací těchto principů zlepší dostupnost knihovních a informačních služeb pro uživatele se specifickými potřebami.

Příručku využijí především vedoucí pracovníci knihoven nebo ti pracovníci, kteří mají na starosti koncepci webových stránek knihovny. Je zpracována tak, aby svým čtenářům pomohla porozumět tématu přístupnosti a usnadnila jim nejen přípravu přístupných webových stránek, ale také komunikaci s tvůrci či provozovateli webových stránek. Protože však na přístupnost má vliv i způsob, jakým jsou na web vkládány informace, jsou v příručce k dispozici i kapitoly určené pracovníkům knihoven, kteří vkládají informace do redakčního systému a aktualizují webové stránky.

Téma přístupnosti webu se do značné míry týká informačních technologií a programování webu. Není proto možné se v příručce vyhnout některým technickým tématům. I tato technická témata jsou však pojednána pokud možno takovou formou, aby jí byli schopni (alespoň v obecné rovině) porozumět i lidé, kteří s webovými technologiemi běžně nepracují. To neznamená, že by příručku nemohli využívat také IT pracovníci a vývojáři webu, nikoli však jako technický tutoriál ³⁾, nýbrž pro širší pochopení problematiky přístupnosti a jejích souvislostí.

Struktura příručky

Příručka se skládá z pěti částí.

První částí příručky je oddíl Uživatelé webu se specifickými potřebami. V něm se seznámíte s jednotlivými typy uživatelů, pro které je přístupnost webu důležitá, a s tím, jak ji pro ně zajistit. Pozornost je věnována lidem se zrakovým, sluchovým a tělesným postižením, s kognitivními poruchami a rovněž lidem citlivým na světelné a optické podněty. Některé pasáže textu (a také způsob jeho členění) jsou zčásti inspirovány webovým portálem WebAIM[6].

Hlavní částí příručky je oddíl Základy přístupnosti webu pro knihovníky. V něm najdete základní informace o zákonu o přístupnosti internetových stránek a mobilních aplikací a o metodice WCAG 2.1 (Web Content Accessibility Guidelines 2.1), z níž zákon vychází. Jednotlivé kapitoly představují témata, kterým je z hlediska přístupnosti třeba věnovat pozornost. U každého tématu jsou uvedeny doporučené zásady pro tvorbu webových stránek a vkládání obsahu na web. Zároveň je vždy vysvětleno, proč je daná zásada důležitá a jak její aplikace může lidem se specifickými potřebami i běžným uživatelům při práci s webovými stránkami pomoci. Tato část je určena zejména vedoucím knihoven a těm, kdo mají na starosti koncepci webu nebo jeho správu.

Část příručky nazvaná Manuál přístupné editace webu přináší na jednom místě základní informace o přístupnosti, které se týkají vkládání informací na web a práce s redakčním systémem. Tato část je určena pro editory webových stránek (tj. ty, kdo informace na web vkládají, případně spravují dílčí nastavení webu v redakčním systému). Nejde o speciální nový text, ale o výběr kapitol z předchozí části příručky. Výběr zahrnuje pouze témata, která se přímo týkají editace stránek v redakčním systému. Tvoří tak vlastně samostatnou příručku, aby editoři webu měli pohromadě pouze informace, které se týkají vkládání informací na web, a nemuseli se přitom zabývat tématy vztahujícími se ke koncepci webu.

Další část příručky Jak ověřit přístupnost obsahuje zejména kontrolní seznam pro ověřování přístupnosti webu a návody, jak pracovat s konkrétními nástroji, které mohou pomoci při přípravě přístupného webu. Jde např. o návod, jak pracovat s validátorem kontrastu, jak a čím zkontrolovat strukturu stránky nebo jako celkově ověřit přístupnost.

Poslední částí příručky jsou Přílohy. Tvoří je praktické informace, které mohou být užitečné při plánování koncepce webových stránek. Jde o přehled požadavků na přístupnost při výběrovém řízení a doporučené zdroje, mj. odkazy na články týkající se uživatelů webu se specifickými potřebami, články, které shrnují požadavky na přístupnost s ohledem na knihovny, odkazy na zahraniční weby nebo na simulátory zrakových vad.

Jak s příručkou pracovat

Příručka umožňuje čtení jednotlivých kapitol podle posloupnosti jejich číslování. Ti čtenáři, které zajímají pouze určitá témata, mohou číst pouze jednotlivé kapitoly podle svého aktuálního zájmu. Aby nepřišli o důležité informace, jsou jednotlivé kapitoly propojeny hypertextovými odkazy, díky kterým je možné přejít k souvisejícím tématům nebo externím zdrojům. V některých kapitolách (kde by odskok na jinou stránku rušil plynulost čtení) jsou ve stručnosti zopakovány také informace z jiných kapitol.

Pro snadnější orientaci v příručce je přehled všech kapitol k dispozici na levé boční liště každé stránky⁴⁾. Na horní liště se také zobrazuje historie procházených kapitol⁵⁾. Pro přesun na předchozí či následující kapitolu slouží odkazy v horní a dolní části stránky. K rychlému získání přehledu o obsahu kapitoly pomůže hierarchický přehled nadpisů na stránce s možností odskoku na konkrétní podkapitolu. Tento přehled je umístěn v pravé horní části stránky (vedle nadpisu). U delších kapitol se lze rychle vrátit na začátek stránky pomocí ikony šipky ↑ umístěné na pravé boční liště. Některé ilustrační obrázky jsou zmenšené. Kliknutím na obrázek se otevře samostatná stránka s obrázkem. Na ten můžete kliknout a tím obrázek získat v původním rozlišení.

V příručce jsou dále použity následující grafické prvky:

Ve žlutých rámečcích s žárovkou najdete užitečné tipy, nápady nebo doporučení.

V modrých rámečcích s písmenem i jsou k dispozici uvedeny podstatné informace nebo doporučené zdroje.

V růžových rámečcích s vykřičníkem jsou uvedena upozornění na možné problémy.

Použité zdroje jsou (je-li to v daném případě možné) s ohledem na plynulost textu uváděny přímo formou odkazů (URL); úplné záznamy jsou k dispozici v části Použité zdroje[7].

Jednotlivé stránky, vybrané kapitoly nebo celou příručku si můžete rovněž vytisknout či uložit ve vybraném formátu[8]. K dispozici jsou výstupy ve formátech TXT, PDF a ODT. K exportu jednotlivých kapitol nebo k jejich vytištění slouží ikony tlačítek pro export nebo přidání do vlastní knihy. Tato tlačítka najdete na pravé boční liště. Celou příručku si také můžete stáhnout ve formátu EPUB.

Video: K čemu příručka slouží a jak s ní pracovat

<h3>Příručka Přístupné webové stránky</h3>

O autorce

Mgr. Eva Cerniňáková pracuje jako vedoucí Knihovny Jabok[9], kde zároveň působí jako systémová knihovnice a koordinátorka společného katalogu SPOK[10]. Dlouhodobě se zabývá problematikou služeb knihoven osobám se specifickými potřebami a přístupností informací a webových stránek. Je jednou z autorek metodické příručky Rovný přístup: Standard Handicap Friendly[11]. V roce 2018 se podílela na tvorbě koncepce webových stránek Knihovny Jabok[12]⁶⁾, které v následujícím roce získaly v soutěži Biblioweb[13] cenu za nejlepší bezbariérový web. Jako doktorandka a externí vyučující na Ústavu informačních studií a knihovnictví Filozofické fakulty Univerzity Karlovy se věnuje také problematice knihovních softwarů. Podílela se na implementaci otevřeného knihovního softwaru Evergreen v Knihovně Jabok a v dalších knihovnách, dlouhodobě spolupracuje na českém překladu Evergreenu a od roku 2016 působí i jako mezinárodní koordinátorka překladů tohoto softwaru. Můžete ji kontaktovat prostřednictvím e-mailu cernin@jabok.cz[14].

Poděkování

Mgr. Radkovi Pavlíčkovi z Oddělení speciální informatiky Střediska pro pomoc studentům se specifickými nároky Masarykovy univerzity děkuji za doporučení materiálů k problematice přístupnosti a za cenné připomínky k Doporučeným postupům pro vkládání informací do redakčního systému formou přístupnou pro uživatele se specifickými potřebami[15] z roku 2017. Tento dokument se stal základem pro kapitoly této příručky věnované vkládání informací na webové stránky.

PhDr. Lindě Jansové, Ph.D., z Knihovnického institutu Národní knihovny ČR děkuji nejen za redakční zpracování textu, ale také za mnoho užitečných připomínek a návrhů.

Ing. Václavu Jansovi, Ph.D., z Osvobozené knihovny, z. s., děkuji za správu instalace této online platformy, tj. DokuWiki, a provedení dílčích úprav pro potřeby této příručky.

Eva Cerniňáková

¹⁾

Příkladem mohou být webové stránky Knihovny Jabok[1]. Finanční náklady na jejich tvorbu byly v porovnání s weby řady jiných knihoven velmi nízké, přitom v roce 2019 získaly tyto stránky v soutěži Biblioweb cenu za bezbariérový web.

²⁾

Přístupnost mobilních aplikací je spíše záležitostí programátorů; odkazy na základní informace k přístupnosti mobilních aplikací najdete v kapitole Doporučené zdroje.

³⁾

Pro ten účel doporučujeme metodický pokyn Ministerstva vnitra ČR k zákonu o přístupnosti[4] a zejména metodiku WCAG 2.1[5].

⁴⁾

Na mobilních zařízeních se jedná o Postranní lištu.

⁵⁾

Historie se smaže při zavření webového prohlížeče.

⁶⁾

V současné době je správkyní těchto stránek.

2. Uživatelé a přístupnost

Úvodní video: Internet a handicapovaní

<h3>Internet a handicapovaní</h3>

Proč je přístupnost důležitá

Informační technologie, internet a mobilní aplikace nám v mnohém usnadňují a zjednodušují život. Lze navíc bez nadsázky říci, že existují lidé, pro které jsou tyto technologie zcela nezastupitelné. Jsou to lidé se specifickými potřebami, zejména lidé s postižením, např. nevidomí, neslyšící, lidé upoutaní na lůžko nebo invalidní vozík. Tito lidé byli dříve v řadě oblastí zcela závislí na pomoci druhých. Nyní mají k dispozici počítače, mobilní telefony a asistivní technologie, které zlepšují kvalitu jejich života⁷⁾. Mohou sami vyhledávat informace na internetu, číst knihy, studovat, nakupovat, komunikovat s úřady či s přáteli nebo ovládat zařízení v domácnosti. Internet se stal nástrojem, který jim dává možnost zvládat řadu činností samostatně, bez pomoci druhých.

Bohužel webové stránky nebo aplikace jsou často vytvořeny tak, že pro uživatele s postižením nejsou přístupné. To, co by mohlo pomáhat a přispívat k lepší kvalitě života, se stává překážkou. Ačkoliv začínáme chápat, že je třeba odstraňovat bariéry z budov a veřejných prostor, téma přístupnosti webu mnozí považují za okrajové a neuvědomují si, že nepřístupné webové stránky mohou představovat stejný problém jako patrová budova bez výtahu. Přitom k odstranění překážek na webových stránkách je často třeba vynaložit jen velmi málo úsilí.

Cílové skupiny přístupného webu

Přístupnost webu se týká poměrně velké skupiny osob. Lidí s postižením je v populaci více, než si obvykle myslíme. Některé zdroje uvádějí, že nějaké zdravotní či smyslové postižením má až čtvrtina dospělé populace.⁸⁾ Jsou to zejména lidé:

s postižením zraku;

s postižením sluchu;

s tělesným a pohybovým postižením;

s kognitivními poruchami;

citliví na světelné či optické podněty.

Uživatelů, kteří mají z hlediska využívání webových stránek specifické potřeby, je však daleko více. Jde nejen o lidi s postižením, ale také např. o seniory. Ti do žádné z předchozích kategorií tak docela nezapadají, přesto mohou mít určité potíže se zrakem (ostatně problém přečíst malá písmena nebo texty na nekontrastním podkladu mívají lidé často už ve věku mezi 40 a 50 lety), sluchem či motorickými nebo kognitivními funkcemi. Problém s přístupností webu mají také lidé, pro které je čeština cizím jazykem, lidé, kteří mají menší zkušenost s využíváním technologií, i ti, kdo mají horší technické vybavení.

Problémy s přístupností webu se mohou týkat i běžných uživatelů, kteří právě pro zobrazení používají mobilní telefon, nebo lidí po úraze, kteří např. nejsou schopni používat myš, protože mají ruku v sádře.

Přístupnost webu pro uživatele s různými handicapy nebo specifickými potřebami vyžaduje určitá opatření při tvorbě webu a také dodržování určitých principů a postupů při vkládání informací na web. Až na několik málo výjimek však z těchto opatření mají užitek nejen lidé handicapem. Promyšlená koncepce webu, smysluplná navigace, srozumitelné formulace, vhodné ilustrační obrázky, informace o velikost souborů ke stažení nebo návodné informace o chybách při vyplňování formulářů, které vyžaduje přístupný web, to vše přispívá k použitelnosti a uživatelské přívětivosti i pro běžné uživatele.

Pokud ovládáte angličtinu, doporučujeme vám podívat se alespoň na část úvodního proslovu online konference o knihovním softwaru Evergreen 2020[17]. Proslov byl totiž věnován přístupnosti webových stránek. John Remple, který se věnuje inkluzivnímu designu v Georgijském technologickém institutu, hovořil mj. právě o tom, jak inkluzivní opatření pomáhají všem, nejen lidem s postižením.

<h3>Přednáška o přístupnosti na konferenci 2020 Evergreen International Online Conference</h3>

⁷⁾

Asisitivní technologie jsou zařízení na principu počítačových či jiných technologií, která lidem se specifickými potřebami umožňují odstraňovat překážky vyplývající z jejich postižení či jiného znevýhodnění.

⁸⁾

Viz např. https://webaim.org/intro/[16].

3. Zrakové postižení

K uživatelům webu se zrakovým postižením patří lidé nevidomí, slabozrací nebo lidé se sníženým barvocitem. Poruch zraku je velké množství a jsou velmi různorodé. Společné mají to, že se uživatelé nemohou spoléhat na vizuální formu vnímání informací nebo mají vizuální vnímání informací značně omezené. Na rozdíl od vidících uživatelů, kteří celou stránku po otevření rychle „přehlédnou“ a pomocí jejího rozložení, grafických prvků, barevného rozlišení jednotlivých prvků apod. se v informacích rychle zorientují, uživatelé se zrakovým postižením používají stránku zcela jinak.

Nevidomí uživatelé obvykle používají místo obrazovky nějakou jinou formu výstupu (např. odečítač obrazovky nebo braillský řádek[18]), takže s grafikou nemohou pracovat vůbec.

Lidé s jinými zrakovými vadami mají při práci s webem trochu odlišné potřeby a problémy. Pro tyto uživatele bývá obtížnější zorientovat se na stránce nebo i ve struktuře webu. Může jim působit problémy malé písmo, které nelze zvětšit, nebo nevhodné, nedostatečně kontrastní pozadí stránky vůči textu.

Pro úplnost dodejme, že některé z těchto problémů mohou mít nejen lidé se zrakovým postižením, ale také senioři, lidé s poruchami čtení apod. Nedostatečný kontrast však může být překážkou např. i pro zcela zdravého mladého člověka, který pro zobrazení webu právě používá displej mobilního zařízení při silném slunečním světle.

Nevidomí uživatelé

Nevidomí uživatelé webu jsou obvykle odkázáni na odečítače obrazovky⁹⁾ nebo braillský řádek či na další asistivní technologie. Nemohou proto vnímat vizuální stránku informací na webových stránkách, tj. grafiku, rozložení stránky a jejích prvků, barevné odlišení prvků na stránce aj. Oproti vidícímu uživateli, který se při zobrazení stránky zrakem rychle zorientuje a může informace podle potřeby přeskakovat, odečítač obrazovky čte stránku lineárně od začátku do konce, slovo od slova. Pokud jsou na webové stránce informace v textu uspořádány v nelogickém pořadí (např. v tabulkách, které nedávají smysl při čtení po řádcích), je orientace obtížná a někdy i nemožná. Odečítače obrazovky také nemohou číst obrázky. Proto je důležité, aby zejména obrázky, které nesou nějaký význam, obsahovaly zástupný text popisující obrázek. Protože nevidomí uživatelé nemohou využívat myš, aby klikli na konkrétní místo nebo prvek na stránce, jsou obvykle odkázáni na klávesnici. Proto je důležité, aby webové stránky a všechny jejich funkce byly dostupné prostřednictvím klávesnice a nevyžadovaly použití myši.

Přehled základních problémů a opatření pro nevidomé uživatele najdete také v souhrnné tabulce.

Slabozrací uživatelé

Mezi slabozraké uživatele webu řadíme osoby např. se silnou krátkozrakostí, šedým zákalem, zeleným zákalem, glaukomem nebo retinopatií. Jak je vidět, spektrum zrakových vad je velmi široké a liší se i problémy, které s sebou jednotlivé zrakové vady přinášejí. Některá zraková postižení způsobují neostré či zkreslené vidění, zakrývají část zorného pole, způsobují, že uživatel hůře rozlišuje některé barvy apod.

Přestavit si, jak lidé s nejrůznějšími poruchami zraku vidí svět kolem sebe, vám pomohou obrázky se simulací některých zrakových vad[19].

Můžete si také stáhnout některou z aplikací pro mobilní zařízení, které simulují zrakové vady, a pomocí kamery svého mobilu nebo tabletu se podívat, jak byste s některou ze zrakových vad viděli své okolí, text knihy nebo obrazovku počítače.¹⁰⁾

Ačkoli je paleta zrakových vad poměrně pestrá, z hlediska přístupnosti webu mají všichni uživatelé se zrakovými vadami společné tyto problémy:

sníženou schopnost vizuální orientace na stránce (intenzita tohoto problému závisí na typu a stupni postižení);

překážky při zrakovém vnímání obsahu na webové stránce, který nejde zvětšit;

problémy s vnímáním textu (nebo jiných prvků), které nemají dostatečný kontrast vůči pozadí stránky.

Vizuální orientace na stránce

Pokud uživatel webu hůře vidí, vidí jen část obrazovky nebo ji vidí deformovaně. Při orientaci na stránce je pro něj důležité, aby jednotlivé prvky byly na obvyklém místě a fungovaly očekávaným způsobem (např. logo bývá umístěno v levém horním rohu a bývá zároveň odkazem na domovskou stránku, nákupní košík bývá umístěn v pravém horním rohu stránky, pole pro vyhledávání na webu v horní části stránky apod.). Důležité je také, aby navigační (případně i jiné) prvky webu byly konzistentní na celém webu, tj. aby měly stejnou strukturu a aby při použití stejného zařízení byly umístěny vždy na stejném místě stránky (týká se to např. hlavního menu, menu druhé úrovně apod.).

Možnost zvětšení obsahu stránky

Slabozrací uživatelé webu obvykle používají softwarové lupy. Jak už jejich označení napovídá, tyto programy zvětší část obrazovky podobně jako lupa. Někteří slabozrací lidé si přizpůsobují barvu textu nebo pozadí nebo si mění font tak, aby pro ně text byl dostatečně kontrastní a lépe se jim s ním pracovalo. Problémem proto pro ně může být text, který nejde zvětšit, nebo textové informace prezentované ve formě obrázku. Na rozdíl od textu, který je při zvětšení bez problémů čitelný (viz obr. 1), text ve formě obrázku je při určitém stupni zvětšení tzv. pixelizovaný, tedy rozostřený (viz obr. 2).

Obr. 1: Zvětšený text na webové stránce (zdroj: archiv autorky)

Obr. 2: Zvětšený text ve formě obrázku (zdroj: archiv autorky)

Text ve formě obrázku není příliš uživatelsky přívětivý ani pro nevidomé uživatele, kteří používají odečítač obrazovky nebo braillský řádek, zejména pokud je použit jako odkaz. Pokud text ve formě obrázku slouží jako odkaz, je problémem také skutečnost, že se na něj hůře aplikuje zvýraznění aktuálního odkazu při pohybu na stránce pomocí klávesnice (tzv. focus).

Dostatečný kontrast textu a pozadí

Velkým problémem (zejména u některých postižení) je zamlžené nebo rozostřené vidění. Slabozrací lidé proto potřebují vhodný kontrast textu vůči pozadí. To je u řady webových stránek bohužel problematické. Některé barevné kombinace (např. bílý text na tmavě žlutém pozadí nebo některé odstíny šedé na bílém pozadí) sice vypadají hezky nebo zajímavě, ale zapomíná se na to, že grafika (nejen) webových stránek má být především funkční. Dostatečný kontrast ocení i uživatelé mobilních zařízení.

Při samotné tvorbě webu vám ke zvolení dostatečného kontrastu pomohou nástroje pro kontrolu kontrastu, např. WebAIM Contrast Checker[22].

Pokud chcete jednoduše simulovat zrakové vady, které vyžadují dostatečný kontrast, a zkontrolovat, zda tento kontrast mají prvky na vašem webu, můžete nastavit nízký jas a kontrast monitoru (displeje) nebo zkusit přečíst text přes papírový kapesníček přiložený na monitor.

Přehled základních problémů a opatření pro slabozraké uživatele najdete také v souhrnné tabulce.

Uživatelé s poruchami barvocitu

Poruch barvocitu existuje celá řada. Poruchy barvocitu (někdy označované jako barvoslepost) způsobují, že člověk nevnímá některou barvu, např. červenou, zelenou nebo modrou. Barvoslepost může být částečná nebo úplná. Při úplné barvosleposti člověk vnímá jen odstíny šedé barvy.

Uživatelé s poruchami barvocitu nemohou vnímat informace zprostředkované barvou. Problémem by pro ně mohly být např. navigační prvky webu odlišené barvou nebo obrázky, které pracují s barevnými schématy (např. plány a schémata dopravy). V podobných případech je důležité, aby barva nebyla jediným způsobem, který sděluje informaci, a aby se uživatel měl možnost dostat se k informaci také jinak.

Obrázky níže ukazují rozdíl vnímání barev u mapy s vyznačenými parkovacími zónami. Na obr. 3 je mapa s vyznačenými zónami tak, jak ji vnímá běžný uživatel webu.

Obr. 3: Mapa s parkovacími zónami, jak ji vidí běžný uživatel webu (zdroj: Mapy.cz[23], získáno 2020-01-28)

Na obr. 4 vidíme, jak tutéž mapku vnímá uživatel, který má poruchu vnímání červené barvy.

Obr. 4: Mapa s parkovacími zónami, jak ji vidí uživatel webu s poruchou vnímání červené barvy (zdroj: Mapy.cz[24], získáno 2020-01-28, upraveno autorkou pomocí rozšíření prohlížeče Chrome Let's get color blind)

Jak vnímají svět lidé s poruchami barvocitu, vám pomohou pochopit:

simulátory barvosleposti (např. Coblis[25]);

různá rozšíření pro prohlížeče (např. rozšíření pro prohlížeč Chrome Let's get color blind[26]);

mobilní aplikace, které využívají kameru mobilního telefonu nebo tabletu (pro Android např. Daltonizer[27], pro iOS např. Daltonize Me Camera[28]).

Přehled základních problémů a opatření pro uživatele s poruchami barvocitu najdete také v souhrnné tabulce.

⁹⁾

Pro odečítač obrazovky se i v českém prostředí někdy používá anglický termín screen reader.

¹⁰⁾

Takovou aplikací je např. ViaOpta Simulator, který je dostupný jak pro Android[20], tak pro iOS[21].

4. Sluchové postižení

Přestože velkou část webového obsahu tvoří informace v textové podobě, v posledních letech na webu rychle přibývají také multimediální informace, tj. informace ve formě videa a/nebo zvuku. Tyto formáty web velmi obohacují, ale zároveň přinášejí problémy pro lidi se sluchovým postižením, kteří je nemohou vnímat nebo je mohou vnímat pouze omezeně. Pokud hovoříme o lidech se sluchovým postižením, nejde rozhodně o jednolitou skupinu, ale o více skupin s různými potřebami nebo různou mírou sluchového deficitu. K lidem se sluchovým postižením patří nedoslýchaví, ohluchlí (tj. lidé, kteří přišli o sluch v průběhu života) a prelingválně neslyšící. Na rozdíl od lidí ohluchlých v průběhu života, pro které je psaný text přirozeným komunikačním nástrojem, lidé prelingválně neslyšící neslyší od narození nebo přišli o sluch před rozvojem řeči. Jejich mateřským jazykem – a tudíž i přirozeným komunikačním nástrojem – je proto obvykle český znakový jazyk. Na rozdíl od znakového jazyka je pro prelingválně neslyšící psaný text textem v cizím jazyce.¹¹⁾

Při úvahách o sluchovém postižení bychom neměli zapomínat, že velkou část lidí se sluchovým postižením tvoří také senioři.

Zcela specifickou skupinu lidí se sluchovým postižením jsou lidé hluchoslepí. Z hlediska přístupnosti webu jsou pro ně relevantní spíše pravidla přístupnosti pro osoby se zrakovým postižením, zejména proto, že mohou případně využívat braillský řádek[30].

Pro ostatní skupiny lidí se sluchovým postižením jsou důležité tyto zásady:

Informace na webových stránkách nesmí být k dispozici pouze ve formě zvuku nebo videa se zvukem: veškerý multimediální obsah musí být přístupný také alternativní formou.

Alternativní informace musí být být prezentovány přístupnou formou.

Uživatel nesmí být rušen automaticky spouštěnými zvuky na pozadí webové stránky a musí mít možnost je ovládat.

Přehled základních problémů a opatření pro uživatele se sluchovým postižením najdete také v souhrnné tabulce.

¹¹⁾

Více informací o jednotlivých postiženích získáte např. v kapitole Osoby se sluchovým postižením v metodické příručce Rovný přístup: Standard Handicap Friendly[29].

5. Tělesné postižení

Do skupiny lidí s tělesným postižením, jež potřebují přístupné webové stránky, patří lidé, kteří nemohou používat horní i dolní končetiny (kvadruplegici). Tito lidé často využívají různé asistivní technologie založené na alternativním způsobu ovládání počítače. K nim patří např. ovládání počítače pohyby hlavy a krku, pomocí tyčinky v ústech, ovládání pomocí dechu, hlasem, v poslední době třeba také pohyby očí. Problémy s přístupností však mohou mít i lidé, kterým chybí jedna horní končetina nebo obě tyto končetiny nebo kteří mají horní končetiny kratší nebo deformované. Jde také o osoby, které trpí artritidou, Parkinsonovou chorobou, třasem, různými typy svalové degenerace, spastickými stavy, záškuby nebo jinými problémy hrubé či jemné motoriky. Nesmíme zapomínat ani na osoby, které mají dočasně omezenou funkčnost horních končetin kvůli úrazu. Zhoršenou jemnou motoriku či některý z výše uvedených problémů mohou mít také senioři.

Společným jmenovatelem přístupnosti u všech výše uvedených skupin je skutečnost, že mají problémy s ovládáním myši a klávesnice:

Někteří nemohou používat myš proto, že využívají nějakou asistivní technologii (ty fungují podobně jako klávesnice, nemohou však nahradit myš).

Jiní uživatelé nepoužívají myš (a v některých případech ani běžnou klávesnici) z toho důvodu, že kvůli motorickým problémům je pro ně myš (či klávesnice) zcela nepoužitelná, nebo se jim špatně ovládá. Někteří myš sice používají, ale její ovládání pro ně může být velmi náročné.

Je důležité, aby stránky byly ovladatelné, aniž by uživatel musel používat myš. V praxi to znamená, že všechny odkazy a aktivní prvky (tlačítka, formuláře, ovládací prvky) musí být funkční při pouhém ovládání z klávesnice s použitím klávesy tab (přeskoky mezi odkazy), šipek nahoru a dolů (rolování stránky nebo posun po položkách) či klávesy enter (potvrzení akce, výběr položky).

Ovládání pomocí klávesnice by mělo být doplněno zvýrazněním odkazu či aktivního prvku, na kterém je umístěn kurzor. Pokud stránka obsahuje formulář, většinou je vhodné, aby při načtení stránky byl kurzor umístěn v prvním poli formuláře, zejména pokud jde např. o stránku vyhledávání v katalogu.

Pro ovládání z klávesnice nebo pomocí některých asistivních technologií je také důležité, aby bylo možné přeskočit dlouhé seznamy odkazů v navigaci a přesunout se rovnou na obsah stránky.

Pro lidi, kteří mají různé motorické problémy, je důležité, aby nebylo těžké stránku ovládat. Ovládací prvky by měly být dostatečně velké, měl by mezi nimi být dostatek prostoru a neměly by se pohybovat (jinak může být těžké na ně kliknout myší).

Důležité a zejména nevratné akce (smazání, odeslání aj.) by měly mít pojistku proti nechtěnému stisknutí tlačítka nebo kliknutí na odkaz, např. možnost vrátit akci zpět nebo dotaz, zda uživatel opravdu chce danou akci provést.

Přehled základních problémů a opatření pro uživatele s tělesným postižením najdete také v souhrnné tabulce.

6. Kognitivní poruchy

Velkou a často opomíjenou skupinou uživatelů, kteří mohou mít problémy s přístupností webu, jsou lidé s kognitivními poruchami, tedy poruchami vnímání. Na kognitivní poruchy lze pohlížet různě. Z hlediska přístupnosti webu nemá smysl zabývat se konkrétními klinickými diagnózami, jako jsou např. autismus, Downův syndrom, traumatické poškození mozku nebo demence. Roli hraje spíše to, jak konkrétní poruchy kognitivních funkcí ovlivňují používání webových stránek.¹²⁾

Poruchy kognitivních funkcí

Na práci s webovými stránkami mají vliv zejména funkční poruchy:

paměti;

řešení problémů;

pozornosti;

čtení;

jazykových a verbálních schopností;

zpracování vizuálních informací.

Podobné problémy jako lidé s kognitivními poruchami musí někdy řešit také lidé, pro které je jazyk webu cizím jazykem.

Poruchy paměti

Lidé s poruchami paměti si hůře vybavují informace a události. To vede k problémům při aktivitách nebo procesech, které jsou složitější a obsahují více kroků. Na webu se může jednat o proces vyhledávání informací, o různé nákupní transakce apod. Lidé, kteří mají problémy s pamětí (a také např. lidé s mentálním postižením), si větší počet instrukcí nemusí zapamatovat, takže při konkrétním kroku, který mají provést, nevědí, jak by měli postupovat. Výhodnější pro ně je, pokud jsou složitější postupy rozděleny na jednotlivé kroky umístěné na samostatných, výstižně pojmenovaných stránkách, mají možnost vrátit se k předchozímu kroku a opět postupovat vpřed, bez ztráty výsledků své předchozí aktivity.

Uživatelům webu s poruchami paměti mohou působit potíže také špatně nastavená chybová hlášení formulářů. Samozřejmostí by mělo být, že uživatel dostane zpětnou vazbu, která mu pomůže chyby ve formuláři opravit a že při opravách nepřijde o již vyplněné údaje (viz Formuláře). Lidé s poruchami paměti však navíc mohou mít problém v případech, kdy vyplní špatně více polí formuláře a všechny chyby jsou shrnuty v jednom chybovém hlášení. Vhodné je proto řešit chybová hlášení samostatně pro každou chybu a chyby patřičně vyznačit.

Poruchy řešení problémů

Porucha řešení problémů může mít vliv na způsob, jakým se uživatel zorientuje na stránce, jak pracuje s odkazy apod. Může pro něj být obtížné se na stránce zorientovat a zjistit, kde se nachází informace, kterou potřebuje. Pomůže mu, pokud je struktura webu srozumitelná a cesta k informaci co nejkratší.

Při tvorbě koncepce webu se ptejte svých uživatelů, které informace na webu používají nejčastěji. Využijte také statistiky návštěvnosti získané např. pomocí služby Google Analytics. Strukturu webu navrhněte tak, aby k získání těchto informací bylo nutné kliknout maximálně na dva odkazy.

Uživatelé by se k důležitým informacím měli dostat z kterékoliv stránky (většina uživatelů se na vaše stránky dostane prostřednictvím vyhledávačů nebo odkazů na konkrétní stránku, nikoliv z hlavní stránky).

Optimální je důležité informace (nebo odkazy na ně) umístit přímo titulní stránku webu. V knihovně půjde zejména tyto informace:

provozní doba;

kontakt;

vyhledávání v katalogu;

přihlášení do čtenářského konta;

informace o službách;

informace o službách a opatřeních pro osoby se specifickými potřebami;

knihovní řád;

informace o registraci do knihovny;

informace pro nové uživatele nebo časté dotazy.

Pro přístup k položkám, které nelze umístit přímo na vstupní stránku nebo do hlavního menu, je možné použít rychlou navigaci (např. na boční liště nebo v patě stránky).

Problémem může být prvek CAPTCHA[32]. Ten by rozhodně neměl obsahovat úkoly vyžadující vyšší kognitivní schopnosti (řešení složitých příkladů apod.).

Poruchy pozornosti

Pro lidi s poruchou pozornosti může být problém cokoliv, co je odvádí od informace na webové stránce, např. nevhodné rušivé pozadí webu nebo nevhodně použité barvy. Rušivé jsou zejména různé pohyblivé objekty, jako jsou animace nebo videa (včetně reklamy nebo tzv. karuselů). Rušivé jsou také zvuky na pozadí. Těmto prvkům je vhodné se na webu co nejvíce vyhýbat. Pokud jsou použity, musí uživatel mít možnost je ovládat (zastavit pohyb, vypnout zvuk). Při nastavení rychlosti těchto prvků pamatujte, že pro uživatele je příjemnější spíše menší rychlost při změně snímku.¹³⁾ Přitáhnout pozornosti mohou naopak různá vhodně zvolená zvýraznění důležitých informací (např. rámečkem, barevným pozadím, větším písmem).

Poruchy čtení

Lidé s poruchami čtení mají problém vnímat psaný text a porozumět jeho smyslu. Lépe se jim pracuje s kratšími texty, které jsou dobře strukturované (nadpisy, seznamy), psané srozumitelným jazykem. Pomáhá jim také dostatečný kontrast textu a pozadí, dostatečně velký font, rozestupy mezi řádky a odstavci. Problémem pro ně mohou být některé typy fontů, zejména různé neobvyklé nebo zdobné fonty, písma s tenkými linkami nebo písmeny příliš blízko u sebe.

Poruchy jazykových a verbálních funkcí

Poměrně různorodou skupinu tvoří uživatelé, kteří mají problémy v oblasti jazykové a verbální. Do této skupiny mohou patřit jak lidé s mentálním postižením, tak pacienti s některými diagnózami. Velmi podobné problémy jako lidé s poruchami jazykových a verbálních funkcí však řeší také lidé, pro něž není čeština mateřským jazykem, tedy cizinci (ať už jde o turisty nebo ty, kteří dlouhodobě žijí mimo svou vlast), příslušníci menšin nebo lidé prelingválně neslyšící, pro které je mateřským jazykem český znakový jazyk.

Protože tito uživatelé webu mají problém porozumět sdělení textu, je vhodné, aby text byl srozumitelný, tj. aby neobsahoval obrazná a přenesená jazyková vyjádření, např. ironii, nadsázku či metaforu. Pokud je to možné, doporučujeme vyhnout se také zkratkám a tam, kde to jde, dát přednost českým termínům před cizími. Text i informace na stránce by měly být dobře strukturované, spíše kratší, doplněné i netextovými informacemi, jako jsou obrázky a ikony. Pomohou také další opatření, která již byla uvedena výše, především doporučení pro přístupnost webu pro lidi s poruchami paměti, řešení problémů, pozornosti nebo čtení.

K problematice jednoduchých a snadno srozumitelných informací doporučujeme publikaci Informace pro všechny[33]. Je sice primárně zaměřena na informace pro lidi s mentálním postižením, zároveň ale výborně ukazuje, jak psát jednoduše srozumitelné texty, a shrnuje problematiku snadno srozumitelných informací jak z hlediska formulací textu, tak z hlediska typografie, vhodné funkční grafiky i dalších aspektů přístupnosti.

Poruchy zpracování obrazových informací

Poruch zpracování obrazových informací může být celá řada, např. neschopnost rozpoznat obličeje či statické obrázky. Pokud uživatel trpí touto poruchou, některé typy obrazových informací pro něj mohou být „neviditelné“. Z hlediska přístupnosti webu je třeba řídit se podobnými principy jako u lidí se zrakovým postižením, zejména nespoléhat se pouze na obrazové informace, na barvy, na vizuální značení nadpisů nebo bloků, ikon apod.

Obecné zásady

Z hlediska přístupnosti lze potřeby uživatelů s většinou kognitivních poruch a s problémy s porozuměním shrnout do následujících bodů:

Je nutné, aby informace byly dobře strukturovány, tj. aby vhodným způsobem pracovaly s oblastmi stránky, nadpisy nebo seznamy.

Je nutné využívat vhodné grafické prvky pro vyjádření hierarchie, zvýraznění důležitých částí textu nebo stránky.

Web musí být konzistentní, tj. navigace či další prvky mají na každé stránce vypadat stejně a být umístěny na stejném místě.

Je nutné poskytnout uživateli srozumitelnou informaci o tom, kde ve struktuře webu se nachází.

Na stránkách musí být použito vhodné formátování textu a odstavců, zejména čitelný font a dostatečné rozestupy mezi řádky a odstavci.

Informace musí být jasně formulované, musí být použity jazykové prostředky a termíny, kterým uživatelé rozumí.

Není vhodné používat dlouhé oddíly, lepší je informace členit do kratších celků.

Složitější či delší aktivity je nutné rozdělit do více kroků.

Je vhodné prezentovat informace více způsoby, např. doplnit text vhodnými ilustračními obrázky, kvalitními videi nebo zvukovými nahrávkami.

Dodržování výše uvedených principů je při využívání webu velkým přínosem nejen pro lidi s kognitivními poruchami, ale i pro všechny ostatní uživatele.

Přehled základních problémů a opatření pro uživatele s poruchami kognitivních funkcí najdete také v souhrnné tabulce.

¹²⁾

Členění jednotlivých problémů a některé návrhy řešení vycházejí z informací na portále WebAIM[31].

¹³⁾

Rychlé pohyby na stránce mohou způsobit problémy (např. záchvaty) také lidem citlivým na některé světelné či obrazové podněty.

7. Citlivost na světelné a optické podněty

Osoby s některými onemocněními nebo psychickými problémy mohou být citlivé na určité světelné a zrakové podněty, které u nich mohou vyvolat epileptické záchvaty¹⁴⁾ nebo vést k poruchám rovnováhy, vyvolat migrénu, pocit nevolnosti nebo zvracení.¹⁵⁾

Spouštěčem mohou být např. záblesky, rychlé blikání nebo změna barvy, rychlé kmitání nebo pulzování. Zdrojem těchto podnětů mohou být např. videa nebo videohry, pohyblivé obrázky nebo animace akcí uživatele, některé typy pozadí, animované rolování, které trvá delší dobu, posun popředí a pozadí různými směry, obrázky pohybující se před statickým textem. Může jít také o obrázky typu „optických iluzí“, které obsahují úzké souběžné čáry nebo vytvářejí iluzi pohybu či otáčení. Některé z těchto vjemů vyvolávajících záchvat mohou obsahovat videohry nebo videa se záběry světelných alarmů (např. majáčků), záblesků vody, světla mezi listy stromů apod.¹⁶⁾

Příklad nevhodných obrázků vytvářejících optickou iluzi pohybu

Pozor: neotvírejte tyto obrázky, pokud se domníváte, že můžete být náchylní k fotoepileptickým záchvatům!

¹⁷⁾

Na co je třeba dát pozor

Vyhněte se blikajícím a pulzujícím prvkům nebo výše uvedeným nevhodným obrázkům, pohyblivým objektům na pozadí textu. Dejte pozor na rychlé animace nebo automatické rolování, příliš rychlé změny v karuselech apod. Umožněte uživatelům zastavit jakékoliv animace a pohyblivé prvky.

Pokud některé problematické prvky (videa, obrázky optických iluzí apod.) potřebujete na webovou stránku vložit (např. z výukových důvodů), vložte je na stránku formou odkazu a varujte uživatele, že by v případě, že jsou na tyto vjemy citliví, odkaz neměli otevírat.

Pokud vaše videa obsahují sekvence s rychlým blikáním apod., můžete je upravit a blikající sekvence zkrátit (např. místo tří bliknutí nechat ve videu pouze jedno). Pomoci může také spuštění videa na menší části plochy obrazovky.

Pokud na web vkládáte multimediální soubory, které mohou obsahovat podněty pro spouštění fotoepileptických záchvatů či jiných výše uvedených problémů (a to včetně odkazů na externí zdroje, např. na YouTube), uživatele na tuto možnost upozorněte, aby se mohli rozhodnout, zda hru či video spustí.

Instruktážní videa a výukové prezentace v knihovně

V knihovnách jsou často využívána instruktážní videa, např. návody, jak pracovat s katalogem nebo s informačními zdroji. U těchto videí je nutné použít vhodné zvýraznění prvků rozhraní. Např. pokud chcete ve videu zvýraznit tlačítko pro odeslání formuláře a využijete ke zvýraznění animaci pulzující šipky, neměly by se pulzy střídat příliš rychle.

Problémy mohou působit také „zoomovací“ prezentace, např. ve videích nebo prezentačních nástrojích typu Prezi.

Přehled základních problémů a opatření pro uživatele, kteří jsou citliví na světelné a optické podněty, najdete také v souhrnné tabulce.

¹⁴⁾

Lidé, kteří těmito záchvaty trpí, nemusí mít nutně přímo epilepsii.

¹⁵⁾

Viz Web accessibility for seizures and physical reactions[34].

¹⁶⁾

Viz Seizure Disorders[35].

¹⁷⁾

Obrázky pocházejí ze serveru Pixabay[36]. Jejich autorem je Gordon Johnson.

8. Přehled opatření

Uživatelé se zrakovým postižením

Nevidomí uživatelé

Problém | Řešení
Nevidomí uživatelé nepoužívají myš. | Nepoužívejte na stránce skripty, které vyžadují používání myši. Zajistěte alternativu dostupnou z klávesnice.
Obrázky, fotografie a grafiku nelze použít. | Popište obrázek pomocí prvku alt nebo v nezbytných případech připojte delší podrobný popis obrázku (na téže stránce nebo pomocí odkazu).
Uživatelé webové stránky často poslouchají pomocí odečítače obrazovky. | Dejte uživatelům možnost přeskočit navigační menu, dlouhé seznamy položek, obrázky tvořené znaky¹⁸⁾ a další prvky, které mohou být při čtení obtížné nebo zdlouhavé.
Uživatelé často používají klávesu tab pro přechod z odkazu na odkaz. | Dbejte na to, aby text odkazu dával smysl sám o sobě, bez okolního kontextu („klikněte zde“ je problematické).
Tzv. rámy uživatel nevidí všechny najednou. Musí je navštívit jednotlivě, což může vést k dezorientaci na stránce. | Pokud je to možné, rámům se vyhněte. Když už je musíte použít, opatřete jednotlivé rámy titulkem, který sděluje jejich funkci (např. navigace nebo hlavní obsah).
Při poslouchání obsahu jednotlivých buněk tabulky může být pro uživatele obtížné zjistit, kde se nachází. | Používejte v tabulkách záhlaví sloupců a řádků (<th>). Dbejte na to, aby tabulky (obzvláště tabulky se sloučenými buňkami) dávaly smysl při čtení po řádcích zleva doprava.
Složité tabulky a grafy, které jsou obvykle interpretovány zrakem, jsou pro nevidomé nepoužitelné. | Uvádějte jejich shrnutí a/nebo slovní popis.
Ne všechny odečítače obrazovky podporují klikací mapy. | Aktivní místa v klikacích mapách opatřete dodatečnými textovými odkazy.
Nelze používat barvy. | Při sdělování obsahu nespoléhejte pouze na barvu.
Uživatelé předpokládají, že odkazy někam vedou. | Nepoužívejte na stránkách v odkazech skripty, které způsobí, že odkazy nevedou na skutečný cíl.

Slabozrací uživatelé

Problém | Řešení
Text v grafických prvcích není možné zvětšovat bez speciálních programů, při zvětšení je rozostřený (pixelizovaný). | Omezte používání textu v grafických prvcích nebo text v grafice vůbec nepoužívejte.
Uživatel si nemůže nastavovat vlastní font nebo pozadí textu. | Umožněte uživatelům přizpůsobit text tím, že budete text používat skutečně ve formě textu, nikoliv jako grafiku.
Uživatelé si sami nemohou zvolit vhodnou velikost písma. | Nastavte web tak, aby uživatelé mohli stránku sami podle potřeby zvětšovat, aniž by došlo ke ztrátě funkčnosti.
Zvětšovací programy (softwarové lupy) zmenšují velikost použitého okna. | Chcete-li snížit nutnost vodorovného rolování na stránce, používejte v kódu relativní, nikoliv absolutní jednotky (např. použijte pro šířku tabulky procenta místo pixelů).

Uživatelé s poruchami barvocitu

Problém | Řešení
Červená a zelená barva mohou být pro návštěvníka webu nerozlišitelné. | Obvykle to není problém, kromě případů, kdy barva sděluje důležitou informaci. V tom případě je nutné změnit grafiku nebo zajistit jiný způsob, jak je možné informaci získat. Obvykle bývá nejvhodnějším způsobem popis přímo v textu.
Pro návštěvníka webu mohou být nerozlišitelné jiné barvy než červená a zelená. | Viz výše.

Přehled opatření pro osoby se zrakovým postižením je z větší části převzat z portálu WEBAIM[38].

Uživatelé se sluchovým postižením

Problém | Řešení
Lidé se sluchovým postižením nemohou vnímat výstražné informace nebo informace o chybách prezentované zvukem. | Zajistěte, aby informace o problémech při práci s webovou stránkou byly jasné a vnímatelné i bez zvukových signálů.
Lidé se sluchovým postižením nemohou vnímat zvukový obsah multimediálních informací. | Poskytněte uživatelům alternativní formu multimediálních informací. Zvukové nahrávky doplňte odkazem na přepis. Videonahrávky opatřete titulky a/nebo přepisem
Zvuky na pozadí webové stránky mohou nedoslýchavým lidem zhoršovat možnost sluchového vnímání nebo pro ně být nepříjemné. | Pokud můžete, vyhněte se automatickému přehrávání zvuků nebo alespoň informujte neslyšící uživatele, že stránka obsahuje hudbu nebo jiné zvuky na pozadí, a dejte jim možnost veškeré zvuky vypnout či zapnout.
Člověk s poruchou sluchu si nemusí být vědom žádných zvuků na pozadí a může se tak dostat do nepříjemných situací tím, že nevědomky ruší okolí. | Pokud můžete, vyhněte se automatickému přehrávání zvuků nebo alespoň informujte neslyšící uživatele, že stránka obsahuje hudbu nebo jiné zvuky na pozadí a dejte jim možnost veškeré zvuky vypnout a opětovně zapnout.
Někteří lidé se sluchovým postižením mohou mít také zrakové či jiné potíže. | Dbejte na to, aby veškeré informace na webových stránkách, včetně přepisů zvukových stop, titulků či piktogramů, byly čitelné a měly měly dostatečný kontrast, viz Funkční grafika webu.

Uživatelé s tělesným postižením

Problém | Řešení
Někteří uživatelé nemohou používat myš. | Zajistěte, aby všechny funkce byly dostupné z klávesnice (vyzkoušejte přeskoky na všechny odkazy pomocí klávesy tab).
Pro uživatele může být obtížné ovládat myš a klávesnici. | Zajistěte, aby vaše stránky byly chráněny proti nechtěným chybám (např. dotazem „Opravdu chcete smazat tento soubor?“). Nevytvářejte malé nebo pohyblivé odkazy.
Uživatelé mohou používat software ovládaný hlasem. | Software ovládaný hlasem napodobí funkce klávesnice, ale obtížně napodobí funkce myši. Zajistěte, aby všechny funkce byly dostupné z klávesnice.
Užívání některých asistivních technologií může být vyčerpávající (např. ovládání pomocí dechu). | Nabídněte uživatelům možnost přeskočit dlouhé seznamy odkazů nebo jiný dlouhý obsah.

Tabulka byla převzata z portálu WebAIM[39].

Uživatelé s poruchami kognitivních funkcí

Problém
Řešení

Lidé s poruchami paměti mohou mít problém s delšími nebo složitějšími procesy.
Zajistěte, aby akce, které uživatelé na webu provádějí byly co nejjednodušší. Delší procesy rozdělte do jednotlivých kroků na samostatných stránkách. Poskytněte uživatelům vodítko, ve které částí procesu se nacházejí. Umožněte jim vrátit se k předchozím krokům.

Uživatelé si nemusí pamatovat hromadné informace o chybně vyplněných polích formuláře.
Poskytněte uživatelům smysluplnou informaci o každé jednotlivé chybě, specifikujte pole a typ problému; chybová hlášení zvýrazněte také vizuálně.

Pro některé uživatelé s poruchami kognitivních funkcí může být obtížné řešit složitější problémy.
Zajistěte, aby prvek CAPTCHA[40] neobsahoval otázky nebo úkoly vyžadující využití vysoké úrovně kognitivních dovedností. V hlášení o chybách používejte srozumitelný (netechnický) jazyk. Pro zástupné texty odkazů, zejména v navigaci, používejte formulace, kterým uživatel rozumí a u kterých si dovede představit, kam odkaz vede.

Někteří uživatelé webu mají problém se soustředit a dokončit činnost, pokud jsou vyrušeni.
Omezte používání tzv. karuselů, pohyblivých obrázků na stránce, vyskakovacích oken apod. Používejte funkční design stránek. Používejte seznamy.

Někteří uživatelé webu mají problém s vnímáním psaného textu.
Formulujte informace jednoduše a srozumitelně. Používejte funkční design. Důležité informace vhodně doplňujte grafikou (obrázky, ikonami), videi, audionahrávkami.

Někteří uživatelé webu mají problém s porozuměním textu.
Formulujte informace jednoduše a srozumitelně. Nepoužívejte přenesená vyjádření (např. ironii, nadsázku). Důležité informace vhodně doplňujte grafikou (obrázky, ikonami), videi, audionáhrávkami. Nepředpokládejte, že uživatel zná odborné termíny, zkratky apod.

Někteří uživatelé mohou mít problém se zpracováním vizuálních informací.
Nespoléhejte pouze na vizuální prvky sdělení, jako jsou obrázky, umístění prvku, barva nebo typografické prvky.

Tabulka volně vychází z informací na portálu WebAIM[41].

Uživatelé citliví na světelné a optické podněty

Problém
Řešení

Blikající či pulzující objekty nebo záblesky mohou citlivým uživatelům webu způsobit fotoepileptické záchvaty, závratě a jiné potíže.
Vyhněte se na webových stránkách rychle blikajícím nebo pulzujícím prvkům, videím nebo videohrám. Z videí odstraňte sekvence, které rychlé blikání nebo záblesky obsahují. Pokud to není možné, upozorněte uživatele, že je video nevhodné pro citlivé osoby. Zmenšete plochu obrazovky, na které se video přehrává.

Některé typy animací nebo obrázků mohou uživatelům způsobit závratě, nevolnost, zvracení nebo záchvaty.
Vyhněte se rychle pulzujícím animacím, pohyblivým objektům na pozadí, automatickému rolování delšímu než tři vteřiny, rychlým změnám karuselů. Umožněte uživatelům zastavit jakékoliv animace a pohyblivé prvky.
Nepoužívejte na webu obrázky, které působí dojmem pohybu, a podobné optické iluze nebo je vkládejte formou odkazu a upozorněte uživatele, že otevření obrázku je pro citlivé osoby nevhodné.

¹⁸⁾

Jde o tzv. ASCII art[37].

9. Knihovny a přístupnost

Knihovny jsou ze své podstaty veřejným prostorem, který může využívat kdokoliv, a to bez ohledu na společenské postavení, majetkové poměry, příslušnost k etnické či náboženské skupině, zdravotní stav apod. Rovnost přístupu do knihovny je garantována i knihovním zákonem, kde je v § 2 knihovna definována jako „zařízení, v němž jsou způsobem zaručujícím rovný přístup všem bez rozdílu poskytovány veřejné knihovnické a informační služby“. Jak už bylo mnohokrát řečeno nebo napsáno „pokud mají knihovny poskytovat rovný přístup k informacím všem bez rozdílu, nestačí pouze nabídnout znevýhodněným uživatelům stejné podmínky jako ostatním. Je nutné pro ně vytvářet speciální podmínky, které tyto bariéry odstraní a tak zajistí všem uživatelům rovný přístup ke knihovním a informační službám“¹⁹⁾.

Zákon o přístupnosti internetových stránek a mobilních aplikací definuje povinné subjekty, které musí zajistit přístupnost webu. Ne všechny knihovny do této kategorie spadají. Přesto by však všechny knihovny s ohledem na své poslání měly usilovat o maximální přístupnost svých webových stránek, ať se na ně zákon o přístupnosti přímo vztahuje nebo nikoliv.

Situace knihoven v oblasti přístupnosti

V posledních letech se v knihovnách o problematice přístupnosti webu hovoří čím dál více. Toto téma se objevuje na knihovnických akcích nebo v oborových periodikách. Setkáváme se s ním např. také v souvislosti se soutěží Biblioweb, která motivovala knihovny k tomu, aby usilovaly o přístupnost webu. Přístupnost webových stránek je také nezbytnou podmínkou získání certifikátu Handicap Friendly[43].

Přesto situace v této oblasti není optimální. Na základě různých testování přístupnosti (soutěž Biblioweb, certifikát Handicap Friendly aj.) se ukazuje, že se na webech knihoven stále objevují značné problémy. Některé jsou velmi závažné, protože určitým uživatelům nejen ztěžují, ale mnohdy dokonce zcela znemožňují, aby se dostali k informacím nebo službám, které potřebují. Mezi ty nejvážnější (ale zdaleka ne jediné) patří zejména:

zveřejňování informací formou obrázků (informace jsou „neviditelné“ pro nevidomé uživatele používající odečítače obrazovky; jde zejména o pozvánky na akce, různá oznámení či aktuality);

nepřístupné dokumenty (pokud není dokument přístupný, nemohou si jej přečíst uživatelé používající odečítač obrazovky; přitom jde často o zásadní dokumenty, např. o přihlášku do knihovny, knihovní řád apod.);

navigace, kterou lze ovládat pouze pomocí myši (zejména rozbalovací menu nebo tzv. rozbalovací harmoniky; uživatelé s odečítačem obrazovky nebo lidé, kteří nemohou používat myš, se vůbec nedostanou na některé stránky nebo k některým informacím);

nevhodný kontrast textu a pozadí (ten znesnadňuje čtení lidem s poruchami zraku nebo v nepříznivých světelných podmínkách);

formuláře, které nelze ovládat bez myši nebo v nich chybí srozumitelná zpětná vazba pro uživatele.

Neutěšený stav v oblasti přístupnosti webu potvrzují výsledky průzkumů bezbariérovosti knihoven z roku 2014²⁰⁾ a 2020²¹⁾. V obou průzkumech byla knihovnám položena otázka, zda jsou webové stránky knihovny vytvářeny formou přístupnou pro uživatele se specifickými potřebami.

Výsledky jsou uvedeny v tab. 1 a grafech 1 a 2. Z odpovědí vyplývá, že v roce 2014 mělo pouze 16 % knihoven přístupný web a 9 % knihoven vědělo o problémech s přístupností a plánovalo jejich odstranění. Zbytek (tedy 75 % knihoven) přístupnost buď neřešilo (51 %), nebo o ní dokonce nic nevědělo (23 %).

Z průzkumu prováděného na jaře 2020 vyplývá, že za šest let se situace změnila jen mírně. Knihoven, které mají přístupný web, je nyní 23 % a podobné procento (22 %) tvoří knihovny, které se chystají problémy s přístupností řešit. Knihoven, které přístupnost dosud neřešily nebo o tématu přístupnosti nic nevědí, je 55 %. Je to o 20 % méně než v předchozím průzkumu. Pokud však přihlédneme k tomu, že je to vývoj za šest let a že průzkum navíc probíhal rok poté, co byl vydán zákon o přístupnosti, není tento posun příliš optimistický. Navíc je nutné vzít v potaz skutečnost, že se knihovny průzkumu zúčastnily dobrovolně a je tedy pravděpodobná spíše účast knihoven, které se v oblasti služeb knihoven uživatelům se specifickými potřebami angažují. Lze předpokládat, že výsledky jsou spíše příznivější než skutečnost a že situace je tudíž ve skutečnosti mnohem horší.

Tab. 1: Odpovědi knihoven na dotaz, zda jsou webové stránky vytvářeny přístupnou formou

Vybraná odpověď | Průzkum 2014 | Průzkum 2020
Stránky jsou cíleně vytvářeny přístupnou formou | 16 % | 23 %
Víme o problémech s přístupností stránek a chystáme se je odstranit | 9 % | 22 %
Přístupnost webových stránek jsme dosud neřešili | 51 % | 37 %
Nevíme, co znamená, že jsou stránky přístupné | 23 % | 18 %

Graf 1: Přístupnost webů knihoven v roce 2014

Graf 2: Přístupnost webů knihoven v roce 2020

Legenda ke grafům 1 a 2 (zdroj: archiv autorky)

Proč je přístupnost pro knihovny důležitá

Informační technologie a zejména poskytování elektronických služeb dnes ke knihovnám neodmyslitelně patří. Knihovny prostřednictvím internetu půjčují elektronické knihy a nabízejí informační zdroje, e-learningové kurzy, vzdělávací videa aj. I řada dalších aktivit knihoven se přesouvá do online prostoru. A přestože čtenáři knihoven ke komunikaci a získávání některých typů informací dnes stále více využívají sociální sítě, pokud potřebují služby knihoven, přesouvají se na weby knihoven a ke knihovním katalogům. Chceme-li uživatele oslovit, musí tyto weby pro uživatele být atraktivní, funkční a přístupné.

Jak víme, přístupnost se netýká jen lidí s postižením, ale i dalších uživatelů webu.

Mnohé z překážek, které znevýhodnění uživatelé webu musí zbytečně překonávat, se dají velmi dobře odstranit. Řešení existují a na rozdíl od rekonstrukcí budov, jejichž realizace bývá z různých důvodů obtížná, rekonstrukce našich webů přece jen není tak finančně náročná a nebrání jí památková ochrana ani jiné podobné překážky. Nejdůležitějším krokem je překonání překážek v našem myšlení. Na tuto myšlenku odkazuje jeden ze stěžejních zahraničních portálů věnovaných přístupnosti webu, který nese název WebAIM. Je to nejen akronym úplného názvu portálu (Web Accessibility In Mind), ale i půvabná slovní hříčka, která nás vede k tomu, že při tvorbě webu a při vkládání informací na web by naším cílem měla být právě přístupnost.

Zákon o přístupnosti webových stránek a mobilních aplikací by proto pro knihovny neměl být strašákem nebo záležitostí, kterou formálně splní a odškrtnou si ji ze seznamu povinností. Spíše jej měly chápat jako příležitost, která je posune dál a zlepší služby knihoven všem uživatelům.

¹⁹⁾

CERNIŇÁKOVÁ, Eva a Helena HUBATKOVÁ SELUCKÁ (eds.). Rovný přístup: Standard Handicap Friendly: metodická příručka pro práci knihoven s uživateli s postižením. 1. vyd. Praha: Národní knihovna České republiky – Knihovnický institut, 2014, s. 7. ISBN 978-80-7050-641-7. Aktualizovaná verze dostupná z: https://ipk.nkp.cz/legislativa/normy-standardy-doporuceni/rovny-pristup.-standard-handicap-friendly[42]

²⁰⁾

CERNIŇÁKOVÁ, Eva a NEKOLOVÁ, Kateřina. Knihovny dostupné pro všechny? aneb Služby knihoven uživatelům se specifickými potřebami = Libraries accessible for all: library services for users with special needs. In: Knihovny současnosti 2014: sborník z 22. konference, konané ve dnech 9. až 11. září 2014 v areálu Univerzity Palackého v Olomouci [online]. Ostrava: Sdružení knihoven ČR, 2014 [cit. 2020-09-13], s. 255–264. ISBN 978-80-86249-71-1. Dostupné také z: http://www.sdruk.cz/data/xinha/sdruk/ks2014/Sbornik2014.pdf[44].

²¹⁾

Výsledky průzkumu z roku 2020 dosud nebyly publikovány.

10. Zákon o přístupnosti

Zákon o přístupnosti internetových stránek a mobilních aplikací[45] (plným názvem Zákon č. 99/2019 Sb., o přístupnosti internetových stránek a mobilních aplikací a o změně zákona č. 365/2000 Sb., o informačních systémech veřejné správy a o změně některých dalších zákonů, ve znění pozdějších předpisů) vychází ze směrnice Evropského parlamentu a Rady (EU) 2016/2102 ze dne 26. října 2016 o přístupnosti internetových stránek a mobilních aplikací subjektů veřejného sektoru[46]. Cílem zákona o přístupnosti je zajistit, aby osoby se specifickými potřebami (např. osoby s postižením) mohly i přes své znevýhodnění bez problémů používat webové stránky nebo mobilní aplikace, v některých případech pomocí asistivních technologií nebo specializovaných programů.

V této metodice najdete pouze stručné seznámení se zákonem o přístupnosti.

Doporučujeme, abyste věnovali pozornost samotnému zákonu[47] a informacím v sekci Přístupnost internetových stránek a mobilních aplikací[48] na stránkách Ministerstva vnitra ČR. V sekci najdete jak odkazy na plné znění zákona a na související legislativní dokumenty, tak metodické doporučení k aplikaci zákona i další užitečné informace.

Požadavky zákona

I když někomu může připadat, že jde v naší legislativě o zcela novou záležitost, není to poprvé, kdy je řešena problematika přístupnosti. Zákon č. 99/2019 Sb. totiž navazuje na zákon č. 365/2000 o informačních systémech veřejné správy[49]. Za téměř dvacet let od vzniku tohoto zákona došlo k výraznému rozvoji informačních a komunikačních technologií, k masivnímu rozšíření mobilních zařízení, k posunu v oblasti asistivních technologií a tím také ke změně postupů a metodik, které se používají pro zajištění přístupnosti informací pro osoby se specifickými potřebami. Zákon o přístupnosti na tyto změny reaguje zejména tím, že vychází z aktuálně používané metodiky WCAG 2.1²²⁾ a řeší nejen webové stránky, ale také čím dál rozšířenější mobilní aplikace.

Zákon definuje tzv. povinné subjekty, na které se zákon vztahuje, stanovuje časovou osu pro uplatnění pravidel přístupnosti na webové stránky a mobilní aplikace a připouští možnost tzv. nepřiměřené zátěže, na jejímž základě jsou možné určité výjimky z požadavků na přístupnost.

Co tedy webové stránky a mobilní aplikace musí splňovat?

Stručně by se dalo říci, že stránky musí splňovat požadavky na přístupnost podle metodiky WCAG 2.1 a musí obsahovat prohlášení o přístupnosti.

Úplné informace o požadavcích na přístupnost jsou uvedeny v § 4, 5 a 6 zákona č. 99/2019 Sb. Dále jsou požadavky na přístupnost definovány v metodickém pokynu[51], který vydalo Ministerstvo vnitra ČR.

Na co se zákon nevztahuje

Požadavek na přístupnost se nevztahuje na některé typy obsahu, které z podstaty věci není možné zpřístupnit nebo by jejich zpřístupnění bylo neúměrně náročné:

mapy (s výjimkou navigačních map, u nichž musí být přístupnost zajištěna pomocí náhradního řešení);

znázornění položky sbírky kulturního dědictví (pokud je požadavek na přístupnost v rozporu s potřebou zachování dané položky, případně pokud není dispozici vybavení pro převod do přístupné textové podoby);

archiválie;

zvuková, obrazová a audiovizuální média vysílaná v reálném čase (předtočené mediální záznamy však požadavky na přístupnost musí splňovat);

obsah přejímaný z jiného zdroje (např. na komentáře čtenářů pod články nebo vkládanou reklamu).²³⁾

Jak je zřejmé, část výjimek se týká také knihoven. Kromě médií vysílaných v reálném čase, obsahu převzatého z jiných zdrojů a výjimečně archiválií jde zejména o výjimku přístupnosti položek kulturního dědictví. Ze zákona však zároveň také nepřímo vyplývá, že tam, kde je k dispozici technické zařízení, by se mělo usilovat o zpřístupnění položek kulturního dědictví v textové podobě tak, aby bylo přístupné také uživatelům s postižením.

Úplné informace o obsahu, na který se požadavky na přístupnost nevztahují, najdete v § 1.

Časová osa pro uplatnění pravidel přístupnosti

Ačkoliv zákon vstoupil v platnost v dubnu 2019, pro uplatnění jeho požadavků byla stanovena časová osa, která obsahuje tři důležité termíny:

Od 23. září 2019 mají být pravidla přístupnosti povinně uplatňována u nově vznikajících (nově zveřejněných) webových stránek.

Od 23. září 2020 mají být pravidla přístupnosti povinně uplatňována u všech existujících webových stránek.

Od 23. června 2021 mají být pravidla přístupnosti povinně uplatňována u mobilních aplikací.

Úplné informace o časové ose uplatnění pravidel přístupnosti najdete v § 13.

Povinné subjekty

Zákon o přístupnosti stanovuje povinné subjekty, které mají povinnost zajistit přístupnost webových stránek a mobilních aplikací. Ve zkratce jde o tyto subjekty (podrobnosti najdete přímo v zákoně):

územní samosprávný celek;

právnická osoba zřízená zákonem;

právnická osoba zřízená nebo založená státem, územním samosprávným celkem nebo právnickou osobou zřízenou zákonem, pokud byla zřízena nebo založena k uspokojování potřeb obecného zájmu, která je financována převážně státem, územním samosprávným celkem nebo právnickou osobou zřízenou zákonem;

právnická osoba, kterou zřídila nebo založila výše uvedená právnická osoba;

dobrovolný svazek obcí;

vysoká škola, škola a školské zařízení;

kvalifikovaný správce systému elektronické identifikace.

Z výše uvedeného seznamu vyplývá, že to, zda má organizace povinnost splnit požadavky zákona o přístupnosti, často závisí na zřizovateli a/nebo na účelu jejího vzniku. To se vztahuje také na knihovny. Z hlediska zákona jsou povinným subjektem zejména:

knihovny zřizované státem nebo územním samosprávným celkem, tj. národní knihovny a veřejné knihovny měst a obcí;

knihovny vysokých škol a školských zařízení;

knihovny zřizované veřejně prospěšnými organizacemi financovanými státem, územním samosprávným celkem nebo právnickou osobou zřízenou zákonem.

V některých případech (ať už jde o knihovny nebo jiné instituce) nemusí být zcela jednoznačné, zda je daná instituce z hlediska zákona o přístupnosti povinným subjektem. V takových případech záleží na právním výkladu. Tento výklad se však může v průběhu času měnit²⁴⁾. V případě pochybností je proto vhodné spíše požadavky zákona splnit.

Úplné informace o povinných subjektech najdete v § 3.

Rovný přístup a přístupnost webových stránek

Veřejné knihovny mají na základě knihovního zákona povinnost zajistit rovný přístup k informacím všem bez rozdílu a je skvělé, že většina knihoven a knihovníků pokládá dostupnost služeb co nejširší skupině uživatelů za své poslání, a to bez ohledu na zákonnou povinnost. Z hlediska přístupu k informacím je přitom přístupnost internetových stránek a mobilních aplikací naprosto zásadní podmínkou. Proto všem knihovnám důrazně doporučujeme, aby zajistily přístupnost svých webových stránek a mobilních aplikací i v případě, že z hlediska zákona o přístupnosti povinným subjektem nejsou.

Přístupnost webových stránek v souladu se zákonem o přístupnosti je také jednou z podmínek pro udělení certifikátu Handicap Friendly[53].

Nepřiměřená zátěž

Zákon o přístupnost přináší výjimku pro povinné subjekty, které z důvodu tzv. nepřiměřené zátěže nemohou v plné šíři splnit požadavky na přístupnost (např. kvůli velkým finančním nebo časovým nárokům).

Při případném využití této výjimky je nutné pamatovat na následující pravidla:

Výjimka se nemůže vztahovat na celý web, ale pouze na jeho konkrétní část, u které je možné vyčíslit náklady a zdůvodnit, proč je zajištění přístupnosti nepřiměřenou zátěží.

Zdůvodnění by mělo vycházet z velikosti, povahy a zdrojů povinného subjektu.

Měly by být zohledněny odhadované náklady vzhledem k předpokládanému přínosu zpřístupnění informací pro osoby se specifickými potřebami, zejména s ohledem na předpokládanou dobu a četnost využití webových stránek nebo mobilní aplikace osobami se specifickými potřebami.

V případě výjimky je nutné zajistit náhradní řešení:

Ani při uplatnění výjimky na základě nepřiměřené zátěže uživatel nesmí přijít o možnost získat informace.

Náhradní řešení musí být takové, aby uživatel informace mohl získat bez většího odkladu.

Informace o nepřiměřené zátěži a o náhradním řešení musí být uvedeny v prohlášení o přístupnosti, kde musí být jasně sděleno, kde a jakým způsobem uživatelé získají potřebné informace (např. by mělo být uvedeno telefonní číslo, kam je možné se obrátit).

Úplné informace týkající se nepřiměřené zátěže jsou uvedeny v § 7.

Pamatujte na to, že znevýhodnění uživatelé většinou dávají přednost řešením, při nichž nejsou závislí na pomoci nebo asistenci dalších osob. Navíc i za normálních okolností tito uživatelé obvykle při získávání informací musí překonat více překážek než běžní uživatelé.

Proto při přípravě a plánování plánování webových stránek knihoven doporučujeme zvolit taková řešení, při nichž je možné přístupnost aplikovat na celý web, nejen na některé jeho části. Výjimkám je vhodné se spíše vyhnout, aby pokud možno veškeré služby i informace o nich byly dostupné všem uživatelům, tedy bez ohledu na případné znevýhodnění.

Prohlášení o přístupnosti

Součástí webových stránek musí být prohlášení o přístupnosti. V prohlášení musí být specifikováno:

v jakém rozsahu webové stránky splňují pravidla přístupnosti;

důvody, proč některé části stránek pravidla přístupnosti nesplňují;

náhradní řešení pro získání informací, které není možné získat kvůli omezené přístupnosti webových stránek;

jak postupovat, pokud vznikne podezření, že webová stránka nesplňuje požadavky na přístupnost nebo že důvod, proč některé webové stránky pravidla přístupnosti nesplňují, není opodstatněný.

Informace o přístupnosti mobilních aplikací (které obsahuje všechny výše uvedené body) musí být zveřejněna na některé z webových stránek povinného subjektu.

Struktura prohlášení o přístupnosti musí odpovídat vzoru, který byl stanoven prováděcím aktem Evropské komise.

Informace týkající se prohlášení o přístupnosti obsahuje § 8.

Vzor prohlášení o přístupnosti a návod k jeho vyplnění je zveřejněn v sekci Přístupnost internetových stránek a mobilních aplikací na webu Ministerstva vnitra ČR[54].

Inspirovat se můžete také srozumitelným vzorem upraveného prohlášení o přístupnosti[55].

Doporučené zdroje

zákon o přístupnosti internetových stránek a mobilních aplikací[56]

metodický pokyn Ministerstva vnitra ČR k zákonu o přístupnosti[57]

sekce Přístupnost internetových stránek a mobilních aplikací na webu Ministerstva vnitra ČR[58]

vzor prohlášení o přístupnosti[59]

²²⁾

Samotná metodika WCAG 2.1 sice v zákoně o přístupnosti ani v evropské směrnici zmíněna není, je však součástí harmonizované evropské normy EN 301 549 V2.1.2 (2018-08) Accessibility requirements for ICT products and services[50] vypracované pro účely směrnice a návazné legislativy jednotlivých států Evropské unie.

²³⁾

Viz podrobněji příspěvek Nový zákon o přístupnosti: jaký bude mít dopad na uživatele?[52] z konference INSPO 2019.

²⁴⁾

Příkladem takové změny mohou být soukromé školské právnické osoby. Ty nejdříve dostaly informaci, že z hlediska zákona o přístupnosti nejsou povinným subjektem, později se Ministerstvo vnitra ČR na základě konzultace s Evropskou komisí přiklonilo k výkladu, že se zákon o přístupnosti vztahuje i na ně.

11. Metodika WCAG

Metodika WCAG[60] (Web Content Accessibility Guidelines) se zabývá přístupností webových stránek. Spravuje ji webové konsocium W3C. V současné době je metodika WCAG platná ve verzi WCAG 2.1. Vysvětlení a shrnutí metodiky WCAG v češtině obsahuje metodický pokyn Ministerstva vnitra ČR[61].

Metodika WCAG je určena pro tvůrce webu a webových aplikací a její čtení vyžaduje znalosti potřebné k tvorbě a správě webu a webových aplikací. Mají se tedy metodikou WCAG zabývat knihovníci?

Pravděpodobně tušíte, že odpověď je ano, knihovníci by měli mít základní informace o metodice WCAG. Není jistě nutné zacházet do přílišných podrobností, je však přinejmenším třeba vědět, co metodika WCAG je a jakými základními problémy se zabývá.

Důležité je porozumět alespoň čtyřem základním principům přístupného webu, na kterých je metodika založena. Může nám to pomoci posoudit, zda ti, které jsme pověřili tvorbou a správou knihovního webu, skutečně splnili naše požadavky na přístupnost. Navíc – jak se v této příručce bude ještě několikrát opakovat – přístupnost webu je dána také tím, jak s ním zacházejí ti, kdo na web vkládají informace. I to je tedy důvodem, proč je metodice třeba věnovat pozornost.

Název metodiky Web Content Accessibility Guidelines lze přeložit jako Směrnice pro přístupnost webového obsahu. Je důležité poznamenat, že WCAG se od některých dříve používaných metodik v oblasti přístupnosti liší tím, že je založena na principech, nikoliv na přesných pravidlech.

Centrem zájmu metodiky WCAG je uživatel webu. Důraz je kladen na to, že uživatel musí mít možnost web bez problémů používat – bez ohledu na to, jaké používá technické vybavení, zda má nějaké zdravotní problémy, jakým způsobem vnímá informace apod. Metodika nám poskytuje vodítka, která nás mají nasměrovat k přístupnosti webu. I když to nemusí být na první pohled zřejmé, právě tento přístup je velmi důležitý. Dokument, jehož základem je splnění technických požadavků na přístupnost, totiž s měnícími se technologiemi rychle zastarává. Doporučení v metodice WCAG, která jsou zaměřena na uživatele, se tak rychle měnit nebudou. Změna se většinou bude týkat pouze technického řešení, jimiž je lze naplnit.

Principy

Metodika WCAG stanovuje čtyři základní principy: Těmi jsou:

vnímatelnost;

ovladatelnost;

srozumitelnost;

robustnost.

Vnímatelnost v praxi znamená, že obsah stránky musí být vytvořen tak, aby jej mohli vnímat všichni uživatelé, bez ohledu na nejrůznější postižení či speciální potřeby nebo bez ohledu na použité technické vybavení či zařízení.

V některých případech může princip vnímatelnosti v praxi znamenat kupříkladu také to, že je třeba přidat přepis textu nebo titulky k multimediálním prvkům nebo že informace musí být převoditelné do textové nebo zvukové podoby. Proto je kromě jiného nutné dát pozor na správnou sémantickou strukturu stránky, kterou tvoří především názvy stránek, hierarchie nadpisů a struktura seznamů. Právě to je pro převoditelnost velmi důležité.

Ovladatelnost znamená, že uživatel může bez jakýchkoliv potíží webovou stránku ovládat, tj. pohybovat se po ní, navštěvovat odkazy, spouštět akce, vyplňovat formuláře aj. Klíčová je přitom ovladatelnost stránky nejen z klávesnice (bez použití myši), ale i pomocí dotykového displeje, speciální klávesnice nebo jiných vstupních zařízení.²⁵⁾ Do oblasti ovládání však patří také srozumitelná navigace, dostatek času na práci s obsahem stránky, možnost vypnout slideshow nebo video či hudbu na pozadí, případně nepoužívat prvky, které mohou vyvolat záchvaty (např. blikající efekty nebo příliš rychle se střídající obrázky).

Srozumitelnost webu je oblast, která se týká nejen těch, kdo web tvoří a nastavují, ale také těch, kdo vytvářejí stránky a dokumenty a zveřejňují informace. Srozumitelnost předpokládá, že informace budou správně strukturovány, budou prezentovány srozumitelným jazykem a způsobem, který uživatel očekává. Zahrnuje to také návodné postupy pro různé akce nebo např. informace o chybách, kterých se má uživatel při práci s webem vyvarovat.

Robustnost znamená snahu o maximální kompatibilitu se stávajícími i budoucími technologiemi, a to včetně asistivních technologií nebo mobilních zařízení.

Pravidla

Čtyřem základním principům jsou podřazena pravidla. Je jich celkem třináct a upřesňují, na co by se tvůrci webu měli zaměřit, aby web byl pro uživatele se specifickými potřebami skutečně přístupný. Nejde o výčet pravidel, na jehož základě lze web testovat. Spíše jde o rámec, který má sloužit k lepšímu porozumění kritériím úspěšnosti (viz dále) a umožnit tvůrcům webů k jejich splnění využít vhodné nástroje a techniky.

Kritéria úspěšnosti – tři úrovně priority

Na rozdíl od pravidel jsou kritéria úspěšnosti testovatelná. Je jimi možné ověřit, do jaké míry odpovídá přístupnost webu doporučením metodiky WCAG 2.1.

Kritérium úspěšnosti A MUSÍ být splněno, aby uživatelé patřící do jedné nebo více skupin znevýhodněných uživatelů mohli webovou stránku vůbec používat. Tato úroveň je nejnižší a je naprostým minimem.

Pokud stránky toto kritérium nesplňují, jsou pro některé uživatele zcela nepřístupné.

Kritérium úspěšnosti AA BY MĚLO být splněno, aby byly odstraněny nezávažnější překážky používání webu pro uživatele patřící do jedné nebo více skupin znevýhodněných uživatelů. Teprve splnění tohoto kritéria zaručí, že uživatelé nepřijdou o důležité informace na našem webu.

Pokud stránky nesplňují kritérium úspěšnosti AA, pro některé uživatele mohou být velmi obtížně přístupné, takže mohou mít problém dostat se k některým důležitým informacím.

Metodický pokyn Ministerstva vnitra ČR k zákonu o přístupnosti předpokládá, že přístupnost webu je zaručena splněním kritérií přístupnosti A a AA.

Kritérium úspěšnosti AAA MŮŽE být splněno, aby byly odstraněny drobné překážky přístupnosti pro uživatele patřící do jedné nebo více skupin znevýhodněných uživatelů.

Pokud stránky nesplňují kritérium úspěšnosti AAA, přístup k některým informacím může být pro uživatele nepohodlný nebo komplikovaný, ale k potřebným informacím se – byť s problémy – dostanou. Teprve splnění úrovně AAA zajistí, aby uživatelé se specifickými potřebami mohli stránky využívat, aniž by přitom narazili na komplikace.

Dostačující a doporučené techniky

Metodika WCAG 2.1 nezůstává jen u principů, pravidel a kritérií úspěšnosti, ale přináší také tzv. dostačující a doporučené techniky, jak v konkrétních případech přístupnost uplatňovat.

Příklad: kontrast popředí a pozadí stránky v metodice WCAG 2.1

Princip

Prvním principem metodiky WCAG je princip vnímatelnosti, tedy požadavek, aby obsah stránky mohli vnímat všichni uživatelé bez ohledu na specifické potřeby, technické vybavení atd.

Pravidlo

V rámci principu vnímatelnosti je definováno mj. pravidlo rozlišitelnosti. Cílem tohoto pravidla je usnadnit uživatelům slyšet a vidět obsah a odlišit popředí (obvykle text) od pozadí.

Kritéria úspěšnosti

Jedním z kritérií úspěšnosti pravidla rozlišitelnosti je kritérium minimálního kontrastu. To stanovuje minimální poměr kontrastu popředí a pozadí. Ten se liší podle úrovní:

pro úroveň AA (zaručující použitelnost webové stránky bez zásadních překážek) má hodnotu 4,5:1 pro běžnou velikost textu a 3:1 pro větší text (viz též přehled dostačujících a doporučených technik[62]);

pro úroveň AAA (zaručující vnímání informací na webové stránce bez jakýchkoliv překážek) má hodnotu 7:1 pro běžnou velikost textu a 4,5:1 pro větší text (viz též přehled dostačujících a doporučených technik[63]).

Doporučené zdroje

Web Content Accessibility Guidelines (WCAG): seznamte se, prosím[64]

metodický pokyn Ministerstva vnitra ČR k zákonu o přístupnosti[65]

²⁵⁾

Způsobů, jak např. lidé s tělesným postižením ovládají počítače a další techniku, je celá řada: od ovládání pomocí tyčinky v ústech až po ovládání dechem či pohyby očí.

12. Redakční systém

Redakční systém je software, který umožňuje správu webu a jeho obsahu, zejména jednotlivých stránek, dokumentů, fotogalerií apod.

Nespornou výhodou redakčního systému je, že umožňuje vytvářet a aktualizovat obsah webu, tj. vkládat na web informace, dokumenty, obrázky aj., bez znalostí webových technologií (HTML, CSS apod.). Obsah je na web vkládán obvykle pomocí tzv. WYSIWYG editoru²⁶⁾, který při editaci umožňuje vidět stránku tak, jak bude skutečně vypadat, až bude zveřejněna.

Redakční systém je obvykle nastaven tak, aby se editor stránek, tj. ten, kdo na web vkládá obsah, nemusel starat o vzhled jednotlivých prvků. Editor pouze vybírá styly odstavce (úroveň nadpisu apod.), doplňuje údaje v grafickém rozhraní (např. definuje vzhled a vlastnosti obrázků či dalších prvků pomocí ikon a formulářů) apod. O formátování, definici formulářů pro výběr vlastnosti jednotlivých prvků, automatickou tvorbu menu nebo drobečkovou navigaci atd. se stará redakční systém.

V redakčním systému se nastavuje vzhled webu a jeho struktura, mohou se také obvykle nastavit různé podpůrné nástroje nebo automatické akce. Nastavení redakčního systému ovlivňuje výslednou přístupnost webových stránek. Pokud je redakční systém nastaven špatně nebo nenabízí některé možnosti práce s webovou stránkou, může to mít negativní vliv na přístupnost celého webu či jednotlivých stránek. Přístupnost webu je proto třeba mít na zřeteli již při výběrem a nastavování redakčního systému.

V jednotlivých redakčních systémech existují hotové šablony, které lze využít a obvykle také více nebo méně přizpůsobit.²⁷⁾ Některé z těchto šablon jsou již vytvářeny tak, aby byly přístupné pro uživatele se specifickými potřebami, proto při výběru šablony hledejte ty, které požadavky na přístupnost splňují. Ve webovém vyhledávači můžete zadat dotaz accessible template doplněný názvem příslušného redakčního systému.

Na to, zda web bude nebo nebude ve výsledku přístupný, má vliv nejen grafický vzhled, ale také validní zdrojový kód, struktura webu, ovládání a navigace, způsob, jakým systém pracuje s obrázky nebo odkazy, i další aspekty.

Na co si dát pozor

Ve fázi výběru a přípravy redakčního systému je přístupnost spíše záležitostí webových vývojářů, nikoliv knihovníků. Jakmile je však redakční systém nastaven a web zprovozněn a ukáží se problémy s přístupností, je obvykle velmi obtížné (a v některých oblastech i nemožné) přístupnost zlepšit. Proto uvádíme příklady oblastí, na které je třeba si dát pozor, protože se u nich velmi často vyskytují problémy. Těmito oblastmi jsou:

struktura stránek;

přístupnost menu a navigace obecně;

alternativní texty k obrázkům a videím;

odkazy;

formuláře;

grafika;

zobrazení na mobilních zařízeních;

jazyková nastavení.

Struktura stránek

Na webu musí být definovány oblasti stránky podle jejich funkčních rolí (např. navigace, hlavní obsah apod.).²⁸⁾

Každá stránka musí mít nadpis první úrovně a hierarchickou strukturu nadpisů (je nutné dát pozor na logickou strukturu při využití různých bloků, ze kterých se stránka skládá).

Přístupnost menu a navigace obecně

Pozor si dejte zejména na přístupnost rozbalovacích menu:

Menu musí být přístupné i bez použití myši.

Při přechodu na další položky menu nesmí být uživatel nucen procházet vnořené úrovně předchozích položek menu.

Uživatel musí mít možnosti přeskočit menu a přesunout se na hlavní obsah stránky.

Uživatel musí mít možnost orientovat se ve struktuře webu na kterékoliv stránce (k tomu obvykle slouží drobečková navigace a mapa stránek).

Alternativní texty k obrázkům a videím

Editor musí mít možnost vkládat k obrázkům i videím alternativní popisky.²⁹⁾

Odkazy

Systém musí umožnit vytváření přístupných odkazů. Musí být možné zejména:

odlišit odkazy od okolního textu barvou a typem písma, odlišit navštívené, nenavštívené a aktivní odkazy;

vizuálně zvýraznit aktivní prvek (odkaz, pole) při procházení stránky pomocí klávesnice (přiřadit aktivnímu prvku tzv. focus).

Formuláře

Označení povinných polí formuláře nesmí být závislé na vizuálním vnímání.

Nápověda a popisky polí musí být uvedeny před polem.

Uživatel musí při vyplňování formuláře dostat dostatečně návodné informace o chybách.

Při opravě chyby nesmí dojít ke ztrátě již vyplněných údajů.

CAPTCHA[67] musí být přístupná i pro uživatele, kteří nemohou vnímat informace zrakem.

Grafika

Redakční systém musí umožnit nastavení funkční grafiky, zejména kontrastů popředí a pozadí.

Zobrazení na mobilních zařízeních

Web musí mít responzivní design, tj. přizpůsobit vzhled a rozložení stránky zařízení použitému k jejímu prohlížení.

Musí být možné samostatné nastavení vzhledu webu pro mobilní zařízení (případně také nastavení specifických funkcí pro mobilní zařízení).

Jazyková nastavení

Doporučuje se, aby systém umožňoval vytvářet různé jazykové verze stránek.

Vkládání informací do redakčního systému

I když je návrh konkrétního webu vytvořen tak, aby splňoval nároky na přístupnost pro osoby se specifickými potřebami, samo o sobě to nestačí. Záleží nejen na návrhu webu, ale také na tom, jak jsou informace na web vkládány. Pokud se při aktualizaci informací na webu nebere zřetel na požadavky přístupnosti, i web, který byl navržen jako přístupný, se může lehce stát velmi bariérovým.

Při vkládání informací ovlivňuje přístupnost stránky její struktura (název, nadpisy) a srozumitelnost informací. Značnou roli hraje také způsob, jakým se pracuje s odkazy na stránce, jak jsou voleny a vkládány obrázky, zda všechny texty a použité prvky mají dostatečný kontrast vůči pozadí, zda netextové prvky mají textovou alternativu. Záleží také na tom, zda jsou přístupné i dokumenty zveřejněné na webu nebo jakým způsobem jsou tyto dokumenty prezentovány (např. zda je uvedena informace o jejich velikosti a formátu).

Dobře nastavený redakční systém může velmi pomoci přístupnému vkládání informací, protože uživatel některé věci nemusí hlídat – systém to dělá za něj. Řada aspektů přístupnosti však naopak závisí přímo na tom, jak jsou informace zveřejněny. Proto je důležité, aby lidé, kteří s webovými stránkami pracují, vkládají na ně informace a upravují je, znali základní principy vkládání informací do redakčního systému formou přístupnou pro uživatele se specifickými potřebami a při editaci webových stránek tyto principy dodržovali.

Přehled základních doporučení a návodů pro vkládání informací přístupnou formou najdete v Manuálu přístupné editace webu. Je určen právě pro ty, kdo informace na web vkládají. Jako ukázky jsou použity příklady z konkrétní instalace redakčního systému Drupal³⁰⁾. Uvedené postupy jsou však obecně platné a jsou víceméně shodné napříč redakční systémy, studijními (či jinými) informačními systémy, e-learningovými nástroji atd. Tyto nástroje se obvykle liší spíše drobnostmi, např. názvy tlačítek nebo polí, případně vzhledem WYSIWYG editoru.

²⁶⁾

WYSIWYG je akronym pro „What You See Is What You Get“, tj. „co vidíš, to dostaneš“.

²⁷⁾

Šablony pro redakční systémy s otevřeným zdrojovým kódem jsou často dostupné zcela zdarma.

²⁸⁾

Bližší informace pro tvůrce webu najdete např. v článku Page Regions[66].

²⁹⁾

Popisky by neměly chybět ani u obrázků vkládaných přímo do webové stránky, ani u fotogalerií.

³⁰⁾

Konkrétně jde o web Jaboku – Vyšší odborné školy sociálně pedagogické a teologické a web Knihovny Jabok.

13. Funkční grafika webu

Při přípravě nového webu bývá jedním z nejčastěji diskutovaných témat vizuální stránka věci, většinou s důrazem na to, aby se web líbil a byl zajímavý. Někdy se přitom však poněkud upozaďuje funkčnost a přístupnost webu.

Vizuální stránka webu je rozhodně velmi důležitá. Dobře zpracovaný grafický návrh významně přispívá nejen k atraktivitě, ale také k použitelnosti a přístupnosti webu. Naopak špatná grafika nebo lpění na detailech, které se hodí pro tištěné dokumenty (ale na web jsou nevhodné), může použitelnost a přístupnost výrazně zkomplikovat.

V této kapitole se budeme věnovat některým základním tématům, které s funkčností grafiky souvisejí a mají vliv na použitelnost a přístupnost webových stránek. Jde např. o očekávání uživatelů, práci s textem a textovými bloky, práci s barvami, zejména se zřetelem na kontrast popředí vůči pozadí. Důležitým aspektem funkčnosti grafiky jsou i obrázky nebo formátování písma a odstavců.

Správné zobrazení stránky bez ohledu na zvětšení

Webové stránky se dnes čtou nejen na obrazovce počítače, ale také na mobilních zařízeních, která mají nejrůznější rozlišení či orientaci. Někteří uživatelé rovněž využívají možnost zvětšení stránky (zoomování), ať už přímo v nastavení prohlížeče nebo s využitím speciálních zvětšovacích programů. Proto je při tvorbě webu nutné věnovat pozornost tomu, zda jsou obrázky nebo funkční bloky správně vloženy nebo nastaveny. Problémem může být např. to, že se z obrázku, z bloku textu, navigace nebo jiného prvku na webové stránce na menší obrazovce (nebo naopak při zvětšení zobrazení v prohlížeči) zobrazí pouze část informací; blok však nejde posunout, takže se uživatel k požadované informaci nebo funkci nedostane.

Nevhodné nastavení může vést také k tomu, že obrázky nebo bloky zakrývají další bloky, text nebo jeho části. Pokud dojde k zakrytí navigace či formuláře, uživatel se nedostane k požadovaným informacím, některým akcím, ovládacím prvkům apod.

Očekávání uživatelů

Řada grafických prvků, které se na webových stránkách používají, vychází z toho, co uživatelé očekávají, např.:

logo bývá umístěno vlevo nahoře;

vyhledávací lišta v horní části stránky, často na pravé straně;

přihlášení do účtu vpravo nahoře;

hlavní menu na horizontální liště;

sbalené menu na mobilních zařízeních zastupuje ikona se třemi horizontálními pruhy.

Při návrhu webu je vhodné očekávání uživatelů pokud možno naplnit a nezkoušet příliš experimentovat, jinak mohou být uživatelé zmateni, na stránkách se těžko orientují a neradi je používají.

Grafické strukturování obsahu

Grafiku využijte k tomu, aby se uživatel rychle a jednoduše zorientoval v obsahu stránky. Např. :

Z menu by mělo být jasné, že jde o menu.

Z vyhledávacího formuláře by mělo být jasné, že jde o vyhledávací formulář.

Vzhled nadpisů upravte tak, aby uživateli pomohl pochopit strukturu textu, tj. nadpisy vyšší úrovně by měly být větší/výraznější než nadpisy nižší úrovně.

Odkazy zvýrazněte podtržením; naopak nepoužívejte podtržení pro zvýraznění textu, který odkazem není.

Kontrast barev

Častým problémem komplikujícím přístupnost stránky je nedostatečný kontrast textu (nebo jiného významového prvku stránky) vůči pozadí v důsledku nevhodné kombinace barev.

Při výběru barev (a to nejen pro použití na webu) je důležitý jejich kontrastní poměr. Některé barevné kombinace sice mohou být graficky atraktivní, ale jejich kontrastní poměr je nedostatečný, takže při jejich použití se text stává nečitelným. U některých barevných kombinací je snadné poznat, že kontrast je dostatečný (např. bílá na černé, tmavě modrá na bílé) nebo naopak že je nevyhovující (např. žlutá na bílé nebo tmavě modrá na černé). U jiných už to však tak zřejmé není. Proto při výběru barev doporučujeme řídit se právě kontrastním poměrem.

Za minimální kontrastní poměr barev pro písmo (běžné do velikosti 18 bodů nebo tučné do 14 bodů) je považován poměr 4,5:1, za ideální poměr 7:1. Ke zjištění poměru existuje řada nástrojů, např. validátor kontrastu WebAIM Contrast Checker nebo validátor přístupnosti WAVE.

Podrobnosti o kontrastním poměru a dalších nástrojích k jeho zjištění se dozvíte v článku Barevný kontrast na webu a nástroje, které s ním pomohou[68].

Příklady nesprávně zvoleného barevného kontrastu

Na obr. 1 až 3 si můžete prohlédnout barevné kombinace, které sice vypadají graficky zajímavě, ale nesplňují požadavek na minimální poměr barevného kontrastu. Obr. 4 a 5 obsahují barevné kombinace, u nichž je nedostatečný kontrast zřetelně viditelný. U každého obrázku je uveden odkaz na validátor kontrastu WebAIM Contrast Checker, kde se můžete podívat, jaký je kontrastní poměr dané kombinace barev.

Obr. 1: Kombinace bílé a šedé barvy (#FFFFFF a #A6A6A6) s nedostatečným kontrastním poměrem (zdroj: WebAIM[69], získáno 2020-05-17)

Obr. 2: Kombinace světle modré a bílé barvy (#FFFFFF a #70BAFF) s nedostatečným kontrastním poměrem (zdroj:WebAIM[70], získáno 2020-05-17)

Obr. 3: Kombinace zlaté a bílé barvy (#DAA401 a #FFFFFF) s nedostatečným kontrastním poměrem (zdroj:WebAIM[71], získáno 2020-05-17)

Obr. 4: Kombinace bílé a žluté barvy (#FFFFFF a #FFF947) s nedostatečným kontrastním poměrem (zdroj: WebAIM[72], získáno 2020-05-17)

Obr. 5: Kombinace černé a modré barvy (#000000 a #06073C) s nedostatečným kontrastním poměrem (zdroj: WebAIM[73], získáno 2020-05-17)

Proč je dostatečný kontrast důležitý

Dostatečný kontrast textu vůči pozadí je důležitý zejména pro:

uživatele s poruchami zraku, včetně těch s poruchami barvocitu nebo těch, kteří potřebují brýle na čtení (mj. početné skupiny seniorů);

uživatele mobilních zařízení (zejména při čtení na ostrém slunci nebo na malém či nekvalitním displeji).

Obrázky a vzorky na pozadí

Podobně jako nesprávný kontrastní poměr barev může nečitelnost textů vůči pozadí způsobit i nevhodný vzorek na pozadí textu. Typickým příkladem jsou různé tapety na pozadí³¹⁾ nebo obrázky či fotografie použité jako podklad pro text. Ani tento problém se netýká jen samotných stránek, ale např. i plakátů, pozvánek nebo letáků, které na webu zveřejňujeme (a samozřejmě i jejich tištěných verzí).

Použití vzorku na pozadí (tapetě) se doporučujeme vyhnout. Někdy se však ve snaze o atraktivní design webu používají obrázky jako podklad pro text různých bannerů apod. Umístění textu přesně na konkrétní místo obrázku může být ovšem problematické z hlediska zobrazení na různých zařízeních. Obvykle je proto text vložen přímo do obrázku. To je ovšem postup, který nelze příliš doporučit, zejména kvůli problematické čitelnosti při zvětšení stránky. Text ve formě obrázku také nepřečte odečítač obrazovky ani webový vyhledávač. Není příjemný ani pro běžné uživatele, protože text v obrázku nelze v případě potřeby zkopírovat.

Pokud byste se pro obrázek na pozadí přesto rozhodli, je vhodné se alespoň přidržet následujících doporučení:

Používejte obrázky jako podklad pouze pro kratší texty psané velkým fontem (pro titulek, slogan apod.), nikdy pro běžný text.

Text umisťujte v obrázku tam, kde je větší jednobarevná plocha.

Na obrázcích, kde není dostatečně velká jednobarevná plocha, překryjte část obrázku jednobarevným pruhem nebo ji upravte ztmavením či naopak zjasněním (je však třeba dát si pozor na to, aby „vzorek“ obrázku byl dostatečně „znevýrazněn“ a nepůsobil rušivě). Text umístěte do jednobarevné nebo upravené části.

Při výběru velikosti a barvy písma nezapomínejte na vhodný poměr kontrastu písma vůči podkladu (tj. vůči jednobarevné nebo upravené části obrázku).

Pokud text vkládáte přímo do obrázku, přesvědčte se. že je text čitelný i při velkém zvětšení stránky/obrázku.

Pokud text vkládáte přímo do obrázku, připojte k obrázku vhodný alternativní popis.

Příklady použití obrázku na pozadí

Na obr. 6 je pozvánka na předvánoční akci knihovny, na níž text téměř nejde přečíst. I když uvedený příklad je opravdu extrémně problematický, obrázky jako podklad jsou problematické téměř vždy, ať už se jedná o fotografie, kresby či malby, vzorek na pozadí webu apod.

Obr. 6: Příklad nevhodně zvoleného podkladu textu (zdroj: archiv autorky)

Na obr. 7 je ukázka sloganu knihovny umístěného na obrázku. Vzhledem k tomu, že jde o větší písmo a krátký text, nejde o kritický problém, ale část textu „Knihovna, kde to žije“ není příliš výrazná, což kupříkladu uživatelům se zrakovým postižením může ztížit vnímání informací.

Obr. 7: Příklad mírně problematického textu umístěného na obrázkový podklad (zdroj: archiv autorky³²⁾)

Obr. 8 ukazuje použití jednobarevného pruhu pro zlepšení čitelnosti textu.

Obr. 8: Příklad využití barevného pruhu jako podkladu pro text v obrázku (zdroj: archiv autorky³³⁾)

Obr. 9 zobrazuje řešení, kdy je čitelnost obrázku řešena „znevýrazněním“ části obrázku, v tomto případě snížením jasu.

Obr. 9: Příklad vložení textu do obrázku s využitím části obrázku upravené snížením jasu (zdroj: archiv autorky³⁴⁾)

Titulky videa

Stejný problém jako u textu na obrázkovém pozadí vzniká u titulků videa. Proto při editaci titulků videí, zejména návodů nebo výukových videí, dbejte na dostatečný kontrast textu a pozadí a zvolte vhodnou barvu titulků i barvu a průhlednost podkladové lišty. Většina programů pro editaci videa výběr barev titulků a průhlednosti podkladové lišty umožňuje (včetně programů, které jsou dostupné zdarma).

Proč je důležité vyhnout se vzorkům na pozadí textu

Text, jehož podkladem je vzorek nebo obrázek, může splývat s pozadím, proto se hůře čte slabozrakým lidem, lidem s poruchami barvocitu nebo osobám, které na čtení potřebují brýle.

Vzorek nebo obrázek je rušivým prvkem pro lidi s některými kognitivními poruchami nebo poruchami čtení.

V některých případech vzorek nebo obrázek zhoršuje kvalitu čtení uživatelům mobilních zařízení (např. pokud čtou při intenzivním slunečním svitu).

³¹⁾

Tapety na pozadí webové stránky naštěstí v současné době nejsou používány tak často jako dříve.

³²⁾

Jako podklad pro text byl použit obrázek ze serveru Pixabay[74], jehož autorem je Luboš Houska.

³³⁾

Jako podklad pro text byl použit obrázek ze serveru Pixabay[75], jehož autorem je Luboš Houska.

³⁴⁾

Jako podklad pro text byl použit obrázek ze serveru Pixabay[76], jehož autorem je Luboš Houska.

14. Struktura webu

Struktura webové stránky zahrnuje více aspektů, které jsou navzájem propojené. Jde jednak o hierarchickou strukturu stránky vyjádřenou nadpisy, jednak o strukturu informační, do které patří jednotlivé funkční oblasti webové stránky, obvykle v podobě bloků.

Jak hierarchie nadpisů, tak jednotlivé funkční oblasti stránky v sobě zahrnují dva navzájem propojené prvky:

strukturu vyjádřenou v grafickém rozhraní stránky, kterou vnímá běžný uživatel webu;

zdrojový kód, který je pro běžného návštěvníka webu neviditelný, ale pracují s ním technologie, které obsah webu zprostředkovávají uživatelům (jde nejen o asistivní technologie, jako jsou odečítače obrazovky, braillské řádky apod., ale také o webové vyhledávače).

Správná struktura webové stránky a informací, které obsahuje, má nezanedbatelný vliv na optimalizaci webu pro webové vyhledávače.

Funkční oblasti webové stránky

Funkčními oblastmi webové stránky jsou např.:

záhlaví;

vyhledávací lišta;

navigační prvky (např. hlavní menu, menu druhé úrovně, rychlá navigace);

hlavní obsah;

zápatí stránky.

Běžný uživatel se v této struktuře může orientovat vizuálně, protože jednotlivé části webu jsou prezentovány ve formě bloků, mají své specifické umístění, odlišují se také pomocí grafiky, např. odsazením, ohraničením, barvou nebo velikostí a stylem písma.

Uživatel, který nemůže využít vizuální orientaci na stránce (např. nevidomý člověk, který používá odečítač obrazovky, případně i webový vyhledávač), se musí na stránce orientovat jinak. Využívá k tomu značky ve zdrojovém kódu stránky.

Vymezení funkčních oblastí ve zdrojovém kódu

Aby byla stránka dobře přístupná zejména pro odečítač obrazovky nebo jiná alternativní zařízení, musí v ní být funkční oblasti správně vymezeny pomocí značek, např.:

<header> pro záhlaví;

<nav> pro navigaci;

<main> pro hlavní obsah.

Tyto značky jsou součástí jazyka HTML a používají se optimálně v kombinaci s atributy WAI-ARIA³⁵⁾, které zlepšují využívání a ovládání webu pomocí asistivních technologií. Strukturu obsahu stránky pak určuje hierarchie nadpisů, seznamy a další prvky. Např. nevidomý uživatel, který používá odečítač obrazovky, se na stránce pohybuje pomocí příkazů využívajících strukturní značky jednotlivých bloků či oblastí stránky, nadpisů, seznamů, tabulek apod.

Z hlediska přístupnosti webu je velmi důležité, aby stránky měly:

správně definovány jednotlivé funkční oblasti;

správnou strukturu, zejména hierarchii nadpisů;

validní zdrojový kód bez sémantických chyb.

Definice oblastí stránek a nastavení chování stránek při práci s nadpisy či seznamy je především záležitostí vývojářů redakčního systému či webu. Výsledná struktura nadpisů nebo používání seznamů jsou však ve značné míře otázkou vkládání informací do redakčního systému.

Název stránky a nadpisy

Pro přístupnost webu je velmi důležité, aby nechyběl vhodný název stránky a aby byly nadpisy logicky uspořádané a výstižné.

Název stránky

Na každé webové stránce je nutné uvést název stránky. Název stránky je pak většinou zobrazen ve webovém prohlížeči jako název panelu nebo okna; obvykle se také použije jako nadpis první úrovně, viz obr. 1. V redakčních systémech bývá název stránky vyžadován jako povinné pole při vytváření nebo úpravě stránky, viz obr. 2. Název stránky je na ukázkových obrázcích pro přehlednost zvýrazněn červeným rámečkem.

Obr. 1: Zobrazení názvu stránky v nadpisu stránky a v názvu karty prohlížeče (zdroj: Knihovna Jabok[78], získáno 2020-05-11)

Obr. 2: Příklad zadání názvu stránky v editačním poli formuláře pro tvorbu stránky (zdroj: Knihovna Jabok[79], získáno 2020-05-13)

Proč je důležité uvádět název stránky

Název stránky:

se zobrazí v prohlížeči v záhlaví okna, případně panelu;

je údaj, který nevidomému uživateli přečte odečítač obrazovky;

je důležitý pro webové vyhledávače a může příznivě ovlivnit výsledky vyhledávání.

Nadpisy

Nadpisy jsou důležitým prvkem, který pomáhá uživatelům zorientovat se na stránce, a to bez ohledu na to, zda jde o uživatele s postižením nebo o běžného uživatele. Při tvorbě nadpisů je nutné dodržovat několik základních pravidel:

Používejte nadpisy, které vystihují, co daná stránka nebo její část obsahuje. Při tvorbě nadpisů je užitečné se zamyslet nad tím, jestli bude pro vaše uživatele srozumitelný.

Nadpisy nikdy nezvýrazňujte pomocí prvků pro změnu velikosti, řezu nebo barvy písma. Pro formátování nadpisů vždycky používejte předdefinované styly, které označují úroveň daného nadpisu. Styly obvykle vyberete pomocí rozbalovacího menu přímo v editoru redakčního systému (viz obr. 3).

Snažte se, aby na všech stránkách webu byly nadpisy používány jednotně.

Nadpisy uvádějte v logickém pořadí a ve srozumitelné hierarchické struktuře. Obvykle se používá níže uvedená hierarchie nadpisů (někdy mohou být úrovně nadpisů použity jinak, ale v každém případě by logicky nadřazený celek měl být označen nadpisem vyšší úrovně a logicky podřazený celek nadpisem nižší úrovně):

nadpis 1 pro název stránky (na každé stránce by se měl vyskytovat pouze jednou);

nadpis 2 pro názvy funkčních oblastí stránky nebo druhé úrovně hlavního obsahu stránky;

nadpis 3 až 6 pro názvy nižších úrovní.

Pokud chcete v redakčním systému zkontrolovat úroveň nadpisu, stačí na požadovaný nadpis nastavit kurzor. V nástroji pro výběr stylu se zobrazí použitý styl (úroveň) nadpisu (viz obr. 3).

Obr. 3: Výběr úrovně nadpisu v editoru redakčního systému pomocí rozbalovacího menu; šipkami jsou označeny rozbalovací menu, zvolená úroveň nadpisu a nadpis, se kterým se pracuje (zdroj: Knihovna Jabok[80], získáno 2020-05-11)

Existuje také řada speciálních nástrojů na kontrolu hierarchie nadpisů na stránce, např. doplněk prohlížeče HeadingsMap nebo validátor přístupnosti WAVE.

Na obr. 4 je pomocí značek H1 až H3 ³⁶⁾ označena hierarchická struktura na stránce s kontakty. Na skutečnou stránku se můžete podívat na adrese https://knihovna.jabok.cz/cs/kontakt[81].

Obr. 4: Hierarchická struktura nadpisů na stránce (zdroj: Knihovna Jabok[82], získáno 2020-05-13)

Proč je důležité správně vkládat nadpisy

Správné používání nadpisů nejen ušetří práci (není nutné se starat o formátování), ale především pomůže uživatelům správně se zorientovat v informacích na stránce.

Nadpisy jsou obzvláště důležité pro nevidomé návštěvníky webu. Ti se díky nim efektivně dostanou právě k těm informacím, které potřebují, aniž by jim hlasový odečítač obrazovky musel předčítat obsah celé stránky (odečítač umožňuje procházení nadpisů na stránce s možností volby úrovně nadpisu).

Nadpisy jsou důležité také pro stroje. Správná struktura nadpisů je jedním z nástrojů optimalizace pro vyhledávače (search engine optimization, SEO) a může výrazně zvýšit umístění stránky ve výsledcích vyhledávání.

³⁵⁾

O technické specifikaci WAI-ARIA (Accessibility Initiative – Accessible Rich Internet Applications) pojednává např. článek WAI ARIA 1.0 byla vydána jako doporučení W3C[77].

³⁶⁾

H1 až H6 jsou značky používané v kódu HTML pro sémantické označení prvku heading, tedy nadpisu.

15. Seznamy

Seznamy mohu významně přispět k přehlednosti informací. Pokud text obsahuje výčet položek, je tento výčet vhodné uvést formou číslovaného nebo nečíslovaného seznamu. Seznam s odrážkami je vždy srozumitelnější než výčet položek na řádku oddělený čárkami.

Proč je důležité správně vytvářet seznamy

Pro uživatele s kognitivními poruchami jsou seznamy s odrážkami přehlednější než položky uvedené v textu a oddělené pouze čárkou.

Seznamy pomáhají pochopit strukturu problému nebo si dát jednotlivé položky do souvislosti.

V seznamech se lépe orientují i uživatelé s některými poruchami zraku a také nevidomí, kteří používají odečítač obrazovky. Pokud je seznam správně vytvořen, odečítač obrazovky pozná a přečte, že se jedná o seznam, kolik má seznam položek, jakou úroveň v seznamu má daná položka atd., takže nevidomý návštěvník webu může se seznamem efektivněji pracovat.

V ukázce na obr. 1 je seznam elektronických zdrojů knihovny uvedený formou nečíslovaného seznamu. Obr. 2 zachycuje stejné informace v běžném textu odstavce. Ze srovnání obou příkladů je zřejmé, že v seznamu s odrážkami se uživatel zorientuje snadněji a rychleji.

Srozumitelnosti seznamu pomáhá také to, když jsou jednotlivé položky spíše kratší.

Obr. 1: Použití nečíslovaného seznamu na webové stránce knihovny (zdroj: Knihovna Jabok[83], získáno 2020-05-13)

Obr. 2: Nesprávně uvedený seznam, ve kterém je výčet položek uveden formou běžného odstavce (zdroj: Knihovna Jabok[84], ukázka vytvořená pro příručku, získáno 2020-05-13)

Formátování seznamu

Seznamy vytvářejte pomocí tlačítka pro formátování číslovaných nebo nečíslovaných seznamů (viz obr. 3). Rozhodně nevytvářejte položky číslovaných seznamů ručním vepsáním čísla položky ani položky nečíslovaných seznamů vložením hvězdičky, pomlčky apod.

Obr. 3: Tlačítko pro vytvoření číslovaného seznamu (zdroj: Knihovna Jabok[85], získáno 2020-05-13)

Odsazení víceúrovňového seznamu nebo vytvoření nižší úrovně víceúrovňového seznamu vytvářejte vždy tlačítkem pro zvětšení odsazení textu (viz obr. 4). Nikdy nepoužívejte ručně vložený znak pro mezeru.

Obr. 4: Tlačítko pro zvětšení odsazení textu (zdroj: Knihovna Jabok[86], získáno 2020-05-13)

Mám použít nečíslovaný, nebo číslovaný seznam?

Nečíslovaný seznam

Pokud vyjmenováváte položky, které nemají návaznost nebo posloupnost, použijte nečíslovaný seznam. Např. pokud na web uvedete seznam témat nápovědy ke správě osobních údajů ve čtenářském kontě, změna pořadí položek je možná (přestože pořadí těchto položek může mít určitou logiku), viz např.:

Aktivace čtenářského konta

Přihlášení do čtenářského konta

Změna hesla

Zapomenuté heslo

Změna přihlašovacího jména

Změna e-mailu

Změna adresy

Číslovaný seznam

Pokud na sebe vyjmenované položky navazují v přesném pořadí a žádnou nelze (bez narušení řady nebo postupu) vynechat, je na místě použít číslovaný seznam. Ten vyjadřuje neměnnou posloupnost nebo sled navazujících kroků. Příkladem může být nápověda k aktivaci čtenářského konta, např.:

V online katalogu klikněte na tlačítko „Moje konto“.

Do pole „Číslo průkazu“ zadejte čárový kód průkazu.

Do pole „Heslo nebo PIN“ zadejte heslo (čtyřmístný číselný kód), který jste dostali při registraci.

16. Vkládání informací na web

Obsah sdělení

Jedním z velmi důležitých (a přitom často opomíjených) aspektů přístupnosti je způsob, jakým jsou na celém webu i na jednotlivých stránkách prezentovány informace. Snadná srozumitelnost sdělení na webových stránkách je zásadní zejména pro uživatele webu s poruchami kognitivních funkcí. Přínosem je však také pro běžné uživatele webu.

Při tvorbě webové stránky je důležité promyslet, co chceme uživatelům webu sdělit. Při formulování textu může pomoci několik základních pravidel:

Důležité informace dávejte na začátek stránky. Může být vhodné na začátku stránky shrnout obsah příspěvku nebo nejdůležitější informace.

Informace uvádějte ve správném pořadí – snažte se, aby na sebe navazovaly.

Používejte výstižné názvy stránek a výstižné nadpisy v logické hierarchii (viz též Nadpisy).

Buďte konzistentní – pro tutéž věc používejte vždy stejný termín.

Uveďte všechny informace, které lidé potřebují, ale snažte se neuvádět zbytečné informace navíc.

Jazyk se snažte přizpůsobit předpokládaným uživatelům webu.

Nespoléhejte na to, že všichni znají zkratky nebo termíny, které používáte. Jste si opravdu jisti, že všichni návštěvníci vašeho webu vědí, co je signatura, knihovní fond, rešerše, absenční výpůjčka, referenční služby, MVS nebo DDS?

Pokud se odborným termínům nebo zkratkám nelze vyhnout, vysvětlete, co znamenají.

Pomozte uživatelům propojit informace pomocí odkazů. Např. pokud informujete o ceně služby, uveďte odkaz na ceník; pokud vytvoříte fotogalerii, propojte ji pomocí odkazu s akcí, ke které se fotografie vztahují.

Používejte označení odkazů, které informuje, kam odkaz vede i bez nutnosti číst okolní text (viz též Odkazy).

Nenuťte uživatele nad webem přemýšlet! Raději se vy sami zamyslete nad tím, co uživatelé potřebují, a připravte web i jednotlivé stránky tak, aby se každý uživatel co nejrychleji a nejjednodušeji dostal k informaci, kterou potřebuje.

Formát zveřejněných informací

Kromě odůvodněných případů je na webové stránky vhodné veškeré informace vkládat ve formátu HTML, tj. jako webovou stránku, nikoliv jako odkaz na soubor ke stažení. Pokud na webové stránky vkládáte třeba pozvánky na akce ve formě plakátu nebo pozvánky jako soubor ke stažení, vždy uveďte základní informace o akci také přímo na webové stránce. Tím mj. uživatelům ušetříte zbytečné stahování souboru v případě, že je daná akce nezajímá.

Podobné principy jako pro webové stránky platí i pro e-mailovou komunikaci. Pokud e-mail obsahuje přílohu s pozvánkou, vždy vložte stručné informace o akci také přímo do textu e-mailu.

Proč je vhodné dávat přednost webovým stránkám před dokumenty ke stažení

Pokud jsou informace dostupné přímo na webové stránce, uživatelé (jak uživatelé se znevýhodněním, tak uživatelé mobilních zařízení) nemusí pro jejich získání do svého zařízení stahovat žádný soubor, který by jim tam zbytečně zabíral místo.

Není nutné spouštět jinou aplikaci než prohlížeč, nebo ji dokonce stahovat a instalovat, pokud ji uživatel na svém zařízení nemá. Pro některé uživatele mohou z tohoto hlediska být problematické i dokumenty ve formátu DOCX nebo PDF. Zazipované soubory (ZIP, RAR) většina uživatelů mobilních zařízení neotevře vůbec.

Stránka ve formátu HTML může být také méně náročná na objem přenesených dat.

V některých případech může být zveřejnění dokumentu ve formátu HTML problematické nebo časově náročné. Typickým příkladem takového dokumentu je rozsáhlý knihovní řád. Pokud skutečně není možné zveřejnit knihovní řád ve formě webové stránky, je vhodné z něj tímto způsobem zveřejnit alespoň výňatek, případně nejdůležitější pravidla pro poskytování služeb čtenářům.

Pokud na webu zveřejňujete dokument ke stažení, vždy zkontrolujte, zda je dokument přístupný i pro uživatele, kteří místo monitoru používají alternativní výstupní zařízení (např. odečítač obrazovky). Pozvánka nebo plakát ve formátu JPG, PNG, GIF či jiném formátu pro obrázky ani dokument naskenovaný jako obrázek do formátu PDF bez textové vrstvy pro ně přístupné nejsou.

17. Ovládání webu

Webové stránky předpokládají interaktivitu uživatele. Uživatel otevírá odkazy, vyplňuje formuláře, potvrzuje různé akce pomocí tlačítek, pouští a zastavuje multimediální obsah vložený na stránku apod. Aby tato interakce mohla probíhat, je nutné, aby všechny aktivní prvky na webové stránce byly funkční a aby se uživatel mohl na webu i na stránce bez problémů orientovat i pohybovat za pomocí srozumitelné a funkční navigace.

Problematice odkazů, která k ovládání webu neodmyslitelně patří, je věnována samostatná kapitola.

Ovladatelnost webu bez ohledu na uživatele a jeho zařízení

Zdaleka ne všichni uživatelé dnes přistupují k webovým stránkám z rozhraní stolního počítače nebo notebooku. Značná část jich používá chytré telefony nebo tablety s nejrůznějším rozlišením. Uživatelé s postižením používají různé asistivní technologie, jako jsou odečítače obrazovky, braillské řádky nebo hardwarové či softwarové lupy.

Webová stránka musí být vždy ovladatelná a všechny informace musí být dostupné bez ohledu na to, jaké má uživatel technické možnosti nebo jaké používá vstupní zařízení, zda má zobrazené obrázky apod.

Ovladatelnost z klávesnice

Přestože je běžné ovládat počítač pomocí myši, řada uživatelů webu myš z různých důvodů používat nemůže. Proto všechny odkazy, formuláře, případně další aktivní prvky musí být ovladatelné pomocí klávesnice. Nesmí se stát, že se uživatel, který myš nepoužívá, nedostane na nějaký odkaz, že nemůže vyplnit nebo odeslat vyplněný formulář apod. Všechny základní funkce a informace musí být dostupné také s vypnutými styly nebo skripty (viz též Ovládání odkazů z klávesnice).

Zobrazení stránek a jejich obsahu

Webové stránky a veškerý jejich obsah musí být možné zobrazit bez ohledu použité výstupní zařízení, zvětšení stránky nebo její orientaci. Informace by měly být dostupné i bez rozlišení barev a bez vizuálního vnímání.

Především je třeba zajistit, aby:

uživatel měl možnost stránku zvětšovat podle své potřeby, aniž by došlo ke ztrátě čitelnosti a funkčnosti;

se stránka přizpůsobila použitému zařízení tak, aby nebylo nutné horizontální posouvání obsahu;

se uživateli zobrazila celá informace nebo celý obrázek;

všechny informace byly čitelné i na zařízení s malým rozlišením, malým displejem nebo při velkém zvětšení stránky (pozor např. na useknuté obrázky, obrázky zakrývající část obsahu nebo useknutý text, který nejde posouvat);

informace byly dobře čitelné;

informace byly dostupné, i když má uživatel vypnuté obrázky (tj. aby se na stránce nevyskytoval text formou obrázků, aby obrázky měly vhodné alternativní popisky apod.).

Proč je možnost zvětšování a přizpůsobení stránky velikosti důležitá

Dávno pryč jsou doby, kdy si uživatelé zobrazovali stránky jen na monitoru stolního počítače nebo notebooku. Značná část návštěvníků se dnes k webovým stránkám dostává pomocí mobilních zařízení, které mají různé rozměry a rozlišení, některá z nich (např. čtečky s elektronickým papírem) jsou pouze černobílé. Návštěvníci webu se zrakovým postižením požívají hardwarové nebo softwarové lupy, speciální mobilní telefony, odečítače obrazovky nebo braillské řádky.

Navigace

Navigace je základem pro ovládání webu a orientaci na něm. Aby byla navigace skutečně funkční, je nutné se zaměřit zejména na tyto oblasti:

Navigace musí být srozumitelná. Přemýšlejte o tom, čemu rozumí návštěvníci vašeho webu. Nepředpokládejte, že vědí to, co víte vy, že znají termíny, které používáte, že rozumí stejným zkratkám jako vy. Pozor si dejte zejména na knihovnické výrazy a zkratky (např. MVS).

Navigace musí být logická. Promyslete vhodnou strukturu webu a navigace. Přemýšlejte, jak uvažují návštěvníci vašeho webu.

Navigace musí být konzistentní a na všech stránkách musí být zobrazena na stejném místě stránky.

Nespoléhejte na to, že uživatel přijde na váš web z hlavní stránky. Poskytněte mu možnost zorientovat se ve struktuře pomocí tzv. drobečkové navigace, tedy cesty od stránky, kde se uživatel právě nachází, k domovské stránce.

Poskytněte uživateli zkratku k důležitým stránkám a informacím pomocí rychlých odkazů (kontakt, registrace, knihovní řád, přihlášení do čtenářského konta apod.).

Poskytněte zkratky ke službám také uživatelům se specifickými potřebami.

Poskytněte uživatelům odečítačů obrazovky odkaz s možností přeskoku na důležité části webu (např. vynechání navigace a skok na hlavní obsah). Tyto odkazy jsou obvykle pro běžné uživatele webu neviditelné, takže je nijak neobtěžují.

Zajistěte, aby byly všechny úrovně menu dostupné z klávesnice (bez použití myši). Častou chybou bývá rozbalovací menu, které se však při ovládání pomocí klávesnice nerozbalí. Uživatel se v takovém případě k položkám nižší úrovně vůbec nedostane.

Zajistěte, aby uživatelé, kteří web ovládají pomocí klávesnice, nemuseli v menu procházet všechny položky vnořené pod položky hlavního menu.
Např. obr. 1 zobrazuje menu na webu Ministerstva práce a sociálních věcí ČR[87]. Uživatel je při jeho ovládání z klávesnice nucen projít všechny vnořené položky, takže pokud se chce dostat k položce Kontakt, musí projít všechny položky umístěné ve struktuře pod položkami Průvodce, Ministerstvo, Působnost MPSV atd. (jde o několik desítek položek).

Obr. 1: Menu na webu Ministerstva práce a sociálních věcí ČR (Ministerstvo práce a sociálních věcí ČR[88], získáno 2020-05-01)

Příklad dobře promyšlené navigace i rozbalovacího menu, které je bez problémů dostupné z klávesnice (pomocí klávesy tab, šipek a klávesy enter), najdete např. na webu Moravskoslezské vědecké knihovny v Ostravě[89] (hodnocen byl stav k 1. 5. 2020). Všimněte si, že při ovládání z klávesnice se v horní části zobrazí odkaz s možností přeskoku na hlavní obsah.

18. Odkazy

Základem webu jsou hypertextové odkazy.³⁷⁾ Bez nadsázky se dá říci, že jsou hlavním ovládacím prvkem webu. Jsou součástí navigace, navzájem propojují jednotlivé části webu, propojují web s externími zdroji, spouští uživatelské akce apod. Proto je jejich přístupnost klíčovým aspektem přístupnosti celého webu. Zahrnuje jejich bezproblémové ovládání nezávisle na používaném zařízení, jejich vzhled, srozumitelnost i další aspekty.

Ovládání odkazů z klávesnice

Většina z nás k ovládání odkazů používá myš. Někteří uživatelé však myš používat nemohou. Proto je důležité, aby odkazy byly přístupné i prostřednictvím klávesnice.

Uživatelé, kteří z různých důvodů nemohou myš používat, místo ní ve většině případů využívají klávesnici. V některých případech jde o speciální typ klávesnice, např. klávesnici s velkými tlačítky nebo klávesnici uzpůsobenou pro ovládání jednou rukou.³⁸⁾ Webové prohlížeče jsou nastaveny tak, že stisknutím klávesy tab se kurzor přesune na následující odkaz (případně na jiný aktivní prvek, např. pole formuláře).

Odkazy jsou při použití klávesnice procházeny postupně, v pořadí, v němž se nacházejí na stránce. Pokud je odkaz dostupný pouze pomocí myši, lidé, kteří ji z různých důvodů používat nemohou, se k němu vůbec nedostanou.

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 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é části stránky, takže odkazy anebo tlačítka ke spouštění akcí, které se v ní nacházejí, nemůže využít – jsou pro něj nedostupné;

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.

Proč je ovládání odkazů z klávesnice důležité

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í;

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, kteří z nejrůznějších důvodů nemohou používat horní končetiny (včetně lidí po úraze, kteří mají ruku v sádře);

uživatele s poruchami jemné motoriky, s třasem rukou apod.;

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ší.

Jak zkontrolovat funkčnost odkazů při použití klávesnice

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 i sami:

klávesou tab přesunete kurzor na další odkaz nebo aktivní prvek;

klávesou enter potvrzujete akce a otevíráte odkazy;

pomocí šipek se pohybujete po stránce;

mezerníkem vybíráte možnosti ve formulářích.

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í. Většina uživatelů tedy podtržený text okamžitě chápe jako odkaz. Bohužel se však v poslední době (údajně z estetických důvodů) na mnohých 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.

Pokud můžete, zvýrazněte odkazy podtržením, protože tak jsou jednoznačně odlišitelné od okolního textu a uživatel je nemusí hledat. Podtržení je možné kombinovat také s barevným zvýrazněním odkazu.

Proč je důležité odlišit odkazy podtržením

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é i pro uživatele, kteří stránku používají na méně kvalitním displeji nebo za špatných světelných podmínek.

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í.

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 vůči pozadí.

Minimální doporučený poměr kontrastu barvy odkazu vůči barvě okolního textu je 3:1. Nezapomeňte, že barva odkazu musí být také dostatečně kontrastní vůči pozadí (minimální doporučený poměr kontrastu je 4,5:1). Ke kontrole barev odkazu můžete použít nástroj WebAIM Link Contrast Checker[90].

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 tab na další odkaz, je pro něj důležité, aby věděl, na kterém odkazu se kurzor právě nachází. Proto je třeba takový odkaz zvýraznit. Ve výchozím nastavení většiny prohlížečů je odkaz, na kterém je kurzor umístěn, orámován tenkou modrou linkou, která je nevýrazná; v horším případě ten, kdo web vytvářel, zvýraznění odstranil úplně. Dostatečné zvýraznění odkazu, na kterém je umístěn kurzor, přitom uživatelům velmi zjednoduší orientaci na stránce i ovládání stránky.

Ke zvýraznění odkazu s kurzorem se používá tzv. focus, který webový vývojář nastaví ve stylu stránky³⁹⁾.

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://knihovna.jabok.cz/cs/knihy-casopisy/seznamy-literatury[91].

Obr. 1: Zvýraznění odkazu při procházení stránky pomocí klávesnice (zdroj: Knihovna Jabok[92], získáno 2020-05-19)

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).

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, Více zde, Pro více informací klikněte zde apod. objevují na webových stránkách v sekci aktuality (viz příklady na obr. 2 a 3).

Obr. 2: Nesprávné použití zástupného textu Více zde; bez okolního kontextu uživatel nezjistí, čeho se odkaz týká (zdroj: obec Oplany[93], získáno 2020-05-15)

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: Ministerstvo práce a sociálních věcí ČR[94], získáno 2020-05-15)

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.

Obr. 4: Správně použité zástupné texty odkazů, které dávají smysl samy o sobě, tedy bez okolního textu (zdroj: Knihovna Jabok[95], získáno 2020-05-15)

Dalšími případy bývají odkazy na různé oficiální dokumenty. Typickým příkladem použití nevhodného zástupného textu je např. věta: „Informace o cenách služeb najdete zde.“ Zástupný text odkazu na dokumenty, např. na ceník, však může být jednoduše řešen např. jedním z těchto způsobů:

„Podrobnosti o cenách služeb najdete v Ceníku“;

„Podrobnosti o ceně služeb viz Ceník“;

„Ceník služeb“.

Čím kratší odkaz, tím lépe. Proto někdy bývá nejlepší ta nejjednodušší varianta, tedy použití prostého názvu dokumentu (v našem případě „Ceník služeb“).

Proč je důležité, aby odkazy dávaly smysl i bez okolního textu

Odkaz označený výrazem „zde“ přestavuje velký problém pro ty, kdo používají odečítač obrazovky, a snaží se procházet stránku po odkazech. Pokud je pro zástupný text odkazů použit např. výraz „zde“, uživatel opakovaně slyší odkaz „zde“, který mu však sám o sobě nic neřekne.

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 pohybují klávesou tab.

Odkaz na jiný web nebo dokument

V některých případech je vhodné připojit k odkazu vysvětlení, kam odkaz vede, zejména pokud:

jde o dokument ke stažení, k jehož otevření je nutná další aplikace nebo program;

odkaz směřuje na jiný (externí) web.

Někdy je cíl odkazu dostatečně zřejmý z formulace ze zástupného textu, např.:

„Informace k zákonu o přístupnosti na webu Ministerstva vnitra ČR“;

„Portál Knihovny.cz“;

„Sdílené album na Rajče.cz“.

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č), je nutné přímo do zástupného textu odkazu (nikoliv až za odkaz) připojit informaci o typu a velikosti dokumentu. Např.:

„E-knihovna MuniSpace (externí odkaz)“;

„Zákon o přístupnosti webu a webových aplikací – odkaz na samostatný web“;

„Knihovní řád (PDF, 1,2 MB)“;

„Ceník služeb ve formátu PDF, 215 kB“ nebo „Ceník služeb ve formátu DOCX, 250 kB“.

U některých webů může být u externích odkazů automaticky zobrazena ikona symbolizující, že jde o externí odkaz (většinou čtvereček se šipkou směřující vpravo nahoru, viz obr. 5). I v tomto případě je však třeba zajistit textovou variantu informace, např. ve formě alternativního textu k obrázku (ten může být nastaven na úrovni redakčního systému).

Obr. 5: Ikona symbolizující otevření odkazu na externím webu

Jak zjistit informace o velikosti souboru ve Windows

Informaci o velikosti souboru zjistíte ve Složce dokumentů (Průzkumník) po najetí myší nad ikonu souboru nebo v sekci Podrobnosti v levém navigačním sloupci. Informace se zobrazí při najetí myši na ikonu/název souboru, viz obr. 6).

Obr. 6: Informace o souboru v Průzkumníku ve Windows

V programu Total Commander se po označení souboru (např. klávesou insert nebo kliknutím myši) zobrazí informace o velikosti označeného souboru v dolní liště panelu. Lze ji zobrazit také v nabídce Soubor > Vlastnosti (viz obr. 7).

Obr. 7: Informace o velikosti souboru v programu Total Commander

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 ž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 nebo nekvalitnímu připojení.

³⁷⁾

To je zřejmé i z toho, že se termín hypertext dostal do názvu jazyka HTML: HyperText Markup Language.

³⁸⁾

Existují rovněž uživatelé, kteří počítač ovládají alternativním vstupním zařízením, např. tyčinkou v ústech, pohyby hlavy, očima apod.

³⁹⁾

Pro nastavení vzhledu webu se používají kaskádové styly (Cascading Style Sheets, CSS).

19. Písmo a formátování textu

Č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 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 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, 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í:

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;

texty psané pouze velkými písmeny;

fonty s typografickými zvláštnostmi.

Ukázky nedoporučených písem si můžete prohlédnout na obr. 1.

Obr. 1: Ukázka neobvyklých fontů, jejichž použití na webu je vhodné se vyhnout (zdroj: archiv autorky)

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 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.⁴⁰⁾

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.

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.

Který se vám čte lépe?⁴¹⁾

Obr. 2: Srovnání úzkého fontu s tenkými linkami a běžného písma (zdroj: archiv autorky)

Styly odstavců a bloků

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ý 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.

Text zarovnávejte doleva, nikdy do bloku (při zarovnání textu do bloku vznikají mezery, které mohou ztěžovat čtení textu).

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 čte lépe?⁴²⁾

Obr. 3: Text s malým rozestupem 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

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 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

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.

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 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.

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 i 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.

⁴⁰⁾

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 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).

⁴¹⁾

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.

⁴²⁾

První blok textu s malým rozestupem mezi řádky se čte hůře než „vzdušněji“ formátovaný text druhého bloku.

20. Obrázky

Obrázky mohou webové stránky příjemně oživit a přispět k lepšímu porozumění informacím. Špatné použití obrázků (ať už jejich výběr nebo nesprávný způsob použití a zveřejnění) se však může naopak pro některé návštěvníky webu stát bariérou.

Volba velikosti a umístění obrázků

Při uvažování o obrázcích přemýšlejte nejen o estetické stránce věci, ale také o tom, jaký bude mít obrázek vliv na použitelnost stránky na různých typech zařízení (počítač, tablet, mobilní telefon apod.).

Informace zakryté obrázky

Nevhodná velikost, umístění či nastavení pozice obrázků může v některých případech přístup k informacím na webu komplikovat.

Příkladem je situace, kdy při určitém zvětšení nebo orientaci stránky obrázek překryje část textu nebo stránky. Uživatel se tak nedostane k požadovaným informacím, případně nemá přístup k některým akcím či ovládacím prvkům. Protože webové stránky se dnes čtou nejen na obrazovce počítače, ale také na mobilních zařízeních, která mají nejrůznější rozlišení či orientaci, je při kontrole webu nebo stránky nutné věnovat pozornost tomu, zda jsou obrázky správně vloženy a nastaveny a zda nezakrývají text nebo jeho části, zejména navigaci nebo ovládací prvky webu či formuláře.

Nevhodná velikost nebo nevhodné umístění obrázku

Pokud jsou obrázky příliš velké a zakrývají celou viditelnou část stránky (nebo její podstatnou část) a informace jsou zároveň umístěny až pod obrázkem, může to pro uživatele být matoucí nebo obtěžující:

Uživatel po načtení stránky většinou očekává alespoň nějaké textové informace. Nemusí ho napadnout rolovat směrem dolů, protože obrázek může považovat např. za okno s reklamou, případně se může domnívat, že došlo k nějaké chybě a načetla se mu jen část požadované stránky.

Pokud uživatel potřebuje procházet více stránek na webu, kde je na každé stránce obrázek a teprve rolováním dolů se dostane k potřebné informaci, může toto rolování vnímat jako obtěžující a nepříjemné.

Velké obrázky mohou zpomalit načítání stránek.

Text ve formě obrázku

Jednou z překážek přístupnosti je prezentace textových informací formou obrázku. Pokud je to možné, „obrázkovému textu“ se raději vyhněte, protože pro návštěvníky webu, kteří používají odečítač obrazovky, jsou obrázky jako takové neviditelné. Také pro ty, kdo si webovou stránku z různých důvodů potřebují zvětšit, mohou být tyto obrázkové texty velkou komplikací (viz též Možnost zvětšení obsahu stránky). Na rozdíl od běžného textu je totiž text ve formě obrázku při určitém stupni zvětšení rozostřený (tzv. pixelizovaný).

Na obr. 1 vidíte ukázku rozostření obrázkového textu, ke kterému dojde při zvětšení obrázku/stránky.

Obr. 1: Rozostření textu ve formě obrázku při zvětšení stránky (zdroj: archiv autorky)

Jaké obrázky vybírat

Používejte obrázky vhodné pro danou cílovou skupinu. Jiné obrázky jsou vhodné pro děti, jiné pro odborný článek, jiné pro pozvánku na akci nebo instruktážní letáček.

Je vhodné používat jednotný styl obrázků. Např. pokud chceme ve výňatku z knihovního řádu použít piktogramy, měly by tyto piktogramy být ve stejném stylu. Pokud by byly obrázky různé (např. pokud je v jednom textu případě použita černobílá ikona pro jednu instrukci a barevná fotografie pro jinou), uživateli to nejen nepomáhá v rychlejší orientaci v informacích, ale může to naopak být rušivé a zavádějící (viz obr. 2).

Obr. 2: Nevhodná kombinace dvou nesourodých ikon (zdroj: Iconfinder[96] a archiv autorky)

Má-li obrázek ilustrovat text nebo myšlenku, měl by být jasný a srozumitelný a mělo by na něm být pokud možno jen to, co je smyslem sdělení. Např. pokud má být obrázek ilustrací čtenáře, měla by na něm být pouze čtoucí osoba a ne už další objekty.

Příklad správně vybrané ilustrace vidíte na obr. 3 vlevo. Z obrázku je na první pohled jasně patrné, že jde o čtoucí ženu. Na pravé straně obrázku vidíme sice také čtoucí ženu, ale postava je příliš malá a jsou kolem ní další objekty. Uživatel se na obrázku musí nejdříve zorientovat a na první pohled mu nemusí být jasné, o co na něm vlastně jde.

Obr. 3: Vhodně a nevhodně vybraný ilustrační obrázek (zdroj: Pixabay[97], získáno 2020-05-14)

Proč je správný výběr obrázků důležitý

Vhodné obrázky mohou pomoci v pochopení informace lidem, kteří mají nějaký problém s vnímáním informací. Jsou to např.:

lidé s mentálním postižením;

lidé s poruchami učení nebo soustředění;

lidé, pro které čeština není mateřským jazykem (např. cizinci, příslušníci národnostních menšin nebo neslyšící, pro něž je mateřským jazykem český znakový jazyk).

Alternativní popis obrázků a vložených videí

Někteří návštěvníci webových stránek nemohou vnímat obrázky. Informace ve formě obrázků a grafiky tito uživatelé nevidí, a to bez ohledu na to, zda jde o fotogalerie, infografiku, obrázkové mapy, tlačítka nebo např. menu ve formě obrázků. Pro tyto uživatele jsou dostupné pouze informace v textové podobě. K tomu, aby měli k obrázkovým informacím přístup, slouží alternativní popisky obrázků.

Pro koho jsou důležité alternativní popisky

Jsou to zejména:

nevidomí uživatelé webu, kteří pro „zobrazení“ stránky používají odečítač obrazovky nebo jiné alternativní výstupní zařízení (např. braillský řádek);

stroje, především webové vyhledávače, případně i některé programy či aplikace.

Alternativní popisky obrázků

V případě, že nevidomý uživatel webu používá odečítač obrazovky, odečítač mu sdělí, že jde o grafiku, a poté mu přečte alternativní text obrázku. Není-li alternativní text k dispozici, odečítače obvykle přečtou název obrázku.

Jako příklad si ukažme obrázek vykřičníku (viz obr. 4), sloužící k označení důležitých informací. Obrázek má název „vykr2.png“.

Obr. 4: Vykřičník (zdroj: archiv autorky)

Pokud u obrázku není uveden alternativní text, odečítač obrazovky tento obrázek přečte jako „Grafika vykr2png“.

Pokud je u obrázku uveden alternativní text „Pozor, důležitá informace“, odečítač obrazovky přečte obrázek jako „Grafika, Pozor, důležitá informace“.

Proto při práci s obrázky nezapomínejte na tato doporučení:

Pokud obrázek obsahuje nějakou informaci (např. jedná se tlačítko, logo, emotikon, piktogram apod.) a není jen doplňkovou ilustrací, je třeba přidat také alternativní text vysvětlující funkci obrázku. Alternativní text (ve zdrojovém kódu označovaný jako alt) je obvykle jedním z polí formuláře pro vložení a úpravu vlastností obrázku.

Na obr. 5 je zobrazeno dialogové okno pro vkládání a editaci obrázku. Popisek obrázku vkládáme do pole „Alternativní text“.

Obr. 5: Vkládání popisku obrázku v dialogovém okně pro úpravu obrázků (zdroj: Knihovna Jabok[98], získáno 2020-05-14)

Pokud jsou obrázky důležitou součástí obsahu sdělované informace (např. grafy, schémata nebo jakékoliv obrázky vysvětlují část informace, která není obsažena v textu), připojte slovní popis obrázku, případně i odkaz na zdrojová data (např. na tabulku, z níž byl graf vygenerován).

Jako příklad uvádíme graf znázorňující výsledky dotazu, zda knihovny věnují pozornost přístupnosti webových stránek (viz obr. 6).⁴³⁾
.
Obr. 6: Graf, který vyžaduje popis (zdroj: archiv autorky)

Pokud bychom do alternativního textu uvedli pouze „Graf – výsledky dotazu na přístupnost webů knihoven“, nevidomý uživatel by přišel o podstatné informace. Proto je důležité výsledky popsat slovně, např.: „cca 16 % respondentů má přístupné stránky, 9 % ví o problémech a řeší je, cca 24 % přístupnost neřešilo, cca 51 % neví, co přístupnost znamená“.

Pokud je popisek příliš dlouhý, je možné jej vložit přímo do textu (v tom případě už nemusíte uvádět v alternativním popisku detaily; stačí uvést např.: „Graf – výsledky dotazu na přístupnost webů knihoven“).

Pro obrázky, které jsou pouze ilustrační a nemají žádný vliv na význam sdělení, se používají prázdné uvozovky "".

Pokud je váš redakční systém správně nastaven, může vám práci s alternativními popisky obrázku usnadnit. Může za vás např. vkládat prázdné uvozovky k obrázkům, u kterých vy sami neuvedete alternativní text nebo upozornit, že alternativní text chybí.

Alternativní popisky vložených videí

Popisky je nutné vkládat i k videím vloženým do webové stránky.

Videa jsou do webových stránek vkládána jako vložené rámy s náhledem videa (ve formě tzv. iframe). Pomocí těchto náhledů může uživatel webu video ovládat nebo přejít na zdrojový server (např. YouTube). Zdrojový kód vloženého rámu je většinou možné zkopírovat na zdrojovém serveru (např. na YouTube je tato volba nabídnuta odkazem sdílet pod ikonou označenou znaky </>).

Pokud vložené video nemá popisek, uživatel s odečítačem obrazovky nemá možnost poznat, o jaké video jde, aniž by spustil přehrávání. To je pro něj velmi nepříjemné, obzvláště pokud se na stránce nachází více videí. Popis nebo nadpis umístěný v textu nestačí, protože uživatel s odečítačem obrazovky se k videu může dostat např. pomocí přesunu na další odkaz (náhled videa totiž obsahuje odkaz/tlačítko, které spouští/zastavuje video; navíc je, jak již bylo zmíněno, obvykle rovněž odkazem na zdrojový server).

Zdrojový kód rámů videa (tzv. iframe) proto doporučujeme opatřit názvem (prvek title). To umožní uživatelům, kteří používají odečítač obrazovky, zjistit, o jaké video jde, aniž by jej museli nejdříve spustit.

V následující ukázce zdrojového kódu pro vložení náhledu videa je na předposledním řádku vložen prvek title obsahující název videa (Jak si objednat doručení knih poštou – video). Právě tento text uživatelé uslyší z odečítače obrazovky a díky tomu se dozvědí, o jaké video jde, aniž by jej museli spustit.

<iframe
allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen="" frameborder="0" height="315"
src="https://www.youtube.com/embed/DlipENPNXN4"
title="Jak si objednat doručení knih poštou – video" width="560">
</iframe>

Doporučené zdroje

Přístupnost HTML5: textové alternativy obrázků (1/2) – teorie[99] – především část Kdy a jaký alt obrázku přiřadit

Přístupnost HTML5: Textové alternativy obrázků (2/2) – praxe[100]

⁴³⁾

Jde o jednu z otázek v rámci průzkumu bezbariérovosti služeb knihoven z roku 2014.

21. Formuláře

Přístupnost formulářů zahrnuje dva aspekty: ovladatelnost a srozumitelnost.

Ovladatelnost

Formulář musí být ovladatelný pouze z klávesnice, tj. mezi jednotlivými poli musí být možné se pohybovat pomocí klávesy tab (případně pomocí klávesové zkratky shift a tab), vybrat požadované hodnoty zaškrtávacích polí, rozbalovacích nabídek apod.

Srozumitelnost

Srozumitelnost formulářů zahrnuje jednoznačné a srozumitelné popisky polí a případně také přítomnost nápovědy, jak pole správně vyplnit.

Je také nutné označit, která pole jsou povinná. Označení povinných polí přitom musí být vnímatelné i pro uživatele, kteří používají odečítače obrazovky. To mimo jiné znamená, že nesmí být závislé pouze na vizuálním odlišení (např. barvou, tučným písmem). Vhodným označením je např. běžně používaná hvězdička.

Pokud není některé pole správně vyplněno, uživatel musí dostat srozumitelné chybové hlášení, ve kterém se dozví, které pole není v pořádku a jak je má správně vyplnit. Pokud uživatel vyplní nesprávně více polí formuláře, neměly by chyby být prezentovány jako seznam či souhrn v jednom chybovém hlášení. Vhodné je řešit chybová hlášení samostatně pro každou chybu a chyby patřičně vyznačit.

Při chybě uživatel nesmí ztratit již vyplněná data.

22. Multimediální obsah

V posledních letech se na webu objevuje čím dál více multimediálního obsahu v podobě zvuku nebo videa, případně také her nebo virtuální reality. Tyto formy informací webové stránky značně obohacují. Mohou však být zároveň zásadní překážkou přístupnosti, zejména pro lidi se zrakovým postižením, kteří nemohou vnímat vizuální informace, nebo pro lidi se sluchovým postižením, kteří nemohou naopak vnímat informace zvukové. Problém s vnímáním zvukových informací mohou mít také lidé, kteří neovládají jazyk, v němž jsou informace prezentovány.

Přístupnost multimediálních informací je možné řešit pomocí alternativní formy informací.

Pokud je na webové stránce použito video nebo jsou zařazeny zvukové nahrávky, je také nutné zajistit, aby bylo ovládání videí nebo spouštění zvukových nahrávek možné bez myši, pouze pomocí klávesnice.

Multimédia mohou být pro některé uživatele problematická, zejména pro jedince citlivé na některé světelné podněty, jako jsou záblesky, rychlé blikání apod. Tyto podněty se mohou stát spouštěčem fotoepileptického záchvatu, závratí apod.

Alternativní formy multimediálních informací

Aby uživatel se sluchovým nebo zrakovým postižením měl přístup k informacím na webových stránkách, nestačí, aby informace byly k dispozici pouze ve formě zvuku (či videa se zvukem) nebo nebo pouze obrazu videa. Informace je důležité poskytnout také alternativní formou.

Přepis zvuku do textu

Pro lidi se sluchovým postižením je nejjednodušší alternativou přepis zvuku do textu. Hodí se např. jako alternativa ke zvukovým dokumentům, jako jsou podcasty, u nichž není třeba synchronizovat obraz se zvukem.

V některých případech může být přepis vhodným řešením i pro video. Např. pokud jde o video se záznamem přednášky, kde přednášející pouze sedí nebo stojí, nepoužívá žádné prezentace, nepíše na tabuli, nekomunikuje s posluchači a nereaguje na jejich podněty, není problém využít jako alternativu videa text/přepis přednášky.

Přepis je ovšem nedostatečný v případě, kdy přednášející používá a komentuje prezentaci nebo komunikuje s posluchači apod. a je tedy nutné synchronizovat zvuk/jeho alternativu s obrazem. V takovém případě je kromě přepisu vhodné připojit titulky, aby divák, který nemůže vnímat zvuk, měl k dispozici také informace ke konkrétnímu snímku prezentace, k tomu, co lektor předvádí apod.

Popis obrazu pomocí textu pro lidi se zrakovým postižením

Pro lidi se zrakovým postižením může být v některých případech alternativou videa jeho přepis do textu, který obsahuje jak texty zvukových stop, tak popis videa.

Jak vypadá přepis videa v praxi, se můžete podívat např. na portálu Pelion. Článek Naučte se s NVDA: Prohlížení webu[101] je přepisem a překladem anglického videonávodu pro uživatele odečítače obrazovky NVDA.

Zvukový komentář k videu

Sledování videa usnadní lidem s postižením zraku zvukový komentář, který tam, kde to není jasné ze zvukové stopy videa, doplňuje informace o tom, co se děje na obrazovce. V uměleckých filmech to může být např. popis toho, že je zobrazena krajina s horami nebo že se stmívá, že postava sedí nebo vstává apod. V naučných videích a přednáškách to může být např. popis grafů, schémat nebo dalších důležitých informací, které jsou vnímatelné pouze zrakem.

Titulky

Pro média, v nichž je propojen obraz se zvukem, je vhodné využít titulky. Titulky by měly být synchronizovány se zvukem a měly by být přesným ekvivalentem mluveného slova, ať už jde o titulky ve stejném jazyce jako mluvené slovo nebo v jiném jazyce.

Z technického hlediska mohou být titulky skryté nebo otevřené. Skryté titulky je možné vypnout či zapnout. V přehrávačích je často také možné přizpůsobit font, velikost nebo pozadí titulků. Otevřené titulky jsou pevnou součástí videa a záleží na producentovi videa, jak titulky nastaví; uživatel nemá možnost si je přizpůsobit.

Titulky jsou zpravidla určeny pro lidi, kteří neovládají jazyk filmu, nebo pro neslyšící. Lidé, kteří neovládají jazyk použitý ve filmu (nebo jej ovládají pouze omezeně), mohou využít titulky v dalších jazycích nebo v jazyce filmu.

Titulky pro neslyšící jsou ekvivalentem mluveného slova, navíc však obsahují informace o dalších zvucích ve filmu (např. informaci o tom, že z dálky je slyšet přijíždějící auto, že štěká pes, že v kostele zní varhany, že se ozývá siréna).

Pokud vytváříte titulky k videím a můžete ovlivnit jejich vzhled, dbejte na dostatečný kontrast titulků vůči pozadí a dostatečnou velikost, aby byly dobře viditelné i pro ty, kteří vidí hůře.

Videa s informacemi ve znakovém jazyce

Pro lidi prelingválně neslyšící, pro které je znakový jazyk mateřským jazykem, je čeština jazykem cizím. Titulky nebo přepisy a textové informace pro ně tedy sice nejsou zcela nepřístupné, ale mohou pro ně být hůře vnímatelné (asi jako pro většinu česky hovořících lidí např. informace v němčině nebo v angličtině). Proto je vhodné některé důležité informace na webu poskytnout také ve formě videa se znakovým jazykem, která jsou zároveň doplněna titulky.

Tlumočení do znakového jazyka musí být v profesionální kvalitě, jinak může být znakový jazyk pro neslyšící hůře srozumitelný. Proto by informace ve videonahrávkách měli prezentovat profesionální tlumočníci do českého znakového jazyka nebo lidé, pro které je český znakový jazyk mateřským jazykem, nikoliv pracovníci knihovny, kteří většinou znakový jazyk ovládají pouze v omezené míře.

Pro potenciální uživatele knihovny však mohou být přínosem videonahrávky ve znakovém jazyce, v nichž se jim představí pracovníci knihovny, kteří znakový jazyk ovládají a pracují s lidmi se sluchovým postižením.

Obsahem videí ve znakovém jazyce mohou být např. základní informace o knihovně a jejích službách, o registraci do knihovny nebo o knihovním fondu. Při výběru tématu se můžete inspirovat příklady knihoven, které na svých webových stránkách nabízejí video pro neslyšící s informacemi v českém znakovém jazyce:

Krajská vědecká knihovna v Liberci[102];

Knihovna města Hradce Králové[103];

Knihovna Jiřího Mahena v Brně[104];

Moravskoslezská vědecká knihovna v Ostravě[105];

Městská knihovna Cvikov[106];

Krajská knihovna Karlovy Vary[107].

Výběr informací, které se mají prezentovat ve znakovém jazyce, je nutné dobře promyslet. Nezapomeňte, že informace je nutné udržovat neustále aktuální a zajistit aktualizaci videonahrávek ve znakovém jazyce při každé změně služeb, knihovního řádu apod.

Pokud knihovna nemá možnost operativně reagovat na změny služeb okamžitým zveřejněním nového videa ve znakovém jazyce (např. proto, že nemá rychle k dispozici profesionálního tlumočníka do znakového jazyka), doporučujeme do videonahrávek ve znakovém jazyce z praktických důvodů nezařazovat informace, které se často mění.

Ovladatelnost multimediálního obsahu bez myši

Pro nevidomé uživatele nebo pro uživatele s tělesným postižením či motorickými poruchami je důležité zajistit, aby veškerý multimediální obsah byl přístupný i bez použití myši.

Ve většině případů jsou videa na web vkládána pomocí náhledů, které jsou odkazem na video na YouTube nebo obdobnou službu. Zdrojový kód rámů videa (tzv. iframe) doporučujeme opatřit titulkem (prvek title), který obsahuje název videa. To uživatelům, kteří používají odečítač obrazovky, umožní zjistit, o jaké video jde, aniž by jej museli nejdříve spustit (viz též Alternativní popisky vložených videí).

23. Dokumenty

I když je tato příručka věnována především webu, nesmíme zapomínat, že přístupnost webu se netýká jen samotných webových stránek, ale i dalších elektronických dokumentů.

Při činnosti knihovny vzniká řada dokumentů, které slouží k interní nebo externí komunikaci se čtenáři, kolegy, zřizovatelem i dalšími subjekty, nejčastěji:

oficiální rozhodnutí a oznámení;

knihovní řády a ceníky;

smlouvy;

výroční zprávy nebo různé strategie;

přihlášky do knihovny, případně další formuláře;

pozvánky na akce;

vzdělávací a výukové materiály a metodiky;

elektronické knihy.

Všechny vznikající dokumenty by měly být vytvořeny přístupnou formou, a to bez ohledu na to, zda jsou zveřejněny na webu, posílány e-mailem, vkládány do e-learningových kurzů, informačních systémů, katalogů nebo repozitářů.

Některé aspekty přístupnosti (např. požadavky na funkčnost grafiky, zejména na dostatečný kontrast) se dokonce týkají i tištěných dokumentů.

Způsoby zpřístupnění dokumentů na webu

Část dokumentů, která je zveřejněna prostřednictvím webu, je zveřejněna ve formě webové stránky (tj. dokumentu v HTML). Některé dokumenty jsou však z praktických důvodů zveřejňovány v jiném formátu než HTML. Může jít např. o rozsáhlý knihovní řád, jehož převedení do HTML formátu by bylo problematické nebo velmi pracné. Dokumenty tohoto typu jsou obvykle zveřejněny ve formátu PDF, případně ve formátech kancelářského balíku MS Office (DOCX, XLSX, PPTX) nebo ve formátech pro LibreOffice (ODT, ODS, ODP), ve formátu TXT, případně jako archiv souborů (ZIP, RAR).

Pokud můžete, zveřejňuje své dokumenty ve formě HTML stránky (viz též Formát zveřejněných informací), protože k přečtení webové stránky – na rozdíl od dokumentu ke stažení – uživatel nepotřebuje mít nainstalován žádný program.⁴⁴⁾

Uživatel si také do svého zařízení nemusí zbytečně ukládat dokumenty, které pravděpodobně už nikdy znovu neotevře a jenom mu jen zabírají místo na počítači, v mobilu nebo v tabletu.

Jak zajistit, aby byl dokument přístupný

Někdy se zveřejnění informací ve formě dokumentu není možné vyhnout. V takovém případě je třeba zajistit, aby dokumenty byly přístupné.

Základem přístupnosti dokumentů je, aby dokument obsahoval textovou vrstvu a nebyl jen obrázkem.

Pokud je text pouze obrázkem:

je neviditelný pro odečítače obrazovky;

je neviditelný pro vyhledávače;

nelze jej rozumně zvětšit (při zvětšení dochází k rozostření, které ztěžuje čtení);

uživatelé jej nemohou kopírovat.

Textovou vrstvu neobsahují (a tudíž jsou nepřístupné) např. tyto typy dokumentů:

naskenované dokumenty, které neprošly procesem rozpoznání textu (optical character recognition, OCR);

snímky obrazovky nebo fotografie textu;

dokumenty vytvořené programy, jejichž výstupem jsou obrázky (tj. text je zde formou grafiky, nikoli skutečného textu; může jít např. o některé programy, ve kterých jsou vytvářeny plakáty, programy určené na tvorbu diagramů nebo myšlenkových map nebo některé platformy pro tvorbu prezentací – zcela nepřístupné jsou např. prezentace nebo vyexportovaná PDF vytvořená v programu Prezi).

Jak jednoduše poznat, že dokument obsahuje textovou vrstvu

Pokud dokument obsahuje textovou vrstvu, je možné označit části textu (slovo, větu, odstavec) a text zkopírovat do jiného dokumentu.

U dokumentů, které textovou vrstvu neobsahují, je možné kopírovat pouze výřezy stránky ve formě obrázku.

Vytvoření přístupného dokumentu

Při vytváření přístupného dokumentu platí podobné zásady jako při vytváření přístupných stránek:

Dokument by měl být srozumitelný.

Dokument by měl být srozumitelně pojmenován a obsahovat popisná metadata.

Dokument nesmí zabraňovat přístupu asistivních technologií a uživatelů k jeho obsahu např. pomocí nástrojů, které mají zabránit kopírování či šíření textu (problematická v tomto ohledu mohou být opatření používaná v knihovnách pro zpřístupnění textu na místě samém, některé ochranné prvky souborů ve formátu PDF aj.).

Dokument by měl být správně strukturován a pro nadpisy, seznamy, odstavce apod. by měly být používány styly. Pro tento účel vždy používejte odpovídající nástroje textového editoru. Nikdy nepoužívejte pouze nastavení písma.

K netextovým prvkům (obrázkům či multimédiím) připojte textový popis pomocí nástrojů textového procesoru či jiného nástroje (viz též Obrázky).

Dbejte na čitelnost textu (vyberte dostatečně velké a vhodné písmo, nastavte dostatečný rozestup mezi řádky či odstavci, zvolte vhodný kontrast barev, vyhněte se použití obrázku na pozadí, nepoužívejte efekty pro písmo, viz též Písmo a formátování textu).

Pro odkazy používejte srozumitelné zástupné texty, které dávají smysl samy o sobě, tedy bez okolního kontextu (viz též Odkazy).

Pro vytvoření souboru ve formátu PDF z kancelářských programů LibreOffice/OpenOffice nebo Microsoft Office použijte funkci pro export do PDF a při nastavení možností PDF vyberte vytvoření tagovaného PDF (se strukturou dokumentu⁴⁵⁾). Informace pro vytvoření PDF v programu Adobe Acrobat najdete v uživatelské příručce[108]. Nepoužívejte programy, které fungují jako virtuální tiskárna (např. PDF Creator). Ty totiž nezachovají strukturu dokumentu, takže se nevidomým uživatelům s takto vytvořeným dokumentem špatně pracuje.

Doporučené zdroje

Sedmero zásad pro přístupné PDF dokumenty[109]

Pravidla pro kontrolu přístupnosti[110] – podrobné informace k přístupnosti dokumentů v produktech firmy Microsoft (přestože jde informace týkající se konkrétního produktu, uvedené principy platí i pro ostatní kancelářské balíky nebo software pro tvorbu dokumentů)

⁴⁴⁾

Problematické může být např. otevření archivu souborů (ZIP, RAR) na mobilních zařízeních.

⁴⁵⁾

Ta je v tagovaných souborech zachycena pomocí skrytých značek. Název řady z nich se neliší od značek, které se běžně používají v jazyce HTML.

24. Zásady přístupného designu

Pokud bychom chtěli problematiku přístupnosti webu shrnout v několika bodech, můžeme tak učinit formulací základních zásad přístupného designu webových stránek. Většinu z nich je možné implementovat, aniž by bylo nutné slevit z požadavků na vzhled a celkový dojem z webových stánek.⁴⁶⁾

Poskytněte alternativní text

Alternativní text nabízí textovou alternativu k netextovému obsahu na webových stránkách. To je užitečné zejména pro nevidomé. Ti se spoléhají na odečítač obrazovky, který jim informace z webových stránek přečte.

Vytvořte logickou strukturu dokumentu

Nadpisy, seznamy a další obdobné prvky dávají webové stránce strukturu a smysl. Mohou také usnadnit navigaci na stránce pomocí klávesnice.

Uvádějte záhlaví tabulek

Tabulky musí mít obsahovat záhlaví řádků a sloupců (<th scope="row"> a <th scope="col">), aby se programově spojily s odpovídajícími buňkami (<td>). To uživatelům odečítačů obrazovky usnadní navigaci a pochopení tabulky.

Zajistěte, aby uživatelé mohli vyplňovat a odesílat všechny formuláře

Každý prvek formuláře (textové pole, zaškrtávací políčko, rozevírací seznam atd.) potřebuje programátorsky přiřazený popisek pole. Uživatelé musí mít možnost odeslat formulář a opravit chyby.

Vytvářejte odkazy, které dávají smysl bez kontextu

Každý odkaz by měl dávat smysl sám o sobě. Uživatelé s odečítačem obrazovky mohou zvolit, že chtějí na webové stránce číst pouze odkazy. Vyhněte se frázím typu „klikněte zde“, „více“ apod.

K multimediálním souborům poskytněte titulky a/nebo přepis

Videa a živě přenášený zvuk musí mít titulky a přepis. U archivovaného zvuku stačí přepis.

Zajistěte přístupnost dokumentů v PDF, dokumentů vytvořených ve Wordu a PowerPointu a dalšího obsahu, který nemá podobu HTML stránky

Dokumenty v PDF a další obsah, který nemá podobu HTML stránky, musí být co nejpřístupnější. Pokud tento obsah nemůžete zpřístupnit, zvažte místo toho použití HTML stránky nebo přinejmenším poskytněte přístupnou alternativu. Pro lepší přístupnost by také soubory v PDF měly být tagované. Tagovaný soubor v PDF sice vypadá stejně, ale obvykle je lépe přístupný pro osoby používající odečítač obrazovky.

Umožněte uživatelům přeskočit prvky, které se na stránkách opakují

Každá stránka by měla obsahovat možnost přeskočit navigaci nebo jiné prvky, které se opakují na každé stránce. K tomu obvykle slouží odkaz „Přeskočit na hlavní obsah“ nebo „Přeskočit navigaci“ v horní části stránky.

Při sdělení obsahu nespoléhejte pouze na barvu

Barva může přispět k lepšímu porozumění. Nesmí však být jediným způsobem sdělení obsahu, jinak by informace nebyly dostupné lidem s poruchami barvocitu a těm, kdo používají odečítač obrazovky.

Ujistěte se, že je obsah napsán jasně a je snadno čitelný

Pište jasně, používejte čisté fonty a nadpisy a seznamy používejte v souladu s logikou.

Vytvářejte přístupný JavaScript

Zajistěte, aby používání obslužných událostí v JavaScriptu nebylo závislé na zařízení (např. aby nevyžadovalo myš).

Vytvářejte web v souladu se standardy

Validní HTML a CSS podporují přístupnost tím, že zvyšují flexibilitu a robustnost kódu.

⁴⁶⁾

Tento text je překladem textu Principles of Accessible Design[111] na portále WebAIM (Web Accessibility in Mind)[112].

Manuál přístupné editace webu

Výběr z příručky Přístupné webové stránky
pro editory a správce webových stránek

Obsah

Titulní strana
(M.1) Vkládání obsahu na web
(M.2) Informace na webové stránce
(M.3) Nadpisy
(M.4) Seznamy
(M.5) Formátování textu
(M.6) Výběr vhodného fontu
(M.7) Zvýraznění textu
(M.8) Výběr a umístění obrázků
(M.9) Popisky obrázků a vložených videí
(M.10) Zástupný text odkazů
(M.11) Odkaz na jiný web nebo na dokument ke stažení
(M.12) Multimediální obsah
(M.13) Dokumenty

(M.1) Vkládání obsahu na web

I když je návrh konkrétního webu vytvořen tak, aby splňoval nároky na přístupnost pro osoby se specifickými potřebami, samo o sobě to nestačí. Záleží nejen na návrhu webu, ale také na tom, jak jsou informace na web vkládány. Pokud se při aktualizaci informací na webu nebere zřetel na požadavky přístupnosti, i web, který byl navržen jako přístupný, se může lehce stát velmi bariérovým.

Při vkládání informací ovlivňuje přístupnost stránky její struktura (název, nadpisy) a srozumitelnost informací. Značnou roli hraje také způsob, jakým se pracuje s odkazy na stránce, jak jsou voleny a vkládány obrázky, zda všechny texty a použité prvky mají dostatečný kontrast vůči pozadí, zda netextové prvky mají textovou alternativu. Záleží také na tom, zda jsou přístupné i dokumenty zveřejněné na webu nebo jakým způsobem jsou tyto dokumenty prezentovány (např. zda je uvedena informace o jejich velikosti a formátu).

Dobře nastavený redakční systém může velmi pomoci přístupnému vkládání informací, protože uživatel některé věci nemusí hlídat – systém to dělá za něj. Řada aspektů přístupnosti však naopak závisí přímo na tom, jak jsou informace zveřejněny. Proto je důležité, aby lidé, kteří s webovými stránkami pracují, vkládají na ně informace a upravují je, znali základní principy vkládání informací do redakčního systému formou přístupnou pro uživatele se specifickými potřebami a při editaci webových stránek tyto principy dodržovali.

Přehled základních doporučení a návodů pro vkládání informací přístupnou formou najdete v Manuálu přístupné editace webu. Je určen právě pro ty, kdo informace na web vkládají. Jako ukázky jsou použity příklady z konkrétní instalace redakčního systému Drupal⁴⁷⁾. Uvedené postupy jsou však obecně platné a jsou víceméně shodné napříč redakční systémy, studijními (či jinými) informačními systémy, e-learningovými nástroji atd. Tyto nástroje se obvykle liší spíše drobnostmi, např. názvy tlačítek nebo polí, případně vzhledem WYSIWYG editoru.

⁴⁷⁾

Konkrétně jde o web Jaboku – Vyšší odborné školy sociálně pedagogické a teologické a web Knihovny Jabok.

(M.2) Informace na webové stránce

Jedním z velmi důležitých (a přitom často opomíjených) aspektů přístupnosti je způsob, jakým jsou na celém webu i na jednotlivých stránkách prezentovány informace. Snadná srozumitelnost sdělení na webových stránkách je zásadní zejména pro uživatele webu s poruchami kognitivních funkcí. Přínosem je však také pro běžné uživatele webu.

Při tvorbě webové stránky je důležité promyslet, co chceme uživatelům webu sdělit. Při formulování textu může pomoci několik základních pravidel:

Důležité informace dávejte na začátek stránky. Může být vhodné na začátku stránky shrnout obsah příspěvku nebo nejdůležitější informace.

Informace uvádějte ve správném pořadí – snažte se, aby na sebe navazovaly.

Používejte výstižné názvy stránek a výstižné nadpisy v logické hierarchii (viz též Nadpisy).

Buďte konzistentní – pro tutéž věc používejte vždy stejný termín.

Uveďte všechny informace, které lidé potřebují, ale snažte se neuvádět zbytečné informace navíc.

Jazyk se snažte přizpůsobit předpokládaným uživatelům webu.

Nespoléhejte na to, že všichni znají zkratky nebo termíny, které používáte. Jste si opravdu jisti, že všichni návštěvníci vašeho webu vědí, co je signatura, knihovní fond, rešerše, absenční výpůjčka, referenční služby, MVS nebo DDS?

Pokud se odborným termínům nebo zkratkám nelze vyhnout, vysvětlete, co znamenají.

Pomozte uživatelům propojit informace pomocí odkazů. Např. pokud informujete o ceně služby, uveďte odkaz na ceník; pokud vytvoříte fotogalerii, propojte ji pomocí odkazu s akcí, ke které se fotografie vztahují.

Používejte označení odkazů, které informuje, kam odkaz vede i bez nutnosti číst okolní text (viz též Odkazy).

Nenuťte uživatele nad webem přemýšlet! Raději se vy sami zamyslete nad tím, co uživatelé potřebují, a připravte web i jednotlivé stránky tak, aby se každý uživatel co nejrychleji a nejjednodušeji dostal k informaci, kterou potřebuje.

(M.3) Nadpisy

Pro přístupnost webu je velmi důležité, aby nechyběl vhodný název stránky a aby byly nadpisy logicky uspořádané a výstižné.

Název stránky

Na každé webové stránce je nutné uvést název stránky. Název stránky je pak většinou zobrazen ve webovém prohlížeči jako název panelu nebo okna; obvykle se také použije jako nadpis první úrovně, viz obr. 1. V redakčních systémech bývá název stránky vyžadován jako povinné pole při vytváření nebo úpravě stránky, viz obr. 2. Název stránky je na ukázkových obrázcích pro přehlednost zvýrazněn červeným rámečkem.

Obr. 1: Zobrazení názvu stránky v nadpisu stránky a v názvu karty prohlížeče (zdroj: Knihovna Jabok[113], získáno 2020-05-11)

Obr. 2: Příklad zadání názvu stránky v editačním poli formuláře pro tvorbu stránky (zdroj: Knihovna Jabok[114], získáno 2020-05-13)

Proč je důležité uvádět název stránky

Název stránky:

se zobrazí v prohlížeči v záhlaví okna, případně panelu;

je údaj, který nevidomému uživateli přečte odečítač obrazovky;

je důležitý pro webové vyhledávače a může příznivě ovlivnit výsledky vyhledávání.

Nadpisy

Nadpisy jsou důležitým prvkem, který pomáhá uživatelům zorientovat se na stránce, a to bez ohledu na to, zda jde o uživatele s postižením nebo o běžného uživatele. Při tvorbě nadpisů je nutné dodržovat několik základních pravidel:

Používejte nadpisy, které vystihují, co daná stránka nebo její část obsahuje. Při tvorbě nadpisů je užitečné se zamyslet nad tím, jestli bude pro vaše uživatele srozumitelný.

Nadpisy nikdy nezvýrazňujte pomocí prvků pro změnu velikosti, řezu nebo barvy písma. Pro formátování nadpisů vždycky používejte předdefinované styly, které označují úroveň daného nadpisu. Styly obvykle vyberete pomocí rozbalovacího menu přímo v editoru redakčního systému (viz obr. 3).

Snažte se, aby na všech stránkách webu byly nadpisy používány jednotně.

Nadpisy uvádějte v logickém pořadí a ve srozumitelné hierarchické struktuře. Obvykle se používá níže uvedená hierarchie nadpisů (někdy mohou být úrovně nadpisů použity jinak, ale v každém případě by logicky nadřazený celek měl být označen nadpisem vyšší úrovně a logicky podřazený celek nadpisem nižší úrovně):

nadpis 1 pro název stránky (na každé stránce by se měl vyskytovat pouze jednou);

nadpis 2 pro názvy funkčních oblastí stránky nebo druhé úrovně hlavního obsahu stránky;

nadpis 3 až 6 pro názvy nižších úrovní.

Pokud chcete v redakčním systému zkontrolovat úroveň nadpisu, stačí na požadovaný nadpis nastavit kurzor. V nástroji pro výběr stylu se zobrazí použitý styl (úroveň) nadpisu (viz obr. 3).

Obr. 3: Výběr úrovně nadpisu v editoru redakčního systému pomocí rozbalovacího menu; šipkami jsou označeny rozbalovací menu, zvolená úroveň nadpisu a nadpis, se kterým se pracuje (zdroj: Knihovna Jabok[115], získáno 2020-05-11)

Existuje také řada speciálních nástrojů na kontrolu hierarchie nadpisů na stránce, např. doplněk prohlížeče HeadingsMap nebo validátor přístupnosti WAVE.

Na obr. 4 je pomocí značek H1 až H3 ⁴⁸⁾ označena hierarchická struktura na stránce s kontakty. Na skutečnou stránku se můžete podívat na adrese https://knihovna.jabok.cz/cs/kontakt[116].

Obr. 4: Hierarchická struktura nadpisů na stránce (zdroj: Knihovna Jabok[117], získáno 2020-05-13)

Proč je důležité správně vkládat nadpisy

Správné používání nadpisů nejen ušetří práci (není nutné se starat o formátování), ale především pomůže uživatelům správně se zorientovat v informacích na stránce.

Nadpisy jsou obzvláště důležité pro nevidomé návštěvníky webu. Ti se díky nim efektivně dostanou právě k těm informacím, které potřebují, aniž by jim hlasový odečítač obrazovky musel předčítat obsah celé stránky (odečítač umožňuje procházení nadpisů na stránce s možností volby úrovně nadpisu).

Nadpisy jsou důležité také pro stroje. Správná struktura nadpisů je jedním z nástrojů optimalizace pro vyhledávače (search engine optimization, SEO) a může výrazně zvýšit umístění stránky ve výsledcích vyhledávání.

⁴⁸⁾

H1 až H6 jsou značky používané v kódu HTML pro sémantické označení prvku heading, tedy nadpisu.

(M.4) Seznamy

Seznamy mohu významně přispět k přehlednosti informací. Pokud text obsahuje výčet položek, je tento výčet vhodné uvést formou číslovaného nebo nečíslovaného seznamu. Seznam s odrážkami je vždy srozumitelnější než výčet položek na řádku oddělený čárkami.

Proč je důležité správně vytvářet seznamy

Pro uživatele s kognitivními poruchami jsou seznamy s odrážkami přehlednější než položky uvedené v textu a oddělené pouze čárkou.

Seznamy pomáhají pochopit strukturu problému nebo si dát jednotlivé položky do souvislosti.

V seznamech se lépe orientují i uživatelé s některými poruchami zraku a také nevidomí, kteří používají odečítač obrazovky. Pokud je seznam správně vytvořen, odečítač obrazovky pozná a přečte, že se jedná o seznam, kolik má seznam položek, jakou úroveň v seznamu má daná položka atd., takže nevidomý návštěvník webu může se seznamem efektivněji pracovat.

V ukázce na obr. 1 je seznam elektronických zdrojů knihovny uvedený formou nečíslovaného seznamu. Obr. 2 zachycuje stejné informace v běžném textu odstavce. Ze srovnání obou příkladů je zřejmé, že v seznamu s odrážkami se uživatel zorientuje snadněji a rychleji.

Srozumitelnosti seznamu pomáhá také to, když jsou jednotlivé položky spíše kratší.

Obr. 1: Použití nečíslovaného seznamu na webové stránce knihovny (zdroj: Knihovna Jabok[118], získáno 2020-05-13)

Obr. 2: Nesprávně uvedený seznam, ve kterém je výčet položek uveden formou běžného odstavce (zdroj: Knihovna Jabok[119], ukázka vytvořená pro příručku, získáno 2020-05-13)

Formátování seznamu

Seznamy vytvářejte pomocí tlačítka pro formátování číslovaných nebo nečíslovaných seznamů (viz obr. 3). Rozhodně nevytvářejte položky číslovaných seznamů ručním vepsáním čísla položky ani položky nečíslovaných seznamů vložením hvězdičky, pomlčky apod.

Obr. 3: Tlačítko pro vytvoření číslovaného seznamu (zdroj: Knihovna Jabok[120], získáno 2020-05-13)

Odsazení víceúrovňového seznamu nebo vytvoření nižší úrovně víceúrovňového seznamu vytvářejte vždy tlačítkem pro zvětšení odsazení textu (viz obr. 4). Nikdy nepoužívejte ručně vložený znak pro mezeru.

Obr. 4: Tlačítko pro zvětšení odsazení textu (zdroj: Knihovna Jabok[121], získáno 2020-05-13)

Mám použít nečíslovaný, nebo číslovaný seznam?

Nečíslovaný seznam

Pokud vyjmenováváte položky, které nemají návaznost nebo posloupnost, použijte nečíslovaný seznam. Např. pokud na web uvedete seznam témat nápovědy ke správě osobních údajů ve čtenářském kontě, změna pořadí položek je možná (přestože pořadí těchto položek může mít určitou logiku), viz např.:

Aktivace čtenářského konta

Přihlášení do čtenářského konta

Změna hesla

Zapomenuté heslo

Změna přihlašovacího jména

Změna e-mailu

Změna adresy

Číslovaný seznam

Pokud na sebe vyjmenované položky navazují v přesném pořadí a žádnou nelze (bez narušení řady nebo postupu) vynechat, je na místě použít číslovaný seznam. Ten vyjadřuje neměnnou posloupnost nebo sled navazujících kroků. Příkladem může být nápověda k aktivaci čtenářského konta, např.:

V online katalogu klikněte na tlačítko „Moje konto“.

Do pole „Číslo průkazu“ zadejte čárový kód průkazu.

Do pole „Heslo nebo PIN“ zadejte heslo (čtyřmístný číselný kód), který jste dostali při registraci.

(M.5) Formátování textu

Formátování textu webové stránky je většinou přednastaveno v redakčním systému. Níže uvedené informace se však týkají také tvorby dokumentů v textovém procesoru, které později na web vkládáte.

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ý 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.

Text zarovnávejte doleva, nikdy do bloku (při zarovnání textu do bloku vznikají mezery, které mohou ztěžovat čtení textu).

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 čte lépe?⁴⁹⁾

Obr. 3: Text s malým rozestupem mezi řádky a odstavci (zdroj: archiv autorky)

Obr. 4: Text s dostatečným rozestupem mezi řádky a odstavci (zdroj: archiv autorky)

⁴⁹⁾

První blok textu s malým rozestupem mezi řádky se čte hůře než „vzdušněji“ formátovaný text druhého bloku.

(M.6) Výběr vhodného fontu

Fonty jsou většinou v redakčním systému předdefinovány a editor stránek pouze vybírá z nabídky stylů. Níže uvedené informace o fontech využijete, máte-li v redakčním systému možnost volby písma nebo pokud tvoříte v textovém procesoru dokumenty, které budete později na web vkládat.

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, 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í:

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;

texty psané pouze velkými písmeny;

fonty s typografickými zvláštnostmi.

Ukázky nedoporučených písem si můžete prohlédnout na obr. 1.

Obr. 1: Ukázka neobvyklých fontů, jejichž použití na webu je vhodné se vyhnout (zdroj: archiv autorky)

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 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.⁵⁰⁾

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.

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.

Který se vám čte lépe?⁵¹⁾

Obr. 2: Srovnání úzkého fontu s tenkými linkami a běžného písma (zdroj: archiv autorky)

⁵⁰⁾

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 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).

⁵¹⁾

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.

(M.7) Zvýraznění textu

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 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

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.

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 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.

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 i 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.

(M.8) Výběr a umístění obrázků

Obrázky mohou webové stránky příjemně oživit a mohou napomoci lepšímu porozumění informacím. Špatně použití obrázků (ať už jejich výběr nebo nesprávný způsob použití a zveřejnění) se však může pro některé návštěvníky webu naopak stát bariérou.

Volba velikosti a umístění obrázků

Při uvažování o obrázcích přemýšlejte nejen o estetické stránce věci, ale také o tom, jaký bude mít obrázek vliv na použitelnost stránky na různých typech zařízení (počítač, tablet, mobilní telefon apod.).

Informace zakryté obrázky

Nevhodná velikost, umístění či nastavení pozice obrázků může v některých případech přístup k informacím na webu komplikovat.

Příkladem je situace, kdy při určitém zvětšení nebo orientaci stránky obrázek překryje část textu nebo stránky. Uživatel se tak nedostane k požadovaným informacím, případně nemá přístup k některým akcím či ovládacím prvkům. Protože webové stránky se dnes čtou nejen na obrazovce počítače, ale také na mobilních zařízeních, která mají nejrůznější rozlišení či orientaci, je při kontrole webu nebo stránky nutné věnovat pozornost tomu, zda jsou obrázky správně vloženy a nastaveny a zda nezakrývají text nebo jeho části, zejména navigaci nebo ovládací prvky webu či formuláře.

Nevhodná velikost nebo nevhodné umístění obrázku

Pokud jsou obrázky příliš velké a zakrývají celou viditelnou část stránky (nebo její podstatnou část) a informace jsou zároveň umístěny až pod obrázkem, může to pro uživatele být matoucí nebo obtěžující:

Uživatel po načtení stránky většinou očekává alespoň nějaké textové informace. Nemusí ho napadnout rolovat směrem dolů, protože obrázek může považovat např. za okno s reklamou, případně se může domnívat, že došlo k nějaké chybě a načetla se mu jen část požadované stránky.

Pokud uživatel potřebuje procházet více stránek na webu, kde je na každé stránce obrázek a teprve rolováním dolů se dostane k potřebné informaci, může toto rolování vnímat jako obtěžující a nepříjemné.

Velké obrázky mohou zpomalit načítání stránek.

Text ve formě obrázků

Jednou z překážek přístupnosti je prezentace textových informací formou obrázku. Pokud je to možné, „obrázkovému textu“ se raději vyhněte, protože pro návštěvníky webu, kteří používají odečítač obrazovky, jsou obrázky jako takové neviditelné. Také pro ty, kdo si webovou stránku z různých důvodů potřebují zvětšit, mohou být tyto obrázkové texty velkou komplikací (viz též Možnost zvětšení obsahu stránky). Na rozdíl od běžného textu je totiž text ve formě obrázku při určitém stupni zvětšení rozostřený (tzv. pixelizovaný).

Na obr. 1 vidíte ukázku rozostření obrázkového textu, ke kterému dojde při zvětšení obrázku/stránky.

Obr. 1: Rozostření textu ve formě obrázku při zvětšení stránky (zdroj: archiv autorky)

Výběr obrázků

Používejte obrázky vhodné pro danou cílovou skupinu. Jiné obrázky jsou vhodné pro děti, jiné pro odborný článek, jiné pro pozvánku na akci nebo instruktážní letáček.

Je vhodné používat jednotný styl obrázků. Např. pokud chceme ve výňatku z knihovního řádu použít piktogramy, měly by tyto piktogramy být ve stejném stylu. Pokud by byly obrázky různé (např. pokud je v jednom textu případě použita černobílá ikona pro jednu instrukci a barevná fotografie pro jinou), uživateli to nejen nepomáhá v rychlejší orientaci v informacích, ale může to naopak být rušivé a zavádějící (viz obr. 2).

Obr. 2: Nevhodná kombinace dvou nesourodých ikon (zdroj: Iconfinder[122] a archiv autorky)

Má-li obrázek ilustrovat text nebo myšlenku, měl by být jasný a srozumitelný a mělo by na něm být pokud možno jen to, co je smyslem sdělení. Např. pokud má být obrázek ilustrací čtenáře, měla by na něm být pouze čtoucí osoba a ne už další objekty.

Příklad správně vybrané ilustrace vidíte na obr. 3 vlevo. Z obrázku je na první pohled jasně patrné, že jde o čtoucí ženu. Na pravé straně obrázku vidíme sice také čtoucí ženu, ale postava je příliš malá a jsou kolem ní další objekty. Uživatel se na obrázku musí nejdříve zorientovat a na první pohled mu nemusí být jasné, o co na něm vlastně jde.

Obr. 3: Vhodně a nevhodně vybraný ilustrační obrázek (zdroj: Pixabay[123], získáno 2020-05-14)

Proč je správný výběr obrázků důležitý

Vhodné obrázky mohou pomoci v pochopení informace lidem, kteří mají nějaký problém s vnímáním informací. Jsou to např.:

lidé s mentálním postižením;

lidé s poruchami učení nebo soustředění;

lidé, pro které čeština není mateřským jazykem (např. cizinci, příslušníci národnostních menšin nebo neslyšící, pro něž je mateřským jazykem český znakový jazyk).

(M.9) Popisky obrázků a vložených videí

Někteří návštěvníci webových stránek nemohou vnímat obrázky. Informace ve formě obrázků a grafiky tito uživatelé nevidí, a to bez ohledu na to, zda jde o fotogalerie, infografiku, obrázkové mapy, tlačítka nebo např. menu ve formě obrázků. Pro tyto uživatele jsou dostupné pouze informace v textové podobě. K tomu, aby měli k obrázkovým informacím přístup, slouží alternativní popisky obrázků.

Pro koho jsou důležité alternativní popisky

Jsou to zejména:

nevidomí uživatelé webu, kteří pro „zobrazení“ stránky používají odečítač obrazovky nebo jiné alternativní výstupní zařízení (např. braillský řádek);

stroje, především webové vyhledávače, případně i některé programy či aplikace.

Alternativní popisky obrázků

V případě, že nevidomý uživatel webu používá odečítač obrazovky, odečítač mu sdělí, že jde o grafiku, a poté mu přečte alternativní text obrázku. Není-li alternativní text k dispozici, odečítače obvykle přečtou název obrázku.

Jako příklad si ukažme obrázek vykřičníku (viz obr. 4), sloužící k označení důležitých informací. Obrázek má název „vykr2.png“.

Obr. 4: Vykřičník (zdroj: archiv autorky)

Pokud u obrázku není uveden alternativní text, odečítač obrazovky tento obrázek přečte jako „Grafika vykr2png“.

Pokud je u obrázku uveden alternativní text „Pozor, důležitá informace“, odečítač obrazovky přečte obrázek jako „Grafika, Pozor, důležitá informace“.

Proto při práci s obrázky nezapomínejte na tato doporučení:

Pokud obrázek obsahuje nějakou informaci (např. jedná se tlačítko, logo, emotikon, piktogram apod.) a není jen doplňkovou ilustrací, je třeba přidat také alternativní text vysvětlující funkci obrázku. Alternativní text (ve zdrojovém kódu označovaný jako alt) je obvykle jedním z polí formuláře pro vložení a úpravu vlastností obrázku.

Na obr. 5 je zobrazeno dialogové okno pro vkládání a editaci obrázku. Popisek obrázku vkládáme do pole „Alternativní text“.

Obr. 5: Vkládání popisku obrázku v dialogovém okně pro úpravu obrázků (zdroj: Knihovna Jabok[124], získáno 2020-05-14)

Pokud jsou obrázky důležitou součástí obsahu sdělované informace (např. grafy, schémata nebo jakékoliv obrázky vysvětlují část informace, která není obsažena v textu), připojte slovní popis obrázku, případně i odkaz na zdrojová data (např. na tabulku, z níž byl graf vygenerován).

Jako příklad uvádíme graf znázorňující výsledky dotazu, zda knihovny věnují pozornost přístupnosti webových stránek (viz obr. 6).⁵²⁾
.
Obr. 6: Graf, který vyžaduje popis (zdroj: archiv autorky)

Pokud bychom do alternativního textu uvedli pouze „Graf – výsledky dotazu na přístupnost webů knihoven“, nevidomý uživatel by přišel o podstatné informace. Proto je důležité výsledky popsat slovně, např.: „cca 16 % respondentů má přístupné stránky, 9 % ví o problémech a řeší je, cca 24 % přístupnost neřešilo, cca 51 % neví, co přístupnost znamená“.

Pokud je popisek příliš dlouhý, je možné jej vložit přímo do textu (v tom případě už nemusíte uvádět v alternativním popisku detaily; stačí uvést např.: „Graf – výsledky dotazu na přístupnost webů knihoven“).

Pro obrázky, které jsou pouze ilustrační a nemají žádný vliv na význam sdělení, se používají prázdné uvozovky "".

Pokud je váš redakční systém správně nastaven, může vám práci s alternativními popisky obrázku usnadnit. Může za vás např. vkládat prázdné uvozovky k obrázkům, u kterých vy sami neuvedete alternativní text nebo upozornit, že alternativní text chybí.

Alternativní popisky vložených videí

Popisky je nutné vkládat i k videím vloženým do webové stránky.

Videa jsou do webových stránek vkládána jako vložené rámy s náhledem videa (ve formě tzv. iframe). Pomocí těchto náhledů může uživatel webu video ovládat nebo přejít na zdrojový server (např. YouTube). Zdrojový kód vloženého rámu je většinou možné zkopírovat na zdrojovém serveru (např. na YouTube je tato volba nabídnuta odkazem sdílet pod ikonou označenou znaky </>).

Pokud vložené video nemá popisek, uživatel s odečítačem obrazovky nemá možnost poznat, o jaké video jde, aniž by spustil přehrávání. To je pro něj velmi nepříjemné, obzvláště pokud se na stránce nachází více videí. Popis nebo nadpis umístěný v textu nestačí, protože uživatel s odečítačem obrazovky se k videu může dostat např. pomocí přesunu na další odkaz (náhled videa totiž obsahuje odkaz/tlačítko, které spouští/zastavuje video; navíc je, jak již bylo zmíněno, obvykle rovněž odkazem na zdrojový server).

Zdrojový kód rámů videa (tzv. iframe) proto doporučujeme opatřit názvem (prvek title). To umožní uživatelům, kteří používají odečítač obrazovky, zjistit, o jaké video jde, aniž by jej museli nejdříve spustit.

V následující ukázce zdrojového kódu pro vložení náhledu videa je na předposledním řádku vložen prvek title obsahující název videa (Jak si objednat doručení knih poštou – video). Právě tento text uživatelé uslyší z odečítače obrazovky a díky tomu se dozvědí, o jaké video jde, aniž by jej museli spustit.

<iframe
allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen="" frameborder="0" height="315"
src="https://www.youtube.com/embed/DlipENPNXN4"
title="Jak si objednat doručení knih poštou – video" width="560">
</iframe>

Doporučené zdroje

Přístupnost HTML5: textové alternativy obrázků (1/2) – teorie[125] – především část Kdy a jaký alt obrázku přiřadit

Přístupnost HTML5: Textové alternativy obrázků (2/2) – praxe[126]

⁵²⁾

Jde o jednu z otázek v rámci průzkumu bezbariérovosti služeb knihoven z roku 2014.

(M.10) Zástupný text odkazů

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. 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, Více zde, Pro více informací klikněte zde apod. objevují na webových stránkách v sekci aktuality (viz příklady na obr. 2 a 3).

Obr. 2: Nesprávné použití zástupného textu Více zde; bez okolního kontextu uživatel nezjistí, čeho se odkaz týká (zdroj: obec Oplany[127], získáno 2020-05-15)

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: Ministerstvo práce a sociálních věcí ČR[128], získáno 2020-05-15)

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.

Obr. 4: Správně použité zástupné texty odkazů, které dávají smysl samy o sobě, tedy bez okolního textu (zdroj: Knihovna Jabok[129], získáno 2020-05-15)

Dalšími případy bývají odkazy na různé oficiální dokumenty. Typickým příkladem použití nevhodného zástupného textu je např. věta: „Informace o cenách služeb najdete zde.“ Zástupný text odkazu na dokumenty, např. na ceník, však může být jednoduše řešen např. jedním z těchto způsobů:

„Podrobnosti o cenách služeb najdete v Ceníku“;

„Podrobnosti o ceně služeb viz Ceník“;

„Ceník služeb“.

Čím kratší odkaz, tím lépe. Proto někdy bývá nejlepší ta nejjednodušší varianta, tedy použití prostého názvu dokumentu (v našem případě „Ceník služeb“).

Proč je důležité, aby odkazy dávaly smysl i bez okolního textu

Odkaz označený výrazem „zde“ přestavuje velký problém pro ty, kdo používají odečítač obrazovky, a snaží se procházet stránku po odkazech. Pokud je pro zástupný text odkazů použit např. výraz „zde“, uživatel opakovaně slyší odkaz „zde“, který mu však sám o sobě nic neřekne.

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 pohybují klávesou tab.

(M.11) Odkaz na jiný web nebo na dokument ke stažení

V některých případech je vhodné připojit k odkazu vysvětlení, kam odkaz vede, zejména pokud:

jde o dokument ke stažení, k jehož otevření je nutná další aplikace nebo program;

odkaz směřuje na jiný (externí) web.

Někdy je cíl odkazu dostatečně zřejmý z formulace ze zástupného textu, např.:

„Informace k zákonu o přístupnosti na webu Ministerstva vnitra ČR“;

„Portál Knihovny.cz“;

„Sdílené album na Rajče.cz“.

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č), je nutné přímo do zástupného textu odkazu (nikoliv až za odkaz) připojit informaci o typu a velikosti dokumentu. Např.:

„E-knihovna MuniSpace (externí odkaz)“;

„Zákon o přístupnosti webu a webových aplikací – odkaz na samostatný web“;

„Knihovní řád (PDF, 1,2 MB)“;

„Ceník služeb ve formátu PDF, 215 kB“ nebo „Ceník služeb ve formátu DOCX, 250 kB“.

U některých webů může být u externích odkazů automaticky zobrazena ikona symbolizující, že jde o externí odkaz (většinou čtvereček se šipkou směřující vpravo nahoru, viz obr. 5). I v tomto případě je však třeba zajistit textovou variantu informace, např. ve formě alternativního textu k obrázku (ten může být nastaven na úrovni redakčního systému).

Obr. 5: Ikona symbolizující otevření odkazu na externím webu

Jak zjistit informace o velikosti souboru ve Windows

Informaci o velikosti souboru zjistíte ve Složce dokumentů (Průzkumník) po najetí myší nad ikonu souboru nebo v sekci Podrobnosti v levém navigačním sloupci. Informace se zobrazí při najetí myši na ikonu/název souboru, viz obr. 6).

Obr. 6: Informace o souboru v Průzkumníku ve Windows

V programu Total Commander se po označení souboru (např. klávesou insert nebo kliknutím myši) zobrazí informace o velikosti označeného souboru v dolní liště panelu. Lze ji zobrazit také v nabídce Soubor > Vlastnosti (viz obr. 7).

Obr. 7: Informace o velikosti souboru v programu Total Commander

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 ž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 nebo nekvalitnímu připojení.

(M.12) Multimediální obsah

V posledních letech se na webu objevuje čím dál více multimediálního obsahu v podobě zvuku nebo videa, případně také her nebo virtuální reality. Tyto formy informací webové stránky značně obohacují. Mohou však být zároveň zásadní překážkou přístupnosti, zejména pro lidi se zrakovým postižením, kteří nemohou vnímat vizuální informace, nebo pro lidi se sluchovým postižením, kteří nemohou naopak vnímat informace zvukové. Problém s vnímáním zvukových informací mohou mít také lidé, kteří neovládají jazyk, v němž jsou informace prezentovány.

Přístupnost multimediálních informací je možné řešit pomocí alternativní formy informací.

Pokud je na webové stránce použito video nebo jsou zařazeny zvukové nahrávky, je také nutné zajistit, aby bylo ovládání videí nebo spouštění zvukových nahrávek možné bez myši, pouze pomocí klávesnice.

Multimédia mohou být pro některé uživatele problematická, zejména pro jedince citlivé na některé světelné podněty, jako jsou záblesky, rychlé blikání apod. Tyto podněty se mohou stát spouštěčem fotoepileptického záchvatu, závratí apod.

Alternativní formy multimediálních informací

Aby uživatel se sluchovým nebo zrakovým postižením měl přístup k informacím na webových stránkách, nestačí, aby informace byly k dispozici pouze ve formě zvuku (či videa se zvukem) nebo nebo pouze obrazu videa. Informace je důležité poskytnout také alternativní formou.

Přepis zvuku do textu

Pro lidi se sluchovým postižením je nejjednodušší alternativou přepis zvuku do textu. Hodí se např. jako alternativa ke zvukovým dokumentům, jako jsou podcasty, u nichž není třeba synchronizovat obraz se zvukem.

V některých případech může být přepis vhodným řešením i pro video. Např. pokud jde o video se záznamem přednášky, kde přednášející pouze sedí nebo stojí, nepoužívá žádné prezentace, nepíše na tabuli, nekomunikuje s posluchači a nereaguje na jejich podněty, není problém využít jako alternativu videa text/přepis přednášky.

Přepis je ovšem nedostatečný v případě, kdy přednášející používá a komentuje prezentaci nebo komunikuje s posluchači apod. a je tedy nutné synchronizovat zvuk/jeho alternativu s obrazem. V takovém případě je kromě přepisu vhodné připojit titulky, aby divák, který nemůže vnímat zvuk, měl k dispozici také informace ke konkrétnímu snímku prezentace, k tomu, co lektor předvádí apod.

Popis obrazu pomocí textu pro lidi se zrakovým postižením

Pro lidi se zrakovým postižením může být v některých případech alternativou videa jeho přepis do textu, který obsahuje jak texty zvukových stop, tak popis videa.

Jak vypadá přepis videa v praxi, se můžete podívat např. na portálu Pelion. Článek Naučte se s NVDA: Prohlížení webu[130] je přepisem a překladem anglického videonávodu pro uživatele odečítače obrazovky NVDA.

Zvukový komentář k videu

Sledování videa usnadní lidem s postižením zraku zvukový komentář, který tam, kde to není jasné ze zvukové stopy videa, doplňuje informace o tom, co se děje na obrazovce. V uměleckých filmech to může být např. popis toho, že je zobrazena krajina s horami nebo že se stmívá, že postava sedí nebo vstává apod. V naučných videích a přednáškách to může být např. popis grafů, schémat nebo dalších důležitých informací, které jsou vnímatelné pouze zrakem.

Titulky

Pro média, v nichž je propojen obraz se zvukem, je vhodné využít titulky. Titulky by měly být synchronizovány se zvukem a měly by být přesným ekvivalentem mluveného slova, ať už jde o titulky ve stejném jazyce jako mluvené slovo nebo v jiném jazyce.

Z technického hlediska mohou být titulky skryté nebo otevřené. Skryté titulky je možné vypnout či zapnout. V přehrávačích je často také možné přizpůsobit font, velikost nebo pozadí titulků. Otevřené titulky jsou pevnou součástí videa a záleží na producentovi videa, jak titulky nastaví; uživatel nemá možnost si je přizpůsobit.

Titulky jsou zpravidla určeny pro lidi, kteří neovládají jazyk filmu, nebo pro neslyšící. Lidé, kteří neovládají jazyk použitý ve filmu (nebo jej ovládají pouze omezeně), mohou využít titulky v dalších jazycích nebo v jazyce filmu.

Titulky pro neslyšící jsou ekvivalentem mluveného slova, navíc však obsahují informace o dalších zvucích ve filmu (např. informaci o tom, že z dálky je slyšet přijíždějící auto, že štěká pes, že v kostele zní varhany, že se ozývá siréna).

Pokud vytváříte titulky k videím a můžete ovlivnit jejich vzhled, dbejte na dostatečný kontrast titulků vůči pozadí a dostatečnou velikost, aby byly dobře viditelné i pro ty, kteří vidí hůře.

Videa s informacemi ve znakovém jazyce

Pro lidi prelingválně neslyšící, pro které je znakový jazyk mateřským jazykem, je čeština jazykem cizím. Titulky nebo přepisy a textové informace pro ně tedy sice nejsou zcela nepřístupné, ale mohou pro ně být hůře vnímatelné (asi jako pro většinu česky hovořících lidí např. informace v němčině nebo v angličtině). Proto je vhodné některé důležité informace na webu poskytnout také ve formě videa se znakovým jazykem, která jsou zároveň doplněna titulky.

Tlumočení do znakového jazyka musí být v profesionální kvalitě, jinak může být znakový jazyk pro neslyšící hůře srozumitelný. Proto by informace ve videonahrávkách měli prezentovat profesionální tlumočníci do českého znakového jazyka nebo lidé, pro které je český znakový jazyk mateřským jazykem, nikoliv pracovníci knihovny, kteří většinou znakový jazyk ovládají pouze v omezené míře.

Pro potenciální uživatele knihovny však mohou být přínosem videonahrávky ve znakovém jazyce, v nichž se jim představí pracovníci knihovny, kteří znakový jazyk ovládají a pracují s lidmi se sluchovým postižením.

Obsahem videí ve znakovém jazyce mohou být např. základní informace o knihovně a jejích službách, o registraci do knihovny nebo o knihovním fondu. Při výběru tématu se můžete inspirovat příklady knihoven, které na svých webových stránkách nabízejí video pro neslyšící s informacemi v českém znakovém jazyce:

Krajská vědecká knihovna v Liberci[131];

Knihovna města Hradce Králové[132];

Knihovna Jiřího Mahena v Brně[133];

Moravskoslezská vědecká knihovna v Ostravě[134];

Městská knihovna Cvikov[135];

Krajská knihovna Karlovy Vary[136].

Výběr informací, které se mají prezentovat ve znakovém jazyce, je nutné dobře promyslet. Nezapomeňte, že informace je nutné udržovat neustále aktuální a zajistit aktualizaci videonahrávek ve znakovém jazyce při každé změně služeb, knihovního řádu apod.

Pokud knihovna nemá možnost operativně reagovat na změny služeb okamžitým zveřejněním nového videa ve znakovém jazyce (např. proto, že nemá rychle k dispozici profesionálního tlumočníka do znakového jazyka), doporučujeme do videonahrávek ve znakovém jazyce z praktických důvodů nezařazovat informace, které se často mění.

Ovladatelnost multimediálního obsahu bez myši

Pro nevidomé uživatele nebo pro uživatele s tělesným postižením či motorickými poruchami je důležité zajistit, aby veškerý multimediální obsah byl přístupný i bez použití myši.

Ve většině případů jsou videa na web vkládána pomocí náhledů, které jsou odkazem na video na YouTube nebo obdobnou službu. Zdrojový kód rámů videa (tzv. iframe) doporučujeme opatřit titulkem (prvek title), který obsahuje název videa. To uživatelům, kteří používají odečítač obrazovky, umožní zjistit, o jaké video jde, aniž by jej museli nejdříve spustit (viz též Alternativní popisky vložených videí).

(M.13) Dokumenty

I když je tato příručka věnována především webu, nesmíme zapomínat, že přístupnost webu se netýká jen samotných webových stránek, ale i dalších elektronických dokumentů.

Při činnosti knihovny vzniká řada dokumentů, které slouží k interní nebo externí komunikaci se čtenáři, kolegy, zřizovatelem i dalšími subjekty, nejčastěji:

oficiální rozhodnutí a oznámení;

knihovní řády a ceníky;

smlouvy;

výroční zprávy nebo různé strategie;

přihlášky do knihovny, případně další formuláře;

pozvánky na akce;

vzdělávací a výukové materiály a metodiky;

elektronické knihy.

Všechny vznikající dokumenty by měly být vytvořeny přístupnou formou, a to bez ohledu na to, zda jsou zveřejněny na webu, posílány e-mailem, vkládány do e-learningových kurzů, informačních systémů, katalogů nebo repozitářů.

Některé aspekty přístupnosti (např. požadavky na funkčnost grafiky, zejména na dostatečný kontrast) se dokonce týkají i tištěných dokumentů.

Způsoby zpřístupnění dokumentů na webu

Část dokumentů, která je zveřejněna prostřednictvím webu, je zveřejněna ve formě webové stránky (tj. dokumentu v HTML). Některé dokumenty jsou však z praktických důvodů zveřejňovány v jiném formátu než HTML. Může jít např. o rozsáhlý knihovní řád, jehož převedení do HTML formátu by bylo problematické nebo velmi pracné. Dokumenty tohoto typu jsou obvykle zveřejněny ve formátu PDF, případně ve formátech kancelářského balíku MS Office (DOCX, XLSX, PPTX) nebo ve formátech pro LibreOffice (ODT, ODS, ODP), ve formátu TXT, případně jako archiv souborů (ZIP, RAR).

Pokud můžete, zveřejňuje své dokumenty ve formě HTML stránky (viz též Formát zveřejněných informací), protože k přečtení webové stránky – na rozdíl od dokumentu ke stažení – uživatel nepotřebuje mít nainstalován žádný program.⁵³⁾

Uživatel si také do svého zařízení nemusí zbytečně ukládat dokumenty, které pravděpodobně už nikdy znovu neotevře a jenom mu jen zabírají místo na počítači, v mobilu nebo v tabletu.

Jak zajistit, aby byl dokument přístupný

Někdy se zveřejnění informací ve formě dokumentu není možné vyhnout. V takovém případě je třeba zajistit, aby dokumenty byly přístupné.

Základem přístupnosti dokumentů je, aby dokument obsahoval textovou vrstvu a nebyl jen obrázkem.

Pokud je text pouze obrázkem:

je neviditelný pro odečítače obrazovky;

je neviditelný pro vyhledávače;

nelze jej rozumně zvětšit (při zvětšení dochází k rozostření, které ztěžuje čtení);

uživatelé jej nemohou kopírovat.

Textovou vrstvu neobsahují (a tudíž jsou nepřístupné) např. tyto typy dokumentů:

naskenované dokumenty, které neprošly procesem rozpoznání textu (optical character recognition, OCR);

snímky obrazovky nebo fotografie textu;

dokumenty vytvořené programy, jejichž výstupem jsou obrázky (tj. text je zde formou grafiky, nikoli skutečného textu; může jít např. o některé programy, ve kterých jsou vytvářeny plakáty, programy určené na tvorbu diagramů nebo myšlenkových map nebo některé platformy pro tvorbu prezentací – zcela nepřístupné jsou např. prezentace nebo vyexportovaná PDF vytvořená v programu Prezi).

Jak jednoduše poznat, že dokument obsahuje textovou vrstvu

Pokud dokument obsahuje textovou vrstvu, je možné označit části textu (slovo, větu, odstavec) a text zkopírovat do jiného dokumentu.

U dokumentů, které textovou vrstvu neobsahují, je možné kopírovat pouze výřezy stránky ve formě obrázku.

Vytvoření přístupného dokumentu

Při vytváření přístupného dokumentu platí podobné zásady jako při vytváření přístupných stránek:

Dokument by měl být srozumitelný.

Dokument by měl být srozumitelně pojmenován a obsahovat popisná metadata.

Dokument nesmí zabraňovat přístupu asistivních technologií a uživatelů k jeho obsahu např. pomocí nástrojů, které mají zabránit kopírování či šíření textu (problematická v tomto ohledu mohou být opatření používaná v knihovnách pro zpřístupnění textu na místě samém, některé ochranné prvky souborů ve formátu PDF aj.).

Dokument by měl být správně strukturován a pro nadpisy, seznamy, odstavce apod. by měly být používány styly. Pro tento účel vždy používejte odpovídající nástroje textového editoru. Nikdy nepoužívejte pouze nastavení písma.

K netextovým prvkům (obrázkům či multimédiím) připojte textový popis pomocí nástrojů textového procesoru či jiného nástroje (viz též Obrázky).

Dbejte na čitelnost textu (vyberte dostatečně velké a vhodné písmo, nastavte dostatečný rozestup mezi řádky či odstavci, zvolte vhodný kontrast barev, vyhněte se použití obrázku na pozadí, nepoužívejte efekty pro písmo, viz též Písmo a formátování textu).

Pro odkazy používejte srozumitelné zástupné texty, které dávají smysl samy o sobě, tedy bez okolního kontextu (viz též Odkazy).

Pro vytvoření souboru ve formátu PDF z kancelářských programů LibreOffice/OpenOffice nebo Microsoft Office použijte funkci pro export do PDF a při nastavení možností PDF vyberte vytvoření tagovaného PDF (se strukturou dokumentu⁵⁴⁾). Informace pro vytvoření PDF v programu Adobe Acrobat najdete v uživatelské příručce[137]. Nepoužívejte programy, které fungují jako virtuální tiskárna (např. PDF Creator). Ty totiž nezachovají strukturu dokumentu, takže se nevidomým uživatelům s takto vytvořeným dokumentem špatně pracuje.

Doporučené zdroje

Sedmero zásad pro přístupné PDF dokumenty[138]

Pravidla pro kontrolu přístupnosti[139] – podrobné informace k přístupnosti dokumentů v produktech firmy Microsoft (přestože jde informace týkající se konkrétního produktu, uvedené principy platí i pro ostatní kancelářské balíky nebo software pro tvorbu dokumentů)

⁵³⁾

Problematické může být např. otevření archivu souborů (ZIP, RAR) na mobilních zařízeních.

⁵⁴⁾

Ta je v tagovaných souborech zachycena pomocí skrytých značek. Název řady z nich se neliší od značek, které se běžně používají v jazyce HTML.

Kontrolní seznam pro ověřování

I když nejste správcem webu a nerozumíte tvorbě webových stránek, můžete sami zkontrolovat řadu aspektů přístupnosti svého webu. Pomůže vám v tom níže uvedený seznam:

Informace na webových stránkách jsou srozumitelně formulovány; termíny, kterým by uživatelé nemuseli rozumět, jsou vysvětleny.

Použité obrázky jsou vhodně zvolené pro cílovou skupinu webu tak, aby jednoznačně vystihovaly obsah sdělení.

Informace jsou čitelné a srozumitelné, i když na stránce není možné zobrazit obrázky.

Důležité informace (kontakt, provozní doba, služby pro osoby se specifickými potřebami aj.) jsou dostupné hned na první stránce, případně pomocí maximálně jednoho až dvou kliknutí na odkaz.

Text je všude na webu snadno čitelný a není rušen málo kontrastními barvami nebo rušivými vzorky na pozadí.

Pro kontrolu kontrastu lze využít např. validátor kontrastu nebo validátor přístupnosti.

Název stránky vystihuje obsah.

Stránky mají logickou hierarchii nadpisů, která je vyjádřena také graficky (nadpis vyšší úrovně je výraznější než nadpis nižší úrovně).

Hierarchii nadpisů můžete zkontrolovat pomocí některého z nástrojů na kontrolu struktury nadpisů.

Navigace je srozumitelná a je na všech stránkách na stejném místě.

Stránka je ovladatelná i bez použití myši pomocí klávesnice, tj. uživatel se dostane na všechny aktivní prvky (hypertextové odkazy, formulářová pole) a může je ovládat.

Ovládání pomocí klávesnice by mělo fungovat takto:

klávesou tab přesunete kurzor na další odkaz nebo aktivní prvek,

pomocí klávesy enter potvrzujete akce a otevíráte odkazy,

pomocí šipek se posunujete na stránce nahoru a dolů,

mezerník umožňuje výběr možností ve formulářích.

Odkazy jsou funkční (vedou, kam mají).

Pro kontrolu můžete použít některý z validátorů funkčnosti odkazů, např. W3C Link Checker[140].

Do pole validátoru zadejte adresu svých webových stránek. Pokud chcete zkontrolovat funkčnost odkazů na celém webu, zaškrtněte pole Check linked documents recursively. Pokud toto pole nezaškrtnete, zkontrolují se pouze odkazy na stránce, jejíž adresu jste zadali (pravděpodobně půjde o úvodní stránku webu).

Počítejte s tím, že kontrola může trvat delší dobu.

Odkazy jsou srozumitelné (je jasné, kam vedou) i bez okolního kontextu.

Je označeno, že se odkaz otevře v novém okně nebo že jde o specifický typ souboru. U dokumentů ke stažení je uvedena jejich velikost.

Dokumenty ke stažení splňují zásady přístupnosti.

Při zvětšení textu v prohlížeči na počítači nebo na mobilním zařízení nedochází ke ztrátě funkčnosti stránek.

Zkontrolujte zejména, zda obrázky nepřekrývají text nebo zda se na stránce nezobrazují „useknuté“ texty nebo bloky, jejichž část nelze zobrazit.
Na počítači stránku zvětšíte pomocí kombinace kláves ctrl a +. Test můžete doplnit zmenšením okna prohlížeče.

Na mobilním zařízení nedochází k žádné ztrátě funkčnosti.

K zobrazení stránky na mobilním zařízení není nutné horizontální posouvání.

Ve formuláři jsou povinná pole označena způsobem, který nevyžaduje vizuální vnímání informací (pouhé barevné označení tedy nestačí).

Instrukce k vyplnění formuláře jsou umístěny na začátku formuláře nebo pole ještě před vyplněním. Uživatel má zpětnou vazbu o správném vyplnění pole, chybách nebo o tom, co má udělat pro odeslání formuláře.

Při akcích směřujících ke změnám (např. finanční transakce nebo úpravy údajů) má uživatel možnost jednotlivé kroky potvrdit nebo odmítnout, případně vrátit.

Multimediální prvky obsahují titulky a/nebo přepis.

Stránky neobsahují rychlé animace, blikání nebo záblesky ani další prvky, které by citlivým uživatelům mohly způsobit záchvaty.

Webové stránky obsahují prohlášení o přístupnosti.

Kontrola hierarchie nadpisů

Hierarchii nadpisů webové stránky je možné zkontrolovat ve zdrojovém kódu. Ten však může být dlouhý a nepřehledný. Ne každý také ovládá jazyk HTML. Při kontrole správné struktury webové stránky v takovém případě pomohou různé online nástroje nebo doplňky webového prohlížeče pro kontrolu hierarchie nadpisů. Existuje jich celá řada; v této příručce představujeme dva z nich.

WAVE – Web Accessibility Evaluation Tool

WAVE je online validátor, do něhož stačí zadat adresu stránky. WAVE má celou řadu funkcí, kromě hierarchie nadpisů zobrazuje i další informace o struktuře stránky, o prvcích, které jsou na stránce použity, o potenciálních chybách, problémech s kontrastem apod.

Použití validátoru je velmi jednoduché:

Na webové stránce validátoru https://wave.webaim.org/[141] zadejte do pole Web page address adresu stránky, jejíž strukturu chcete zkontrolovat.

Validátor detekuje jednotlivé prvky a výsledkem je zobrazení stránky, v níž jsou pomocí ikon zobrazeny oblasti stránky, její struktura, potenciální chyby přístupnosti apod. Hierarchii nadpisů je možné zobrazit po otevření karty Structure na boční liště vpravo.

Podrobnosti o použití validátoru najdete v samostatné nápovědě.

Na obr. 1 vidíte ukázku části výstupu hodnocení stránky Knihovny Jabok pomocí validátoru WAVE. Nadpisy jsou přímo ve stránce vyznačeny modrými kolečky. Na levé straně stránky vidíte informační lištu s rozbaleným panelem zobrazujícím strukturu stránky.

Obr. 1: Část výstupu hodnocení stránky Knihovny Jabok pomocí validátoru WAVE s vyznačenou hierarchií nadpisů (zdroj: Knihovna Jabok[142], získáno 2020-05-10)

HeadingsMap

HeadingsMap je doplněk webového prohlížeče, který vytvoří hierarchii nadpisů stránky a upozorní na případné chyby. Je dostupný pro prohlížeče Chrome[143] a Firefox[144].

Po instalaci doplňku HeadingsMap do prohlížeče se na horní liště vpravo vedle vyhledávacího řádku zobrazí ikona doplňku .

Po kliknutí na ni se na pravé straně otevře lišta, ve které je zobrazena hierarchie nadpisů stránky. Jsou zde také vyznačeny případné chyby.

Na obr. 2 vidíte příklad zobrazení hierarchie stránky o registraci do Knihovny Jabok pomocí doplňku HeadingsMap.

Obr. 2: Zobrazení hierarchie stránky pomocí nástroje HeadingsMap (zdroj: Knihovna Jabok[145], získáno 2020-05-10)

Jak zkontrolovat hierarchii nadpisů v textových dokumentech

Pokud chcete zkontrolovat hierarchii nadpisů dokumentu ve Wordu (případně v jiném textovém procesoru), stačí si vygenerovat obsah dokumentu.

Postup se liší v jednotlivých aplikacích nebo i verzích jedné aplikace; obvykle je však tato možnost ukryta pod funkcí vložit obsah, případně vložit odkazy.

Ověření kontrastu

Jedním z nástrojů, který umožňuje zjistit, zda kontrast textu a pozadí stránky odpovídá požadavkům na přístupnost, je WebAIM Contrast Checker[146]. Je sice dostupný pouze v angličtině, ale jeho rozhraní je jednoduché a intuitivní.

Validátor kontrastu je užitečným nástrojem zejména při tvorbě webu a hledání vhodných barevných kombinací. Pro kontrolu kontrastu již existujících webových stránek je vhodný spíše validátor přístupnosti WAVE, který je s validátorem kontrastu propojen. Pro existující stránky lze případně také použít validátor kontrastu v kombinaci s některým z nástrojů, který z webové stránky umí získat hexadecimální kód použité barvy (např. ColorZilla).

Obecné informace a doporučení týkající se kontrastu (nejen pro webové vývojáře) najdete v přehledném článku Barevný kontrast na webu a nástroje, které s ním pomohou[147].

Práce s validátorem WebAIM Contrast Checker

Ve webovém prohlížeči zadejte adresu validátoru: https://webaim.org/resources/contrastchecker/[148] (viz obr. 1).

Obr. 1: Rozhraní nástroje WebAIM Contrast Checker (zdroj: WebAIM Contrast Checker[149], získáno 2020-04-27)

Do pole Foreground Color zadejte požadovanou hexadecimální hodnotu barvy popředí, tj. písma (pro změnu barvy je obvykle nutné použít klávesu enter).

Do pole Background Color zadejte požadovanou hexadecimální hodnotu barvy pozadí (pro změnu barvy je obvykle nutné použít klávesu enter).

V případě potřeby použijte posuvník pro úpravu jasu barvy (Lightness).

Jak zjistit hodnotu barev na pozadí nebo popředí stránky

Pro zjištění hodnoty barvy pozadí je možné použít validátor přístupnosti WAVE, se kterými je WebAIM Contrast Checker propojen. Využít lze také doplněk prohlížeče ColorZilla.

Výsledky testování kontrastu

Vedle polí pro zadání barev popředí a pozadí se ve validátoru zobrazuje číselný poměr kontrastu (Ratio). Nejmenší přijatelný poměr kontrastu je 4,5:1.

Dole se pak zobrazuje, zda výsledek splňuje požadavky na vhodný kontrast podle velikosti textu. Nechybějí ani příklady zobrazení textu v uvedených barvách pro úroveň přístupnosti AA a úroveň AAA (podle metodiky WCAG).

V případě, že je podle metodiky WCAG kontrast v pořádku, zobrazí se zeleně zvýrazněný text Pass. Pokud je kontrast nevyhovující, zobrazí se červený text Fail (viz obr. 2).

Obr. 2: Výsledky testování kontrastu (zdroj: WebAIM Contrast Checker[150], získáno 2020-04-27)

Pokud chcete odkaz s výsledky testu kontrastu sdílet (e-mailem apod.), klikněte na odkaz Permalink pod číselným poměrem kontrastu a poté zkopírujte adresu v adresním řádku prohlížeče.

Testování kontrastu pomocí validátoru přístupnosti WAVE

WebAIM Contrast Checker je součástí validátoru přístupnosti WAVE. Pokud se na testované stránce vyskytne problém nízkého kontrastu textu a pozadí, díky validátoru je možné zjistit poměr kontrastu přímo z hodnocení webové stránky:

Do validátoru na adrese https://wave.webaim.org/[151] zadejte adresu požadované stránky.

Po načtení výsledků validace zvolte na šedé boční liště vlevo záložku Contrast.

Kliknutím vyberte ikonu označující nízký kontrast prvku, který chcete zkontrolovat .

Na boční liště se zobrazí výsledek kontroly kontrastu nástrojem WebAIM Contrast Checker (viz obr. 3).

Obr. 3: Výsledky testování kontrastu ve validátoru WAVE (zdroj: WAVE[152], získáno 2020-04-27)

Podrobnosti o validátoru WAVE najdete v samostatné nápovědě.

Zjištění barev

Ke zjištění barev můžete využít doplněk webového prohlížeče nazvaný ColorZilla. Ten umí (mimo jiné) z webové stránky získat tzv. hexadecimální kód barvy, kterým se ve zdrojovém kódu webové stránky definuje barva. Hexadecimální kód barvy lze využít také pro kontrolu kontrastu ve validátoru kontrastu.

Instalace doplňku ColorZilla

Ve webovém prohlížeči Chrome nebo Firefox zadejte adresu https://www.colorzilla.com/[153].

Z nabídky zvolte ColorZilla for Chrome and Firefox. Další nabídka se přizpůsobí vašemu prohlížeči; některé detaily se proto mohou lišit.

Klikněte na tlačítko Install ColorZilla (většinou je u tlačítka uvedena také verze rozšíření).

Klikněte na tlačítko Přidat do Chromu, resp. Přidat do Firefoxu.

Dokončete instalaci doplňku (včetně udělení potřebných oprávnění).

Po instalaci se v pravém horním rohu prohlížeče vedle adresního řádku objeví doplněk ColorZilla ve formě ikony se symbolem kapátka, viz obr. 1.

Obr. 1: Zástupce rozšíření ColorZilla v prohlížeči (zdroj: archiv autorky)

Získání barvy z webové stránky pomocí volby Color Picker

Klikněte na ikonu nástroje ColorZilla (na kapátko). Tím aktivujete nástroj pro výběr barev. Pod ikonou kapátka by se po kliknutí na ikonu měl zobrazit text Page Color Picker Active. V případě, že se tento text po kliknutí na ikonu nezobrazí, v otevřené nabídce klikněte na položku Color Picker (viz obr. 2).

Obr. 2: Aktivace nástroje Color Picker (zdroj: archiv autorky)

Kurzor se změní v křížek a v horní části prohlížeče pod adresním řádkem se vysune černá lišta. Čtvereček na liště zobrazuje barvu oblasti stránky, na které se právě nachází kurzor (viz obr. 3)⁵⁵⁾.

Obr. 3: Výběr barvy z webové stránky (zdroj: archiv autorky)

Vyberte požadovanou oblast stránky a klikněte na ni myší. Vybraná barva se vloží do paměti (historie) nástroje ColorZilla.

Pokud potřebujete zjistit barvu písma a písmo je příliš malé, takže je problém umístit na ně kurzor, můžete si zobrazení stránky zvětšit pomocí kombinace kláves ctrl a +.

Kliknutím na ikonu nástroje ColorZilla otevřete nabídku a vyberte z ní položku Color Picker. Zobrazí se nástroj pro úpravu barev.

Z historie uložených barev (Color History) napravo vyberte kliknutím čtvereček s požadovanou barvou a dole zkopírujte hodnotu hexadecimálního kódu barvy (viz obr. 4). Tento kód pak můžete zadat do validátoru kontrastu nebo do kódu webové stránky.

Obr. 4: Historie vybraných barev (zdroj: archiv autorky)

Získání barev pomocí volby Webpage Color Analyzer

Využít lze také nástroj pro hromadnou analýzu barev v definici webové stránky, tzv. Webpage Color Analyzer.

Klikněte na ikonu nástroje ColorZilla (na kapátko).

Z rozbalovací nabídky zvolte položku Webpage Color Analyzer. V horní části stránky se zobrazí okno s přehledem použitých barev (viz obr. 5).⁵⁶⁾

Obr. 5: Zobrazení barev pomocí volby Webpage Color Analyzer (zdroj: Knihovny.cz[154], získáno 2020-08-25)

Pokud na některou z barev kliknete myší, zobrazí se informace o dané barvě a stylech na stránce, ve kterých je použita (viz obr. 6).

Obr. 6: Zobrazení informací o vybrané barvě pomocí nástroje Webpage Color Analyzer (zdroj: archiv autorky)

⁵⁵⁾

Jako příklad byl použit web Národní knihovny ČR.

⁵⁶⁾

Jako příklad byl použit portál Knihovny.cz.

Celkové ověření přístupnosti

K celkovému ověření přístupnosti můžete použít online validátor WAVE – Web Accessibility Evaluation Tool. Je k dispozici pouze v angličtině, jeho použití je však poměrně jednoduché.

Na webové stránce validátoru https://wave.webaim.org/[155] zadejte do pole Web page address adresu stránky, jejíž strukturu chcete zkontrolovat (viz obr. 1).

Obr. 1: Vstupní stránka validátoru přístupnosti WAVE (zdroj: WAVE[156], získáno 2020-05-11)

Validátor nabízí celou řadu funkcí a informací týkajících se stránky či potenciálních chyb přístupnosti, které se na stránce vyskytují. Jde zejména o informace o struktuře stránky (oblastech stránky, hierarchii nadpisů) a o prvcích a jejich správnému použití z hlediska přístupnosti (např. upozornění na chybějící popisky obrázků).

Validátory jsou velmi užitečné nástroje. Nesmíme však zapomínat, že žádný validátor sám o sobě pro kontrolu přístupnosti nestačí, protože odhalí jen některé problémy z oblasti spíše „technické“ přístupnosti stránek. Přístupnost se ale netýká jen technických záležitostí nebo správné syntaxe zdrojového kódu stránky, ale např. i toho:

jak jsou stránky strukturovány a jakou strukturu má celý web;

jak je přehledná navigace;

zda jsou nadpisy na stránce nebo texty odkazů výstižné;

jestli se uživatel snadno dostane ke všem informacím, které potřebuje;

jestli tyto informace jsou napsány srozumitelně.

Naopak ne všechno, co validátor označí jako potenciální chybu, musí opravdu být chybou. Vždy je nutné, aby výsledky hodnocení provedl nejen stroj, ale i člověk.

Zobrazení hodnocené stránky

Informace o hodnocené stránce jsou zobrazeny přímo na podkladě dané webové stránky formou ikon, které zastupují jednotlivé prvky nebo ikony kontrolované stránky. Pokud kliknete myší na konkrétní ikonu, je červenou tečkovanou čárou vyznačena oblast, ke které se daná ikona validátoru vztahuje.

Zároveň se rozbalí informace o daném prvku nebo chybě s možností zobrazení reference (informace o typu prvku nebo chyby s upozorněním, na co je nutné si dát pozor, proč je daný prvek důležitý, co bývá častou chybou) nebo zobrazení zdrojového kódu, který se daného prvku či chyby týká.

Jak je patrné z konkrétního příkladu (viz obr. 2), na pravé straně je vidět rozbalená informace o navigačním menu rychlých odkazů.⁵⁷⁾

Obr. 2: Rozhraní validátoru WAVE na příkladu webu Knihovny Jabok (zdroj: WAVE[158], získáno 2020-05-10)

Boční lišta s přehledy a nástroji

Na levé straně obrazovky se zobrazí šedomodrá lišta s přehledem jednotlivých prvků a případných chyb.⁵⁸⁾ Tato lišta obsahuje několik záložek:

Summary (Souhrn);

Details (Detaily);

Reference (Reference);

Structure (Struktura);

Contrast (Kontrast).

Souhrn

Příklad souhrnu prvků a chyb, které se na stránce vyskytují, včetně jejich počtu je k dispozici na obr. 3. Přehled je výchozím zobrazením validátoru při načtení výsledků hodnocení přístupnosti stránky.

Obr. 3: Přehled výsledků hodnocení přístupnosti na boční liště validátoru WAVE (zdroj: WAVE[161], získáno 2020-05-11)

Detaily

Chyby či prvky přítomné na stránce jsou v detailním přehledu uvedeny jednotlivě pomocí ikon. Po kliknutí na ikonu v přehledu se zobrazí část stránky, která daný prvek obsahuje. Prvek je zároveň dočasně zvýrazněn bliknutím na stránce, případně červeným přerušovaným orámováním.

Obr. 4 zachycuje detailní výpis prvků/chyb na stránce. V detailním výpisu byl vybrán prvek Table header (záhlaví tabulky), který se zobrazil také ve výsledcích hodnocení stránky.

Obr. 4: Prvek Table header (záhlaví tabulky) v detailním výpis prvků a chyb na stránce (zdroj: WAVE[162], získáno 2020-05-11)

U každého typu prvku/chyby se zobrazuje kulatá ikona s i. Po kliknutí na ni se v liště zobrazí reference (obecné informace) k dané chybě nebo prvku.

Reference

Na záložce Reference se zobrazí informace o typu prvku nebo chyby s upozorněním, na co si dát pozor, proč je daný prvek důležitý nebo co bývá častou chybou, viz obr. 5. Tato záložka je kontextová, takže při načtení stránky do validátoru nabízí výpis referencí. Jinak se na ní zobrazují kontextové informace k jednotlivým prvkům, a to po kliknutí na ikonu i (v detailním výpisu chyb na boční liště) nebo na odkaz Reference (u detailního popisu jednotlivého prvku přímo ve webové stránce).

Na obr. 5 vidíme napravo nadpis třetí úrovně Vybrat instituci. Na levém bočním panelu validátoru je vybrána karta Reference, proto se zobrazují obecné informace k hierarchii nadpisů, konkrétně nadpisu třetí úrovně (<h3>).

Obr. 5: Ukázka reference k nadpisům webové stránky (zdroj: WAVE[163], získáno 2020-05-11)

Struktura

Na obr. 6 je na záložce Structure je zobrazena hierarchie nadpisů na stránce, která slouží ke kontrole správnosti struktury stránky. Zobrazeno je i upozornění na chybějící úroveň nadpisů.

Pokud kliknete na konkrétní prvek v zobrazené hierarchii nadpisů na boční liště, daný prvek se zobrazí ve výsledcích validace stránky a zároveň se zvýrazní červeným tečkovaným rámečkem.

Dále vidíme, že nadpis třetí úrovně Vybrat instituci, který byl vybrán kliknutím na boční liště, je ve výsledcích hodnocení stránky zvýrazněn červeným rámečkem.

Obr. 6: Zobrazení hierarchie nadpisů ve validátoru WAVE (zdroj: WAVE[164], získáno 2020-05-11)

Kontrast

Na záložce Contrast na pravé boční liště validátoru WAVE je možné zobrazit informace o chybách kontrastu textu vůči pozadí na stránce.

V horní části boční lišty se zobrazuje validátor kontrastu a pod ním jsou ikony, které zastupují jednotlivá problematická místa. Validátor WAVE je propojen s nástrojem WebAIM Contrast Checker, takže po kliknutí na dílčí ikonu na liště se ve validátoru zobrazí informace o kontrastu daného prvku vůči pozadí (viz obr. 7). V případě potřeby je možné posuvníkem validátoru vybrat vhodnou kombinace barev popředí a pozadí. Podrobný návod k nástroji WebAIM Contrast Checker najdete na samostatné stránce.

Obr. 7: Výsledky hodnocení kontrastu textu a pozadí ve validátoru WAVE (zdroj: WAVE[165], získáno 2020-05-11)

⁵⁷⁾

Výsledky hodnocení si můžete prohlédnout přímo v rozhraní validátoru WAVE[157].

⁵⁸⁾

Jako ilustrační obrázky byly použity výsledky validátoru pro stránku https://www.knihovny.cz/Record/vkol.SVK01-001292736[159]. Výsledky hodnocení si můžete prohlédnout přímo v rozhraní validátoru WAVE[160].

Požadavky při výběrovém řízení

Níže uvedený seznam obsahuje reálný příklad požadavků na přístupnost v rámci zadávací dokumentace pro tvorbu webové prezentace knihovny. Přestože dnes lze pro zadávací dokumentaci využít také metodický pokyn Ministerstva vnitra ČR k zákonu o přístupnosti[166], obdobný seznam může sloužit jako kontrolní nástroj při předávání hotové webové prezentace.⁵⁹⁾

Požadujeme dodržení pravidel přístupnosti pro uživatele se specifickými potřebami v souladu s metodickým pokynem Ministerstva vnitra ČR k zákonu o přístupnosti (https://www.mvcr.cz/soubor/metodicky-pokyn-pristupnost-internetovych-stranek-a-mobilnich-aplikaci-pdf.aspx[167]) a metodikou WCAG 2.1 (https://www.w3.org/TR/WCAG21/[168]), zejména:

Web dodržuje specifikaci HTML 5 a neobsahuje syntaktické chyby, které je možné odstranit.

Web má responzivní design vhodný pro tablety a mobilní telefony.

V šabloně webu i při vkládání obsahu jsou správně využívány sémantické značky označující strukturu dokumentu, zejména nadpisy, seznamy. Tyto značky naopak nejsou používány tam, kde netvoří strukturu dokumentu.

Pro definici rozložení stránek nejsou využívány tabulky.

Všechny ovládací prvky stránky i veškerý obsah jsou dostupné při ovládání z klávesnice (bez použití myši), zejména všechny úrovně menu, odkazy na stránce, formuláře a další aktivní prvky.

Aktuální aktivní prvek je při procházení pomocí klávesnice (klávesa tab) vizuálně odlišen od ostatních ovládacích prvků nebo navigace na základě tzv. focusu.

Písmo i celou stránku lze bez problémů zvětšovat, aniž by došlo ke ztrátě použitelnosti, čitelnosti a funkčnosti stránek.

Na každé stránce je uveden kontakt na technického správce, případně na správce obsahu.

Každý netextový prvek, který nese význam, má svou textovou alternativu (včetně CAPTCHA[169]), informace jsou dostupné i bez použití skriptů, obrázků, kaskádových stylů a jiných doplňků na straně uživatele.

Informace jsou dostupné a srozumitelné i bez použití barevného rozlišení.

Barvy pozadí a popředí jsou dostatečně čitelné, čitelnost není snížena vzorkem na pozadí.

Obsah stránky se mění pouze při akci uživatele.

Kód webové stránky a její ovládání nepředpokládá ani nevyžaduje použití stránek v konkrétním prohlížeči nebo zařízení.

Každá stránka obsahuje výstižný název v prvku title.

Navigační a obsahové informace jsou od sebe zřetelně odděleny v rámci kódu, jsou vyznačeny funkční oblasti.

Navigace je vytvořena formou přístupnou pro uživatele se specifickými potřebami.

Součástí navigace je skrytý odkaz pro odskok na navigační a na obsahovou část každé stránky.

Navigace je konzistentní na všech stránkách (včetně umístění na stejném místě).

Při ovládání webu pomocí klávesnice je možné se přesunovat mezi položkami stejné úrovně navigace, aniž by uživatel byl nucen procházet položky menu nižší úrovně.

Každá webová stránka obsahuje odkaz na hlavní stránku a na vyšší úroveň v hierarchii webu. Kód ani obsah nepředpokládá, že uživatel již navštívil některou stránku. Uživatel má k dispozici informaci, kde ve struktuře webu se nachází. Všechny stránky obsahují odkaz na přehlednou mapu webu.

Stejně označené prvky navigace nebo odkazy mají stejný cíl.

Označení odkazu musí být výstižné i bez okolního kontextu.

Odkazy musí být zřetelně odlišeny od okolního textu, a to nejen barevně.

Uživatel musí být jasně upozorněn, že odkaz vede na obsah jiného typu než webová stránka, a mít k dispozici informaci o typu a velikosti souboru.

Preferuje se otevírání odkazu do téhož okna. Pokud tomu tak ve výjimečných a odůvodněných případech není, uživatel o tom musí být informován.

Tabulky obsahují záhlaví řádků/sloupců a dávají smysl při čtení zleva doprava.

Formulářové prvky obsahují výstižný nadpis.

Uživatel musí dostat jednoznačné a návodné informace o chybách při vyplňování formuláře nebo při jeho zpracování s návrhem vhodného dalšího postupu.

WYSIWYG editor je nastaven tak, aby uživatel, který web edituje, mohl sám dodržovat požadavky na přístupnost (např. možnost doplňovat popisky k obrázkům, přidělovat úroveň nadpisů aj.).

Redakční systém je nastaven tak, aby postupy, které přispívají k přístupnosti webu, byly co nejvíce automatizované a uživatel, který web edituje, na ně nemusel myslet (např. pokud uživatel nastaví otevření odkazu v novém okně, systém automaticky vloží tuto informaci do zdrojového kódu tak, aby byla přístupná uživatelům se specifickými potřebami).

⁵⁹⁾

Seznam není vyčerpávající, proto jej chápejte spíše jako vzor a podle potřeby jej doplňte o vlastní požadavky.

Doporučené zdroje

Legislativní dokumenty a standardy

sekce Přístupnost internetových stránek a mobilních aplikací na webu Ministerstva vnitra ČR[170]

Vzor prohlášení o přístupnosti[171]

Web Content Accessibility Guidelines (WCAG): seznamte se, prosím[172]

Přístupnost webu

Jak na přístupnost (nejen) knihovních webů[173]

Přístupnost webů knihoven – ukázky dobré a špatné praxe[174]

Praktické postřehy z testování přístupnosti webů v soutěži Biblioweb[175]

Jak na jednoduchý audit přístupnosti – otestujte si bezbariérovost svého webu[176]

Digitální design bez bariér – audio, video i komentované slajdy[177]

Standard Handicap Friendly pohledem porotce přístupnosti webu[178]

Barevný kontrast na webu a nástroje, které s ním pomohou[179]

Informace pro všechny: evropská pravidla pro tvorbu snadno srozumitelných informací[180]

Přístupnost dokumentů

Pravidla pro kontrolu přístupnosti v Microsoft Office[181] (nápověda primárně určená pro uživatele tohoto kancelářského balíku; většina pravidel je však univerzálně platná i pro další softwarové nástroje pro tvorbu dokumentů)

Sedmero zásad pro přístupné PDF dokumenty[182]

Přístupnost mobilních aplikací

Přístupnost mobilních aplikací[183]

Přístupnost mobilních aplikací pro nevidomé uživatele[184]

Zahraniční zdroje

WebAIM: Web Accessibility in Mind[185]

How to Meet WCAG (Quick Reference)[186]

Microsoft: Inclusive Design[187]

Web Accessibility Tutorials: Guidance on how to create websites that meet WCAG[188]

Užitečné nástroje

WAVE a HeadingsMap – nástroje pro kontrolu hierarchie nadpisů

WebAIM Contrast Checker – validátor kontrastu

WebAIM Link Contrast Checker[189] – validátor kontrastu odkazů

ColorZilla – doplněk webového prohlížeče ke zjišťování barev

WAVE – Web Accessibility Evaluation Tool – validátor přístupnosti

NVDA[190] – open source odečítač obrazovky pro Microsoft Windows

Uživatelé webu se specifickými potřebami

Jak pracují s informacemi lidé se zrakovým postižením[191] (prezentace)

Jak používají zrakově postižení počítač nebo mobil[192]

Simulace zrakových vad

Jak vidí svět lidé s očními vadami?[193] – obrázky simulace zrakových vad

ViaOpta Simulator – aplikace, která pomocí kamery mobilu nebo tabletu simuluje zrakové vady; je dostupná jako pro Android[194], tak pro IOS[195]

Coblis[196] – simulátor barvosleposti

Let's get color blind[197] – rozšíření pro prohlížeč Chrome, které simuluje různé typy poruch barvocitu

mobilní aplikace pro simulaci poruch barvocitu:

Daltonizer[198] pro Android

Daltonize Me Camera[199] pro iOS

pristupnost_uvod.html

[1] https://knihovna.jabok.cz/cs
[2] https://www.zakonyprolidi.cz/cs/2019-99
[3] https://www.mvcr.cz/soubor/metodicky-pokyn-pristupnost-internetovych-stranek-a-mobilnich-aplikaci-pdf.aspx
[4] https://www.mvcr.cz/soubor/metodicky-pokyn-pristupnost-internetovych-stranek-a-mobilnich-aplikaci-pdf.aspx
[5] https://www.w3.org/TR/WCAG21/
[6] https://webaim.org/
[7] https://prirucky.ipk.nkp.cz/doku.php?id=pristupnost:pouzite_zdroje
[8] https://prirucky.ipk.nkp.cz/doku.php?id=wiki:ebook_help
[9] https://knihovna.jabok.cz/cs
[10] https://spok.jabok.cuni.cz
[11] https://ipk.nkp.cz/legislativa/normy-standardy-doporuceni/rovny-pristup.-standard-handicap-friendly
[12] https://knihovna.jabok.cz/cs
[13] https://www.skipcr.cz/akce-a-projekty/akce-skip/biblioweb/biblioweb-2019
[14] mailto:cernin@jabok.cz
[15] https://docs.google.com/document/d/1wXHcEMPsszamXX59xDr2wV1z2jfFe_IgTxnLKGfO36c/edit?usp=sharing

pristupnost_uzivatele_a_pristupnost.html

[16] https://webaim.org/intro/
[17] https://evergreen-ils.org/conference/2020-evergreen-international-online-conference/2020-keynote-speaker/

pristupnost_zrakove_postizeni.html

[18] https://cs.wikipedia.org/wiki/Braillsk%C3%BD_%C5%99%C3%A1dek
[19] https://www.idnes.cz/onadnes/zdravi/obrazem-jak-vidi-svet-lide-s-ocnimi-vadami.A111207_101821_zdravi_pet/foto/PET3faa2c_ocisedy.jpg
[20] https://play.google.com/store/apps/details?id=com.novartis.visionsimulator
[21] https://apps.apple.com/us/app/viaopta-simulator/id778653985
[22] https://webaim.org/resources/contrastchecker/
[23] https://mapy.cz/
[24] https://mapy.cz/
[25] https://www.color-blindness.com/coblis-color-blindness-simulator/
[26] https://chrome.google.com/webstore/detail/lets-get-color-blind/bkdgdianpkfahpkmphgehigalpighjck?hl=cs
[27] https://play.google.com/store/apps/details?id=fr.nghs.android.cbs
[28] https://apps.apple.com/cz/app/daltonize-me-camera/id936535542?l=cs

pristupnost_sluchove_postizeni.html

[29] https://ipk.nkp.cz/legislativa/normy-standardy-doporuceni/rovny-pristup.-standard-handicap-friendly
[30] https://cs.wikipedia.org/wiki/Braillsk%C3%BD_%C5%99%C3%A1dek

pristupnost_kognitivni_poruchy.html

[31] https://webaim.org/articles/cognitive/
[32] https://cs.wikipedia.org/wiki/CAPTCHA
[33] http://www.spmpcr.cz/wp-content/uploads/delightful-downloads/2015/06/Informace_pro_vsechny.pdf

pristupnost_citlivost_na_svetelne_a_opticke_podnety.html

[34] https://developer.mozilla.org/en-US/docs/Web/Accessibility/Seizure_disorders
[35] https://webaim.org/articles/seizure/
[36] https://pixabay.com/

pristupnost_prehled_opatreni.html

[37] https://cs.wikipedia.org/wiki/ASCII_art
[38] https://webaim.org/articles/visual/blind
[39] https://webaim.org/articles/motor/motordisabilities#keyconcepts
[40] https://cs.wikipedia.org/wiki/CAPTCHA
[41] https://webaim.org/articles/cognitive/design

pristupnost_knihovny_a_pristupnost.html

[42] https://ipk.nkp.cz/legislativa/normy-standardy-doporuceni/rovny-pristup.-standard-handicap-friendly
[43] https://www.skipcr.cz/odborne-organy/bezbarierove_knihovny/zadost-o-ziskani-certifikatu-handicap-friendly
[44] http://www.sdruk.cz/data/xinha/sdruk/ks2014/Sbornik2014.pdf

pristupnost_zakon_o_pristupnosti.html

[45] https://www.zakonyprolidi.cz/cs/2019-99
[46] https://eur-lex.europa.eu/legal-content/CS/TXT/?uri=CELEX%3A32016L2102
[47] https://www.zakonyprolidi.cz/cs/2019-99
[48] https://www.mvcr.cz/clanek/pristupnost-internetovych-stranek-a-mobilnich-aplikaci.aspx
[49] https://www.zakonyprolidi.cz/cs/2000-365
[50] https://www.etsi.org/deliver/etsi_en/301500_301599/301549/02.01.02_60/en_301549v020102p.pdf
[51] https://www.mvcr.cz/soubor/metodicky-pokyn-pristupnost-internetovych-stranek-a-mobilnich-aplikaci-pdf.aspx
[52] https://www.helpnet.cz/sites/default/files/soubory/Snyrych.pdf
[53] https://www.skipcr.cz/odborne-organy/bezbarierove_knihovny/zadost-o-ziskani-certifikatu-handicap-friendly
[54] https://www.mvcr.cz/clanek/pristupnost-internetovych-stranek-a-mobilnich-aplikaci.aspx?q=Y2hudW09NQ%3d%3d
[55] https://pristupne-stranky.cz/vzor-prohlaseni-o-pristupnosti/
[56] https://www.zakonyprolidi.cz/cs/2019-99
[57] https://www.mvcr.cz/soubor/metodicky-pokyn-pristupnost-internetovych-stranek-a-mobilnich-aplikaci-pdf.aspx
[58] https://www.mvcr.cz/clanek/pristupnost-internetovych-stranek-a-mobilnich-aplikaci.aspx
[59] https://pristupne-stranky.cz/vzor-prohlaseni-o-pristupnosti/

pristupnost_metodika_wcag.html

[60] https://www.w3.org/TR/WCAG21/
[61] https://www.mvcr.cz/soubor/metodicky-pokyn-pristupnost-internetovych-stranek-a-mobilnich-aplikaci-pdf.aspx
[62] https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
[63] https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html
[64] https://poslepu.cz/web-content-accessibility-guidelines-wcag-seznamte-se-prosim/
[65] https://www.mvcr.cz/soubor/metodicky-pokyn-pristupnost-internetovych-stranek-a-mobilnich-aplikaci-pdf.aspx

pristupnost_redakcni_system.html

[66] https://www.w3.org/WAI/tutorials/page-structure/regions/
[67] https://cs.wikipedia.org/wiki/CAPTCHA

pristupnost_funkcni_grafika_webu.html

[68] https://www.vzhurudolu.cz/prirucka/kontrast
[69] https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=A6A6A6
[70] https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=70BAFF
[71] https://webaim.org/resources/contrastchecker/?fcolor=DAA401&bcolor=FFFFFF
[72] https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=FFF947
[73] https://webaim.org/resources/contrastchecker/?fcolor=000000&bcolor=06073C
[74] https://pixabay.com/
[75] https://pixabay.com/
[76] https://pixabay.com/

pristupnost_struktura_webu.html

[77] https://poslepu.cz/wai-aria-1-0-byla-vydana-jako-doporuceni-w3c//
[78] https://knihovna.jabok.cz/cs/kontakt
[79] https://knihovna.jabok.cz/cs/kontakt
[80] https://knihovna.jabok.cz/cs/kontakt
[81] https://knihovna.jabok.cz/cs/kontakt
[82] https://knihovna.jabok.cz/cs/kontakt

pristupnost_seznamy.html

[83] https://knihovna.jabok.cz/cs/e-zdroje-databaze
[84] https://knihovna.jabok.cz/cs/e-zdroje-databaze
[85] https://knihovna.jabok.cz/cs/e-zdroje-databaze
[86] https://knihovna.jabok.cz/cs/e-zdroje-databaze

pristupnost_ovladani_webu.html

[87] https://www.mpsv.cz/
[88] https://www.mpsv.cz/
[89] https://www.svkos.cz/

pristupnost_odkazy.html

[90] https://webaim.org/resources/linkcontrastchecker/
[91] https://knihovna.jabok.cz/cs/knihy-casopisy/seznamy-literatury
[92] https://knihovna.jabok.cz/cs/knihy-casopisy/seznamy-literatury
[93] http://www.oplany.cz/aktuality
[94] https://www.mpsv.cz/
[95] https://knihovna.jabok.cz/cs

pristupnost_obrazky.html

[96] https://www.iconfinder.com/
[97] https://pixabay.com/
[98] https://knihovna.jabok.cz/cs
[99] https://www.zdrojak.cz/clanky/pristupnost-html5-textove-alternativy-obrazku-1-2-teorie/
[100] https://www.zdrojak.cz/clanky/pristupnost-html5-textove-alternativy-obrazku-2-2-praxe/

pristupnost_multimedialni_obsah.html

[101] https://www.portal-pelion.cz/naucte-se-nvda-prohlizeni-webu/
[102] https://www.kvkli.cz/o-knihovne/video-pro-neslysici.html
[103] https://www.knihovnahk.cz/pro-verejnost/sluzby/sluzby-pro-sluchove-znevyhodnene/videa-o-knihovne-ve-znakovem-jazyce
[104] https://www.kjm.cz/video-znakovy-jazyk
[105] https://www.svkos.cz/sluzby/pro-handicapovane/sluchove-handicapovani/
[106] https://knihovna.cvikov.cz/video-pro-neslysici
[107] https://www.knihovnakv.cz/informace-o-krajske-knihovne-v-ceskem-znakovem-jazyce-p290.htm

pristupnost_dokumenty.html

[108] https://helpx.adobe.com/cz/acrobat/using/creating-accessible-pdfs.html
[109] https://sites.google.com/view/pristupnost-informaci/normy/sedmero-z%C3%A1sad-pro-p%C5%99%C3%ADstupn%C3%A9-pdf-dokumenty?authuser=0
[110] https://support.microsoft.com/cs-cz/office/pravidla-pro-kontrolu-p%c5%99%c3%adstupnosti-651e08f2-0fc3-4e10-aaca-74b4a67101c1?ui=cs-cz&rs=cs-cz&ad=cz#bkmk_checkererrorswarnings

pristupnost_zasady_pristupneho_designu.html

[111] https://webaim.org/intro/#principles
[112] https://webaim.org/

pristupnost_manual_nadpisy.html

[113] https://knihovna.jabok.cz/cs/kontakt
[114] https://knihovna.jabok.cz/cs/kontakt
[115] https://knihovna.jabok.cz/cs/kontakt
[116] https://knihovna.jabok.cz/cs/kontakt
[117] https://knihovna.jabok.cz/cs/kontakt

pristupnost_manual_seznamy.html

[118] https://knihovna.jabok.cz/cs/e-zdroje-databaze
[119] https://knihovna.jabok.cz/cs/e-zdroje-databaze
[120] https://knihovna.jabok.cz/cs/e-zdroje-databaze
[121] https://knihovna.jabok.cz/cs/e-zdroje-databaze

pristupnost_manual_vyber_a_umisteni_obrazku.html

[122] https://www.iconfinder.com/
[123] https://pixabay.com/

pristupnost_manual_popisky_obrazku_a_vlozenych_videi.html

[124] https://knihovna.jabok.cz/cs
[125] https://www.zdrojak.cz/clanky/pristupnost-html5-textove-alternativy-obrazku-1-2-teorie/
[126] https://www.zdrojak.cz/clanky/pristupnost-html5-textove-alternativy-obrazku-2-2-praxe/

pristupnost_manual_zastupny_text_odkazu.html

[127] http://www.oplany.cz/aktuality
[128] https://www.mpsv.cz/
[129] https://knihovna.jabok.cz/cs

pristupnost_manual_multimedialni_obsah.html

[130] https://www.portal-pelion.cz/naucte-se-nvda-prohlizeni-webu/
[131] https://www.kvkli.cz/o-knihovne/video-pro-neslysici.html
[132] https://www.knihovnahk.cz/pro-verejnost/sluzby/sluzby-pro-sluchove-znevyhodnene/videa-o-knihovne-ve-znakovem-jazyce
[133] https://www.kjm.cz/video-znakovy-jazyk
[134] https://www.svkos.cz/sluzby/pro-handicapovane/sluchove-handicapovani/
[135] https://knihovna.cvikov.cz/video-pro-neslysici
[136] https://www.knihovnakv.cz/informace-o-krajske-knihovne-v-ceskem-znakovem-jazyce-p290.htm

pristupnost_manual_dokumenty.html

[137] https://helpx.adobe.com/cz/acrobat/using/creating-accessible-pdfs.html
[138] https://sites.google.com/view/pristupnost-informaci/normy/sedmero-z%C3%A1sad-pro-p%C5%99%C3%ADstupn%C3%A9-pdf-dokumenty?authuser=0
[139] https://support.microsoft.com/cs-cz/office/pravidla-pro-kontrolu-p%c5%99%c3%adstupnosti-651e08f2-0fc3-4e10-aaca-74b4a67101c1?ui=cs-cz&rs=cs-cz&ad=cz#bkmk_checkererrorswarnings

pristupnost_kontrolni_seznam_pro_overovani.html

[140] http://validator.w3.org/checklink

pristupnost_kontrola_hierarchie_nadpisu.html

[141] https://wave.webaim.org/
[142] https://knihovna.jabok.cz/cs
[143] https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi
[144] https://addons.mozilla.org/en-US/firefox/addon/headingsmap/
[145] https://knihovna.jabok.cz/cs

pristupnost_overeni_kontrastu.html

[146] https://webaim.org/resources/contrastchecker/
[147] https://www.vzhurudolu.cz/prirucka/kontrast
[148] https://webaim.org/resources/contrastchecker/
[149] https://webaim.org/resources/contrastchecker/
[150] https://webaim.org/resources/contrastchecker/
[151] https://wave.webaim.org/
[152] https://wave.webaim.org/

pristupnost_zjisteni_barev.html

[153] https://www.colorzilla.com/
[154] https://www.knihovny.cz/

pristupnost_celkove_overeni_pristupnosti.html

[155] https://wave.webaim.org/
[156] https://wave.webaim.org/
[157] https://wave.webaim.org/report#/https://knihovna.jabok.cz/cs/e-zdroje-databaze/zdroje-dostupne-v-ramci-otevreneho-pristupu
[158] https://wave.webaim.org/
[159] https://www.knihovny.cz/Record/vkol.SVK01-001292736
[160] https://wave.webaim.org/report#/https://www.knihovny.cz/Record/vkol.SVK01-001292736
[161] https://wave.webaim.org/
[162] https://wave.webaim.org/
[163] https://wave.webaim.org/
[164] https://wave.webaim.org/
[165] https://wave.webaim.org/

pristupnost_pozadavky_pri_vyberovem_rizeni.html

[166] https://www.mvcr.cz/soubor/metodicky-pokyn-pristupnost-internetovych-stranek-a-mobilnich-aplikaci-pdf.aspx
[167] https://www.mvcr.cz/soubor/metodicky-pokyn-pristupnost-internetovych-stranek-a-mobilnich-aplikaci-pdf.aspx
[168] https://www.w3.org/TR/WCAG21/
[169] https://cs.wikipedia.org/wiki/CAPTCHA

pristupnost_doporucene_zdroje.html

[170] https://www.mvcr.cz/clanek/pristupnost-internetovych-stranek-a-mobilnich-aplikaci.aspx
[171] https://pristupne-stranky.cz/vzor-prohlaseni-o-pristupnosti/
[172] https://poslepu.cz/web-content-accessibility-guidelines-wcag-seznamte-se-prosim/
[173] https://poslepu.cz/jak-na-pristupnost-knihovnich-webu/
[174] https://poslepu.cz/pristupnost-webu-knihoven-ukazky-dobre-a-spatne-praxe/
[175] https://poslepu.cz/prakticke-postrehy-z-testovani-pristupnosti-webu-v-soutezi-biblioweb/
[176] https://poslepu.cz/jak-na-jednoduchy-audit-pristupnosti-otestujte-si-bezbarierovost-sveho-webu/
[177] https://poslepu.cz/digitalni-design-bez-barier-audio-video-i-komentovane-slajdy/
[178] https://poslepu.cz/standard-handicap-friendly-pohledem-porotce-pristupnosti-webu/
[179] https://www.vzhurudolu.cz/prirucka/kontrast
[180] http://www.spmpcr.cz/wp-content/uploads/delightful-downloads/2015/06/Informace_pro_vsechny.pdf
[181] https://support.microsoft.com/cs-cz/office/pravidla-pro-kontrolu-p%c5%99%c3%adstupnosti-651e08f2-0fc3-4e10-aaca-74b4a67101c1?ui=cs-cz&rs=cs-cz&ad=cz#bkmk_checkererrorswarnings
[182] https://sites.google.com/view/pristupnost-informaci/normy/sedmero-z%C3%A1sad-pro-p%C5%99%C3%ADstupn%C3%A9-pdf-dokumenty
[183] https://sites.google.com/view/pristupnost-informaci/p%C5%99%C3%ADstupnost/p%C5%99%C3%ADstupnost-mobiln%C3%ADch-aplikac%C3%AD
[184] https://poslepu.cz/pristupnost-mobilnich-aplikaci-pro-nevidome-uzivatele/
[185] https://webaim.org/
[186] https://www.w3.org/WAI/WCAG21/quickref/
[187] https://www.microsoft.com/design/inclusive/
[188] https://www.w3.org/WAI/tutorials/
[189] https://webaim.org/resources/linkcontrastchecker/
[190] http://nvda-project.cz/
[191] https://docs.google.com/presentation/d/1inMkRfsqDuUq0jOrCUslKGDurw6gDY-CGT7B2hkMMzU/edit?usp=sharing
[192] https://poslepu.cz/jak-pouzivaji-zrakove-postizeni-uzivatele-pocitac-nebo-mobil/
[193] https://www.idnes.cz/onadnes/zdravi/obrazem-jak-vidi-svet-lide-s-ocnimi-vadami.A111207_101821_zdravi_pet/foto/PET3faa2c_ocisedy.jpg
[194] https://play.google.com/store/apps/details?id=com.novartis.visionsimulator
[195] https://apps.apple.com/us/app/viaopta-simulator/id778653985
[196] https://www.color-blindness.com/coblis-color-blindness-simulator/
[197] https://chrome.google.com/webstore/detail/lets-get-color-blind/bkdgdianpkfahpkmphgehigalpighjck?hl=cs
[198] https://play.google.com/store/apps/details?id=fr.nghs.android.cbs&hl=cs
[199] https://apps.apple.com/cz/app/daltonize-me-camera/id936535542?l=cs