` elementus, suformuotus taip, kad atrodytų kaip lentelė.

Teisinga:

<table>
  <caption>2024 m. spalio mėn. kalendorius</caption>
  <thead>
    <tr>
      <th scope="col">Sek</th>
      <th scope="col">Pir</th>
      <th scope="col">Ant</th>
      <th scope="col">Tre</th>
      <th scope="col">Ket</th>
      <th scope="col">Pen</th>
      <th scope="col">Šeš</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>
    <!-- Daugiau eilučių -->
  </tbody>
</table>

2. ARIA atributai

ARIA (Accessible Rich Internet Applications) atributai suteikia papildomos semantinės informacijos pagalbinėms technologijoms, pagerindami jų interaktyvių elementų supratimą. Naudokite ARIA atributus, kad:

• Apibrėžtumėte vaidmenis: Nurodykite elementų paskirtį, pvz., `role="grid"` kalendoriaus tinkleliui ir `role="gridcell"` kiekvienai datos ląstelei.
• Pateiktumėte etiketes: Naudokite `aria-label` arba `aria-labelledby`, kad pateiktumėte aprašomąsias elementų etiketes, ypač kai vizualinė etiketė yra nepakankama.
• Nurodykite būseną: Naudokite atributus, tokius kaip `aria-selected`, kad nurodytumėte pasirinktą datą, ir `aria-disabled`, kad nurodytumėte išjungtas datas.
• Pateiktumėte aprašymus: Naudokite `aria-describedby`, kad susietumėte papildomą informaciją su elementu, pvz., datos formato aprašymą.

Pavyzdys:

<table role="grid" aria-labelledby="date-picker-label">
  <caption id="date-picker-label">Pasirinkite datą</caption>
  <thead>
    <tr>
      <th scope="col">Sek</th>
      <th scope="col">Pir</th>
      <th scope="col">Ant</th>
      <th scope="col">Tre</th>
      <th scope="col">Ket</th>
      <th scope="col">Pen</th>
      <th scope="col">Šeš</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 m. spalio 1 d.">1</button></td>
      <td role="gridcell"><button aria-label="2024 m. spalio 2 d.">2</button></td>
      <td role="gridcell"><button aria-label="2024 m. spalio 3 d.">3</button></td>
      <td role="gridcell"><button aria-label="2024 m. spalio 4 d.">4</button></td>
      <td role="gridcell"><button aria-label="2024 m. spalio 5 d.">5</button></td>
    </tr>
    <tr>
      <td role="gridcell"><button aria-label="2024 m. spalio 6 d.">6</button></td>
      <td role="gridcell"><button aria-label="2024 m. spalio 7 d.">7</button></td>
      <td role="gridcell"><button aria-label="2024 m. spalio 8 d.">8</button></td>
      <td role="gridcell"><button aria-label="2024 m. spalio 9 d.">9</button></td>
      <td role="gridcell"><button aria-label="2024 m. spalio 10 d.">10</button></td>
      <td role="gridcell"><button aria-label="2024 m. spalio 11 d.">11</button></td>
      <td role="gridcell"><button aria-label="2024 m. spalio 12 d.">12</button></td>
    </tr>
    <!-- Daugiau eilučių -->
  </tbody>
</table>

Pastaba: Visada bandykite su tikrais ekrano skaitytuvais, kad užtikrintumėte, jog ARIA atributai būtų teisingai interpretuojami.

3. Naršymas klaviatūra

Naršymas klaviatūra yra būtinas vartotojams, kurie negali naudoti pelės ar kito rodymo įrenginio. Užtikrinkite, kad visi interaktyvūs datos parinkiklio elementai būtų prieinami naudojant klaviatūrą.

• Fokuso valdymas: Naudokite atributą `tabindex`, kad valdytumėte fokusavimo tvarką. Užtikrinkite, kad fokusas logiškai judėtų per datos parinkiklį. Naudokite JavaScript, kad valdytumėte fokusą, kai vartotojas sąveikauja su valdikliu.
• Rodyklių klavišai: Įgyvendinkite naršymą klaviatūra naudodami rodyklių klavišus, kad judėtumėte tarp datų. Rodyklių klavišai į kairę ir į dešinę turėtų perkelti į ankstesnę ir kitą dieną atitinkamai. Rodyklių klavišai aukštyn ir žemyn turėtų perkelti į tą pačią dieną ankstesnėje ir kitoje savaitėse atitinkamai.
• Home ir End klavišai: Home klavišas turėtų perkelti į pirmąją dabartinės savaitės dieną, o End klavišas turėtų perkelti į paskutinę dabartinės savaitės dieną.
• Page Up ir Page Down klavišai: Page Up klavišas turėtų perkelti į ankstesnį mėnesį, o Page Down klavišas turėtų perkelti į kitą mėnesį.
• Enter klavišas: Enter klavišas turėtų pasirinkti sufokusuotą datą.
• Escape klavišas: Escape klavišas turėtų uždaryti datos parinkiklį ir grąžinti fokusą į įvesties lauką arba mygtuką, kuris jį suaktyvino.

Pavyzdys (JavaScript):

// Klaviatūros naršymo apdorojimo pavyzdys
const datePicker = document.getElementById('date-picker');

datePicker.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowLeft':
      // Perkelti fokusą į ankstesnę dieną
      break;
    case 'ArrowRight':
      // Perkelti fokusą į kitą dieną
      break;
    case 'ArrowUp':
      // Perkelti fokusą į tą pačią dieną ankstesnėje savaitėje
      break;
    case 'ArrowDown':
      // Perkelti fokusą į tą pačią dieną kitoje savaitėje
      break;
    case 'Enter':
      // Pasirinkti sufokusuotą datą
      break;
    case 'Escape':
      // Uždaryti datos parinkiklį
      break;
  }
});

4. Suderinamumas su ekrano skaitytuvais

Ekrano skaitytuvai remiasi semantiniu HTML ir ARIA atributais, kad pateiktų informaciją vartotojams. Užtikrinkite, kad jūsų datos parinkiklis būtų suderinamas su populiariais ekrano skaitytuvais, tokiais kaip NVDA, JAWS ir VoiceOver.

• Aprašomosios etiketės: Pateikite aiškias ir glaustas etiketes visiems interaktyviems elementams. Naudokite `aria-label` arba `aria-labelledby`, kad pateiktumėte papildomą kontekstą.
• Būsenos pranešimai: Naudokite ARIA atributus, kad nurodytumėte elementų būseną, pvz., `aria-selected` pasirinktai datai ir `aria-disabled` išjungtoms datoms. Ekrano skaitytuvai praneš šias būsenas vartotojui.
• Live regionai: Naudokite ARIA live regionus (pvz., `aria-live="polite"`), kad praneštumėte apie dinaminius datos parinkiklio pakeitimus, pvz., kai vartotojas pereina į kitą mėnesį. Tai leidžia ekrano skaitytuvams pranešti vartotojui apie pakeitimą netrukdant jų darbo eigai.
• Klaidų apdorojimas: Jei yra kokių nors klaidų ar patvirtinimo problemų, pateikite aiškius ir informatyvius klaidų pranešimus, kurie būtų prieinami ekrano skaitytuvams. Naudokite `aria-describedby`, kad susietumėte klaidos pranešimą su atitinkamu įvesties lauku.

Pavyzdys:

<div aria-live="polite">
  <!-- Dinaminis turinys, pvz., mėnesio naršymas -->
</div>

5. Vizualinis dizainas

Datos parinkiklio vizualinis dizainas taip pat turėtų būti prieinamas. Apsvarstykite šiuos dalykus:

• Spalvų kontrastas: Užtikrinkite pakankamą spalvų kontrastą tarp teksto ir fono spalvų, kad atitiktų WCAG (Web Content Accessibility Guidelines) 2.1 AA lygio standartus. Norėdami patikrinti kontrasto santykį, naudokite spalvų kontrasto tikrinimo įrankį.
• Fokuso indikatoriai: Pateikite aiškų ir matomą fokusavimo indikatorių visiems interaktyviems elementams. Fokusavimo indikatorius turėtų skirtis nuo aplinkinių elementų ir neturėtų būti uždengtas kitų elementų.
• Šrifto dydis ir tarpai: Norėdami pagerinti įskaitomumą ir patogumą naudoti, naudokite įskaitomą šrifto dydį ir pakankamus tarpus tarp elementų.
• Venkite pasikliauti tik spalva: Nesiremkite tik spalva, kad perteiktumėte informaciją. Naudokite kitus vaizdinius ženklus, tokius kaip piktogramos ar tekstas, kad papildytumėte spalvų kodavimą.

6. Lokalizavimas ir internacionalizavimas

Datos formatai, kalendorių sistemos ir kalbos konvencijos skiriasi įvairiose kultūrose ir regionuose. Užtikrinkite, kad jūsų datos parinkiklis būtų tinkamai lokalizuotas ir internacionalizuotas, kad palaikytų pasaulinę auditoriją.

• Datos formatai: Naudokite lanksčią datos formatavimo biblioteką, kuri palaiko skirtingus datos formatus, tokius kaip DD/MM/YYYY (įprasta Europoje ir Azijos dalyse) ir MM/DD/YYYY (įprasta Šiaurės Amerikoje). Leiskite vartotojams tinkinti datos formatą pagal savo pageidavimus.
• Kalendorių sistemos: Palaikykite skirtingas kalendorių sistemas, tokias kaip Grigaliaus kalendorius (plačiausiai naudojamas kalendorius) ir Hijri kalendorius (naudojamas daugelyje islamo šalių).
• Kalbos palaikymas: Pateikite visų datos parinkiklio teksto elementų vertimus, įskaitant mėnesių pavadinimus, dienų pavadinimus ir etiketes.
• Palaikymas iš dešinės į kairę (RTL): Užtikrinkite, kad datos parinkiklis būtų tinkamai rodomas RTL kalbomis, tokiomis kaip arabų ir hebrajų. Tai gali pareikalauti koreguoti valdiklio išdėstymą ir stilių.
• Laiko juostos: Apsvarstykite laiko juostų poveikį tvarkant datas. Saugokite datas nuoseklioje laiko juostoje (pvz., UTC) ir konvertuokite jas į vartotojo vietinę laiko juostą, kai jas rodote.

Pavyzdys: Norėdami tvarkyti datos formatavimą ir lokalizavimą, naudokite JavaScript biblioteką, tokią kaip `moment.js` arba `date-fns`.

7. Mobilusis prieinamumas

Didėjant mobiliųjų įrenginių naudojimui, būtina užtikrinti, kad jūsų datos parinkiklis būtų prieinamas mobiliosiose platformose. Apsvarstykite šiuos dalykus:

• Jutikliniai taikiniai: Užtikrinkite, kad visi interaktyvūs elementai turėtų pakankamai didelius jutiklinius taikinius, kad juos būtų galima lengvai paliesti mobiliuosiuose įrenginiuose. „Apple“ rekomenduoja mažiausią 44x44 pikselių jutiklinio taikinio dydį.
• Adaptacinis dizainas: Naudokite adaptacinio dizaino metodus, kad užtikrintumėte, jog datos parinkiklis prisitaikytų prie skirtingų ekranų dydžių ir orientacijų.
• Įvestis klaviatūra: Jei datos parinkikliui reikalinga įvestis klaviatūra, pateikite mobiliesiems įrenginiams pritaikytą klaviatūrą, kuri būtų optimizuota datos įvedimui.
• Gestai: Nesiremkite vien gestais, kurie gali būti sunkūs vartotojams, turintiems motorinių sutrikimų. Pateikite alternatyvius įvesties metodus, tokius kaip naršymas klaviatūra arba valdymas balsu.

Bandymas ir patvirtinimas

Kruopštus testavimas yra labai svarbus norint užtikrinti jūsų datos parinkiklio prieinamumą. Naudokite automatizuotų ir rankinių testavimo metodų derinį:

• Automatizuotas testavimas: Norėdami nustatyti dažnas prieinamumo problemas, naudokite prieinamumo testavimo įrankius, tokius kaip Axe arba WAVE.
• Rankinis testavimas: Rankiniu būdu išbandykite datos parinkiklį naudodami ekrano skaitytuvą ir naršymą klaviatūra, kad patikrintumėte, ar juo gali naudotis neįgalūs žmonės.
• Vartotojo testavimas: Atlikite vartotojo testavimą su neįgaliais žmonėmis, kad surinktumėte atsiliepimus ir nustatytumėte tobulintinas sritis.
• WCAG atitiktis: Užtikrinkite, kad jūsų datos parinkiklis atitiktų WCAG 2.1 AA lygio reikalavimus.

Prieinamų datos parinkiklių pavyzdžiai

Keletas atvirojo kodo ir komercinių datos parinkiklių bibliotekų suteikia gerą prieinamumo palaikymą. Kai kurie pavyzdžiai apima:

• React Datepicker: Populiarus React komponentas su ARIA palaikymu ir naršymu klaviatūra.
• Air Datepicker: Lengvas ir pritaikomas datos parinkiklis su geromis prieinamumo funkcijomis.
• FullCalendar: Pilnai funkcionuojantis kalendoriaus komponentas su visapusišku prieinamumo palaikymu.

Renkantis datos parinkiklio biblioteką, atidžiai įvertinkite jos prieinamumo funkcijas ir įsitikinkite, kad ji atitinka jūsų konkrečius reikalavimus.

Geriausia prieinamų datos parinkiklių kūrimo praktika

Štai geriausios prieinamų datos parinkiklių kūrimo praktikos santrauka:

• Norėdami struktūrizuoti datos parinkiklį, naudokite semantinį HTML.
• Norėdami pateikti papildomos semantinės informacijos, naudokite ARIA atributus.
• Užtikrinkite, kad naršymas klaviatūra būtų visiškai įgyvendintas.
• Išbandykite su ekrano skaitytuvais, kad patikrintumėte suderinamumą.
• Pateikite pakankamą spalvų kontrastą ir aiškius fokusavimo indikatorius.
• Lokalizuokite ir internacionalizuokite datos parinkiklį pasauliniams vartotojams.
• Optimizuokite datos parinkiklį mobiliesiems įrenginiams.
• Atlikite kruopštų testavimą ir patvirtinimą.

Išvada

Prieinamų datos parinkiklių kūrimas yra sudėtinga, bet būtina užduotis. Laikydamiesi šiame vadove pateiktų gairių ir geriausios praktikos, galite sukurti įtraukius kalendoriaus valdiklius, kurie tinka visų gebėjimų vartotojams įvairiose kultūrinėse ir technologinėse aplinkose. Atminkite, kad prieinamumas yra nuolatinis procesas, o nuolatinis testavimas ir tobulinimas yra labai svarbūs norint užtikrinti, kad jūsų datos parinkikliai išliktų prieinami laikui bėgant. Pirmenybę teikdami prieinamumui, galite sukurti įtraukesnę ir patogesnę žiniatinklio patirtį visiems.

Papildomi ištekliai

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