فوکوس مدیریت شده کاربر در صفحه

هر زمان که محتوای جدیدی به یک صفحه اضافه می‌شود، سعی کنید تمرکز کاربر به آن محتوا هدایت شود تا بتواند بر اساس آن عمل کند.

چگونه به صورت دستی تست کنیم

تست برنامه‌های تک‌صفحه‌ای (Single-page apps) بسیار مهم است، به ویژه زمانی که مدیریت تمرکز کاربر به محتوای جدید مطرح باشد. به طور معمول، در یک برنامه تک‌صفحه‌ای، کلیک کردن روی یک لینک باعث بازنشانی کامل صفحه نمی‌شود. در عوض، تغییر مسیر باعث دریافت داده‌های جدید برای ناحیه محتوای <main> می‌شود. برای کاربران بینا، این کار به خوبی عمل می‌کند. اما کاربران نابینا که از صفحه‌خوان یا تکنولوژی‌های کمکی دیگر استفاده می‌کنند، ممکن است ندانند که محتوای جدید به صفحه اضافه شده است. هیچ نشانه‌ای وجود ندارد که آنها باید به ناحیه <main> بازگردند. در چنین مواقعی، شما باید تمرکز کاربر را مدیریت کنید تا زمینه‌ای که کاربر درک می‌کند با محتوای بصری سایت همگام باشد.

چگونه آن را اصلاح کنیم

برای مدیریت تمرکز کاربر به محتوای تازه در صفحه، یک عنوان مناسب در محتوای جدید پیدا کنید و تمرکز را به آن هدایت کنید. ساده‌ترین راه برای انجام این کار این است که به عنوان یک tabindex از مقدار -1 بدهید و از متد focus() استفاده کنید.

<main>
  <h2 tabindex="-1">Welcome to your shopping cart</h2>
</main>
<script>
  // Assuming this gets called every time new content loads...
  function onNewPage() {
    var heading = document.querySelector('h2');
    heading.focus();
    // You can also update the page title :)
    document.title = heading.textContent;
  }
</script>

فناوری‌های کمکی، عنوان جدید و ناحیه اصلی (main landmark) که این عنوان در آن قرار دارد را اعلام می‌کنند.