যখনই একটি পৃষ্ঠায় নতুন বিষয়বস্তু যোগ করা হয়, ব্যবহারকারীর ফোকাস সেই বিষয়বস্তুর দিকে পরিচালিত হয় তা নিশ্চিত করার চেষ্টা করুন, যাতে তারা এটিতে পদক্ষেপ নিতে পারে।
কিভাবে ম্যানুয়ালি পরীক্ষা করা যায়
একক-পৃষ্ঠার অ্যাপগুলি পরীক্ষা করার জন্য গুরুত্বপূর্ণ, বিশেষ করে যখন এটি নতুন সামগ্রীতে ব্যবহারকারীর ফোকাস পরিচালনার ক্ষেত্রে আসে।
সাধারণত, একটি একক-পৃষ্ঠার অ্যাপে, একটি লিঙ্কে ক্লিক করা কঠিন রিফ্রেশের কারণ হবে না। পরিবর্তে, একটি রুট পরিবর্তন <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>
সহায়ক প্রযুক্তি নতুন শিরোনাম এবং এটির মধ্যে থাকা প্রধান ল্যান্ডমার্ক এলাকা ঘোষণা করে।
সম্পদ
ব্যবহারকারীর ফোকাস জন্য উত্স কোড পৃষ্ঠা নিরীক্ষা যোগ করা নতুন বিষয়বস্তু নির্দেশিত হয়