Přístupnost a podpora uživatelů: Porovnání verzí
(Značka: editace z VisualEditoru) |
(→GOV.CZ Design System) (Značka: editace z VisualEditoru) |
||
| (Není zobrazeno 6 mezilehlých verzí od stejného uživatele.) | |||
| Řádek 7: | Řádek 7: | ||
==Nastavení uživatelské podpory== | ==Nastavení uživatelské podpory== | ||
| − | == Mimo GOV.UK == | + | ==Mimo GOV.UK== |
| − | <blockquote>Úřady musí být compliant s vyhláškou č. 64/2008 Sb. o přístupnosti [https://www.google.cz/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&uact=8&ved= | + | <blockquote>Úřady musí být compliant s vyhláškou č. 64/2008 Sb. o přístupnosti ([https://www.zakonyprolidi.cz/cs/2008-64 podívat se na vyhlášku], [https://www.google.cz/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&uact=8&ved=2ahUKEwjbiIGdiITeAhWmtYsKHXfJA-QQFjABegQICRAC&url=http%3A%2F%2Fwww.mvcr.cz%2Fsoubor%2Fmetodicky-pokyn-k-vyhlasce-c-64-2008-sb-o-forme-uverejnovani-informaci-souvisejicich-s-vykonem-verejne-spravy-prostrednictvim-webovych-stranek-pro-osoby-se-zdravotnim-postizenim-vyhlaska-o-pristupnosti.aspx&usg=AOvVaw3Lr5ebN9QBMaU0TY-yjUVa stáhnout metodický pokyn MV] (PDF, 409KB, 25 stran)). Tuto vyhlášku bude v roce 2019 rušit zákon přejímající směrnici EU TBD. |
| + | </blockquote> | ||
| − | === Definice === | + | ===Definice=== |
Základním kamenem dobrého vývoje IT služeb, softwaru, hardwaru je pro GOV.CZ přístupnost. | Základním kamenem dobrého vývoje IT služeb, softwaru, hardwaru je pro GOV.CZ přístupnost. | ||
| Řádek 19: | Řádek 20: | ||
Být přístupný znamená: uživatel na prvním místě. | Být přístupný znamená: uživatel na prvním místě. | ||
| − | ==== Nejčastější | + | ====Nejčastější omezení uživatelů==== |
| − | * '''Technologické''': zastaralé verze operačních systémů, bez nejnovější verze internetového prohlížeče, bez přístupu k rychlému internetu | + | *'''Technologické''': zastaralé verze operačních systémů, bez nejnovější verze internetového prohlížeče, bez přístupu k rychlému internetu |
| − | * '''Zrakové''': úplná nebo částečná slepota, barvoslepost | + | *'''Zrakové''': úplná nebo částečná slepota, barvoslepost |
| − | * '''Motorické''': nemožnost používat myš | + | *'''Motorické''': nemožnost používat myš |
| − | * '''Kognitvní, neurologické a mentáln'''í: dyslexie, úzkostlivost, ADHD | + | *'''Kognitvní, neurologické a mentáln'''í: dyslexie, úzkostlivost, ADHD |
| − | * '''Hluchové''': úplná nebo částečná hluchota | + | *'''Hluchové''': úplná nebo částečná hluchota |
[https://www.w3.org/WAI/people-use-web/abilities-barriers/ Více skvělých případů a příkladů na stránkách W3]. | [https://www.w3.org/WAI/people-use-web/abilities-barriers/ Více skvělých případů a příkladů na stránkách W3]. | ||
| − | === Vytvoření přístupné stránky === | + | ===Vytvoření přístupné stránky=== |
| − | + | Přístupnost je součást vývoje a je třeba s ní počítat v jeho různých fázích: | |
| − | + | *vzhled a obsah ([https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0¤tsidebar=%23col_customize&levels=a&techniques=sufficient%2Cfailures visual and content)] | |
| + | *struktura [https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0¤tsidebar=%23col_customize&levels=a&techniques=sufficient%2Cfailures (develop)] | ||
| + | *chování [https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0¤tsidebar=%23col_customize&levels=a&techniques=sufficient%2Cfailures (interaction)] | ||
| + | *TBD | ||
| − | + | Všechny stránky GOV.CZ musí být complaint s [https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0 WCAG 2.0 úrovně AA]. Tato kapitola se věnuje nejčastějším chybám, kvůli kterým se úrovně AA nedosahuje. | |
| − | |||
| − | |||
| − | |||
| − | ==== Vzhled ==== | + | ====Vzhled==== |
| − | * '''Mihotající se objekty''': webové stránky nesmějí obsahovat nic, co bliká vícekrát než třikrát za sekundu. | + | *'''Mihotající se objekty''': webové stránky nesmějí obsahovat nic, co bliká vícekrát než třikrát za sekundu. |
| − | * '''Audio obsah''': pokud je audio obsah na webové stránce přehráván automaticky a je delší než tři sekundy, musí existovat prvek, kterým je toto audio možné pozastavit nebo úplně vypnout. | + | *'''Audio obsah''': pokud je audio obsah na webové stránce přehráván automaticky a je delší než tři sekundy, musí existovat prvek, kterým je toto audio možné pozastavit nebo úplně vypnout. |
| − | * TBD | + | *TBD |
| − | ==== Struktura ==== | + | ====Struktura==== |
| − | * '''Odkazy''': | + | *'''Odkazy''': |
| − | * '''Alternativy k netextovým objektům''': veškeré netextové elementy, jako jsou obrázky, infografika, video nebo audio, musí mít k dispozici textový ekvivalent. Například text v tlačítku. Zvláště | + | *'''Alternativy k netextovým objektům''': veškeré netextové elementy, jako jsou obrázky, infografika, video nebo audio, musí mít k dispozici textový ekvivalent. Například text v tlačítku. Zvláště dejte pozor na ověřování anti-spamu (například [https://www.w3.org/TR/WCAG20/#CAPTCHAdef CAPTCHA]). |
| − | * '''Zvětšení''':zvětšením textu o 200 % nesmí dojít ke ztrátě informace nebo funkcionality, to znamená, že nesmí dojít k překrytí prvků na stránce | + | *'''Zvětšení''': zvětšením textu o 200 % nesmí dojít ke ztrátě informace nebo funkcionality, to znamená, že nesmí dojít k překrytí prvků na stránce atd. Text o 200 % si mohou zvětšit například lidé s pokročilým šedým zákalem. |
| − | ==== Chování ==== | + | ====Chování==== |
| − | * TBD | + | *TBD |
| − | === Použití barev === | + | ===Použití barev=== |
| − | Barevná paleta musí splňovat WCAG 2.0 úrovně AA, to znamená, že musí garantovat minimální podíl, tj. 4.5:1, kontrastu textu vůči pozadí. | + | Barevná paleta musí splňovat WCAG 2.0 úrovně AA, to znamená, že musí garantovat minimální podíl, tj. 4.5:1, kontrastu textu vůči pozadí. Ověření zda splňujete kontrastní poměr 4.5:1 můžete najít několik online nástrojů, například [https://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=333333 Snook.ca Colour contrast checker]. |
| − | Barva by nikdy neměla být jednoznačným identikátorem a nositelem informace. | + | Barva by nikdy neměla být jednoznačným identikátorem a nositelem informace. Jelikož ne každý vnímá barvy stejně, je špatně, pokud se pouze barvou snažíte znázornit alert (červená) nebo úspěch (zeleně). |
| − | Mějte na paměti | + | Mějte na paměti, jak se barvy moho zobrazit na: |
| − | * | + | *mobilu nebo tabletu, doma i venku |
| − | * | + | *černobílém tisku webové stránky |
| − | * | + | *projektorech |
| − | * | + | *webové stránce barvoslepým ([[wikipedia:Color_blindness|5-8 % mužské populace]]) |
Pro sdělení informací používejte, kromě barvy samotné, doprovodný text a/nebo nějaký grafický element. | Pro sdělení informací používejte, kromě barvy samotné, doprovodný text a/nebo nějaký grafický element. | ||
| − | + | ===GOV.CZ Design System=== | |
| − | + | Použitím GOV.CZ Design Systemu a jeho komponent vyřešíte snadno přístupnost na úrovni HTML, CSS a JS. [https://govcz-design-toolkit.herokuapp.com Podívat se a stáhnout GOV.CZ Design System]. | |
| − | === GOV.CZ Design System === | ||
| − | Použitím GOV.CZ Design Systemu a jeho komponent vyřešíte snadno přístupnost na úrovni HTML, CSS a JS. [https:// | ||
| − | === Asisteční technologie (kompenzační pomůcky) === | + | ===Asisteční technologie (kompenzační pomůcky)=== |
Většina operačních systémů už má v základu odečítač obrazovky (screen reader). | Většina operačních systémů už má v základu odečítač obrazovky (screen reader). | ||
| − | Při testování webových stránek na Windows použijte mimo níže zmíněného built-in Narratoru | + | Při testování webových stránek na Windows použijte, mimo níže zmíněného built-in Narratoru, přední open-source odečítač NVDA ([http://nvda-project.cz/ stránky NVDA v češtině]). |
{| class="wikitable" | {| class="wikitable" | ||
|+ | |+ | ||
| + | Přehled built-in odečítačů | ||
!OS | !OS | ||
!Technologie | !Technologie | ||
| Řádek 100: | Řádek 100: | ||
[https://developer.paciellogroup.com/blog/2015/01/basic-screen-reader-commands-for-accessibility-testing/ Naučte se základní zkratky] pro tyto technologie. | [https://developer.paciellogroup.com/blog/2015/01/basic-screen-reader-commands-for-accessibility-testing/ Naučte se základní zkratky] pro tyto technologie. | ||
| − | === Měly byste znát === | + | ===Měly byste znát=== |
Externí odkazy (platné ke dni 10. října 2018), které by vás mohly zajímat: | Externí odkazy (platné ke dni 10. října 2018), které by vás mohly zajímat: | ||
| − | * https://github.com/Heydon/inclusive-design-checklist | + | *https://github.com/Heydon/inclusive-design-checklist |
| − | * https://www.w3.org/TR/wai-aria-practices-1.1/ | + | *https://www.w3.org/TR/wai-aria-practices-1.1/ |
| − | * https://a11yproject.com/ | + | *https://a11yproject.com/ |
| − | * https://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=333333 | + | *https://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=333333 |
| − | * https://inclusive-components.design/ | + | *https://inclusive-components.design/ |
| − | * https://a11ywins.tumblr.com/ | + | *https://a11ywins.tumblr.com/ |
| − | * https://developer.mozilla.org/en-US/docs/Web/Accessibility | + | *https://developer.mozilla.org/en-US/docs/Web/Accessibility |
| − | * https://www.marcozehe.de/ | + | *https://www.marcozehe.de/ |
| − | * https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b | + | *https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b |
| − | == Příbuzné stránky == | + | ==Příbuzné stránky== |
[[Přístupný jazyk]] | [[Přístupný jazyk]] | ||
Aktuální verze z 18. 11. 2018, 21:44
Pomožte uživatelům. Udělejte službu přístupnou.
Obsah
Jak na požadavky na přístupnost
Nastavení uživatelské podpory
Mimo GOV.UK
Úřady musí být compliant s vyhláškou č. 64/2008 Sb. o přístupnosti (podívat se na vyhlášku, stáhnout metodický pokyn MV (PDF, 409KB, 25 stran)). Tuto vyhlášku bude v roce 2019 rušit zákon přejímající směrnici EU TBD.
Definice
Základním kamenem dobrého vývoje IT služeb, softwaru, hardwaru je pro GOV.CZ přístupnost.
Všichni uživatelé musí mít možnost ovládat aplikace, webové stránky, online služby nebo elektronické dokumenty, a to i přes svá případná omezení. Například omezení fyzická, technologická nebo enviromentální.
Nikdy nesmí dojít k diskriminaci uživatele. Všichni mají právo na to využívat služby poskytované veřejnou správou.
Být přístupný znamená: uživatel na prvním místě.
Nejčastější omezení uživatelů
- Technologické: zastaralé verze operačních systémů, bez nejnovější verze internetového prohlížeče, bez přístupu k rychlému internetu
- Zrakové: úplná nebo částečná slepota, barvoslepost
- Motorické: nemožnost používat myš
- Kognitvní, neurologické a mentální: dyslexie, úzkostlivost, ADHD
- Hluchové: úplná nebo částečná hluchota
Více skvělých případů a příkladů na stránkách W3.
Vytvoření přístupné stránky
Přístupnost je součást vývoje a je třeba s ní počítat v jeho různých fázích:
- vzhled a obsah (visual and content)
- struktura (develop)
- chování (interaction)
- TBD
Všechny stránky GOV.CZ musí být complaint s WCAG 2.0 úrovně AA. Tato kapitola se věnuje nejčastějším chybám, kvůli kterým se úrovně AA nedosahuje.
Vzhled
- Mihotající se objekty: webové stránky nesmějí obsahovat nic, co bliká vícekrát než třikrát za sekundu.
- Audio obsah: pokud je audio obsah na webové stránce přehráván automaticky a je delší než tři sekundy, musí existovat prvek, kterým je toto audio možné pozastavit nebo úplně vypnout.
- TBD
Struktura
- Odkazy:
- Alternativy k netextovým objektům: veškeré netextové elementy, jako jsou obrázky, infografika, video nebo audio, musí mít k dispozici textový ekvivalent. Například text v tlačítku. Zvláště dejte pozor na ověřování anti-spamu (například CAPTCHA).
- Zvětšení: zvětšením textu o 200 % nesmí dojít ke ztrátě informace nebo funkcionality, to znamená, že nesmí dojít k překrytí prvků na stránce atd. Text o 200 % si mohou zvětšit například lidé s pokročilým šedým zákalem.
Chování
- TBD
Použití barev
Barevná paleta musí splňovat WCAG 2.0 úrovně AA, to znamená, že musí garantovat minimální podíl, tj. 4.5:1, kontrastu textu vůči pozadí. Ověření zda splňujete kontrastní poměr 4.5:1 můžete najít několik online nástrojů, například Snook.ca Colour contrast checker.
Barva by nikdy neměla být jednoznačným identikátorem a nositelem informace. Jelikož ne každý vnímá barvy stejně, je špatně, pokud se pouze barvou snažíte znázornit alert (červená) nebo úspěch (zeleně).
Mějte na paměti, jak se barvy moho zobrazit na:
- mobilu nebo tabletu, doma i venku
- černobílém tisku webové stránky
- projektorech
- webové stránce barvoslepým (5-8 % mužské populace)
Pro sdělení informací používejte, kromě barvy samotné, doprovodný text a/nebo nějaký grafický element.
GOV.CZ Design System
Použitím GOV.CZ Design Systemu a jeho komponent vyřešíte snadno přístupnost na úrovni HTML, CSS a JS. Podívat se a stáhnout GOV.CZ Design System.
Asisteční technologie (kompenzační pomůcky)
Většina operačních systémů už má v základu odečítač obrazovky (screen reader).
Při testování webových stránek na Windows použijte, mimo níže zmíněného built-in Narratoru, přední open-source odečítač NVDA (stránky NVDA v češtině).
| OS | Technologie |
|---|---|
| Windows | Narrator |
| MacOS | VoiceOver |
| Ubuntu | Orca |
| Android | TalkBack |
| iOS | VoiceOver |
Naučte se základní zkratky pro tyto technologie.
Měly byste znát
Externí odkazy (platné ke dni 10. října 2018), které by vás mohly zajímat:
- https://github.com/Heydon/inclusive-design-checklist
- https://www.w3.org/TR/wai-aria-practices-1.1/
- https://a11yproject.com/
- https://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=333333
- https://inclusive-components.design/
- https://a11ywins.tumblr.com/
- https://developer.mozilla.org/en-US/docs/Web/Accessibility
- https://www.marcozehe.de/
- https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b
