` elemek használata, amelyek táblázatként vannak stílusozva.

Helyes:

<table>
  <caption>2024. október naptár</caption>
  <thead>
    <tr>
      <th scope="col">Vas</th>
      <th scope="col">Hé</th>
      <th scope="col">Ke</th>
      <th scope="col">Sze</th>
      <th scope="col">Csü</th>
      <th scope="col">Pén</th>
      <th scope="col">Szo</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>
    <!-- További sorok -->
  </tbody>
</table>

2. ARIA attribútumok

Az ARIA (Accessible Rich Internet Applications) attribútumok további szemantikai információkat nyújtanak az asszisztív technológiák számára, javítva az interaktív elemek megértését. Használjon ARIA attribútumokat a következőkhöz:

• Szerepek meghatározása: Jelölje meg az elemek célját, például `role="grid"` a naptárrácsra és `role="gridcell"` minden dátumcellára.
• Címkék megadása: Használja az `aria-label` vagy `aria-labelledby` attribútumot leíró címkék megadására az elemekhez, különösen akkor, ha a vizuális címke nem elegendő.
• Állapot jelzése: Használjon olyan attribútumokat, mint az `aria-selected` a kiválasztott dátum jelzésére és az `aria-disabled` a letiltott dátumok jelzésére.
• Leírások megadása: Használja az `aria-describedby` attribútumot további információk társítására egy elemmel, például a dátumformátum leírását.

Példa:

<table role="grid" aria-labelledby="date-picker-label">
  <caption id="date-picker-label">Válasszon egy dátumot</caption>
  <thead>
    <tr>
      <th scope="col">Vas</th>
      <th scope="col">Hé</th>
      <th scope="col">Ke</th>
      <th scope="col">Sze</th>
      <th scope="col">Csü</th>
      <th scope="col">Pén</th>
      <th scope="col">Szo</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="2024. október 1.">1</button></td>
      <td role="gridcell"><button aria-label="2024. október 2.">2</button></td>
      <td role="gridcell"><button aria-label="2024. október 3.">3</button></td>
      <td role="gridcell"><button aria-label="2024. október 4.">4</button></td>
      <td role="gridcell"><button aria-label="2024. október 5.">5</button></td>
    </tr>
    <tr>
      <td role="gridcell"><button aria-label="2024. október 6.">6</button></td>
      <td role="gridcell"><button aria-label="2024. október 7.">7</button></td>
      <td role="gridcell"><button aria-label="2024. október 8.">8</button></td>
      <td role="gridcell"><button aria-label="2024. október 9.">9</button></td>
      <td role="gridcell"><button aria-label="2024. október 10.">10</button></td>
      <td role="gridcell"><button aria-label="2024. október 11.">11</button></td>
      <td role="gridcell"><button aria-label="2024. október 12.">12</button></td>
    </tr>
    <!-- További sorok -->
  </tbody>
</table>

Megjegyzés: Mindig teszteljen valós képernyőolvasókkal, hogy biztosítsa az ARIA attribútumok helyes értelmezését.

3. Billentyűzetnavigáció

A billentyűzetnavigáció elengedhetetlen azoknak a felhasználóknak, akik nem tudnak egeret vagy más mutatóeszközt használni. Győződjön meg arról, hogy a dátumválasztón belüli összes interaktív elem elérhető a billentyűzeten keresztül.

• Fókuszkezelés: Használja a `tabindex` attribútumot a fókuszsorrend szabályozásához. Győződjön meg arról, hogy a fókusz logikusan halad át a dátumválasztón. Használjon JavaScriptet a fókusz kezelésére, amikor a felhasználó interakcióba lép a modullal.
• Nyílbillentyűk: Implementálja a billentyűzetnavigációt a nyílbillentyűk használatával a dátumok közötti mozgáshoz. A bal és jobb nyílbillentyűk az előző és következő napokra, illetve a fel és le nyílbillentyűk az előző és következő hetek azonos napjaira navigáljanak.
• Home és End billentyűk: A Home billentyű az aktuális hét első napjára, az End billentyű pedig az aktuális hét utolsó napjára ugrik.
• Page Up és Page Down billentyűk: A Page Up billentyű az előző hónapra, a Page Down billentyű pedig a következő hónapra lép.
• Enter billentyű: Az Enter billentyű kiválasztja a fókuszált dátumot.
• Escape billentyű: Az Escape billentyű bezárja a dátumválasztót, és visszaállítja a fókuszt a bemeneti mezőre vagy a gombra, amely elindította.

Példa (JavaScript):

// Példa a billentyűzetnavigáció kezelésére
const datePicker = document.getElementById('date-picker');

datePicker.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowLeft':
      // Fókusz áthelyezése az előző napra
      break;
    case 'ArrowRight':
      // Fókusz áthelyezése a következő napra
      break;
    case 'ArrowUp':
      // Fókusz áthelyezése az előző hét azonos napjára
      break;
    case 'ArrowDown':
      // Fókusz áthelyezése a következő hét azonos napjára
      break;
    case 'Enter':
      // A fókuszált dátum kiválasztása
      break;
    case 'Escape':
      // A dátumválasztó bezárása
      break;
  }
});

4. Képernyőolvasó kompatibilitás

A képernyőolvasók a szemantikus HTML-re és az ARIA attribútumokra támaszkodnak az információk felhasználókhoz való eljuttatásához. Győződjön meg róla, hogy a dátumválasztó kompatibilis az olyan népszerű képernyőolvasókkal, mint az NVDA, JAWS és a VoiceOver.

• Leíró címkék: Adjon világos és tömör címkéket minden interaktív elemhez. Használja az `aria-label` vagy `aria-labelledby` attribútumot további kontextus biztosításához.
• Állapotbejelentések: Használjon ARIA attribútumokat az elemek állapotának jelzésére, mint például az `aria-selected` a kiválasztott dátumra és az `aria-disabled` a letiltott dátumokra. A képernyőolvasók be fogják mondani ezeket az állapotokat a felhasználónak.
• Élő régiók: Használjon ARIA élő régiókat (pl. `aria-live="polite"`) a dátumválasztó dinamikus változásainak bejelentésére, például amikor a felhasználó egy másik hónapra navigál. Ez lehetővé teszi a képernyőolvasók számára, hogy a felhasználót értesítsék a változásról anélkül, hogy megszakítanák a munkafolyamatot.
• Hibakezelés: Ha bármilyen hiba vagy érvényesítési probléma merül fel, adjon világos és informatív hibaüzeneteket, amelyek elérhetők a képernyőolvasók számára. Használja az `aria-describedby` attribútumot a hibaüzenet társítására a megfelelő beviteli mezővel.

Példa:

<div aria-live="polite">
  <!-- Dinamikus tartalom, például hónapnavigáció -->
</div>

5. Vizuális megjelenés

A dátumválasztó vizuális megjelenésének is akadálymentesnek kell lennie. Vegye figyelembe a következőket:

• Színkontraszt: Biztosítson elegendő színkontrasztot a szöveg és a háttérszínek között, hogy megfeleljen a WCAG (Web Content Accessibility Guidelines) 2.1 AA szintű szabványainak. Használjon színkontraszt ellenőrző eszközt az arány ellenőrzéséhez.
• Fókusz jelzők: Biztosítson világos és látható fókusz jelzőt minden interaktív elemhez. A fókusz jelzőnek megkülönböztethetőnek kell lennie a környező elemekhez képest, és nem szabad más elemek eltakarniuk.
• Betűméret és térköz: Használjon olvasható betűméretet és elegendő térközt az elemek között az olvashatóság és a használhatóság javítása érdekében.
• Ne támaszkodjon kizárólag a színre: Ne támaszkodjon kizárólag a színre az információk átadásához. Használjon más vizuális jelzéseket, például ikonokat vagy szöveget a színkódolás kiegészítéséhez.

6. Lokalizáció és nemzetköziesítés

A dátumformátumok, naptárrendszerek és nyelvi konvenciók eltérőek a különböző kultúrákban és régiókban. Győződjön meg arról, hogy dátumválasztója megfelelően le van lokalizálva és nemzetköziesítve a globális közönség támogatásához.

• Dátumformátumok: Használjon egy rugalmas dátumformázó könyvtárat, amely támogatja a különböző dátumformátumokat, mint például a DD/MM/YYYY (gyakori Európában és Ázsia egyes részein) és az MM/DD/YYYY (gyakori Észak-Amerikában). Lehetővé teszi a felhasználók számára, hogy testre szabják a dátumformátumot preferenciáiknak megfelelően.
• Naptárrendszerek: Támogasson különböző naptárrendszereket, mint például a Gergely naptár (a legszélesebb körben használt naptár) és a Hijri naptár (sok iszlám országban használatos).
• Nyelvi támogatás: Biztosítson fordításokat minden szöveges elemhez a dátumválasztóban, beleértve a hónapneveket, napneveket és címkéket.
• Jobbról balra (RTL) támogatás: Győződjön meg róla, hogy a dátumválasztó megfelelően jelenik meg RTL nyelveken, mint például az arab és a héber. Ez szükségessé teheti a modul elrendezésének és stílusának módosítását.
• Időzónák: Vegye figyelembe az időzónák hatásait a dátumok kezelésekor. Tárolja a dátumokat egy következetes időzónában (pl. UTC), és konvertálja őket a felhasználó helyi időzónájára megjelenítéskor.

Példa: Használjon egy JavaScript könyvtárat, mint a `moment.js` vagy a `date-fns` a dátumformázás és lokalizáció kezeléséhez.

7. Mobil akadálymentesítés

A mobil eszközök növekvő használatával elengedhetetlen annak biztosítása, hogy a dátumválasztó akadálymentes legyen a mobil platformokon. Vegye figyelembe a következőket:

• Érintőfelületek: Győződjön meg róla, hogy minden interaktív elem elegendően nagy érintőfelülettel rendelkezik ahhoz, hogy könnyen megérinthető legyen mobil eszközökön. Az Apple minimum 44x44 pixeles érintőfelület méretet javasol.
• Reszponzív kialakítás: Használjon reszponzív kialakítási technikákat annak biztosítására, hogy a dátumválasztó alkalmazkodjon a különböző képernyőméretekhez és tájolásokhoz.
• Billentyűzetbevitel: Ha a dátumválasztó billentyűzetbevitelt igényel, biztosítson mobilbarát billentyűzetet, amely optimalizált a dátumbevitelhez.
• Gesztusok: Kerülje a kizárólag gesztusokra való támaszkodást, amelyek nehezek lehetnek a mozgássérült felhasználók számára. Biztosítson alternatív beviteli módszereket, például billentyűzetnavigációt vagy hangvezérlést.

Tesztelés és érvényesítés

Az alapos tesztelés kulcsfontosságú a dátumválasztó akadálymentességének biztosításához. Használjon automatizált és manuális tesztelési módszerek kombinációját:

• Automatizált tesztelés: Használjon akadálymentességi tesztelő eszközöket, mint például az Axe vagy a WAVE, az általános akadálymentességi problémák azonosítására.
• Manuális tesztelés: Manuálisan tesztelje a dátumválasztót képernyőolvasóval és billentyűzetnavigációval, hogy ellenőrizze annak használhatóságát fogyatékos személyek számára.
• Felhasználói tesztelés: Végezzen felhasználói tesztelést fogyatékos személyekkel, hogy visszajelzést gyűjtsön és azonosítsa a fejlesztendő területeket.
• WCAG megfelelés: Győződjön meg arról, hogy dátumválasztója megfelel a WCAG 2.1 AA szint követelményeinek.

Akadálymentes dátumválasztók példái

Számos nyílt forráskódú és kereskedelmi dátumválasztó könyvtár jó akadálymentességi támogatást nyújt. Néhány példa:

• React Datepicker: Népszerű React komponens ARIA támogatással és billentyűzetnavigációval.
• Air Datepicker: Könnyű és testreszabható dátumválasztó jó akadálymentességi funkciókkal.
• FullCalendar: Teljes értékű naptárkomponens átfogó akadálymentességi támogatással.

Dátumválasztó könyvtár kiválasztásakor gondosan értékelje annak akadálymentességi jellemzőit, és győződjön meg róla, hogy megfelel az Ön specifikus követelményeinek.

Legjobb gyakorlatok az akadálymentesített dátumválasztók építéséhez

Íme egy összefoglaló a legjobb gyakorlatokról az akadálymentesített dátumválasztók építéséhez:

• Használjon szemantikus HTML-t a dátumválasztó struktúrálásához.
• Használjon ARIA attribútumokat további szemantikai információk biztosításához.
• Győződjön meg a billentyűzetnavigáció teljes körű implementálásáról.
• Teszteljen képernyőolvasókkal a kompatibilitás ellenőrzéséhez.
• Biztosítson elegendő színkontrasztot és világos fókusz jelzőket.
• Lokalizálja és nemzetköziesítse a dátumválasztót a globális felhasználók számára.
• Optimalizálja a dátumválasztót mobil eszközökre.
• Végezzen alapos tesztelést és érvényesítést.

Következtetés

Az akadálymentesített dátumválasztók építése összetett, de elengedhetetlen feladat. A jelen útmutatóban ismertetett irányelvek és legjobb gyakorlatok követésével inkluzív naptári modulokat hozhat létre, amelyek minden képességű felhasználót, különféle kulturális és technológiai tájakon kielégítenek. Ne feledje, hogy az akadálymentesítés egy folyamatos folyamat, és a folyamatos tesztelés és fejlesztés kulcsfontosságú annak biztosításához, hogy dátumválasztói idővel is akadálymentesek maradjanak. Az akadálymentesítés prioritásként kezelésével inkluzívabb és felhasználóbarátabb webes élményt teremthet mindenki számára.

További források

• <a href="https://www.w3.org/WAI/ARIA/apg/patterns/calendar/" target="_blank">WAI-ARIA Authoring Practices Guide (APG) - Naptár</a>
• <a href="https://www.w3.org/TR/WCAG21/" target="_blank">Web Content Accessibility Guidelines (WCAG) 2.1</a>
• <a href="https://dequeuniversity.com/rules/axe/4.0/" target="_blank">Deque University</a>