`, стилізованих так, щоб виглядати як таблиця.

Правильно:

<table>
  <caption>Календар на жовтень 2024</caption>
  <thead>
    <tr>
      <th scope="col">Нд</th>
      <th scope="col">Пн</th>
      <th scope="col">Вт</th>
      <th scope="col">Ср</th>
      <th scope="col">Чт</th>
      <th scope="col">Пт</th>
      <th scope="col">Сб</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>
    <!-- Більше рядків -->
  </tbody>
</table>

2. Атрибути ARIA

Атрибути ARIA (Accessible Rich Internet Applications) надають додаткову семантичну інформацію допоміжним технологіям, покращуючи їхнє розуміння інтерактивних елементів. Використовуйте атрибути ARIA, щоб:

• Визначити ролі: Вказуйте призначення елементів, наприклад, `role="grid"` для сітки календаря та `role="gridcell"` для кожної клітинки з датою.
• Надати мітки: Використовуйте `aria-label` або `aria-labelledby` для надання описових міток елементам, особливо коли візуальна мітка є недостатньою.
• Вказати стан: Використовуйте атрибути, такі як `aria-selected` для позначення вибраної дати та `aria-disabled` для позначення неактивних дат.
• Надати описи: Використовуйте `aria-describedby` для зв'язування додаткової інформації з елементом, наприклад, опису формату дати.

Приклад:

<table role="grid" aria-labelledby="date-picker-label">
  <caption id="date-picker-label">Виберіть дату</caption>
  <thead>
    <tr>
      <th scope="col">Нд</th>
      <th scope="col">Пн</th>
      <th scope="col">Вт</th>
      <th scope="col">Ср</th>
      <th scope="col">Чт</th>
      <th scope="col">Пт</th>
      <th scope="col">Сб</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 жовтня 2024">1</button></td>
      <td role="gridcell"><button aria-label="2 жовтня 2024">2</button></td>
      <td role="gridcell"><button aria-label="3 жовтня 2024">3</button></td>
      <td role="gridcell"><button aria-label="4 жовтня 2024">4</button></td>
      <td role="gridcell"><button aria-label="5 жовтня 2024">5</button></td>
    </tr>
    <tr>
      <td role="gridcell"><button aria-label="6 жовтня 2024">6</button></td>
      <td role="gridcell"><button aria-label="7 жовтня 2024">7</button></td>
      <td role="gridcell"><button aria-label="8 жовтня 2024">8</button></td>
      <td role="gridcell"><button aria-label="9 жовтня 2024">9</button></td>
      <td role="gridcell"><button aria-label="10 жовтня 2024">10</button></td>
      <td role="gridcell"><button aria-label="11 жовтня 2024">11</button></td>
      <td role="gridcell"><button aria-label="12 жовтня 2024">12</button></td>
    </tr>
    <!-- Більше рядків -->
  </tbody>
</table>

Примітка: Завжди тестуйте з реальними екранними дикторами, щоб переконатися, що атрибути ARIA інтерпретуються правильно.

3. Навігація з клавіатури

Навігація з клавіатури є надзвичайно важливою для користувачів, які не можуть використовувати мишу або інший вказівний пристрій. Переконайтеся, що всі інтерактивні елементи в компоненті вибору дати доступні з клавіатури.

• Керування фокусом: Використовуйте атрибут `tabindex` для контролю порядку фокусування. Переконайтеся, що фокус логічно переміщується по компоненту вибору дати. Використовуйте JavaScript для керування фокусом, коли користувач взаємодіє з віджетом.
• Клавіші зі стрілками: Реалізуйте навігацію за допомогою клавіш зі стрілками для переміщення між датами. Клавіші зі стрілками вліво та вправо повинні переміщувати до попереднього та наступного дня відповідно. Клавіші зі стрілками вгору та вниз повинні переміщувати до того ж дня попереднього та наступного тижня відповідно.
• Клавіші Home та End: Клавіша Home повинна переміщувати до першого дня поточного тижня, а клавіша End — до останнього дня поточного тижня.
• Клавіші Page Up та Page Down: Клавіша Page Up повинна переміщувати до попереднього місяця, а клавіша Page Down — до наступного місяця.
• Клавіша Enter: Клавіша Enter повинна вибирати дату у фокусі.
• Клавіша Escape: Клавіша Escape повинна закривати компонент вибору дати та повертати фокус до поля введення або кнопки, що його викликала.

Приклад (JavaScript):

// Приклад обробки навігації з клавіатури
const datePicker = document.getElementById('date-picker');

datePicker.addEventListener('keydown', function(event) {
  switch (event.key) {
    case 'ArrowLeft':
      // Перемістити фокус на попередній день
      break;
    case 'ArrowRight':
      // Перемістити фокус на наступний день
      break;
    case 'ArrowUp':
      // Перемістити фокус на той самий день попереднього тижня
      break;
    case 'ArrowDown':
      // Перемістити фокус на той самий день наступного тижня
      break;
    case 'Enter':
      // Вибрати дату у фокусі
      break;
    case 'Escape':
      // Закрити компонент вибору дати
      break;
  }
});

4. Сумісність з екранними дикторами

Екранні диктори покладаються на семантичний HTML та атрибути ARIA для надання інформації користувачам. Переконайтеся, що ваш компонент вибору дати сумісний з популярними екранними дикторами, такими як NVDA, JAWS та VoiceOver.

• Описові мітки: Надайте чіткі та лаконічні мітки для всіх інтерактивних елементів. Використовуйте `aria-label` або `aria-labelledby` для надання додаткового контексту.
• Оголошення стану: Використовуйте атрибути ARIA для позначення стану елементів, наприклад, `aria-selected` для вибраної дати та `aria-disabled` для неактивних дат. Екранні диктори оголошуватимуть ці стани користувачеві.
• Живі регіони: Використовуйте живі регіони ARIA (наприклад, `aria-live="polite"`) для оголошення динамічних змін у компоненті вибору дати, наприклад, коли користувач переходить до іншого місяця. Це дозволяє екранним дикторам сповіщати користувача про зміни, не перериваючи його робочий процес.
• Обробка помилок: Якщо виникають помилки або проблеми з валідацією, надайте чіткі та інформативні повідомлення про помилки, доступні для екранних дикторів. Використовуйте `aria-describedby` для зв'язування повідомлення про помилку з відповідним полем введення.

Приклад:

<div aria-live="polite">
  <!-- Динамічний вміст, такий як навігація по місяцях -->
</div>

5. Візуальний дизайн

Візуальний дизайн компонента вибору дати також повинен бути доступним. Враховуйте наступне:

• Колірний контраст: Забезпечте достатній колірний контраст між текстом та фоном, щоб відповідати стандартам WCAG (Web Content Accessibility Guidelines) 2.1 рівня AA. Використовуйте інструмент для перевірки колірного контрасту, щоб перевірити коефіцієнт контрастності.
• Індикатори фокуса: Забезпечте чіткий та видимий індикатор фокуса для всіх інтерактивних елементів. Індикатор фокуса повинен відрізнятися від навколишніх елементів і не повинен бути прихованим іншими елементами.
• Розмір шрифту та відступи: Використовуйте читабельний розмір шрифту та достатні відступи між елементами для покращення читабельності та зручності використання.
• Уникайте покладання виключно на колір: Не покладайтеся виключно на колір для передачі інформації. Використовуйте інші візуальні підказки, такі як іконки або текст, для доповнення колірного кодування.

6. Локалізація та інтернаціоналізація

Формати дат, системи календарів та мовні угоди різняться в різних культурах і регіонах. Переконайтеся, що ваш компонент вибору дати належним чином локалізований та інтернаціоналізований для підтримки глобальної аудиторії.

• Формати дат: Використовуйте гнучку бібліотеку форматування дат, яка підтримує різні формати, такі як ДД/ММ/РРРР (поширений у Європі та частинах Азії) та ММ/ДД/РРРР (поширений у Північній Америці). Дозвольте користувачам налаштовувати формат дати відповідно до їхніх уподобань.
• Системи календарів: Підтримуйте різні системи календарів, такі як григоріанський календар (найбільш поширений) та календар Хіджри (використовується в багатьох ісламських країнах).
• Мовна підтримка: Надайте переклади для всіх текстових елементів у компоненті вибору дати, включаючи назви місяців, днів тижня та мітки.
• Підтримка справа наліво (RTL): Переконайтеся, що компонент вибору дати правильно відображається в мовах з написанням справа наліво, таких як арабська та іврит. Це може вимагати коригування макета та стилів віджета.
• Часові пояси: Враховуйте наслідки часових поясів при обробці дат. Зберігайте дати в єдиному часовому поясі (наприклад, UTC) і конвертуйте їх у місцевий часовий пояс користувача при відображенні.

Приклад: Використовуйте бібліотеку JavaScript, таку як `moment.js` або `date-fns`, для обробки форматування дат та локалізації.

7. Мобільна доступність

Зі зростанням використання мобільних пристроїв важливо забезпечити доступність вашого компонента вибору дати на мобільних платформах. Враховуйте наступне:

• Сенсорні цілі: Переконайтеся, що всі інтерактивні елементи мають достатньо великі сенсорні цілі для легкого натискання на мобільних пристроях. Apple рекомендує мінімальний розмір сенсорної цілі 44x44 пікселів.
• Адаптивний дизайн: Використовуйте техніки адаптивного дизайну, щоб компонент вибору дати адаптувався до різних розмірів екрана та орієнтацій.
• Введення з клавіатури: Якщо компонент вибору дати вимагає введення з клавіатури, надайте зручну для мобільних пристроїв клавіатуру, оптимізовану для введення дати.
• Жести: Уникайте покладання виключно на жести, які можуть бути складними для користувачів з порушеннями моторики. Надайте альтернативні методи введення, такі як навігація з клавіатури або голосове керування.

Тестування та валідація

Ретельне тестування є вирішальним для забезпечення доступності вашого компонента вибору дати. Використовуйте комбінацію автоматизованих та ручних методів тестування:

• Автоматизоване тестування: Використовуйте інструменти для тестування доступності, такі як Axe або WAVE, для виявлення поширених проблем з доступністю.
• Ручне тестування: Вручну протестуйте компонент вибору дати за допомогою екранного диктора та навігації з клавіатури, щоб перевірити, чи він є зручним для людей з обмеженими можливостями.
• Тестування користувачами: Проведіть тестування з людьми з обмеженими можливостями, щоб зібрати відгуки та виявити сфери для покращення.
• Відповідність WCAG: Переконайтеся, що ваш компонент вибору дати відповідає вимогам WCAG 2.1 рівня AA.

Приклади доступних компонентів вибору дати

Кілька комерційних бібліотек та бібліотек з відкритим кодом для вибору дати забезпечують хорошу підтримку доступності. Деякі приклади:

• React Datepicker: Популярний компонент для React з підтримкою ARIA та навігації з клавіатури.
• Air Datepicker: Легкий та настроюваний компонент вибору дати з хорошими функціями доступності.
• FullCalendar: Повнофункціональний компонент календаря з комплексною підтримкою доступності.

При виборі бібліотеки для компонента вибору дати ретельно оцініть її функції доступності та переконайтеся, що вона відповідає вашим конкретним вимогам.

Найкращі практики для створення доступних компонентів вибору дати

Ось короткий перелік найкращих практик для створення доступних компонентів вибору дати:

• Використовуйте семантичний HTML для структурування компонента вибору дати.
• Використовуйте атрибути ARIA для надання додаткової семантичної інформації.
• Переконайтеся, що навігація з клавіатури повністю реалізована.
• Тестуйте з екранними дикторами для перевірки сумісності.
• Забезпечте достатній колірний контраст та чіткі індикатори фокуса.
• Локалізуйте та інтернаціоналізуйте компонент вибору дати для глобальних користувачів.
• Оптимізуйте компонент вибору дати для мобільних пристроїв.
• Проводьте ретельне тестування та валідацію.

Висновок

Створення доступних компонентів вибору дати — це складне, але важливе завдання. Дотримуючись рекомендацій та найкращих практик, викладених у цьому посібнику, ви можете створювати інклюзивні віджети календаря, які задовольняють потреби користувачів з будь-якими можливостями в різноманітних культурних і технологічних середовищах. Пам'ятайте, що доступність — це безперервний процес, і постійне тестування та вдосконалення є вирішальними для того, щоб ваші компоненти вибору дати залишалися доступними з часом. Надаючи пріоритет доступності, ви можете створити більш інклюзивний та зручний для користувачів вебресурс для всіх.

Додаткові ресурси

• Посібник з авторських практик WAI-ARIA (APG) - Календар
• Рекомендації з доступності вебконтенту (WCAG) 2.1
• Deque University