` که به شکل جدول استایل‌دهی شده‌اند.

درست:

<table>
  <caption>تقویم برای اکتبر ۲۰۲۴</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>۲۹</td>
      <td>۳۰</td>
      <td>۱</td>
      <td>۲</td>
      <td>۳</td>
      <td>۴</td>
      <td>۵</td>
    </tr>
    <tr>
      <td>۶</td>
      <td>۷</td>
      <td>۸</td>
      <td>۹</td>
      <td>۱۰</td>
      <td>۱۱</td>
      <td>۱۲</td>
    </tr>
    <!-- سطرهای بیشتر -->
  </tbody>
</table>

۲. ویژگی‌های ARIA

ویژگی‌های ARIA (برنامه‌های اینترنتی غنی دسترس‌پذیر) اطلاعات معنایی اضافی را برای فناوری‌های کمکی فراهم می‌کنند و درک آن‌ها از عناصر تعاملی را افزایش می‌دهند. از ویژگی‌های 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">۲۹</td>
      <td role="gridcell" aria-disabled="true">۳۰</td>
      <td role="gridcell"><button aria-label="۱ اکتبر ۲۰۲۴">۱</button></td>
      <td role="gridcell"><button aria-label="۲ اکتبر ۲۰۲۴">۲</button></td>
      <td role="gridcell"><button aria-label="۳ اکتبر ۲۰۲۴">۳</button></td>
      <td role="gridcell"><button aria-label="۴ اکتبر ۲۰۲۴">۴</button></td>
      <td role="gridcell"><button aria-label="۵ اکتبر ۲۰۲۴">۵</button></td>
    </tr>
    <tr>
      <td role="gridcell"><button aria-label="۶ اکتبر ۲۰۲۴">۶</button></td>
      <td role="gridcell"><button aria-label="۷ اکتبر ۲۰۲۴">۷</button></td>
      <td role="gridcell"><button aria-label="۸ اکتبر ۲۰۲۴">۸</button></td>
      <td role="gridcell"><button aria-label="۹ اکتبر ۲۰۲۴">۹</button></td>
      <td role="gridcell"><button aria-label="۱۰ اکتبر ۲۰۲۴">۱۰</button></td>
      <td role="gridcell"><button aria-label="۱۱ اکتبر ۲۰۲۴">۱۱</button></td>
      <td role="gridcell"><button aria-label="۱۲ اکتبر ۲۰۲۴">۱۲</button></td>
    </tr>
    <!-- سطرهای بیشتر -->
  </tbody>
</table>

توجه: همیشه با صفحه‌خوان‌های واقعی آزمایش کنید تا اطمینان حاصل شود که ویژگی‌های ARIA به درستی تفسیر می‌شوند.

۳. ناوبری با صفحه‌کلید

ناوبری با صفحه‌کلید برای کاربرانی که نمی‌توانند از ماوس یا دستگاه اشاره‌گر دیگری استفاده کنند، ضروری است. اطمینان حاصل کنید که تمام عناصر تعاملی در انتخابگر تاریخ از طریق صفحه‌کلید قابل دسترسی هستند.

• مدیریت فوکوس: از ویژگی `tabindex` برای کنترل ترتیب فوکوس استفاده کنید. اطمینان حاصل کنید که فوکوس به طور منطقی در انتخابگر تاریخ حرکت می‌کند. از جاوا اسکریپت برای مدیریت فوکوس هنگام تعامل کاربر با ویجت استفاده کنید.
• کلیدهای جهت‌نما: ناوبری با صفحه‌کلید را با استفاده از کلیدهای جهت‌نما برای حرکت بین تاریخ‌ها پیاده‌سازی کنید. کلیدهای جهت‌نمای چپ و راست باید به ترتیب به روز قبل و بعد حرکت کنند. کلیدهای جهت‌نمای بالا و پایین باید به ترتیب به همان روز در هفته قبل و بعد حرکت کنند.
• کلیدهای Home و End: کلید Home باید به روز اول هفته جاری و کلید End باید به روز آخر هفته جاری حرکت کند.
• کلیدهای Page Up و Page Down: کلید Page Up باید به ماه قبل و کلید Page Down باید به ماه بعد حرکت کند.
• کلید Enter: کلید Enter باید تاریخ متمرکز شده را انتخاب کند.
• کلید Escape: کلید Escape باید انتخابگر تاریخ را ببندد و فوکوس را به فیلد ورودی یا دکمه‌ای که آن را فعال کرده است، بازگرداند.

مثال (جاوا اسکریپت):

// مثالی از مدیریت ناوبری با صفحه‌کلید
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;
  }
});

۴. سازگاری با صفحه‌خوان

صفحه‌خوان‌ها برای ارائه اطلاعات به کاربران به HTML معنایی و ویژگی‌های ARIA تکیه می‌کنند. اطمینان حاصل کنید که انتخابگر تاریخ شما با صفحه‌خوان‌های محبوبی مانند NVDA، JAWS و VoiceOver سازگار است.

• برچسب‌های توصیفی: برای تمام عناصر تعاملی برچسب‌های واضح و مختصر ارائه دهید. از `aria-label` یا `aria-labelledby` برای ارائه زمینه اضافی استفاده کنید.
• اعلام وضعیت‌ها: از ویژگی‌های ARIA برای نشان دادن وضعیت عناصر استفاده کنید، مانند `aria-selected` برای تاریخ انتخاب شده و `aria-disabled` برای تاریخ‌های غیرفعال. صفحه‌خوان‌ها این وضعیت‌ها را به کاربر اعلام خواهند کرد.
• مناطق زنده (Live Regions): از مناطق زنده ARIA (مانند `aria-live="polite"`) برای اعلام تغییرات پویا در انتخابگر تاریخ استفاده کنید، مانند زمانی که کاربر به ماه دیگری می‌رود. این به صفحه‌خوان‌ها اجازه می‌دهد تا بدون ایجاد وقفه در گردش کار کاربر، او را از تغییر مطلع کنند.
• مدیریت خطا: اگر خطا یا مشکل اعتبارسنجی وجود دارد، پیام‌های خطای واضح و آموزنده‌ای ارائه دهید که برای صفحه‌خوان‌ها قابل دسترسی باشند. از `aria-describedby` برای مرتبط کردن پیام خطا با فیلد ورودی مربوطه استفاده کنید.

مثال:

<div aria-live="polite">
  <!-- محتوای پویا، مانند ناوبری ماه -->
</div>

۵. طراحی بصری

طراحی بصری انتخابگر تاریخ نیز باید دسترس‌پذیر باشد. موارد زیر را در نظر بگیرید:

• کنتراست رنگ: از کنتراست رنگ کافی بین رنگ متن و پس‌زمینه اطمینان حاصل کنید تا با استانداردهای سطح AA دستورالعمل‌های دسترس‌پذیری محتوای وب (WCAG) 2.1 مطابقت داشته باشد. از یک ابزار بررسی کنتراست رنگ برای تأیید نسبت کنتراست استفاده کنید.
• نشانگرهای فوکوس: برای تمام عناصر تعاملی یک نشانگر فوکوس واضح و قابل مشاهده ارائه دهید. نشانگر فوکوس باید از عناصر اطراف متمایز باشد و توسط عناصر دیگر پوشانده نشود.
• اندازه فونت و فاصله‌گذاری: از اندازه فونت خوانا و فاصله کافی بین عناصر برای بهبود خوانایی و قابلیت استفاده استفاده کنید.
• پرهیز از اتکای صرف به رنگ: برای انتقال اطلاعات فقط به رنگ تکیه نکنید. از نشانه‌های بصری دیگر، مانند آیکون‌ها یا متن، برای تکمیل کدگذاری رنگ استفاده کنید.

۶. بومی‌سازی و بین‌المللی‌سازی

فرمت‌های تاریخ، سیستم‌های تقویم و قراردادهای زبانی در فرهنگ‌ها و مناطق مختلف متفاوت است. اطمینان حاصل کنید که انتخابگر تاریخ شما به درستی بومی‌سازی و بین‌المللی‌سازی شده است تا از مخاطبان جهانی پشتیبانی کند.

• فرمت‌های تاریخ: از یک کتابخانه قالب‌بندی تاریخ انعطاف‌پذیر استفاده کنید که از فرمت‌های مختلف تاریخ پشتیبانی می‌کند، مانند DD/MM/YYYY (رایج در اروپا و بخش‌هایی از آسیا) و MM/DD/YYYY (رایج در آمریکای شمالی). به کاربران اجازه دهید فرمت تاریخ را مطابق با ترجیحات خود سفارشی کنند.
• سیستم‌های تقویم: از سیستم‌های تقویم مختلف پشتیبانی کنید، مانند تقویم میلادی (پرکاربردترین تقویم) و تقویم هجری قمری (مورد استفاده در بسیاری از کشورهای اسلامی).
• پشتیبانی از زبان: ترجمه تمام عناصر متنی در انتخابگر تاریخ، از جمله نام ماه‌ها، نام روزها و برچسب‌ها را فراهم کنید.
• پشتیبانی از راست به چپ (RTL): اطمینان حاصل کنید که انتخابگر تاریخ در زبان‌های راست به چپ مانند عربی و عبری به درستی نمایش داده می‌شود. این ممکن است نیازمند تنظیم طرح و استایل ویجت باشد.
• مناطق زمانی: هنگام کار با تاریخ‌ها، پیامدهای مناطق زمانی را در نظر بگیرید. تاریخ‌ها را در یک منطقه زمانی ثابت (مانند UTC) ذخیره کنید و هنگام نمایش آن‌ها را به منطقه زمانی محلی کاربر تبدیل کنید.

مثال: از یک کتابخانه جاوا اسکریپت مانند `moment.js` یا `date-fns` برای مدیریت قالب‌بندی تاریخ و بومی‌سازی استفاده کنید.

۷. دسترس‌پذیری موبایل

با افزایش استفاده از دستگاه‌های تلفن همراه، اطمینان از دسترس‌پذیری انتخابگر تاریخ شما در پلتفرم‌های موبایل ضروری است. موارد زیر را در نظر بگیرید:

• اهداف لمسی: اطمینان حاصل کنید که تمام عناصر تعاملی دارای اهداف لمسی به اندازه کافی بزرگ هستند تا به راحتی در دستگاه‌های تلفن همراه قابل لمس باشند. اپل حداقل اندازه هدف لمسی ۴۴x۴۴ پیکسل را توصیه می‌کند.
• طراحی واکنش‌گرا: از تکنیک‌های طراحی واکنش‌گرا استفاده کنید تا اطمینان حاصل شود که انتخابگر تاریخ با اندازه‌ها و جهت‌گیری‌های مختلف صفحه سازگار است.
• ورودی صفحه‌کلید: اگر انتخابگر تاریخ نیاز به ورودی صفحه‌کلید دارد، یک صفحه‌کلید مناسب برای موبایل ارائه دهید که برای ورود تاریخ بهینه شده باشد.
• ژست‌ها: از اتکای صرف به ژست‌هایی که ممکن است برای کاربران دارای اختلالات حرکتی دشوار باشد، خودداری کنید. روش‌های ورودی جایگزین مانند ناوبری با صفحه‌کلید یا کنترل صوتی را فراهم کنید.

آزمایش و اعتبارسنجی

آزمایش کامل برای اطمینان از دسترس‌پذیری انتخابگر تاریخ شما بسیار مهم است. از ترکیبی از روش‌های آزمایش خودکار و دستی استفاده کنید:

• آزمایش خودکار: از ابزارهای آزمایش دسترس‌پذیری مانند Axe یا WAVE برای شناسایی مشکلات رایج دسترس‌پذیری استفاده کنید.
• آزمایش دستی: انتخابگر تاریخ را به صورت دستی با استفاده از صفحه‌خوان و ناوبری صفحه‌کلید آزمایش کنید تا تأیید شود که برای افراد دارای معلولیت قابل استفاده است.
• آزمایش کاربر: آزمایش کاربر را با افراد دارای معلولیت انجام دهید تا بازخورد جمع‌آوری کرده و زمینه‌های بهبود را شناسایی کنید.
• انطباق با WCAG: اطمینان حاصل کنید که انتخابگر تاریخ شما با الزامات سطح AA دستورالعمل WCAG 2.1 مطابقت دارد.

نمونه‌هایی از انتخابگرهای تاریخ دسترس‌پذیر

چندین کتابخانه انتخابگر تاریخ منبع باز و تجاری پشتیبانی خوبی از دسترس‌پذیری ارائه می‌دهند. برخی از نمونه‌ها عبارتند از:

• React Datepicker: یک کامپوننت محبوب React با پشتیبانی از ARIA و ناوبری با صفحه‌کلید.
• Air Datepicker: یک انتخابگر تاریخ سبک و قابل تنظیم با ویژگی‌های خوب دسترس‌پذیری.
• FullCalendar: یک کامپوننت تقویم کامل با پشتیبانی جامع از دسترس‌پذیری.

هنگام انتخاب یک کتابخانه انتخابگر تاریخ، ویژگی‌های دسترس‌پذیری آن را به دقت ارزیابی کنید و اطمینان حاصل کنید که با الزامات خاص شما مطابقت دارد.

بهترین شیوه‌ها برای ساخت انتخابگرهای تاریخ دسترس‌پذیر

در اینجا خلاصه‌ای از بهترین شیوه‌ها برای ساخت انتخابگرهای تاریخ دسترس‌پذیر آمده است:

• از HTML معنایی برای ساختار انتخابگر تاریخ استفاده کنید.
• از ویژگی‌های ARIA برای ارائه اطلاعات معنایی اضافی استفاده کنید.
• اطمینان حاصل کنید که ناوبری با صفحه‌کلید به طور کامل پیاده‌سازی شده است.
• برای تأیید سازگاری، با صفحه‌خوان‌ها آزمایش کنید.
• کنتراست رنگ کافی و نشانگرهای فوکوس واضح ارائه دهید.
• انتخابگر تاریخ را برای کاربران جهانی بومی‌سازی و بین‌المللی‌سازی کنید.
• انتخابگر تاریخ را برای دستگاه‌های تلفن همراه بهینه کنید.
• آزمایش و اعتبارسنجی کامل انجام دهید.

نتیجه‌گیری

ساخت انتخابگرهای تاریخ دسترس‌پذیر یک کار پیچیده اما ضروری است. با پیروی از دستورالعمل‌ها و بهترین شیوه‌های ذکر شده در این راهنما، می‌توانید ویجت‌های تقویم فراگیری ایجاد کنید که به کاربران با هر توانایی، در سراسر مناظر فرهنگی و فناورانه متنوع، خدمت‌رسانی می‌کنند. به یاد داشته باشید که دسترس‌پذیری یک فرآیند مداوم است و آزمایش و بهبود مستمر برای اطمینان از اینکه انتخابگرهای تاریخ شما در طول زمان دسترس‌پذیر باقی می‌مانند، بسیار مهم است. با اولویت قرار دادن دسترس‌پذیری، می‌توانید یک تجربه وب فراگیرتر و کاربرپسندتر برای همه ایجاد کنید.

منابع بیشتر

• راهنمای شیوه‌های تالیف WAI-ARIA (APG) - تقویم
• دستورالعمل‌های دسترس‌پذیری محتوای وب (WCAG) 2.1
• دانشگاه Deque