M

MLOG

Slovenčina

Príručka o webovej prístupnosti (a11y) pre frontendových vývojárov. Naučte sa princípy a techniky na tvorbu inkluzívnych a prístupných webových zážitkov.

Webová prístupnosť (a11y): Praktická príručka pre frontendových vývojárov

Webová prístupnosť (často skracovaná ako a11y, kde 11 predstavuje počet písmen medzi 'a' a 'y') je prax navrhovania a vývoja webových stránok a aplikácií tak, aby boli použiteľné pre ľudí so zdravotným postihnutím. To zahŕňa jednotlivcov so zrakovým, sluchovým, motorickým, kognitívnym a rečovým postihnutím. Tvorba prístupných webových stránok nie je len o dodržiavaní predpisov; je to o vytváraní inkluzívnych a spravodlivých digitálnych zážitkov pre každého, bez ohľadu na jeho schopnosti alebo technológie, ktoré používa na prístup k webu. Je to tiež nevyhnutné na oslovenie širšieho publika. Napríklad dobrý farebný kontrast pomáha používateľom na jasnom slnečnom svetle a prehľadné rozloženie pomáha tým s kognitívnymi poruchami alebo tým, ktorí jednoducho robia viac vecí naraz.

Prečo je webová prístupnosť dôležitá?

Existuje niekoľko presvedčivých dôvodov, prečo uprednostniť webovú prístupnosť:

Pochopenie štandardov a smerníc prístupnosti

Hlavným štandardom pre webovú prístupnosť sú Web Content Accessibility Guidelines (WCAG), vyvinuté konzorciom World Wide Web Consortium (W3C). WCAG poskytuje súbor testovateľných kritérií úspešnosti, ktoré možno použiť na hodnotenie prístupnosti webového obsahu. WCAG je medzinárodne uznávaný a často sa naň odkazuje v zákonoch a predpisoch o prístupnosti po celom svete.

WCAG je organizované okolo štyroch princípov, často označovaných ako POUR:

WCAG má tri úrovne zhody: A, AA a AAA. Úroveň A je najzákladnejšia úroveň prístupnosti, zatiaľ čo úroveň AAA je najkomplexnejšia. Väčšina organizácií sa usiluje o zhodu s úrovňou AA, pretože poskytuje dobrú rovnováhu medzi prístupnosťou a praktickosťou. Mnoho zákonov a nariadení vyžaduje zhodu s úrovňou AA.

Praktické techniky pre frontendových vývojárov

Tu sú niektoré praktické techniky, ktoré môžu frontendoví vývojári použiť na zlepšenie prístupnosti svojich webových stránok a aplikácií:

1. Sémantické HTML

Používanie sémantických HTML prvkov je pre prístupnosť kľúčové. Sémantické HTML poskytuje význam a štruktúru vášmu obsahu, čo uľahčuje asistenčným technológiám jeho pochopenie a interpretáciu. Namiesto používania všeobecných <div> a <span> prvkov pre všetko, používajte sémantické prvky HTML5, ako sú:

Príklad:

<header>
  <h1>Moja webstránka</h1>
  <nav>
    <ul>
      <li><a href="#">Domov</a></li>
      <li><a href="#">O nás</a></li>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Názov článku</h2>
    <p>Obsah článku tu...</p>
  </article>
</main>

<footer>
  <p>© 2023 Moja webstránka</p>
</footer>

Používanie správnych úrovní nadpisov (<h1> až <h6>) je tiež nevyhnutné pre vytvorenie logickej štruktúry dokumentu. Používajte nadpisy na organizáciu obsahu a uľahčenie navigácie pre používateľov. <h1> by sa mal použiť pre hlavný názov stránky a nasledujúce nadpisy by mali vytvárať hierarchiu informácií. Vyhnite sa preskakovaniu úrovní nadpisov (napr. prechod z <h2> na <h4>), pretože to môže zmiasť používateľov čítačiek obrazovky.

2. Alternatívny text pre obrázky

Všetky obrázky by mali mať zmysluplný alternatívny text (alt text), ktorý popisuje obsah a funkciu obrázka. Alt text používajú čítačky obrazovky na sprostredkovanie informácií o obrázku používateľom, ktorí ho nevidia. Ak je obrázok čisto dekoratívny a neprináša žiadne dôležité informácie, atribút alt by mal byť nastavený na prázdny reťazec (alt="").

Príklad:

