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

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

मैन्युअल तरीके से जांच करने का तरीका

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

आम तौर पर, एक पेज वाले ऐप्लिकेशन में, किसी लिंक पर क्लिक करने से हार्ड रीफ़्रेश नहीं होता. इसके बजाय, रास्ते में बदलाव करने पर <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>

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

ध्यान दें: हो सकता है कि जब कोई उपयोगकर्ता पहली बार आपकी साइट पर आए, तब आप फ़ोकस मैनेजमेंट का इस्तेमाल न करना चाहें. इसे सिर्फ़ आगे के नेविगेशन के लिए लागू करें, जैसे कि जब कोई उपयोगकर्ता किसी लिंक पर क्लिक करे.

संसाधन

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