# Vytváranie prístupných webstránok ![Všetko o prístupnosti](../../../../translated_images/sk/webdev101-a11y.8ef3025c858d897a.webp) > Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey title Vaša dobrodružná cesta učenia sa prístupnosti section Základy Porozumenie používateľom: 5: You Testovacie nástroje: 4: You Zásady POUR: 5: You section Rozvíjanie zručností Sémantický HTML: 4: You Vizuálny dizajn: 5: You ARIA techniky: 4: You section Majstrovská prax Navigácia pomocou klávesnice: 5: You Prístupnosť formulárov: 4: You Testovanie v reálnom svete: 5: You ``` ## Predprednáškový test [Predprednáškový test](https://ff-quizzes.netlify.app/web/) > Sila webu spočíva v jeho univerzálnosti. Prístup pre všetkých bez ohľadu na postihnutie je základným aspektom. > > \- Sir Timothy Berners-Lee, riaditeľ W3C a vynálezca World Wide Web Tu je niečo, čo vás môže prekvapiť: keď vytvárate prístupné webové stránky, nie len pomáhate ľuďom s postihnutím — v skutočnosti robíte web lepším pre všetkých! Všimli ste si niekedy tie znížené obrubníky na rohoch ulíc? Pôvodne boli navrhnuté pre invalidné vozíky, ale teraz pomáhajú aj rodičom s kočíkmi, doručovateľom s vozíkmi, cestujúcim s kuframi na kolieskach a aj cyklistom. Presne takto funguje prístupný dizajn webu — riešenia, ktoré pomáhajú jednej skupine, často nakoniec prospievajú všetkým. Celkom super, však? V tejto lekcii preskúmame, ako vytvoriť webové stránky, ktoré skutočne fungujú pre všetkých, bez ohľadu na to, ako prehliadajú web. Objavíte praktické techniky, ktoré sú už zabudované do webových štandardov, vyskúšate si testovacie nástroje a uvidíte, ako prístupnosť robí vaše stránky použiteľnejšími pre všetkých používateľov. Na konci tejto lekcie budete mať sebadôveru urobiť prístupnosť prirodzenou súčasťou vášho vývojového workflow. Ste pripravení preskúmať, ako premyslené dizajnové rozhodnutia môžu otvoriť web miliardám používateľov? Poďme na to! ```mermaid mindmap root((Webová prístupnosť)) Users Screen readers Keyboard navigation Voice control Magnification Technologies HTML semantics ARIA attributes CSS focus indicators Keyboard events Benefits Širšie publikum Lepšie SEO Právna zhoda Univerzálny dizajn Testing Automatizované nástroje Manuálne testovanie Spätná väzba od používateľov Skutočná asistenčná technika ``` > Túto lekciu si môžete absolvovať na [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! ## Pochopenie asistívnych technológií Skôr než skočíme do kódovania, venujme chvíľu pochopeniu, ako ľudia s rôznymi schopnosťami vlastne zažívajú web. Nie je to len teória — pochopenie týchto reálnych vzorcov navigácie z vás spraví oveľa lepšieho vývojára! Asistívne technológie sú naozaj úžasné nástroje, ktoré pomáhajú ľuďom s postihnutím interagovať s webovými stránkami spôsobmi, ktoré vás môžu prekvapiť. Keď pochopíte, ako tieto technológie fungujú, vytváranie prístupných webových zážitkov sa stane oveľa intuitívnejším. Je to ako naučiť sa pozerať na váš kód očami niekoho iného. ### Čítače obrazovky [Čítače obrazovky](https://en.wikipedia.org/wiki/Screen_reader) sú pomerne sofistikované technologické zariadenia, ktoré prevádzajú digitálny text do reči alebo braillovského výstupu. Aj keď ich primárne používajú ľudia so zrakovým postihnutím, sú tiež veľmi užitočné pre používateľov s poruchami učenia ako dyslexia. Rád si predstavujem čítač obrazovky ako veľmi inteligentného rozprávača, ktorý vám číta knihu. Číta obsah nahlas v logickom poradí, oznamuje interaktívne prvky ako „tlačidlo“ alebo „odkaz“ a poskytuje klávesové skratky na preskakovanie po stránke. Ale tu je háčik — čítače obrazovky dokážu zázraky urobiť len vtedy, ak vytvárame webové stránky so správnou štruktúrou a zmysluplným obsahom. A tu prichádzate vy ako vývojár! **Populárne čítače obrazovky na rôznych platformách:** - **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (zadarmo a najpopulárnejší), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (vstavaný) - **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (vstavaný a veľmi schopný) - **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (vstavaný) - **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (zadarmo a open-source) **Ako čítače obrazovky navigujú webový obsah:** Čítače obrazovky poskytujú viacero navigačných metód, ktoré robia prehliadanie efektívnym pre skúsených používateľov: - **Sekvenčné čítanie**: Číta obsah odhora nadol, ako keby ste sledovali knihu - **Navigácia podľa významných oblastí**: Skákanie medzi časťami stránky (hlavička, navigácia, hlavná časť, päta) - **Navigácia podľa nadpisov**: Preskakovanie medzi nadpismi na pochopenie štruktúry stránky - **Zoznam odkazov**: Vygenerovanie zoznamu všetkých odkazov pre rýchly prístup - **Ovládacie prvky formulárov**: Priama navigácia medzi vstupnými poliami a tlačidlami > 💡 **Niečo, čo ma úplne ohromilo**: 68 % používateľov čítačov obrazovky naviguje primárne podľa nadpisov ([WebAIM survey](https://webaim.org/projects/screenreadersurvey9/#finding)). To znamená, že vaša štruktúra nadpisov je ako mapa pre používateľov — keď ju máte správne, doslova pomáhate ľuďom rýchlejšie sa orientovať vo vašom obsahu! ### Budovanie pracovného postupu testovania Tu je dobrá správa — efektívne testovanie prístupnosti nemusí byť ohromujúce! Budete chcieť kombinovať automatizované nástroje (sú skvelé na odhaľovanie očividných problémov) s niekoľkými praktickými testami. Tu je systematický prístup, ktorý som zistil, že odhalí najviac problémov bez zbytočného plytvania celým dňom: **Základný manuálny testovací workflow:** ```mermaid flowchart TD A[🚀 Začať testovanie] --> B{⌨️ Navigácia klávesnicou} B --> C[Prechádzať všetky interaktívne prvky pomocou tabulátora] C --> D{🎧 Testovanie čítačom obrazovky} D --> E[Testovať s NVDA/VoiceOver] E --> F{🔍 Testovanie zväčšenia} F --> G[Zväčšiť na 200 % a otestovať funkčnosť] G --> H{🎨 Kontrola farieb/kontrastu} H --> I[Overiť, či všetko text spĺňa pomery kontrastu] I --> J{👁️ Správa fokusu} J --> K[Zaistiť, aby boli indikátory fokusu viditeľné] K --> L[✅ Testovanie dokončené] style A fill:#e3f2fd style L fill:#e8f5e8 style B fill:#fff3e0 style D fill:#f3e5f5 style F fill:#e0f2f1 style H fill:#fce4ec style J fill:#e8eaf6 ``` **Kontrolný zoznam testovania krok za krokom:** 1. **Navigácia pomocou klávesnice**: Používajte iba Tab, Shift+Tab, Enter, Medzerník a šípky 2. **Testovanie čítačom obrazovky**: Zapnite NVDA, VoiceOver alebo Narrator a navigujte so zatvorenými očami 3. **Testovanie zväčšenia**: Testujte na úrovniach zväčšenia 200 % a 400 % 4. **Overenie farebného kontrastu**: Skontrolujte všetok text a UI komponenty 5. **Testovanie indikátora fokusu**: Uistite sa, že všetky interaktívne prvky majú viditeľné stavy fokusu ✅ **Začnite s Lighthouse**: Otvorte DevTools vášho prehliadača, spustite Lighthouse audit prístupnosti a potom použite výsledky na nasmerovanie manuálneho testovania. ### Nástroje na zoom a zväčšovanie Viete, ako občas na telefóne štípete obrazovku, keď je text príliš malý, alebo sa mračíte na obrazovku svojho laptopu na ostré slnko? Mnohí používatelia denne využívajú nástroje na zväčšenie obsahu, aby bol text čitateľný. Patrí sem ľudia so zhoršeným videním, starší dospelí a každý, kto sa niekedy pokúsil čítať web vonku. Moderné technológie zoomu sa vyvinuli ďalej než len jednoduché zväčšovanie. Pochopenie, ako tieto nástroje fungujú, vám pomôže vytvárať responzívne dizajny, ktoré zostanú funkčné a pekné pri akejkoľvek úrovni zväčšenia. **Možnosti moderného zoomu v prehliadačoch:** - **Zoom celej stránky**: Pomerné zväčšenie celého obsahu (text, obrázky, rozloženie) — toto je preferovaná metóda - **Zoom len textu**: Zväčšuje písmo pri zachovaní pôvodného rozloženia - **Pinch-to-zoom**: Podpora gest na mobiloch pre dočasné zväčšenie - **Podpora prehliadačov**: Všetky moderné prehliadače podporujú zoom až do 500 % bez prerušenia funkčnosti **Špecializovaný softvér na zväčšenie:** - **Windows**: [Lupa](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (vstavaná), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) - **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (vstavaný s pokročilými funkciami) > ⚠️ **Dizajnové zváženie**: WCAG požaduje, aby obsah zostal funkčný pri zväčšení na 200 %. Na tejto úrovni by horizontálne rolovanie malo byť minimálne a všetky interaktívne prvky by mali byť stále prístupné. ✅ **Otestujte svoj responzívny dizajn**: Zväčšte prehliadač na 200 % a 400 %. Prispôsobuje sa váš layout plynulo? Máte stále prístup ku všetkej funkčnosti bez nadmerného rolovania? ## Moderné nástroje na testovanie prístupnosti Teraz, keď chápete, ako ľudia navigujú web pomocou asistívnych technológií, pozrime sa na nástroje, ktoré vám pomôžu budovať a testovať prístupné weby. Myslite na to takto: automatizované nástroje sú skvelé na zachytenie očividných problémov (ako chýbajúci alt text), zatiaľ čo manuálne testovanie vám pomáha uistiť sa, že vaša stránka je v reálnom svete príjemná na používanie. Spoločne vám dávajú istotu, že vaše stránky fungujú pre všetkých. ### Testovanie farebného kontrastu Tu je dobrá správa: farebný kontrast je jedna z najbežnejších problémov prístupnosti, ale zároveň jedna z najjednoduchších na opravu. Dobrý kontrast prospieva všetkým — od ľudí so zrakovým postihnutím až po používateľov snažiacich sa čítať svoje telefóny na pláži. **Požiadavky WCAG na kontrast:** | Typ textu | WCAG AA (Minimálne) | WCAG AAA (Vylepšené) | |-----------|---------------------|---------------------| | **Bežný text** (pod 18pt) | Kontrast 4,5:1 | Kontrast 7:1 | | **Veľký text** (18pt+ alebo 14pt+ tučný) | Kontrast 3:1 | Kontrast 4,5:1 | | **UI komponenty** (tlačidlá, okraje formulárov) | Kontrast 3:1 | Kontrast 3:1 | **Nezbytné testovacie nástroje:** - [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) – desktopová aplikácia s výberom farieb - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) – webová aplikácia s okamžitou spätnou väzbou - [Stark](https://www.getstark.co/) – plugin do dizajnových nástrojov Figma, Sketch, Adobe XD - [Accessible Colors](https://accessible-colors.com/) – nájdite prístupné farebné palety ✅ **Vytvorte lepšie farebné palety**: Začnite so svojimi značkovými farbami a použite kontroléry kontrastu na vytvorenie prístupných variácií. Dokumentujte ich ako prístupné farebné tokeny vášho dizajnového systému. ### Komplexné audity prístupnosti Najefektívnejšie testovanie prístupnosti kombinuje viacero prístupov. Žiaden jeden nástroj neodhalí všetko, preto vytvorenie testovacieho režimu s rôznymi metódami zabezpečí dôkladné pokrytie. **Testovanie v prehliadači (vstavané v DevTools):** - **Chrome/Edge**: Lighthouse audit prístupnosti + panel prístupnosti - **Firefox**: Inšpektor prístupnosti s detailným stromom - **Safari**: Audit v Web Inspector so simuláciou VoiceOver **Profesionálne testovacie rozšírenia:** - [axe DevTools](https://www.deque.com/axe/devtools/) – štandardný nástroj na automatizované testovanie - [WAVE](https://wave.webaim.org/extension/) – vizuálna spätná väzba s označením chýb - [Accessibility Insights](https://accessibilityinsights.io/) – komplexný balík testov od Microsoftu **Integrácia do príkazového riadku a CI/CD:** - [axe-core](https://github.com/dequelabs/axe-core) – JavaScript knižnica pre automatizované testovanie - [Pa11y](https://pa11y.org/) – nástroj na testovanie prístupnosti cez príkazový riadok - [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) – automatizované skórovanie prístupnosti > 🎯 **Cieľ testovania**: Snažte sa o Lighthouse skóre prístupnosti 95+ ako základnú úroveň. Pamätajte, že automatizované nástroje zachytia len asi 30–40 % problémov — manuálne testovanie je stále nevyhnutné! ### 🧠 **Kontrola testovacích zručností: Ste pripravení nájsť problémy?** **Pozrime sa, ako sa cítite ohľadom testovania prístupnosti:** - Ktorá metóda testovania sa vám zatiaľ zdá najprístupnejšia? - Viete si predstaviť používanie iba klávesnice na navigáciu celý deň? - S akou bariérou prístupnosti ste sa osobne stretli na internete? ```mermaid pie title "Problémy prístupnosti zistené rôznymi metódami" "Automatizované nástroje" : 35 "Manuálne testovanie" : 40 "Spätná väzba od používateľov" : 25 ``` > **Posilnenie dôvery**: Profesionálni testeri prístupnosti používajú presne túto kombináciu metód. Učíte sa postupy na úrovni priemyslu! ## Budovanie prístupnosti od základov Kľúč k úspechu prístupnosti je začleniť ju do vášho základu už od prvej chvíle. Viem, že je lákavé myslieť si „Pridám prístupnosť neskôr“, ale to je ako snažiť sa do domu, ktorý je už postavený, dodatočne dorobiť rampu. Možné? Áno. Ľahké? Nie naozaj. Predstavte si prístupnosť ako plánovanie domu — oveľa jednoduchšie je zahrnúť bezbariérový prístup do architektonických plánov hneď na začiatku, než to dodatočne dodávať. ### Princípy POUR: Váš základ prístupnosti Smernice pre prístupnosť webového obsahu (WCAG) sú postavené okolo štyroch základných princípov, ktoré tvoria skratku POUR. Nebojte sa — nie sú to suché akademické pojmy! Sú to praktické usmernenia na tvorbu obsahu, ktorý funguje pre všetkých. Keď pochopíte POUR, rozhodovanie o prístupnosti bude oveľa intuitívnejšie. Je to ako mať mentálny kontrolný zoznam, ktorý vedie vaše dizajnové rozhodnutia. Pozrime sa na to: ```mermaid flowchart LR A[🔍 VNÍMATEĽNÉ
Môžu to používatelia vnímať?] --> B[🎮 OVLÁDATEĽNÉ
Môžu to používatelia používať?] B --> C[📖 ZROZUMITEĽNÉ
Môžu to používatelia pochopiť?] C --> D[💪 ROBUSTNÉ
Funguje to všade?] A1[Alternatívny text
Titulky
Kontrast] --> A B1[Prístup z klávesnice
Žiadne záchvaty
Časové limity] --> B C1[Jasný jazyk
Predvídateľné
Pomoc pri chybách] --> C D1[Platný kód
Kompatibilné
Budúcnostné] --> D style A fill:#e1f5fe style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 ``` **🔍 Vnímateľné**: Informácie musia byť prezentovateľné spôsobom, ktorý používatelia môžu vnímať prostredníctvom svojich dostupných zmyslov - Poskytnite textové alternatívy pre ne-textový obsah (obrázky, videá, audio) - Zabezpečte dostatočný farebný kontrast pre všetok text a UI komponenty - Ponúknite titulky a prepisy pre multimediálny obsah - Navrhnite obsah tak, aby zostal funkčný pri zväčšení až do 200 % - Používajte viacero senzorických charakteristík (nie iba farbu) na sprostredkovanie informácií **🎮 Ovládateľné**: Všetky komponenty rozhrania musia byť ovládateľné dostupnými vstupnými metódami - Zabezpečte prístup k všetkej funkčnosti pomocou klávesnice - Poskytnite používateľom dostatok času na čítanie a interakciu s obsahom - Vyhnite sa obsahu, ktorý môže spôsobiť záchvaty alebo vestibulárne poruchy - Pomôžte používateľom efektívne sa orientovať s jasnou štruktúrou a orientačnými bodmi - Zabezpečte, aby interaktívne prvky mali dostatočnú veľkosť cieľa (minimálne 44px) **📖 Pochopiteľné**: Informácie a ovládanie rozhrania musia byť jasné a zrozumiteľné - Používajte jasný, jednoduchý jazyk vhodný pre vaše publikum - Zabezpečte, že obsah sa zobrazuje a ovláda predvídateľne a konzistentne - Poskytujte jasné inštrukcie a chybové hlásenia pre užívateľský vstup - Pomôžte používateľom pochopiť a opraviť chyby vo formulároch - Organizujte obsah s logickým poriadkom čítania a informačnou hierarchiou **💪 Robustné**: Obsah musí spoľahlivo fungovať naprieč rôznymi technológiami a asistívnymi zariadeniami - **Používajte platný, sémantický HTML ako základ** - **Zabezpečte kompatibilitu s aktuálnymi a budúcimi asistívnymi technológiami** - **Dodržiavajte webové štandardy a osvedčené postupy pre značkovanie** - **Testujte na rôznych prehliadačoch, zariadeniach a asistenčných nástrojoch** - **Štruktúrujte obsah tak, aby sa primerane degradoval, keď pokročilé funkcie nie sú podporované** ### 🎯 **Kontrola princípov POUR: Ako to upevniť** **Rýchla reflexia základov:** - Viete si predstaviť funkciu webu, ktorá porušuje každý princíp POUR? - Ktorý princíp vám ako vývojárovi príde najprirodzenejší? - Ako by tieto princípy mohli zlepšiť dizajn pre všetkých, nielen pre používateľov so zdravotným postihnutím? ```mermaid quadrantChart title MATICA VPLYVU zásad POUR x-axis Nízka námaha --> Vysoká námaha y-axis Nízky vplyv --> Vysoký vplyv quadrant-1 Rýchle víťazstvá quadrant-2 Hlavné projekty quadrant-3 Zvážiť neskôr quadrant-4 Strategické zameranie Alt Text: [0.2, 0.9] Color Contrast: [0.3, 0.8] Semantic HTML: [0.4, 0.9] Keyboard Nav: [0.6, 0.8] ARIA Complex: [0.8, 0.7] Screen Reader Testing: [0.7, 0.6] ``` > **Pamätajte**: Začnite s vylepšeniami, ktoré majú veľký dopad a nízku náročnosť. Semantický HTML a alt text vám prinesú najväčší prínos pre prístupnosť pri najmenšej námahe! ## Vytváranie prístupného vizuálneho dizajnu Dobrý vizuálny dizajn a prístupnosť idú ruka v ruke. Keď navrhujete s ohľadom na prístupnosť, často zistíte, že tieto obmedzenia vedú k čistejším, elegantnejším riešeniam, ktoré prospievajú všetkým používateľom. Preskúmajme, ako vytvárať vizuálne príťažlivé dizajny, ktoré fungujú pre každého, bez ohľadu na ich vizuálne schopnosti alebo podmienky, za ktorých si obsah prezerajú. ### Stratégií používania farieb a vizuálnej prístupnosti Farba je silný prostriedok komunikácie, ale nikdy by nemala byť jediným spôsobom, ako prenášať dôležité informácie. Návrh presahujúci samotnú farbu vytvára robustnejšie, inkluzívnejšie zážitky, ktoré fungujú v rôznych situáciách. **Navrhujte pre rozdiely vo farebnom videní:** Približne 8 % mužov a 0,5 % žien má nejaký typ farebného videnia (často nazývaný „farebná slepota“). Najbežnejšie typy sú: - **Deuteranopia**: ťažkosti s rozlíšením červenej a zelenej - **Protanopia**: červená farba sa javí matnejšia - **Tritanopia**: ťažkosti s modrou a žltou (zriedkavé) **Inkluzívne farebné stratégie:** ```css /* ❌ Bad: Using only color to indicate status */ .error { color: red; } .success { color: green; } /* ✅ Good: Color plus icons and context */ .error { color: #d32f2f; border-left: 4px solid #d32f2f; } .error::before { content: "⚠️"; margin-right: 8px; } .success { color: #2e7d32; border-left: 4px solid #2e7d32; } .success::before { content: "✅"; margin-right: 8px; } ``` **Nad rámec základných požiadaviek na kontrast:** - Testujte svoje farebné voľby pomocou simulátorov farebnej slepoty - Používajte vzory, textúry alebo tvary spolu s farebným kódovaním - Zabezpečte, že interaktívne stavy zostanú rozlíšiteľné aj bez farby - Zvážte, ako váš dizajn vyzerá v režime vysokého kontrastu ✅ **Otestujte prístupnosť farieb**: Použite nástroje ako [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/), aby ste videli, ako vaša stránka vyzerá pre používateľov s rôznymi typmi farebného videnia. ### Indikátory fokusu a dizajn interakcie Indikátory fokusu sú digitálnou obdobou kurzora—ukazujú používateľom klávesnice, kde sa nachádzajú na stránke. Dobre navrhnuté indikátory fokusu zlepšujú zážitok pre všetkých tým, že robia interakcie jasnými a predvídateľnými. **Najlepšie postupy pre moderné indikátory fokusu:** ```css /* Enhanced focus styles that work across browsers */ button:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25); } /* Remove focus outline for mouse users, preserve for keyboard users */ button:focus:not(:focus-visible) { outline: none; } /* Focus-within for complex components */ .card:focus-within { box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5); border-color: #4A90A4; } /* Ensure focus indicators meet contrast requirements */ .custom-focus:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 6px #000000; } ``` **Požiadavky na indikátory fokusu:** - **Viditeľnosť**: Musí mať aspoň pomer kontrastu 3:1 so susednými prvkami - **Šírka**: Minimálna hrúbka 2 px okolo celého prvku - **Trvácnosť**: Má zostať viditeľný, kým sa fokus nepresunie inde - **Rozlíšiteľnosť**: Musí byť vizuálne odlišný od iných stavov UI > 💡 **Typ dizajnu**: Skvelé indikátory fokusu často používajú kombináciu obrysu, tieňa rámčeka a zmeny farby, aby zabezpečili viditeľnosť na rôznych pozadiach a v rôznych kontextoch. ✅ **Skontrolujte indikátory fokusu**: Prechádzajte cez vašu stránku pomocou klávesy Tab a všimnite si, ktoré prvky majú jasné indikátory fokusu. Niektoré sú ťažko viditeľné alebo úplne chýbajú? ### Semantický HTML: Základ prístupnosti Semantický HTML je ako poskytnúť asistenčným technológiám GPS systém pre váš web. Keď používate správne HTML elementy na ich určený účel, v podstate poskytujete čítačkám obrazovky, klávesniciam a iným nástrojom podrobnú mapu, ktorá používateľom pomáha efektívne sa orientovať. Príklad, ktorý mi veľmi pomohol: semantický HTML je rozdiel medzi dobre usporiadanou knižnicou s jasnými kategóriami a nápismi oproti skladišťu, kde sú knihy rozhádzané náhodne. Obe miesta majú rovnaké knihy, ale v ktorom by ste radšej hľadali niečo? Presne tak! ```mermaid flowchart TD A[🏠 HTML dokument] --> B[📰 hlavička] A --> C[🧭 navigácia] A --> D[📄 hlavný obsah] A --> E[📋 pätička] B --> B1[h1: Názov stránky
Logo a značka] C --> C1[ul: Navigácia
Hlavné odkazy] D --> D1[článok: Obsah
sekcia: Podsekcie] D --> D2[poznámka: Bočný panel
Súvisiaci obsah] E --> E1[navigácia: Odkazy v pätičke
Informácie o autorských právach] D1 --> D1a[h1: Názov stránky
h2: Hlavné časti
h3: Podsekcie] style A fill:#e3f2fd style B fill:#e8f5e8 style C fill:#fff3e0 style D fill:#f3e5f5 style E fill:#e0f2f1 ``` **Stavebné prvky štruktúry prístupnej stránky:** ```html

Your Site Name

Article Title

Published on

First Section

Content that relates to this section...

Second Section

More related content...

``` **Prečo semantický HTML mení prístupnosť:** | Semantický prvok | Účel | Výhoda pre čítačku obrazovky | |------------------|-------|------------------------------| | `
` | Hlavička stránky alebo sekcie | „Banner landmark“ – rýchla navigácia na vrch | | `