توجيه تركيز المستخدم إلى المحتوى الجديد المضاف إلى الصفحة

عند إضافة محتوى جديد إلى الصفحة، حاول التأكد من توجيه تركيز المستخدم إلى ذلك المحتوى، حتى يتمكنوا من اتخاذ إجراء بشأنه.

كيفية إجراء الاختبار يدويًا

من المهم اختبار تطبيقات الصفحة الواحدة، خاصةً عندما يتعلق الأمر بإدارة تركيز المستخدم على المحتوى الجديد.

عادةً، في تطبيق من صفحة واحدة، لن يؤدي النقر على الرابط إلى إجراء تحديث كامل. بدلاً من ذلك، يجلب تغيير المسار بيانات جديدة لمنطقة محتوى <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>

تعلن التقنيات المساعدة عن العنوان الجديد ومنطقة المعالم الرئيسية التي تحتوي عليها.

راجِع أيضًا مقالة إدارة التركيز لإمكانية الوصول.

المراجِع

رمز المصدر لتدقيق تركيز المستخدم يتم توجيهه إلى محتوى جديد تتم إضافته إلى الصفحة