هر زمان که محتوای جدیدی به صفحه ای اضافه می شود، سعی کنید اطمینان حاصل کنید که تمرکز کاربر به آن محتوا معطوف می شود تا بتواند در مورد آن اقدام کند.
نحوه تست دستی
برنامه‌های تک صفحه‌ای برای آزمایش مهم هستند، به‌ویژه وقتی صحبت از مدیریت تمرکز کاربر بر محتوای جدید می‌شود.
به طور معمول، در یک برنامه تک صفحه ای، کلیک کردن بر روی یک پیوند باعث بروز رسانی سخت نمی شود. در عوض، تغییر مسیر داده‌های جدیدی را برای منطقه محتوای <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>
فناوری های کمکی عنوان جدید و منطقه شاخص اصلی را که در آن گنجانده شده است، اعلام می کند.
همچنین به مدیریت تمرکز برای دسترسی مراجعه کنید.
منابع
کد منبع برای تمرکز کاربر به محتوای جدید اضافه شده به ممیزی صفحه هدایت می شود