<img src="logo.png" alt="Logo spoločnosti">
<img src="decorative-pattern.png" alt="">

Pri písaní alternatívneho textu buďte popisní a struční. Zamerajte sa na sprostredkovanie podstatných informácií, ktoré obrázok poskytuje. Vyhnite sa používaniu fráz ako „obrázok“ alebo „fotografia“, pretože čítačky obrazovky zvyčajne oznámia, že ide o obrázok.

Pre zložité obrázky, ako sú grafy a diagramy, zvážte poskytnutie podrobnejšieho popisu v okolitom texte alebo použitie prvkov <figure> a <figcaption>.

3. Prístupnosť z klávesnice

Všetky interaktívne prvky na vašej webovej stránke by mali byť prístupné pomocou klávesnice. To je kľúčové pre používateľov, ktorí nemôžu používať myš alebo iné polohovacie zariadenie. Zabezpečte, aby používatelia mohli navigovať po vašej webovej stránke pomocou klávesu Tab a interagovať s prvkami pomocou klávesov Enter alebo medzerník.

Dávajte pozor na poradie zamerania (focus order) prvkov na vašej stránke. Poradie zamerania by malo sledovať logickú a intuitívnu cestu obsahom. Na ovládanie poradia zamerania môžete použiť atribút tabindex, ale vo všeobecnosti je najlepšie spoliehať sa na prirodzené poradie prvkov v HTML. Používajte tabindex iba na opravu problémov s predvoleným poradím zamerania.

Poskytnite vizuálne indikátory zamerania, aby používatelia videli, ktorý prvok je aktuálne zameraný. Predvolený indikátor zamerania v prehliadači nemusí byť dostatočný, preto zvážte pridanie vlastného štýlovania pomocou CSS. Uistite sa, že indikátor zamerania má dostatočný kontrast s pozadím.

Príklad:

/* CSS */
a:focus, button:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

4. ARIA atribúty

ARIA (Accessible Rich Internet Applications) je súbor atribútov, ktoré možno pridať k HTML prvkom na poskytnutie dodatočných sémantických informácií asistenčným technológiám. Atribúty ARIA možno použiť na zlepšenie prístupnosti dynamického obsahu, zložitých widgetov a iných interaktívnych prvkov.

Niektoré bežné ARIA atribúty zahŕňajú:

Príklad:

<button aria-label="Zavrieť dialógové okno" onclick="closeDialog()">X</button>
<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Moje dialógové okno</h2>
  <p>Obsah dialógového okna tu...</p>
</div>

Pri používaní ARIA atribútov je dôležité dodržiavať pravidlá používania ARIA:

5. Farebný kontrast

Uistite sa, že medzi textom a jeho pozadím je dostatočný farebný kontrast. Nedostatočný farebný kontrast môže sťažiť čítanie textu používateľom so slabým zrakom alebo farbosleposťou.

WCAG vyžaduje kontrastný pomer najmenej 4.5:1 pre bežný text a 3:1 pre veľký text (18pt alebo 14pt tučné). Na overenie, či vaša webová stránka spĺňa tieto požiadavky, môžete použiť nástroje na kontrolu farebného kontrastu. Existuje mnoho bezplatných online nástrojov, ako napríklad WebAIM Contrast Checker.

Príklad:

/* CSS */
body {
  color: #333; /* Tmavosivý text */
  background-color: #fff; /* Biele pozadie */
}

(Tento príklad má kontrastný pomer 7:1, čo spĺňa požiadavky WCAG.)

Vyhnite sa používaniu farby ako jediného prostriedku na sprostredkovanie informácií. Používatelia, ktorí sú farboslepí, nemusia byť schopní rozlíšiť medzi rôznymi farbami. Na posilnenie významu farby použite ďalšie signály, ako sú textové popisy alebo ikony.

6. Formuláre a popisy

Správne označenie prvkov formulára je pre prístupnosť kľúčové. Použite prvok <label> na priradenie textového popisu ku každému vstupnému poľu formulára. Atribút for prvku <label> by sa mal zhodovať s atribútom id zodpovedajúceho vstupného prvku.

Príklad:

<label for="name">Meno:</label>
<input type="text" id="name" name="name">

Pre zložité formuláre zvážte použitie prvkov <fieldset> a <legend> na zoskupenie súvisiacich ovládacích prvkov formulára. To môže pomôcť používateľom pochopiť účel každej skupiny prvkov.

