लोगों का ध्यान, पेज पर जोड़े गए नए कॉन्टेंट पर फ़ोकस करने पर होता है

जब भी किसी पेज पर नया कॉन्टेंट जोड़ा जाए, तो यह पक्का करें कि उपयोगकर्ता का फ़ोकस उस कॉन्टेंट पर ले जाए, ताकि वे उस पर कार्रवाई कर सकें.

मैन्युअल तरीके से टेस्ट करने का तरीका

एक पेज वाले ऐप्लिकेशन को टेस्ट करना बेहद ज़रूरी है. खास तौर पर, ऐसा तब होता है, जब नया कॉन्टेंट तैयार करने के लिए उपयोगकर्ताओं का ध्यान केंद्रित करना हो.

आम तौर पर, एक पेज वाले ऐप्लिकेशन में, किसी लिंक पर क्लिक करने से हार्ड रीफ़्रेश नहीं होता. इसके बजाय, रास्ता बदलने से <main> कॉन्टेंट एरिया के लिए नया डेटा फ़ेच होता है.

सामान्य दृष्टि वाले उपयोगकर्ताओं के लिए यह सही तरीके से काम करता है. हालाँकि, स्क्रीन रीडर या दूसरी सहायक टेक्नोलॉजी पर नेविगेट करने वाले उपयोगकर्ताओं को शायद यह पता न चले कि पेज में नया कॉन्टेंट जोड़ दिया गया है. ऐसे कोई संकेत नहीं हैं कि उन्हें <main> एरिया पर वापस जाना चाहिए.

ऐसा होने पर, आपको उपयोगकर्ता का फ़ोकस मैनेज करना होगा, ताकि उपयोगकर्ता को उसके कॉन्टेंट के बारे में पता चलता रहे और वह साइट के विज़ुअल कॉन्टेंट के साथ सिंक रहे.

कैसे ठीक करें

किसी पेज के नए कॉन्टेंट पर लोगों का ध्यान खींचने के लिए, लोड किए गए नए कॉन्टेंट में एक अच्छी हेडिंग ढूंढें और उस पर फ़ोकस करें. इसे आसानी से करने का सबसे आसान तरीका यह है कि हेडिंग को -1 में से tabindex दें और इसके 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>

सहायक टेक्नोलॉजी, नए हेडिंग और उसके मुख्य हिस्से के बारे में बताती हैं.

सुलभता के लिए फ़ोकस मैनेज करना भी देखें.

संसाधन

उपयोगकर्ता का फ़ोकस, पेज में जोड़े गए नए कॉन्टेंट पर फ़ोकस करना ऑडिट के लिए सोर्स कोड