تسلط بر جداول داده تعاملی و دسترس‌پذیر با جاوااسکریپت خالص و ARIA

جداول داده یکی از معنادارترین و قدرتمندترین عناصر HTML هستند، اما اغلب هنگامی که توسعه‌دهندگان سعی می‌کنند آن‌ها را با تعاملات پیچیده‌تر کنند، از ویژگی‌های دسترس‌پذیری آن‌ها کاسته می‌شود. چالش اصلی برای توسعه‌دهندگان فرانت‌اند میان‌رده تا پیشرفته، تنها ظاهر خوب جدول نیست، بلکه اطمینان از قابل درک و عملی بودن تعاملات پیچیده—مانند مرتب‌سازی، فیلتر کردن و صفحه‌بندی—برای همه کاربران، از جمله کسانی که از فناوری‌های کمکی استفاده می‌کنند، است. این راهنما بررسی می‌کند که چگونه می‌توان جداول داده تعاملی و مستحکمی را با استفاده از جاوااسکریپت خالص و با بهره‌گیری از استانداردهای WAI-ARIA (ابتکار دسترسی وب – برنامه‌های اینترنتی غنی قابل دسترس) پیاده‌سازی کرد تا شکاف بین HTML ایستا و رابط‌های کاربری پویا پر شود.

پایه و اساس: HTML معنادار غیرقابل مذاکره است

قبل از نوشتن حتی یک خط کد جاوااسکریپت، ساختار HTML شما باید صحیح باشد. خواننده‌های صفحه (Screen readers) برای درک زمینه داده‌ها به نشانه‌های معنادار (semantic landmarks) متکی هستند. یک جدول داده پایه باید همیشه شامل ``، ``، `` و `` (در صورت وجود) باشد. عنصر `` حیاتی است زیرا خلاصه‌ای از محتوای جدول را ارائه می‌دهد که خواننده‌های صفحه بلافاصله پس از ورود به ناحیه جدول آن را اعلام می‌کنند. علاوه بر این، همیشه از عناصر `` با ویژگی‌های `scope` مناسب استفاده کنید. تنظیم `scope="col"` یا `scope="row"` به طور صریح سلول‌های سرستون را به سلول‌های داده متناظر خود مرتبط می‌کند و ابهام را برای کاربرانی که از طریق کیبورد یا دستورات صوتی ناوبری می‌کنند، از بین می‌برد.

افزودن تعامل با جاوااسکریپت خالص

کاربران مدرن انتظار دارند جداول داده پویا باشند. آن‌ها می‌خواهند ستون‌ها را مرتب کنند، ردیف‌ها را فیلتر کنند و نتایج را صفحه‌بندی کنند بدون اینکه صفحه مجدداً بارگذاری شود. اگرچه کتابخانه‌هایی مانند React یا Vue این کار را ساده می‌کنند، اما جاوااسکریپت خالص کنترل بی‌نظیری ارائه می‌دهد و به وابستگی‌های خارجی نیاز ندارد. برای پیاده‌سازی مرتب‌سازی، باید شنونده‌های رویداد (event listeners) را به سلول‌های سرستون خود متصل کنید. وقتی روی یک سرستون کلیک می‌شود، داده‌های ستون متناظر را جمع‌آوری کرده، آن‌ها را مرتب می‌کنید و سپس `` را مجدداً رندر می‌کنید. با این حال، تغییر صرف DOM برای دسترس‌پذیری کافی نیست. شما باید وضعیت سرستون‌ها را به‌روزرسانی کنید تا ترتیب مرتب‌سازی جدید را منعکس کند.

مدیریت وضعیت مرتب‌سازی با ARIA

وقتی کاربر روی سرستون یک ستون برای مرتب‌سازی کلیک می‌کند، باید ویژگی `aria-sort` را روی آن سرستون به‌روزرسانی کنید. این ویژگی می‌تواند مقادیر `ascending` (صعودی)، `descending` (نزولی)، `none` (هیچ‌کدام) یا `other` (سایر) را داشته باشد. این کار به خواننده‌های صفحه اجازه می‌دهد اعلام کنند: «نام ستون، مرتب شده نزولی»، که بازخورد حیاتی به کاربر ارائه می‌دهد. در اینجا یک مثال عملی از نحوه مدیریت رویداد کلیک برای تغییر ترتیب مرتب‌سازی با استفاده از ARIA آورده شده است:

const headers = document.querySelectorAll('table th[data-sortable]');

headers.forEach(header => {
  header.addEventListener('click', () => {
    const direction = header.getAttribute('aria-sort') === 'ascending' ? 'descending' : 'ascending';
    
    // حذف وضعیت 'مرتب شده' از سایر سرستون‌ها
    headers.forEach(h => h.setAttribute('aria-sort', 'none'));
    
    // تنظیم وضعیت جدید
    header.setAttribute('aria-sort', direction);
    
    // منطق مرتب‌سازی را در اینجا اجرا کنید
    sortTable(header, direction);
  });
});

مدیریت تغییرات محتوای پویا

یکی از رایج‌ترین دام‌ها در جاوااسکریپت دسترس‌پذیر، عدم اعلام تغییرات برای کاربران خواننده صفحه است. اگر جدولی را فیلتر کنید یا به صفحه بعدی صفحه‌بندی بروید، DOM تغییر می‌کند، اما کاربر خواننده صفحه ممکن است متوجه به‌روزرسانی محتوا نشود. برای حل این مشکل، از ناحیه `aria-live` استفاده کنید. یک عنصر جداگانه (اغلب به صورت بصری مخفی) ایجاد کنید که به عنوان یک ناحیه زنده عمل کند. وقتی جاوااسکریپت شما محتوای جدول را به‌روزرسانی می‌کند، این ناحیه را نیز با یک پیام مختصر به‌روزرسانی کنید.

<div id="table-status" aria-live="polite" class="sr-only"></div>

<script>
function updateTableContent(filteredRows) {
  // 1. به‌روزرسانی tbody
  tbody.innerHTML = '';
  filteredRows.forEach(row => tbody.appendChild(row));

  // 2. اعلام تغییر به خواننده‌های صفحه
  const statusRegion = document.getElementById('table-status');
  statusRegion.textContent = `جدول به‌روزرسانی شد. نمایش ${filteredRows.length} نتیجه.`;
  
  // پاک کردن پیام پس از یک تأخیر برای جلوگیری از شلوغی
  setTimeout(() => { statusRegion.textContent = ''; }, 1000);
}
</script>

ویژگی `aria-live="polite"` اطمینان حاصل می‌کند که اعلام پس از اتمام کار فعلی کاربر انجام می‌شود و از وقفه ایجاد نمی‌کند، در حالی که `aria-live="assertive"` بلافاصله وقفه ایجاد می‌کند (با احتیاط استفاده شود).

صفحه‌بندی و ناوبری

هنگام پیاده‌سازی صفحه‌بندی، اطمینان حاصل کنید که هر لینک صفحه به وضوح برچسب‌گذاری شده است. از استفاده از متن‌های عمومی مانند «بعدی» یا «1» بدون زمینه خودداری کنید. در عوض، از `aria-label` برای توصیف عمل استفاده کنید، مانند `aria-label="برو به صفحه 2"` یا `aria-label="برو به صفحه بعدی"`. این کار زمینه‌ای را فراهم می‌کند که لینک‌های عمومی فاقد آن هستند. علاوه بر این، کنترل‌های صفحه‌بندی را با استفاده از یک عنصر `