Poskytujte jasné a stručné chybové hlásenia, keď používatelia urobia chyby pri vypĺňaní formulára. Chybové hlásenia by mali byť zobrazené v blízkosti zodpovedajúceho poľa formulára a mali by poskytovať návod, ako chybu opraviť.

Použite atribút required na označenie, ktoré polia formulára sú povinné. To môže pomôcť používateľom vyhnúť sa náhodnému odoslaniu neúplných formulárov.

7. Prístupnosť multimédií

Uistite sa, že multimediálny obsah, ako sú videá a zvukové nahrávky, je prístupný pre používateľov so zdravotným postihnutím. Poskytnite titulky pre videá a prepisy pre zvukové nahrávky. Titulky by mali presne prepisovať hovorený obsah videa, vrátane dôležitých zvukových efektov alebo hluku v pozadí.

Pre živé video zvážte použitie služieb titulkovania v reálnom čase. Tieto služby môžu poskytovať titulky v reálnom čase, čo umožňuje používateľom so sluchovým postihnutím sledovať obsah. Mnoho platforiem pre videokonferencie ponúka vstavané funkcie živých titulkov.

Poskytnite zvukové popisy pre videá. Zvukové popisy poskytujú rozprávanie o vizuálnom obsahu videa, popisujúce, čo sa deje na obrazovke. Zvukové popisy sú nevyhnutné pre používateľov, ktorí sú nevidiaci alebo majú slabý zrak.

Zabezpečte, aby boli multimediálne ovládacie prvky, ako sú prehrávanie, pauza a ovládanie hlasitosti, prístupné z klávesnice.

8. Dynamický obsah a aktualizácie

Keď sa obsah na vašej webovej stránke dynamicky aktualizuje, je dôležité informovať používateľov o zmenách. Je to obzvlášť dôležité pre používateľov, ktorí používajú čítačky obrazovky, pretože si nemusia byť vedomí, že sa obsah zmenil.

Na oznamovanie dynamických aktualizácií čítačkám obrazovky použite ARIA live regions. ARIA live regions sú oblasti stránky, ktoré sú určené na prijímanie aktualizácií. Keď sa obsah živej oblasti zmení, čítačka obrazovky oznámi zmeny používateľovi. Na definovanie živej oblasti použite atribút aria-live. Atribúty aria-atomic a aria-relevant možno použiť na jemné doladenie toho, ako čítačka obrazovky oznamuje zmeny.

Príklad:

<div aria-live="polite">
  <p id="status-message">Načítava sa...</p>
</div>

<script>
  // Aktualizuje stavovú správu po načítaní dát
  function updateStatus(message) {
    document.getElementById("status-message").textContent = message;
  }
</script>

V tomto príklade atribút aria-live="polite" naznačuje, že čítačka obrazovky by mala oznámiť zmeny obsahu prvku <div>, ale nemala by prerušiť aktuálnu úlohu používateľa. Funkcia updateStatus() aktualizuje obsah prvku <p>, čo spustí čítačku obrazovky, aby oznámila novú stavovú správu.

9. Testovanie prístupnosti

Pravidelne testujte svoju webovú stránku na prístupnosť, aby ste identifikovali a opravili akékoľvek problémy. Existuje množstvo nástrojov a techník, ktoré môžete použiť na testovanie prístupnosti.

Prístupnosť mimo prehliadača

Hoci sa táto príručka zameriava predovšetkým na webovú prístupnosť v kontexte prehliadača, je dôležité pamätať na to, že prístupnosť presahuje rámec webu. Zvážte prístupnosť aj v iných digitálnych oblastiach, ako sú:

Záver

Webová prístupnosť je nevyhnutným aspektom frontendového vývoja. Dodržiavaním princípov a techník uvedených v tejto príručke môžete vytvárať inkluzívne a prístupné webové zážitky pre všetkých používateľov bez ohľadu na ich schopnosti. Pamätajte, že prístupnosť je nepretržitý proces. Pravidelne testujte svoju webovú stránku a zbierajte spätnú väzbu od používateľov so zdravotným postihnutím, aby ste zabezpečili, že zostane prístupná aj v priebehu času. Uprednostňovaním prístupnosti môžete urobiť web inkluzívnejším a spravodlivejším miestom pre všetkých.

Prijatím prístupnosti nielenže spĺňate predpisy; budujete lepší web pre všetkých, rozširujete svoj dosah a posilňujete reputáciu svojej značky v globálnom meradle.