` stylizovaných tak, aby vypadaly jako tabulka.

Správně:

<table>
  <caption>Kalendář pro říjen 2024</caption>
  <thead>
    <tr>
      <th scope="col">Ne</th>
      <th scope="col">Po</th>
      <th scope="col">Út</th>
      <th scope="col">St</th>
      <th scope="col">Čt</th>
      <th scope="col">Pá</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>
    <!-- Další řádky -->
  </tbody>
</table>

2. Atributy ARIA

Atributy ARIA (Accessible Rich Internet Applications) poskytují asistenčním technologiím další sémantické informace, což zlepšuje jejich porozumění interaktivním prvkům. Použijte atributy ARIA k:

• Definování rolí: Označte účel prvků, například `role="grid"` pro kalendářní mřížku a `role="gridcell"` pro každou buňku data.
• Poskytování štítků: Použijte `aria-label` nebo `aria-labelledby` k poskytnutí popisných štítků pro prvky, zejména pokud je vizuální štítek nedostatečný.
• Označení stavu: Použijte atributy jako `aria-selected` k označení vybraného data a `aria-disabled` k označení zakázaných dat.
• Poskytování popisů: Použijte `aria-describedby` k asociaci dalších informací s prvkem, například popis formátu data.

Příklad:

<table role="grid" aria-labelledby="date-picker-label">
  <caption id="date-picker-label">Vyberte datum</caption>
  <thead>
    <tr>
      <th scope="col">Ne</th>
      <th scope="col">Po</th>
      <th scope="col">Út</th>
      <th scope="col">St</th>
      <th scope="col">Čt</th>
      <th scope="col">Pá</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. října 2024">1</button></td>
      <td role="gridcell"><button aria-label="2. října 2024">2</button></td>
      <td role="gridcell"><button aria-label="3. října 2024">3</button></td>
      <td role="gridcell"><button aria-label="4. října 2024">4</button></td>
      <td role="gridcell"><button aria-label="5. října 2024">5</button></td>
    </tr>
    <tr>
      <td role="gridcell"><button aria-label="6. října 2024">6</button></td>
      <td role="gridcell"><button aria-label="7. října 2024">7</button></td>
      <td role="gridcell"><button aria-label="8. října 2024">8</button></td>
      <td role="gridcell"><button aria-label="9. října 2024">9</button></td>
      <td role="gridcell"><button aria-label="10. října 2024">10</button></td>
      <td role="gridcell"><button aria-label="11. října 2024">11</button></td>
      <td role="gridcell"><button aria-label="12. října 2024">12</button></td>
    </tr>
    <!-- Další řádky -->
  </tbody>
</table>

Poznámka: Vždy testujte se skutečnými čtečkami obrazovky, abyste se ujistili, že jsou atributy ARIA správně interpretovány.

3. Navigace klávesnicí

Navigace klávesnicí je nezbytná pro uživatele, kteří nemohou používat myš nebo jiné polohovací zařízení. Ujistěte se, že všechny interaktivní prvky ve výběru data jsou přístupné pomocí klávesnice.

• Správa fokusu: Použijte atribut `tabindex` k řízení pořadí fokusu. Ujistěte se, že se fokus logicky pohybuje ve výběru data. Použijte JavaScript k řízení fokusu, když uživatel interaguje s widgetem.
• Klávesy se šipkami: Implementujte navigaci pomocí kláves se šipkami pro pohyb mezi daty. Klávesy se šipkou doleva a doprava by se měly přesunout na předchozí a následující den. Klávesy se šipkou nahoru a dolů by se měly přesunout na stejný den v předchozím a následujícím týdnu.
• Klávesy Home a End: Klávesa Home by se měla přesunout na první den aktuálního týdne a klávesa End by se měla přesunout na poslední den aktuálního týdne.
• Klávesy Page Up a Page Down: Klávesa Page Up by se měla přesunout na předchozí měsíc a klávesa Page Down by se měla přesunout na další měsíc.
• Klávesa Enter: Klávesa Enter by měla vybrat zaostřené datum.
• Klávesa Escape: Klávesa Escape by měla zavřít výběr data a vrátit fokus do vstupního pole nebo tlačítka, které jej spustilo.

Příklad (JavaScript):

// Příklad zpracování navigace klávesnicí
const datePicker = document.getElementById('date-picker');

datePicker.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowLeft':
      // Přesunout fokus na předchozí den
      break;
    case 'ArrowRight':
      // Přesunout fokus na další den
      break;
    case 'ArrowUp':
      // Přesunout fokus na stejný den v předchozím týdnu
      break;
    case 'ArrowDown':
      // Přesunout fokus na stejný den v následujícím týdnu
      break;
    case 'Enter':
      // Vybrat zaostřené datum
      break;
    case 'Escape':
      // Zavřít výběr data
      break;
  }
});

4. Kompatibilita se čtečkami obrazovky

Čtečky obrazovky se spoléhají na sémantické HTML a atributy ARIA, aby poskytovaly informace uživatelům. Ujistěte se, že je váš výběr data kompatibilní s populárními čtečkami obrazovky, jako jsou NVDA, JAWS a VoiceOver.

• Popisné štítky: Poskytněte jasné a stručné štítky pro všechny interaktivní prvky. Použijte `aria-label` nebo `aria-labelledby` k poskytnutí dalšího kontextu.
• Oznámení stavu: Použijte atributy ARIA k označení stavu prvků, jako je `aria-selected` pro vybrané datum a `aria-disabled` pro zakázaná data. Čtečky obrazovky tyto stavy uživateli oznámí.
• Živé oblasti: Použijte živé oblasti ARIA (např. `aria-live="polite"`) k oznámení dynamických změn ve výběru data, například když uživatel přejde na jiný měsíc. To umožňuje čtečkám obrazovky upozornit uživatele na změnu, aniž by přerušovaly jejich pracovní postup.
• Zpracování chyb: Pokud dojde k nějakým chybám nebo problémům s validací, poskytněte jasné a informativní chybové zprávy, které jsou přístupné pro čtečky obrazovky. Použijte `aria-describedby` k asociaci chybové zprávy s příslušným vstupním polem.

Příklad:

<div aria-live="polite">
  <!-- Dynamický obsah, například navigace měsíce -->
</div>

5. Vizuální design

Vizuální design výběru data by měl být také přístupný. Zvažte následující:

• Barevný kontrast: Ujistěte se, že je dostatečný barevný kontrast mezi textem a barvami pozadí, aby byly splněny standardy WCAG (Web Content Accessibility Guidelines) 2.1 Level AA. Použijte nástroj pro kontrolu barevného kontrastu k ověření kontrastního poměru.
• Indikátory fokusu: Poskytněte jasný a viditelný indikátor fokusu pro všechny interaktivní prvky. Indikátor fokusu by se měl lišit od okolních prvků a neměl by být zakryt jinými prvky.
• Velikost písma a mezery: Použijte čitelnou velikost písma a dostatečné mezery mezi prvky pro zlepšení čitelnosti a použitelnosti.
• Vyhněte se spoléhání pouze na barvu: Nespoléhejte se pouze na barvu k zprostředkování informací. Použijte další vizuální podněty, jako jsou ikony nebo text, k doplnění barevného kódování.

6. Lokalizace a internacionalizace

Formáty data, kalendářní systémy a jazykové konvence se liší v různých kulturách a regionech. Ujistěte se, že je váš výběr data správně lokalizován a internacionalizován, aby podporoval globální publikum.

• Formáty data: Použijte flexibilní knihovnu pro formátování data, která podporuje různé formáty data, jako je DD/MM/YYYY (běžný v Evropě a částech Asie) a MM/DD/YYYY (běžný v Severní Americe). Umožněte uživatelům přizpůsobit formát data podle jejich preferencí.
• Kalendářní systémy: Podporujte různé kalendářní systémy, jako je gregoriánský kalendář (nejrozšířenější kalendář) a hidžrí kalendář (používaný v mnoha islámských zemích).
• Jazyková podpora: Poskytněte překlady pro všechny textové prvky ve výběru data, včetně názvů měsíců, názvů dnů a štítků.
• Podpora zprava doleva (RTL): Ujistěte se, že se výběr data správně zobrazuje v jazycích RTL, jako je arabština a hebrejština. To může vyžadovat úpravu rozvržení a stylingu widgetu.
• Časová pásma: Zvažte důsledky časových pásem při zpracování dat. Ukládejte data v konzistentním časovém pásmu (např. UTC) a při jejich zobrazení je převeďte do místního časového pásma uživatele.

Příklad: Použijte knihovnu JavaScriptu jako `moment.js` nebo `date-fns` k zpracování formátování data a lokalizace.

7. Mobilní přístupnost

S rostoucím používáním mobilních zařízení je nezbytné zajistit, aby byl váš výběr data přístupný na mobilních platformách. Zvažte následující:

• Dotykové cíle: Ujistěte se, že všechny interaktivní prvky mají dostatečně velké dotykové cíle, aby se na mobilních zařízeních snadno klepalo. Apple doporučuje minimální velikost dotykového cíle 44x44 pixelů.
• Responsivní design: Použijte techniky responsivního designu, abyste se ujistili, že se výběr data přizpůsobí různým velikostem obrazovky a orientacím.
• Vstup z klávesnice: Pokud výběr data vyžaduje vstup z klávesnice, poskytněte mobilní klávesnici, která je optimalizována pro zadávání data.
• Gestá: Vyhněte se spoléhání pouze na gesta, která mohou být pro uživatele s motorickým postižením obtížná. Poskytněte alternativní metody vstupu, jako je navigace klávesnicí nebo hlasové ovládání.

Testování a validace

Důkladné testování je zásadní pro zajištění přístupnosti vašeho výběru data. Použijte kombinaci automatizovaných a manuálních testovacích metod:

• Automatizované testování: Použijte nástroje pro testování přístupnosti, jako jsou Axe nebo WAVE, k identifikaci běžných problémů s přístupností.
• Manuální testování: Ručně otestujte výběr data pomocí čtečky obrazovky a navigace klávesnicí, abyste ověřili, zda je použitelný pro osoby se zdravotním postižením.
• Testování uživatelů: Proveďte testování uživatelů s osobami se zdravotním postižením, abyste shromáždili zpětnou vazbu a identifikovali oblasti pro zlepšení.
• Soulad s WCAG: Ujistěte se, že váš výběr data splňuje požadavky WCAG 2.1 Level AA.

Příklady přístupných výběrů data

Několik open-source a komerčních knihoven pro výběr data poskytuje dobrou podporu přístupnosti. Některé příklady zahrnují:

• React Datepicker: Populární React komponenta s podporou ARIA a navigací klávesnicí.
• Air Datepicker: Lehký a přizpůsobitelný výběr data s dobrými funkcemi přístupnosti.
• FullCalendar: Plnohodnotná kalendářní komponenta s komplexní podporou přístupnosti.

Při výběru knihovny pro výběr data pečlivě vyhodnoťte její funkce přístupnosti a ujistěte se, že splňuje vaše konkrétní požadavky.

Osvědčené postupy pro vytváření přístupných výběrů data

Zde je shrnutí osvědčených postupů pro vytváření přístupných výběrů data:

• Použijte sémantické HTML ke strukturování výběru data.
• Použijte atributy ARIA k poskytnutí dalších sémantických informací.
• Ujistěte se, že je plně implementována navigace klávesnicí.
• Testujte se čtečkami obrazovky, abyste ověřili kompatibilitu.
• Zajistěte dostatečný barevný kontrast a jasné indikátory fokusu.
• Lokalizujte a internacionalizujte výběr data pro globální uživatele.
• Optimalizujte výběr data pro mobilní zařízení.
• Proveďte důkladné testování a validaci.

Závěr

Vytváření přístupných výběrů data je komplexní, ale zásadní úkol. Dodržováním pokynů a osvědčených postupů uvedených v této příručce můžete vytvářet inkluzivní kalendářní widgety, které vyhovují uživatelům všech schopností, napříč různými kulturními a technologickými prostředími. Pamatujte, že přístupnost je neustálý proces a průběžné testování a zlepšování jsou zásadní pro zajištění toho, aby vaše výběry data zůstaly přístupné v průběhu času. Upřednostněním přístupnosti můžete vytvořit inkluzivnější a uživatelsky přívětivější webovou zkušenost pro všechny.

Další zdroje

• WAI-ARIA Authoring Practices Guide (APG) - Kalendář
• Web Content Accessibility Guidelines (WCAG) 2.1
• Deque University