Accessibility guide for developers/cs

Přístupnost je pro naše uživatele důležitá a můžeme ji zlepšit, pokud vezmeme v úvahu pár základních nápadů a pravidel. Dostupnost je obtížná, protože neexistují žádné pevné a všeobecně uznávané technické normy, které by skutečně fungovaly konzistentně a pro všechny uživatele. Tato stránka neuvádí ani nepojednává o konkrétních problémech s přístupností v MediaWiki. Pokouší se zaměřit na výběr technologií a co dělat a co nedělat, aby se předešlo problémům s přístupností.

Pokud jde o vývoj, myslím, že toto by měla být naše kniha pravidel:


 * Pokuste se povolit našim uživatelům (a to znamená všem)
 * Pokuste se vyřešit problémy s přístupností, pokud je to možné, ale ne za každou cenu
 * Měli bychom použít přístup progresivního vylepšení oproti půvabné degradaci.
 * Implementujte věci, které jsou technologicky zdravé



Jak být přístupný
Některé důležité pojmy, které byste měli mít na paměti.



Měření přístupnosti v mnoha podobách
Přístupnost je o různých věcech, zvažte prosím následující:


 * Cokoli by mělo být srozumitelné: To znamená textově, vizuálně, logicky a komplexně.
 * Někteří uživatelé potřebují k interakci čtečku obrazovky, ale stejně, ne-li běžnější, jsou: lupa, vyšší kontrast, převodník textu na řeč, vlastní nastavení CSS nebo speciální typ klávesnice/vstupního zařízení.
 * Musí být dosažitelné. Odezva, dostupnost, umístění, jazyk, hardware atd.

Stručně řečeno, přístupnost je nejen přístupnost klávesnice nebo pouze přístupnost čtečky obrazovky. Často se zaměřujeme na tyto dva, protože jsou tradičně snadno přehlédnutelné. Ale tyto problémy jsou také řešitelné a často poskytují základ pro jakýkoli jiný druh možného vylepšení.

Některé problémy s přístupností souvisí s problémy s designem produktu, strategickými volbami, cílovým publikem atd. Vzhledem k tomu, že je obtížnější zachytit tyto oblasti v písemných pravidlech, která platí univerzálně pro ekosystém MediaWiki, jsou mimo rozsah tohoto dokumentu.



Navigace pomocí klávesnice
Říkáme tomu navigace pomocí klávesnice, ale ve skutečnosti to znamená: Nespoléhejte se na ukazovací zařízení (dotyk, myš).


 * Navigace pomocí klávesnice je o manipulaci se zaměřením a provádění akcí pomocí klávesnice.
 * Prvky, na které lze zaostřit pomocí tabulátoru, lze zaostřit, ale ne vše, na co lze zaostřit, lze tabulátorem.
 * Vše, co jste schopni dělat s myší, by mělo být možné dělat s klávesnicí.
 * Informace o navigaci pomocí klávesnice mohou čtečky obrazovky používat ke zlepšení svých zkušeností.



