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

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

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

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

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

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

الموارد

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