` elementus, kas stilizēti, lai izskatītos kā tabula.

Pareizi:

<table>
  <caption>2024. gada oktobra kalendārs</caption>
  <thead>
    <tr>
      <th scope="col">Sv</th>
      <th scope="col">P</th>
      <th scope="col">O</th>
      <th scope="col">T</th>
      <th scope="col">C</th>
      <th scope="col">Pk</th>
      <th scope="col">S</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>
    <!-- Citas rindas -->
  </tbody>
</table>

2. ARIA atribūti

ARIA (Accessible Rich Internet Applications) atribūti sniedz papildu semantisko informāciju asistīvajām tehnoloģijām, uzlabojot to izpratni par interaktīviem elementiem. Izmantojiet ARIA atribūtus, lai:

• Definētu lomas: Norādītu elementu mērķi, piemēram, `role="grid"` kalendāra režģim un `role="gridcell"` katrai datuma šūnai.
• Nodrošinātu iezīmes: Izmantotu `aria-label` vai `aria-labelledby`, lai nodrošinātu aprakstošas iezīmes elementiem, īpaši, ja vizuālā iezīme nav pietiekama.
• Norādītu stāvokli: Izmantotu atribūtus, piemēram, `aria-selected`, lai norādītu atlasīto datumu, un `aria-disabled`, lai norādītu atspējotus datumus.
• Sniegtu aprakstus: Izmantotu `aria-describedby`, lai saistītu papildu informāciju ar elementu, piemēram, datuma formāta aprakstu.

Piemērs:

<table role="grid" aria-labelledby="date-picker-label">
  <caption id="date-picker-label">Izvēlieties datumu</caption>
  <thead>
    <tr>
      <th scope="col">Sv</th>
      <th scope="col">P</th>
      <th scope="col">O</th>
      <th scope="col">T</th>
      <th scope="col">C</th>
      <th scope="col">Pk</th>
      <th scope="col">S</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. gada 1. oktobris">1</button></td>
      <td role="gridcell"><button aria-label="2024. gada 2. oktobris">2</button></td>
      <td role="gridcell"><button aria-label="2024. gada 3. oktobris">3</button></td>
      <td role="gridcell"><button aria-label="2024. gada 4. oktobris">4</button></td>
      <td role="gridcell"><button aria-label="2024. gada 5. oktobris">5</button></td>
    </tr>
    <tr>
      <td role="gridcell"><button aria-label="2024. gada 6. oktobris">6</button></td>
      <td role="gridcell"><button aria-label="2024. gada 7. oktobris">7</button></td>
      <td role="gridcell"><button aria-label="2024. gada 8. oktobris">8</button></td>
      <td role="gridcell"><button aria-label="2024. gada 9. oktobris">9</button></td>
      <td role="gridcell"><button aria-label="2024. gada 10. oktobris">10</button></td>
      <td role="gridcell"><button aria-label="2024. gada 11. oktobris">11</button></td>
      <td role="gridcell"><button aria-label="2024. gada 12. oktobris">12</button></td>
    </tr>
    <!-- Citas rindas -->
  </tbody>
</table>

Piezīme: Vienmēr testējiet ar reāliem ekrāna lasītājiem, lai nodrošinātu, ka ARIA atribūti tiek pareizi interpretēti.

3. Tastatūras navigācija

Tastatūras navigācija ir būtiska lietotājiem, kuri nevar izmantot peli vai citu rādītājierīci. Pārliecinieties, ka visi interaktīvie elementi datumu atlasītājā ir pieejami, izmantojot tastatūru.

• Fokusa pārvaldība: Izmantojiet `tabindex` atribūtu, lai kontrolētu fokusa secību. Pārliecinieties, ka fokuss loģiski pārvietojas caur datumu atlasītāju. Izmantojiet JavaScript, lai pārvaldītu fokusu, kad lietotājs mijiedarbojas ar logrīku.
• Bultiņu taustiņi: Ieviesiet tastatūras navigāciju, izmantojot bultiņu taustiņus, lai pārvietotos starp datumiem. Kreisās un labās bultiņas taustiņiem vajadzētu pārvietoties attiecīgi uz iepriekšējo un nākamo dienu. Augšup un lejup bultiņu taustiņiem vajadzētu pārvietoties uz to pašu dienu attiecīgi iepriekšējā un nākamajā nedēļā.
• Home un End taustiņi: Home taustiņam vajadzētu pārvietoties uz pašreizējās nedēļas pirmo dienu, un End taustiņam vajadzētu pārvietoties uz pašreizējās nedēļas pēdējo dienu.
• Page Up un Page Down taustiņi: Page Up taustiņam vajadzētu pārvietoties uz iepriekšējo mēnesi, un Page Down taustiņam vajadzētu pārvietoties uz nākamo mēnesi.
• Enter taustiņš: Enter taustiņam vajadzētu atlasīt fokusēto datumu.
• Escape taustiņš: Escape taustiņam vajadzētu aizvērt datumu atlasītāju un atgriezt fokusu uz ievades lauku vai pogu, kas to aktivizēja.

Piemērs (JavaScript):

// Tastatūras navigācijas apstrādes piemērs
const datePicker = document.getElementById('date-picker');

datePicker.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowLeft':
      // Pārvietot fokusu uz iepriekšējo dienu
      break;
    case 'ArrowRight':
      // Pārvietot fokusu uz nākamo dienu
      break;
    case 'ArrowUp':
      // Pārvietot fokusu uz to pašu dienu iepriekšējā nedēļā
      break;
    case 'ArrowDown':
      // Pārvietot fokusu uz to pašu dienu nākamajā nedēļā
      break;
    case 'Enter':
      // Atlasīt fokusēto datumu
      break;
    case 'Escape':
      // Aizvērt datumu atlasītāju
      break;
  }
});

4. Saderība ar ekrāna lasītājiem

Ekrāna lasītāji paļaujas uz semantisko HTML un ARIA atribūtiem, lai sniegtu informāciju lietotājiem. Pārliecinieties, ka jūsu datumu atlasītājs ir saderīgs ar populāriem ekrāna lasītājiem, piemēram, NVDA, JAWS un VoiceOver.

• Aprakstošas iezīmes: Nodrošiniet skaidras un kodolīgas iezīmes visiem interaktīvajiem elementiem. Izmantojiet `aria-label` vai `aria-labelledby`, lai sniegtu papildu kontekstu.
• Stāvokļa paziņojumi: Izmantojiet ARIA atribūtus, lai norādītu elementu stāvokli, piemēram, `aria-selected` atlasītajam datumam un `aria-disabled` atspējotiem datumiem. Ekrāna lasītāji paziņos šos stāvokļus lietotājam.
• Tiešsaistes reģioni (Live Regions): Izmantojiet ARIA tiešsaistes reģionus (piem., `aria-live="polite"`), lai paziņotu par dinamiskām izmaiņām datumu atlasītājā, piemēram, kad lietotājs pārvietojas uz citu mēnesi. Tas ļauj ekrāna lasītājiem informēt lietotāju par izmaiņām, nepārtraucot viņa darba plūsmu.
• Kļūdu apstrāde: Ja rodas kļūdas vai validācijas problēmas, sniedziet skaidrus un informatīvus kļūdu ziņojumus, kas ir pieejami ekrāna lasītājiem. Izmantojiet `aria-describedby`, lai saistītu kļūdas ziņojumu ar attiecīgo ievades lauku.

Piemērs:

<div aria-live="polite">
  <!-- Dinamisks saturs, piemēram, mēnešu navigācija -->
</div>

5. Vizuālais dizains

Arī datumu atlasītāja vizuālajam dizainam ir jābūt pieejamam. Apsveriet sekojošo:

• Krāsu kontrasts: Nodrošiniet pietiekamu krāsu kontrastu starp teksta un fona krāsām, lai atbilstu WCAG (Web Content Accessibility Guidelines) 2.1 AA līmeņa standartiem. Izmantojiet krāsu kontrasta pārbaudes rīku, lai pārbaudītu kontrasta attiecību.
• Fokusa indikatori: Nodrošiniet skaidru un redzamu fokusa indikatoru visiem interaktīvajiem elementiem. Fokusa indikatoram jābūt atšķirīgam no apkārtējiem elementiem, un to nedrīkst aizsegt citi elementi.
• Fonta lielums un atstarpes: Izmantojiet salasāmu fonta lielumu un pietiekamas atstarpes starp elementiem, lai uzlabotu lasāmību un lietojamību.
• Neizmantojiet tikai krāsu: Nepaļaujieties tikai uz krāsu, lai nodotu informāciju. Izmantojiet citas vizuālas norādes, piemēram, ikonas vai tekstu, lai papildinātu krāsu kodējumu.

6. Lokalizācija un internacionalizācija

Datumu formāti, kalendāra sistēmas un valodu konvencijas atšķiras dažādās kultūrās un reģionos. Pārliecinieties, ka jūsu datumu atlasītājs ir pareizi lokalizēts un internacionalizēts, lai atbalstītu globālu auditoriju.

• Datumu formāti: Izmantojiet elastīgu datumu formatēšanas bibliotēku, kas atbalsta dažādus datumu formātus, piemēram, DD/MM/GGGG (izplatīts Eiropā un daļā Āzijas) un MM/DD/GGGG (izplatīts Ziemeļamerikā). Ļaujiet lietotājiem pielāgot datuma formātu atbilstoši savām vēlmēm.
• Kalendāra sistēmas: Atbalstiet dažādas kalendāra sistēmas, piemēram, Gregora kalendāru (visplašāk izmantotais kalendārs) un Hidžras kalendāru (tiek izmantots daudzās islāma valstīs).
• Valodu atbalsts: Nodrošiniet tulkojumus visiem teksta elementiem datumu atlasītājā, ieskaitot mēnešu nosaukumus, dienu nosaukumus un iezīmes.
• No labās uz kreiso pusi (RTL) atbalsts: Pārliecinieties, ka datumu atlasītājs tiek pareizi attēlots RTL valodās, piemēram, arābu un ebreju valodā. Tas var prasīt logrīka izkārtojuma un stilu pielāgošanu.
• Laika joslas: Apsveriet laika joslu ietekmi, strādājot ar datumiem. Uzglabājiet datumus konsekventā laika joslā (piem., UTC) un, attēlojot tos, konvertējiet uz lietotāja vietējo laika joslu.

Piemērs: Izmantojiet JavaScript bibliotēku, piemēram, `moment.js` vai `date-fns`, lai apstrādātu datumu formatēšanu un lokalizāciju.

7. Mobilā pieejamība

Pieaugot mobilo ierīču lietošanai, ir būtiski nodrošināt, lai jūsu datumu atlasītājs būtu pieejams mobilajās platformās. Apsveriet sekojošo:

• Skārienjutīgie mērķi: Pārliecinieties, ka visiem interaktīvajiem elementiem ir pietiekami lieli skārienjutīgie mērķi, lai tos varētu viegli pieskarties mobilajās ierīcēs. Apple iesaka minimālo skārienjutīgā mērķa izmēru 44x44 pikseļi.
• Adaptīvais dizains: Izmantojiet adaptīvā dizaina metodes, lai nodrošinātu, ka datumu atlasītājs pielāgojas dažādiem ekrāna izmēriem un orientācijām.
• Tastatūras ievade: Ja datumu atlasītājs prasa tastatūras ievadi, nodrošiniet mobilajām ierīcēm draudzīgu tastatūru, kas optimizēta datuma ievadei.
• Žesti: Izvairieties paļauties tikai uz žestiem, kas var būt sarežģīti lietotājiem ar kustību traucējumiem. Nodrošiniet alternatīvas ievades metodes, piemēram, tastatūras navigāciju vai balss vadību.

Testēšana un validācija

Rūpīga testēšana ir izšķiroša, lai nodrošinātu jūsu datumu atlasītāja pieejamību. Izmantojiet automatizēto un manuālo testēšanas metožu kombināciju:

• Automatizētā testēšana: Izmantojiet pieejamības testēšanas rīkus, piemēram, Axe vai WAVE, lai identificētu izplatītākās pieejamības problēmas.
• Manuālā testēšana: Manuāli pārbaudiet datumu atlasītāju, izmantojot ekrāna lasītāju un tastatūras navigāciju, lai pārliecinātos, ka tas ir lietojams cilvēkiem ar invaliditāti.
• Lietotāju testēšana: Veiciet lietotāju testēšanu ar cilvēkiem ar invaliditāti, lai savāktu atsauksmes un identificētu uzlabojumu jomas.
• WCAG atbilstība: Pārliecinieties, ka jūsu datumu atlasītājs atbilst WCAG 2.1 AA līmeņa prasībām.

Pieejamu datumu atlasītāju piemēri

Vairākas atvērtā koda un komerciālas datumu atlasītāju bibliotēkas nodrošina labu pieejamības atbalstu. Daži piemēri:

• React Datepicker: Populārs React komponents ar ARIA atbalstu un tastatūras navigāciju.
• Air Datepicker: Viegls un pielāgojams datumu atlasītājs ar labām pieejamības funkcijām.
• FullCalendar: Pilnvērtīgs kalendāra komponents ar visaptverošu pieejamības atbalstu.

Izvēloties datumu atlasītāja bibliotēku, rūpīgi izvērtējiet tās pieejamības funkcijas un pārliecinieties, ka tā atbilst jūsu konkrētajām prasībām.

Labākās prakses pieejamu datumu atlasītāju izveidei

Šeit ir kopsavilkums par labākajām praksēm pieejamu datumu atlasītāju izveidei:

• Izmantojiet semantisko HTML, lai strukturētu datumu atlasītāju.
• Izmantojiet ARIA atribūtus, lai sniegtu papildu semantisko informāciju.
• Nodrošiniet, ka tastatūras navigācija ir pilnībā ieviesta.
• Testējiet ar ekrāna lasītājiem, lai pārbaudītu saderību.
• Nodrošiniet pietiekamu krāsu kontrastu un skaidrus fokusa indikatorus.
• Lokalizējiet un internacionalizējiet datumu atlasītāju globāliem lietotājiem.
• Optimizējiet datumu atlasītāju mobilajām ierīcēm.
• Veiciet rūpīgu testēšanu un validāciju.

Noslēgums

Pieejamu datumu atlasītāju veidošana ir sarežģīts, bet būtisks uzdevums. Sekojot šajā ceļvedī izklāstītajām vadlīnijām un labākajām praksēm, jūs varat izveidot iekļaujošus kalendāra logrīkus, kas atbilst visu spēju lietotāju vajadzībām dažādās kultūras un tehnoloģiskajās vidēs. Atcerieties, ka pieejamība ir nepārtraukts process, un pastāvīga testēšana un uzlabošana ir izšķiroša, lai nodrošinātu, ka jūsu datumu atlasītāji laika gaitā paliek pieejami. Prioritizējot pieejamību, jūs varat radīt iekļaujošāku un lietotājam draudzīgāku tīmekļa pieredzi ikvienam.

Papildu resursi

• WAI-ARIA autorēšanas prakses ceļvedis (APG) - Kalendārs
• Tīmekļa satura pieejamības vadlīnijas (WCAG) 2.1
• Deque University