Přístupnost a podpora uživatelů: Porovnání verzí
(Značka: editace z VisualEditoru) |
(Značka: editace z VisualEditoru) |
||
| Řá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=2ahUKEwjhgI372PvdAhXltYsKHY6jCsQQFjABegQICBAC&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 (PDF(409Kb), Metodický pokyn MV)]. Tuto vyhlášku bude v roce 2019 rušit zákon přejímající směrnici EU.</blockquote> | <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=2ahUKEwjhgI372PvdAhXltYsKHY6jCsQQFjABegQICBAC&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 (PDF(409Kb), Metodický pokyn MV)]. Tuto vyhlášku bude v roce 2019 rušit zákon přejímající směrnici EU.</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 19: | ||
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=== |
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, která nabytí zmíněné úrovně zabraňují. | 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, která nabytí zmíněné úrovně zabraňují. | ||
Přístupnost je součást vývoje a je třeba s ní počítat v jeho různých fázích: | 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)] | + | *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)] | + | *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)] | + | *chování [https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0¤tsidebar=%23col_customize&levels=a&techniques=sufficient%2Cfailures (interaction)] |
| − | * TBD | + | *TBD |
| − | ==== 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ě mějte na paměti ověřování anti-spamu (například [https://www.w3.org/TR/WCAG20/#CAPTCHAdef CAPTCHA]). | + | *'''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ě mějte na paměti 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 apod. Text o 200 % si mohou zvětšit například lidé s pokročilým šedým zákalem. | + | *'''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 apod. 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í. | ||
| Řádek 62: | Řádek 62: | ||
Mějte na paměti zobrazování barev pro: | Mějte na paměti zobrazování barev pro: | ||
| − | * mobil nebo tablet, doma i venku | + | *mobil nebo tablet, doma i venku |
| − | * černobílý tisk webové stránky | + | *černobílý tisk webové stránky |
| − | * webové stránky na projektorech | + | *webové stránky na projektorech |
| − | * barvoslepé ([[wikipedia:Color_blindness|5-8 % mužské populace]]) | + | *barvoslepé ([[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. | ||
| Řádek 71: | Řádek 71: | ||
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]. | 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]. | ||
| − | === 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://czegov-designsystem.herokuapp.com/welcome/components Podívat se a stáhnout 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://czegov-designsystem.herokuapp.com/welcome/components Podívat se a stáhnout GOV.CZ Design System]. | ||
| − | === 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). | ||
| Řá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]] | ||
Verze z 10. 10. 2018, 13:43
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 (PDF(409Kb), Metodický pokyn MV). Tuto vyhlášku bude v roce 2019 rušit zákon přejímající směrnici EU.
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
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, která nabytí zmíněné úrovně zabraňují.
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
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ě mějte na paměti 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 apod. 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í.
Barva by nikdy neměla být jednoznačným identikátorem a nositelem informace. Je tedy špatně pokud se pouze barvou snažíte znázornit alert (červená) nebo úspěch (zeleně), jelikož ne každý vnímá barvy stejně.
Mějte na paměti zobrazování barev pro:
- mobil nebo tablet, doma i venku
- černobílý tisk webové stránky
- webové stránky na projektorech
- barvoslepé (5-8 % mužské populace)
Pro sdělení informací používejte, kromě barvy samotné, doprovodný text a/nebo nějaký grafický element.
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.
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ím 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
