Chrome 124 থেকে, স্ক্রলারগুলি ডিফল্টরূপে কীবোর্ড ফোকাসযোগ্য হয় যদি তাদের কোন কীবোর্ড ফোকাসযোগ্য শিশু না থাকে।
পটভূমি
স্ক্রলার সর্বত্র আছে. আপনি একটি "নিয়ম ও শর্তাবলী" বাক্সে একটি খুঁজে পেতে পারেন, যেখানে আপনাকে জমা বোতামটি ক্লিক করতে সমস্তভাবে নীচে স্ক্রোল করতে হবে৷ অথবা, আপনি চয়ন করতে আইকন পূর্ণ একটি উল্লম্ব মেনু বার সম্মুখীন হতে পারে.
এই ধরনের ক্ষেত্রে, অনেক ওয়েব ব্যবহারকারী উপাদান জুড়ে স্ক্রোল করতে তাদের মাউস বা টাচপ্যাড থেকে আপ ডাউন গতি ব্যবহার করে। যাইহোক, একটি পয়েন্টিং ডিভাইস, ট্র্যাকপ্যাড, বা টাচস্ক্রিন প্রতিটি ব্যবহারকারীর একটি পৃষ্ঠা নেভিগেট করার সর্বোত্তম উপায় নয়। কিছু লোক শুধুমাত্র তাদের কীবোর্ড ব্যবহার করে প্রতিটি ফোকাসযোগ্য উপাদান অ্যাক্সেস করে একটি HTML পৃষ্ঠা জুড়ে নেভিগেট করতে পছন্দ করে। এটি বিভিন্ন কারণে হতে পারে। যাদের কাঁপুনি বা অন্যান্য সমস্যা রয়েছে যা মাউস পরিচালনা করা কঠিন করে তোলে, যাদের মাউস কার্সারটি দৃশ্যমানভাবে সনাক্ত করতে অসুবিধা হয় এবং অন্য যারা একটি একক সুইচ বা ভয়েস নিয়ন্ত্রণ ব্যবহার করে।
অ্যাক্সেসযোগ্যতার সর্বোত্তম অনুশীলনগুলি সুপারিশ করে যে সমস্ত বৈশিষ্ট্য অবশ্যই একটি কীবোর্ড ব্যবহার করে উপলব্ধ থাকতে হবে। এইভাবে, প্রত্যেকে তাদের জন্য সেরা কাজ করে এমনভাবে ওয়েব ব্যবহার করতে পারে৷
2.1.1 কীবোর্ড: বিষয়বস্তুর সমস্ত কার্যকারিতা পৃথক কীস্ট্রোকের জন্য নির্দিষ্ট সময়ের প্রয়োজন ছাড়াই একটি কীবোর্ড ইন্টারফেসের মাধ্যমে অপারেবল হয়, যেখানে অন্তর্নিহিত ফাংশনের জন্য ইনপুট প্রয়োজন যা ব্যবহারকারীর চলাচলের পথের উপর নির্ভর করে এবং কেবলমাত্র শেষ পয়েন্ট নয়। (লেভেল A)
এই পরিবর্তন আগে scrollers ফোকাস
এই পরিবর্তনের আগে, একটি স্ক্রলার উপাদান শুধুমাত্র ট্যাব ফোকাস করা যেতে পারে যদি ট্যাবিনডেক্স স্পষ্টভাবে 0 বা তার বেশি সেট করা থাকে। উদাহরণস্বরূপ, নিম্নলিখিত CSS এবং HTML ব্যবহার করুন। তারপর, প্রথম বোতাম থেকে স্ক্রলার উপাদানে ট্যাব করার চেষ্টা করুন।
div.scroll, button {
border: 1px solid lightgray;
margin-top: 1em;
border-radius: 0.5em;
}
div.scroll {
overflow: auto;
width: 20em;
height: 5em;
display: block;
}
div.long {
width: 10em;
height: 10em;
}
<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a tab focusable scroller...</p>
<div class="long"></div>
<p>You need to scroll down to see this line.</p>
</div>
<button>End</button>
নিম্নলিখিত HTML এর মতো একটি নেতিবাচক ট্যাবিন্ডেক্স ব্যবহার করে, স্ক্রলারটি এড়িয়ে যাবে।
<button>Start</button>
<div class="scroll" tabindex="-1">
<p>This is not a tab focusable scroller...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
আপনি যদি একটি ট্যাবিনডেক্স মান সেট না করেন তবে ব্যবহারকারীর পক্ষে স্ক্রলার অ্যাক্সেস করার জন্য অনুক্রমিক ফোকাস নেভিগেশন ব্যবহার করা কঠিন হতে পারে। মাউসের অ্যাক্সেস নেই এমন ব্যবহারকারীদের জন্য এটি খুবই হতাশাজনক হতে পারে।
<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
লক্ষ্য করুন যে একটি স্ক্রলার যাতে ফোকাসযোগ্য শিশু রয়েছে, নিম্নলিখিত HTML এর মতো, ইতিমধ্যেই অ্যাক্সেসযোগ্য, কারণ তীর কীগুলি যখন ফোকাসযোগ্য শিশুদের ফোকাস করা হয় তখন স্ক্রোল করার অনুমতি দেয়৷ এক্ষেত্রে কোনো আচরণ পরিবর্তন করা হচ্ছে না।
<button>Start</button>
<div class="scroll">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
ফোকাসযোগ্য স্ক্রোলার সহ Chrome 124 থেকে
এই বৈশিষ্ট্যটি ট্যাবিনডেক্স মান সেট ছাড়াই স্ক্রোলারকে এবং কোন ফোকাসযোগ্য শিশুদের কীবোর্ড ফোকাসযোগ্য করার অনুমতি দেয়। এটি এমন ব্যবহারকারীদের অনুমতি দেয় যারা কীবোর্ডের ট্যাব এবং তীর কীগুলি ব্যবহার করে বিষয়বস্তু ফোকাস করার জন্য মাউস ব্যবহার করতে পারে না বা বেছে নেয় না।
<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>but you can scroll through its content!</p>
</div>
<button>End</button>
মনে রাখবেন যে এই আচরণ শুধুমাত্র তখনই ঘটে যখন স্ক্রলারের কোন ফোকাসযোগ্য শিশু না থাকে। উদাহরণস্বরূপ, যদি স্ক্রলারে ইতিমধ্যেই একটি বোতাম থাকে, তাহলে ট্যাব ফোকাস স্ক্রলারটিকে এড়িয়ে যাবে এবং সরাসরি বোতামে ফোকাস করবে। এই ক্ষেত্রে, বোতামটি ফোকাস করার পরে, তীর কীগুলি ব্যবহার করে স্ক্রলার সামগ্রীটি ইতিমধ্যেই অ্যাক্সেস করা যেতে পারে। এই নিয়মের কারণে, ডিফল্টটি সর্বদা সর্বোত্তম উপায়ে আচরণ নাও করতে পারে যদি এই ধরনের শিশুরা থাকে। আপনি যদি এই পরিস্থিতিতে স্ক্রলার উপাদানটি নিজেই কীবোর্ড ফোকাসযোগ্য করতে চান, তাহলে 0 বা তার বেশি একটি ট্যাবিনডেক্স মান সেট করার পরামর্শ দেওয়া হয়।
<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
এই বৈশিষ্ট্যটি সমস্ত ক্ষেত্রে ডিফল্টরূপে স্ক্রলারকে কীবোর্ড অ্যাক্সেসযোগ্য করার অনুমতি দেয়, যা ওয়েব ব্যবহারকারীদের একটি পৃষ্ঠা জুড়ে ট্যাব নেভিগেট করার সময় একটি মসৃণ অভিজ্ঞতা পেতে সাহায্য করবে।