Čtečka obrazovky

 * Čtečka obrazovky používá jiný "kurzor", který obvykle prochází logickou strukturou DOM (Document Object Model (objektový model dokumentu)).
 * Fokus má tendenci sledovat kurzor čtečky obrazovky a naopak, ale nejsou stejné
 * Zaměřený prvek můžete sledovat nastavením živého výrazu v prohlížeči Chrome
 * Čtečka obrazovky používá rozhraní API 'přístupnosti“', kterou byste mohli považovat za vstupní/výstupní 'zobrazení' nad normálním DOM.
 * ARIA jsou anotace DOM, které vylepšují nebo upravují způsob, jakým je logika DOM transformována do rozhraní API pro usnadnění. Není to alternativa k psaní správného HTML a JavaScriptu. Navigace pomocí klávesnice je jednoduše dosaženo logickým pořadím DOMǃ Více o ARIA viz vysvětlení w3.org a vysvětlení MDN.
 * Čtečka obrazovky není omezena na navigaci podle logické struktury DOM, je pouze výchozí.
 * Čtečka obrazovky může například číst, co je pod ukazatelem myši
 * VoiceOver pro iOS používá kurzor na obrazovce, který se ovládá polohováním palce a gesty na dotykové obrazovce.
 * Většina softwaru pro čtení obrazovky má další režimy navigace, kde můžete vytvářet seznamy a procházet podle oblastí orientačních bodů, automaticky generovaný obsah nebo dokonce uživatelem definované 'záložky' uvnitř stránky.
 * Z výše uvedeného bodu několika navigačních metod vyplývá: Existuje začátek a konec, ale také vlevo, vpravo, nahoře a dole. Neměli byste na ně ve své komunikaci příliš spoléhat, ale ani jejich existenci nemusíte zcela popírat. Nezaměňujte vizuální schopnosti uživatele s prostorovým povědomím, které může být čtenáři obrazovky schopen sdělit uživateli. Příklad:
 * dlouhá věta [obrázek] výše uvedený obrázek ukazuje...
 * dlouhá věta [obrázek][obrázek] levý obrázek ukazuje, pravý obrázek ukazuje...
 * dlouhá věta [obrázek][obrázek] pravý obrázek ukazuje, levý obrázek ukazuje...
 * dlouhá věta [image][image] výše uvedený obrázek ukazuje...
 * dlouhá věta [obrázek][obrázek][obrázek] levý obrázek ukazuje, pravý obrázek ukazuje...
 * dlouhá věta [image][image] něco úplně jiného. levý obrázek ukazuje, pravý obrázek ukazuje...



Pokyny pro vývoj
Existuje několik standardů týkajících se přístupnosti a upřímně řečeno, téměř všechny z nich, i když jsou správné na identifikaci problémů, mají stále značné problémy, pokud jde o technická řešení (mají vysoký podíl "nepěkných řešení"). To bylo příčinou mnoha kontroverzí v komunitách. Jako takové bychom měli identifikovat nekontroverzní věci, které bychom prostě měli vždy (nebo nikdy) dělat a proč. Je mnohem snazší dosáhnout určitých cílů, pokud oddělíme nekontroverzní věci od kontroverzních věcí.



Vždy používejte nebo poskytujte

 * Správný sémantický prvek HTML
 * Používejte prvky HTML pro jejich zamýšlený účel. Například:
 * Použijte a ne,  nebo  s obsluhou kliknutí
 * Pokud máte pocit, že je potřeba něco zvýraznit tučným písmem, zvažte, zda není vhodnější použít záhlaví nebo prvek


 * Logická struktura nadpisů
 * Všechny stránky by vždy měly mít logickou a konzistentní strukturu nadpisů. Nadpisy jsou jedním z primárních navigačních nástrojů používaných uživateli čteček obrazovky.
 * Ve vnoření úrovní nadpisů by neměly být žádné úrovně vynechány. (Takže ne H2->H4.)
 * Nadpisy by měly být popisné
 * Nadpisy by měly být jedinečné v rámci své vlastní úrovně. (Ve stejné sekci H2 by neměly být dvě H3 se stejným obsahem)
 * Mezi navigací a obsahem by mělo být oddělení


 * Atribut  pro obrázky se smysluplnými hodnotami
 * Pokud je obrázek dekorativní, použijte explicitní prázdnou hodnotu pro atribut alt; ještě lépe, přeměňte jej na obrázek pozadí CSS.
 * alt obrázku má obvykle přednost před atributem title obrázků a dokonce i před atributem title odkazů, které obtékají obrázek.


 * Atribut  pro odkazy
 * Ty se obvykle zobrazují jako popisky
 * Názvy používejte pouze v případě, že se liší od textu odkazu.
 * Většinu názvů odkazů ve skutečnosti čtečky obrazovky nevyslovují, pokud není čtečka takto výslovně nakonfigurována.


 * Atributy,   a
 * Použití  a   umožňuje vybrat správný hlas ve čtečkách obrazovky, vybrat správnou opravu pravopisu v prohlížečích atd.


 * Dostatečný kontrast
 * Vždy zkontrolujte, zda jsou barvy dostatečně kontrastní. U textu je potřeba vyšší kontrast pro menší text (kvůli vyhlazování).


 * Zaměření na navigaci pomocí klávesnice
 * Proveďte not pro odstranění obrysů (remove outline) ze zaměřených prvků, pokud nedefinujete svůj vlastní obrys pro stav.
 * Jinak nepoužívejte.
 * Pokud definujete jakoukoli pseudotřídu, například  nebo , definujte také styl.


 * Navigace pomocí klávesnice
 * Interaktivní prvky stránky by měly umožňovat navigaci pomocí klávesnice. Ujistěte se, prosím, že je ve vašem prohlížeči povolena navigace klávesou tabulátoru a umožňuje vám ovládat každý interaktivní prvek bez použití ukazovacího zařízení.
 * Pomocí  zpřístupněte klávesnici prvků, které nejsou z klávesnice přístupné implicitně (Cokoliv kromě, , , , , , ).
 * V tomto případě přidejte také handler keydown reagující na Enter (keyCode 13) a mezeru (keyCode 32).
 * Pomocí  odeberte prvky z usnadnění. (použijte to u odkazů, které jsou například štítky pro akci uvnitř )
 * Prvky, které jsou implicitně přístupné z klávesnice, budou přesměrovány klávesou Enter/mezerník dolů na manipulátor kliknutí


 * Dialogy atd.

