` štylizovaných tak, aby vyzerali ako tabuľka.

Správne:

<table>
  <caption>Kalendár na október 2024</caption>
  <thead>
    <tr>
      <th scope="col">Ne</th>
      <th scope="col">Po</th>
      <th scope="col">Ut</th>
      <th scope="col">St</th>
      <th scope="col">Št</th>
      <th scope="col">Pi</th>
      <th scope="col">So</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>29</td>
      <td>30</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
    </tr>
    <!-- Ďalšie riadky -->
  </tbody>
</table>

2. Atribúty ARIA

Atribúty ARIA (Accessible Rich Internet Applications) poskytujú asistenčným technológiám ďalšie sémantické informácie, čím zlepšujú ich porozumenie interaktívnym prvkom. Použite atribúty ARIA na:

• Definovať roly: Označte účel prvkov, ako napríklad `role="grid"` pre kalendárnu mriežku a `role="gridcell"` pre každú dátumovú bunku.
• Poskytnúť štítky: Použite `aria-label` alebo `aria-labelledby` na poskytnutie popisných štítkov pre prvky, najmä ak vizuálny štítok nestačí.
• Označiť stav: Použite atribúty ako `aria-selected` na označenie vybratého dátumu a `aria-disabled` na označenie zakázaných dátumov.
• Poskytnúť popisy: Použite `aria-describedby` na priradenie ďalších informácií k prvku, napríklad popis formátu dátumu.

Príklad:

<table role="grid" aria-labelledby="date-picker-label">
  <caption id="date-picker-label">Vyberte dátum</caption>
  <thead>
    <tr>
      <th scope="col">Ne</th>
      <th scope="col">Po</th>
      <th scope="col">Ut</th>
      <th scope="col">St</th>
      <th scope="col">Št</th>
      <th scope="col">Pi</th>
      <th scope="col">So</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td role="gridcell" aria-disabled="true">29</td>
      <td role="gridcell" aria-disabled="true">30</td>
      <td role="gridcell"><button aria-label="1. október 2024">1</button></td>
      <td role="gridcell"><button aria-label="2. október 2024">2</button></td>
      <td role="gridcell"><button aria-label="3. október 2024">3</button></td>
      <td role="gridcell"><button aria-label="4. október 2024">4</button></td>
      <td role="gridcell"><button aria-label="5. október 2024">5</button></td>
    </tr>
    <tr>
      <td role="gridcell"><button aria-label="6. október 2024">6</button></td>
      <td role="gridcell"><button aria-label="7. október 2024">7</button></td>
      <td role="gridcell"><button aria-label="8. október 2024">8</button></td>
      <td role="gridcell"><button aria-label="9. október 2024">9</button></td>
      <td role="gridcell"><button aria-label="10. október 2024">10</button></td>
      <td role="gridcell"><button aria-label="11. október 2024">11</button></td>
      <td role="gridcell"><button aria-label="12. október 2024">12</button></td>
    </tr>
    <!-- Ďalšie riadky -->
  </tbody>
</table>

Poznámka: Vždy testujte so skutočnými čítačkami obrazovky, aby ste sa uistili, že sa atribúty ARIA správne interpretujú.

3. Navigácia pomocou klávesnice

Navigácia pomocou klávesnice je nevyhnutná pre používateľov, ktorí nemôžu používať myš alebo iné ukazovacie zariadenie. Uistite sa, že všetky interaktívne prvky vo výbere dátumu sú prístupné pomocou klávesnice.

• Správa zamerania: Použite atribút `tabindex` na ovládanie poradia zamerania. Uistite sa, že zameranie sa logicky pohybuje cez výber dátumu. Použite JavaScript na správu zamerania, keď používateľ interaguje s widgetom.
• Klávesy so šípkami: Implementujte navigáciu pomocou klávesov so šípkami na pohyb medzi dátumami. Klávesy so šípkami doľava a doprava by sa mali pohybovať na predchádzajúci a nasledujúci deň. Klávesy so šípkami nahor a nadol by sa mali pohybovať na rovnaký deň v predchádzajúcom a nasledujúcom týždni.
• Klávesy Home a End: Kláves Home by sa mal presunúť na prvý deň aktuálneho týždňa a kláves End by sa mal presunúť na posledný deň aktuálneho týždňa.
• Klávesy Page Up a Page Down: Kláves Page Up by sa mal presunúť na predchádzajúci mesiac a kláves Page Down by sa mal presunúť na nasledujúci mesiac.
• Kláves Enter: Kláves Enter by mal vybrať zaostrený dátum.
• Kláves Escape: Kláves Escape by mal zavrieť výber dátumu a vrátiť zameranie do vstupného poľa alebo tlačidla, ktoré ho spustilo.

Príklad (JavaScript):

// Príklad spracovania navigácie pomocou klávesnice
const datePicker = document.getElementById('date-picker');

datePicker.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowLeft':
      // Presuňte zameranie na predchádzajúci deň
      break;
    case 'ArrowRight':
      // Presuňte zameranie na nasledujúci deň
      break;
    case 'ArrowUp':
      // Presuňte zameranie na rovnaký deň v predchádzajúcom týždni
      break;
    case 'ArrowDown':
      // Presuňte zameranie na rovnaký deň v nasledujúcom týždni
      break;
    case 'Enter':
      // Vyberte zaostrený dátum
      break;
    case 'Escape':
      // Zatvorte výber dátumu
      break;
  }
});

4. Kompatibilita so čítačkami obrazovky

Čítačky obrazovky sa spoliehajú na sémantické atribúty HTML a ARIA, aby používateľom poskytli informácie. Uistite sa, že váš výber dátumu je kompatibilný s populárnymi čítačkami obrazovky, ako sú NVDA, JAWS a VoiceOver.

• Popisné štítky: Poskytnite jasné a stručné štítky pre všetky interaktívne prvky. Použite `aria-label` alebo `aria-labelledby` na poskytnutie ďalšieho kontextu.
• Oznámenia o stave: Použite atribúty ARIA na označenie stavu prvkov, ako napríklad `aria-selected` pre vybratý dátum a `aria-disabled` pre zakázané dátumy. Čítačky obrazovky oznámia tieto stavy používateľovi.
• Živé oblasti: Použite živé oblasti ARIA (napr. `aria-live="polite"`) na oznamovanie dynamických zmien vo výbere dátumu, napríklad keď používateľ prejde na iný mesiac. To umožňuje čítačkám obrazovky upozorniť používateľa na zmenu bez prerušenia ich pracovného postupu.
• Riešenie chýb: Ak sa vyskytnú nejaké chyby alebo problémy s validáciou, poskytnite jasné a informatívne chybové hlásenia, ktoré sú prístupné čítačkám obrazovky. Použite `aria-describedby` na priradenie chybového hlásenia k príslušnému vstupnému poľu.

Príklad:

<div aria-live="polite">
  <!-- Dynamický obsah, ako je navigácia v mesiaci -->
</div>

5. Vizuálny dizajn

Vizuálny dizajn výberu dátumu by mal byť tiež prístupný. Zvážte nasledujúce:

• Farebný kontrast: Zabezpečte dostatočný farebný kontrast medzi textom a farbami pozadia, aby ste splnili štandardy WCAG (Web Content Accessibility Guidelines) 2.1 Level AA. Na overenie pomeru kontrastu použite nástroj na kontrolu farebného kontrastu.
• Indikátory zamerania: Poskytnite jasný a viditeľný indikátor zamerania pre všetky interaktívne prvky. Indikátor zamerania by sa mal odlišovať od okolitých prvkov a nemal by byť zakrytý inými prvkami.
• Veľkosť a rozostupy písma: Používajte čitateľnú veľkosť písma a dostatočné rozostupy medzi prvkami na zlepšenie čitateľnosti a použiteľnosti.
• Vyhnite sa spoliehaniu sa výlučne na farbu: Nespoliehajte sa výlučne na farbu na sprostredkovanie informácií. Použite ďalšie vizuálne podnety, ako sú ikony alebo text, na doplnenie farebného kódovania.

6. Lokalizácia a internacionalizácia

Formáty dátumov, kalendárne systémy a jazykové konvencie sa líšia v rôznych kultúrach a regiónoch. Uistite sa, že váš výber dátumu je správne lokalizovaný a internacionalizovaný, aby podporoval globálne publikum.

• Formáty dátumov: Použite flexibilnú knižnicu na formátovanie dátumu, ktorá podporuje rôzne formáty dátumu, ako napríklad DD/MM/YYYY (bežné v Európe a časti Ázie) a MM/DD/YYYY (bežné v Severnej Amerike). Umožnite používateľom prispôsobiť formát dátumu podľa ich preferencií.
• Kalendárne systémy: Podpora rôznych kalendárnych systémov, ako je gregoriánsky kalendár (najpoužívanejší kalendár) a hidžrísky kalendár (používaný v mnohých islamských krajinách).
• Jazyková podpora: Poskytnite preklady pre všetky textové prvky vo výbere dátumu vrátane názvov mesiacov, názvov dní a štítkov.
• Podpora sprava doľava (RTL): Uistite sa, že výber dátumu sa správne zobrazuje v jazykoch RTL, ako sú arabčina a hebrejčina. To si môže vyžadovať úpravu rozloženia a štýlu widgetu.
• Časové pásma: Zvážte dôsledky časových pásiem pri spracovaní dátumov. Ukladajte dátumy v konzistentnom časovom pásme (napr. UTC) a pri ich zobrazovaní ich preveďte do miestneho časového pásma používateľa.

Príklad: Použite knižnicu JavaScript ako `moment.js` alebo `date-fns` na spracovanie formátovania dátumu a lokalizácie.

7. Prístupnosť pre mobilné zariadenia

S rastúcim používaním mobilných zariadení je nevyhnutné zabezpečiť, aby bol váš výber dátumu prístupný na mobilných platformách. Zvážte nasledujúce:

• Dotykové ciele: Uistite sa, že všetky interaktívne prvky majú dostatočne veľké dotykové ciele, aby sa dali ľahko klepnúť na mobilných zariadeniach. Apple odporúča minimálnu veľkosť dotykového cieľa 44x44 pixelov.
• Responzívny dizajn: Použite techniky responzívneho dizajnu, aby ste sa uistili, že sa výber dátumu prispôsobí rôznym veľkostiam a orientáciám obrazovky.
• Vstup z klávesnice: Ak výber dátumu vyžaduje vstup z klávesnice, poskytnite klávesnicu vhodnú pre mobilné zariadenia, ktorá je optimalizovaná na zadávanie dátumu.
• Gestá: Vyhnite sa spoliehaniu sa výlučne na gestá, ktoré môžu byť pre používateľov s poruchami motoriky ťažké. Poskytnite alternatívne metódy zadávania, ako je navigácia pomocou klávesnice alebo hlasové ovládanie.

Testovanie a validácia

Dôkladné testovanie je rozhodujúce na zabezpečenie prístupnosti vášho výberu dátumu. Použite kombináciu automatizovaných a manuálnych testovacích metód:

• Automatizované testovanie: Použite nástroje na testovanie prístupnosti, ako sú Axe alebo WAVE, na identifikáciu bežných problémov s prístupnosťou.
• Manuálne testovanie: Manuálne otestujte výber dátumu pomocou čítačky obrazovky a navigácie pomocou klávesnice, aby ste overili, či je použiteľný pre osoby so zdravotným postihnutím.
• Testovanie používateľov: Vykonajte testovanie používateľov s ľuďmi so zdravotným postihnutím, aby ste získali spätnú väzbu a identifikovali oblasti na zlepšenie.
• Súlad s WCAG: Zabezpečte, aby váš výber dátumu spĺňal požiadavky WCAG 2.1 Level AA.

Príklady prístupných výberov dátumu

Niekoľko open-source a komerčných knižníc výberu dátumu poskytuje dobrú podporu prístupnosti. Niektoré príklady zahŕňajú:

• React Datepicker: Populárny komponent React s podporou ARIA a navigáciou pomocou klávesnice.
• Air Datepicker: Ľahký a prispôsobiteľný výber dátumu s dobrými funkciami prístupnosti.
• FullCalendar: Plnohodnotný kalendárny komponent s komplexnou podporou prístupnosti.

Pri výbere knižnice výberu dátumu dôkladne vyhodnoťte jej funkcie prístupnosti a uistite sa, že spĺňa vaše špecifické požiadavky.

Osvedčené postupy pri vytváraní prístupných výberov dátumu

Tu je súhrn osvedčených postupov pri vytváraní prístupných výberov dátumu:

• Použite sémantické HTML na štruktúru výberu dátumu.
• Použite atribúty ARIA na poskytnutie ďalších sémantických informácií.
• Uistite sa, že navigácia pomocou klávesnice je plne implementovaná.
• Testujte pomocou čítačiek obrazovky, aby ste overili kompatibilitu.
• Poskytnite dostatočný farebný kontrast a jasné indikátory zamerania.
• Lokalizujte a internacionalizujte výber dátumu pre globálnych používateľov.
• Optimalizujte výber dátumu pre mobilné zariadenia.
• Vykonajte dôkladné testovanie a validáciu.

Záver

Vytváranie prístupných výberov dátumu je zložitá, ale nevyhnutná úloha. Dodržiavaním pokynov a osvedčených postupov uvedených v tomto sprievodcovi môžete vytvárať inkluzívne kalendárne widgety, ktoré vyhovujú používateľom všetkých schopností v rôznych kultúrnych a technologických prostrediach. Nezabudnite, že prístupnosť je nepretržitý proces a neustále testovanie a zlepšovanie sú rozhodujúce na zabezpečenie toho, aby vaše výbery dátumu zostali prístupné v priebehu času. Uprednostňovaním prístupnosti môžete vytvoriť inkluzívnejšiu a užívateľsky prívetivejšiu webovú skúsenosť pre všetkých.

Ďalšie zdroje

• Sprievodca autorskými praktikami WAI-ARIA (APG) - Kalendár
• Web Content Accessibility Guidelines (WCAG) 2.1
• Deque University