IT ENCYKLOPEDIE

Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku.
====== Digitální přístupnost (A11Y) ======

Pojem **a11y** je numeronymum pro slovo **Accessibility** (přístupnost). Číslo 11 nahrazuje jedenáct písmen mezi počátečním "a" a koncovým "y". Označuje snahu o vytváření digitálního obsahu, který mohou používat všichni lidé, bez ohledu na jejich zdravotní omezení nebo technické vybavení.



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

Přístupnost není jen o pomoci lidem se zrakovým postižením. Týká se široké škály uživatelů:
  * **Trvalé postižení:** Nevidomí, neslyšící, lidé s motorickým omezením.
  * **Dočasné postižení:** Člověk se zlomenou rukou nebo po operaci očí.
  * **Situční omezení:** Rodič držící dítě, uživatel na přímém slunci (špatný kontrast) nebo v hlučném prostředí (potřeba titulků).
  * **Technické omezení:** Pomalé internetové připojení nebo starší hardware.

===== Základní pilíře (POUR) =====

Metodika **WCAG** (Web Content Accessibility Guidelines) definuje čtyři základní principy, pod které spadají všechna pravidla:

^ Princip ^ Popis ^
| **Vnímatelnost** (Perceivable) | Informace a rozhraní musí být prezentovány tak, aby je uživatelé mohli vnímat svými smysly. |
| **Ovladatelnost** (Operable) | Prvky rozhraní a navigace musí být ovladatelné (např. pomocí klávesnice). |
| **Srozumitelnost** (Understandable) | Informace a ovládání musí být pochopitelné pro široké spektrum uživatelů. |
| **Robustnost** (Robust) | Obsah musí být kompatibilní s různými technologiemi (včetně asistivních technologií, jako jsou čtečky obrazovky). |

===== Praktické tipy pro tvorbu webu =====

==== 1. Sémantické HTML ====
Používejte značky k jejich účelu. Tlačítko má být `<button>`, odkaz `<a>` a nadpisy mají následovat v logickém pořadí (H1 -> H2 -> H3).

==== 2. Alternativní texty u obrázků ====
Každý informativní obrázek by měl mít atribut `alt`.
<code>
<img src="pes.jpg" alt="Zlatý retrívr běžící v trávě">
</code>

==== 3. Kontrast barev ====
Text musí být dostatečně kontrastní vůči pozadí. Standardem je poměr alespoň **4.5:1** pro běžný text.

==== 4. Ovládání z klávesnice ====
Uživatel by měl být schopen projít celý web pouze pomocí klávesy **Tab**. Vždy musí být vidět aktuální "focus" (zaměření) prvku.

===== Užitečné nástroje =====

  * **Lighthouse** (v prohlížeči Chrome) – základní automatizovaný audit.
  * **WAVE Accessibility Tool** – vizuální zobrazení chyb přímo na stránce.
  * **NVDA** nebo **VoiceOver** – čtečky obrazovky pro testování reálné zkušenosti.

> **Tip:** Přístupnost není "vlastnost", kterou přidáte na konci projektu. Je to proces, který začíná už u designu a návrhu uživatelské zkušenosti (UX).

----
**Související stránky:**
  * [[standardy:wcag|Průvodce WCAG 2.1]]
  * [[design:barvy|Teorie barev a kontrastu]]