Když se dobře nestaráte o přístupnost, jsou dialogy některé z nejhůře přístupných prvků pro uživatele čtečky obrazovky a klávesnice. Věnujte tomu nějaký čas.


 * Prvek, který otevře dialogové okno, by měl mít
 * Samotný dialog by měl mít
 * Při otevírání dialogu si zapamatujte poslední vybraný prvek a přesuňte fokus na první zaměřitelný prvek s tabelátorem uvnitř dialogu
 * Když je dialog modální, znemožní interakci se zbytkem stránky
 * Zachyťte kliknutí mimo dialog a ignorujte je nebo je nechte dialog zavřít
 * Ujistěte se, že nemůžete tabulátorem procházet odkazy nebo vkládat prvky mimo dialog
 * Udělejte prvky mimo dialogové okno nedostupné pro čtečku obrazovky pomocí aria-hidden
 * Ujistěte se, že existuje režim zavření (klávesa Esc a zaostřitelné tlačítko zavření s popisným názvem)
 * Zavření by mělo vrátit fokus (klávesnice) na původní zaostřovací bod, který jste uložili při otevření dialogu. Aby se čtečky obrazovky vrátily do stejného bodu, nezapomeňte zadat pravého vlastníka dialogu, pokud jste dialog nevložili v pořadí DOM.
 * Přečtěte si: Aria modaly, Aria modální dialog, ARIA nemodální dialog, ARIA popisky.
 * Přečtěte si: Aria modaly, Aria modální dialog, ARIA nemodální dialog, ARIA popisky.


 * WCAG 2.1 pravidla
 * Sledujte, kde je to možné
 * A jeho doprovodné dokumenty:
 * Průvodce pro pochopení a implementaci Web Content Accessibility Guidelines 2.0
 * Doplněk WCAG 2.1
 * Techniky a selhání pokynů pro přístupnost webového obsahu 2.0
 * Doplněk WCAG 2.1



Co opravdu ne

 * There is common advice to use  to push something (often the labels of icon buttons) out of the viewport for visual users and still have it in the accessibility DOM.   is variant of this. This is BAD advice.
 * This breaks our RTL rendering in several browsers. Specifically in rtl mode it creates a large canvas left of the viewport and scrollbars, much as +1000px would create in ltr mode. (If needed,  is preferred over   to avoid this).
 * VoiceOver on mobile is unable to use this text as a fallback, since it is a 'positional' screen reader. You cannot move your finger over this text and thus the text will not be read either. (aria-label is often the better choice).
 * Lastly, this enlarges the render surface needed to calculate the final webpage and this can impact performance on mobile devices.
 * Insightful overview of 'hide text offscreen' tricks are given by Jonathan Snook.
 * Things should not be repeated often. If you have a 100 links on a page that can open a dialog, then don't add 100 labels to those 100 links telling the user that it can be used to open a dialog. Telling a user how to use/what to do with the interface is a good thing, doing it consistently is simply annoying. Find a different way to explain it once (an  might be an idea in this case ?).
 * with an onclick handler. VO reads such JS as "internal link Hide". Use a proper button, or, with 'space' and 'enter' key handlers in the onclick. But no href attribute.
 * Do not nest interactive functionality inside another interactive element (links or buttons inside links). This confuses screen readers.

Vyhněte se

 * Unicode symbols : Most assistive technologies are not good with symbols. Therefore, try to avoid characters such as ↑, →‎ or more complex characters, because many screen reader won't understand them. If they are required, try to wrap with a span element with the title attribute, so that the title attribute can communicate the implicit meaning within the context to the reader.
 * Small fonts : Legibility is preferred. If you make something so small that it is hard to read, do you even need it to begin with? Also avoid small fonts with low or mediocre contrast values (even if they fall inside the WCAG guidelines, small sizes require more explicit contrast then large sizes, especially with anti aliasing enabled).
 * Unusually large fonts : If you make text much larger than normal, it can become similarly hard to read (unless it's very short). This applies mostly to body text, or anything that takes up more than a couple lines. But the larger the text is, the more lines it will take up.
 * tabIndex > 0 : DOM order is preferred wherever possible. DOM order provides context for the actions.
 * Workarounds : Traditionally, accomplishing 'full' accessibility has required a lot of workarounds for html itself, the browsers and even specific screenreader software. However these workarounds often come with side effects, make use of bugs or unspecified behavior and inevitably create technical debt.
 * MediaWiki, because of the users it seeks to serve, the amount of code, it's (lack) of funding, etc tends to prefer future proof code over code that easily breaks. As such it generally avoids workarounds even if that might sometimes limit the accessibility we can deliver. Decisions on this are often influenced by the relative audience of the feature in MediaWiki. If something is ubiquitous for all users a workaround is more warrented than if the feature affected is only used by a tiny part of the audience (for instance, reading a page vs modifying the configuration of the installation).

Zvažte

 * ARIA Roles
 * If a div or span behaves like an actual button use . also   and
 * Be careful with roles. For instance, don't add  to a  element, since the  element has an implicit , which will be overwritten. Instead use nested elements. Similarly for  which has an implicit
 * If a button creates a popupdialog, use.
 * Use  for contexts where this is not fully logical by itself (so everywhere except for labels in forms and headers in tables).
 * Avoid tables for layout purposes and test on smaller screen widths.
 * hide stuff: https://www.tpgi.com/html5-accessibility-chops-hidden-and-aria-hidden/
 * skip/jump to links



Související odkazy

 * Wikimedia Design Style Guide: Accessibility principles
 * Open bugs and feature requests related to the accessibility in MediaWiki and other Wikimedia software
 * W3C Web Accessibility Initiative: Tips for Getting Started
 * W3C Web Accessibility Initiative: Web Accessibility Evaluation Tools List
 * Firefox Developer Tools: Accessibility Inspector
 * Chrome Developer Tools: Accessibility features
 * Accessibility and usability cleanup
 * Blogposts
 * Steps Towards an Accessible Web Form
 * Understanding WCAG Level
 * Software
 * WAVE, a Web accessibility evaluation tool
 * Accessibility simulation on MediaWiki. Experience a page as a color blind person would experience it.
 * https://www.deque.com/axe/ browser extension for accessibility auditing a page
 * https://www.powermapper.com/products/sortsite/checks/accessibility-checks/ webapp for accessibility auditing. See also https://www.powermapper.com/tests/
 * University of Cambridge - Impairment simulator software (Microsoft Windows only)
 * Guides by 3rd parties
 * Designing accessible services by UK Home Office
 * Inclusive Design by Microsoft