'অনুক্রমিক ফোকাস নেভিগেশন প্রারম্ভিক বিন্দু' বৈশিষ্ট্যটি সংজ্ঞায়িত করে যেখানে আমরা কোন ফোকাস এলাকা না থাকলে অনুক্রমিক ফোকাস নেভিগেশন ([Tab] বা [Shift-Tab]) এর জন্য ফোকাসযোগ্য উপাদানগুলি অনুসন্ধান করতে শুরু করি। এটি "লিঙ্কগুলি এড়িয়ে যান" এবং নথিতে ফোকাস পরিচালনার মতো অ্যাক্সেসিবিলিটি বৈশিষ্ট্যগুলির জন্য বিশেষভাবে সহায়ক৷
এইচটিএমএল আমাদেরকে কীবোর্ড মিথস্ক্রিয়া মোকাবেলা করার জন্য অনেক বিল্ট-ইন সমর্থন প্রদান করে, যার অর্থ কীবোর্ডের মাধ্যমে ব্যবহার করা যেতে পারে এমন পৃষ্ঠাগুলি লেখার জন্য বেশ সহজ - একটি মোটর দুর্বলতা আমাদের মাউস ব্যবহার করতে বাধা দেয় বা আমরা এত দক্ষ কীবোর্ড থেকে আমাদের হাত সরিয়ে ফেলা মূল্যবান মিলিসেকেন্ড নষ্ট করে।
কীবোর্ড হ্যান্ডলিং ফোকাসের চারপাশে ঘোরে, যা পৃষ্ঠায় কীবোর্ড ইভেন্টগুলি কোথায় যাবে তা নির্ধারণ করে। এমন কয়েকটি পরিস্থিতি রয়েছে যেখানে এখন পর্যন্ত, কীবোর্ড ব্যবহারকারীদের জন্য জিনিসগুলি ভালভাবে কাজ করার জন্য আমাদের কিছু অতিরিক্ত কাজ করতে হবে। focus() পদ্ধতিটি আমাদের ব্যবহারকারীর কর্মের প্রতিক্রিয়ায় ফোকাস করার জন্য একটি উপাদান বেছে বেছে ফোকাস পরিচালনা করতে দেয়। যাইহোক, এই সর্বোত্তম অভ্যাসটি অনেক গোছাতে ভুগছে এবং একটি বেসলাইন অভিজ্ঞতা প্রদানের জন্য কিছু কৌশলী জাভাস্ক্রিপ্ট হ্যাকারির প্রয়োজন।
যদিও এই কৌশলটি শীঘ্রই যে কোনও সময় পুরোপুরি চলে যাবে না, Chrome 50-এ এটি কম ক্ষেত্রে প্রয়োজন হবে অনুক্রমিক ফোকাস নেভিগেশন স্টার্ট পয়েন্টের জন্য ধন্যবাদ। এই পরিবর্তনের সাথে, সু-লেখিত পৃষ্ঠাগুলি অতিরিক্ত ম্যানুয়াল ফোকাস পরিচালনার প্রয়োজন ছাড়াই স্বয়ংক্রিয়ভাবে আরও অ্যাক্সেসযোগ্য হয়ে উঠবে। এর একটি উদাহরণ তাকান.
একটি পৃষ্ঠার মধ্যে লিঙ্ক
টেক্সট ভারী সাইটগুলি প্রায়ই একই পৃষ্ঠার মধ্যে আন্তঃলিঙ্ক করে যাতে ব্যবহারকারীদের দ্রুত গুরুত্বপূর্ণ বিভাগে যেতে সাহায্য করে।
<!-- Table of Contents -->
<a href="#recipes">Recipes</a>
<a href="#ingredients">Ingredients</a>
<!-- Recipes Section -->
<h2 id="recipes">Recipes</h1>
<h3>Vegemite Cheesecake</h3>
<p>
Vegemite cheesecake is delicious. We promise.
<a href="cheesecake.html">Read More</a>
</p>
আমি যদি একজন কীবোর্ড ব্যবহারকারী হতাম (এবং অস্ট্রেলিয়ান খাবারের জন্য পেটুক) আমার পরবর্তী সিরিজের ক্রিয়াকলাপ এরকম কিছু হবে:
- রেসিপি লিঙ্ক ফোকাস করতে দুইবার
Tabটিপুন - রেসিপি বিভাগে যেতে
Enterটিপুন - আরও পড়ুন লিঙ্কে ফোকাস করতে আবার
Tabটিপুন
চলুন Chrome 49 ব্যবহার করে এটি কর্মে দেখা যাক।
উহু. আচ্ছা যা পরিকল্পনা অনুযায়ী ঠিক হয়নি?
আরও পড়ুন লিঙ্কে ফোকাস করার পরিবর্তে, চূড়ান্ত সময়ের জন্য Tab টিপলে বিষয়বস্তুর সারণীতে পরবর্তী আইটেমে ফোকাস চলে যায়। এর কারণ হল ডেভেলপার এটিকে ফোকাসযোগ্য করার জন্য হেডারে tabindex="-1" সেট করেনি। তাই অ্যাঙ্কর নামের #recipes ক্লিক করলে ফোকাস সরেনি। এটি একটি সূক্ষ্ম ভুল, এবং আপনি যদি একজন মাউস ব্যবহারকারী হন তবে এটি একটি বড় ব্যাপার নয়। আপনি যদি একজন কীবোর্ড বা সুইচ ডিভাইস ব্যবহারকারী হন তবে এটি সম্ভবত একটি খুব বড় চুক্তি। একটি সাধারণ উইকিপিডিয়া পৃষ্ঠায় আন্তঃলিঙ্কিংয়ের পরিমাণ বিবেচনা করুন? এই সমস্ত অ্যাঙ্করগুলির মাধ্যমে ক্রমাগত সামনে পিছনে ট্যাব করা হতাশাজনক হবে!
আসুন এখন Chrome 50 ব্যবহার করে একই অভিজ্ঞতা দেখি।
বাহ ঠিক এটাই আমরা চেয়েছিলাম, এবং সবচেয়ে ভালো, আমাদের কোড পরিবর্তন করতে হবে না। আমরা নথিতে কোথায় ছিলাম তার উপর ভিত্তি করে ব্রাউজারটি ঠিক কোথায় ফোকাস করা উচিত তা বের করেছে।
এটা কিভাবে কাজ করে?
ফোকাস প্রারম্ভিক বিন্দু বাস্তবায়নের আগে, ফোকাস সর্বদা পূর্ববর্তী ফোকাস করা উপাদান বা পৃষ্ঠার শীর্ষ থেকে সরানো হবে। এর মানে হল যে পরবর্তীতে কী ফোকাস করা যায় তা বেছে নেওয়ার মধ্যে এমন কিছুতে ফোকাস সরানো অন্তর্ভুক্ত থাকতে পারে যা সত্যিই ফোকাসযোগ্য নয়, যেমন একটি ধারক উপাদান বা শিরোনাম। এটি সমস্ত ধরণের অদ্ভুততা সৃষ্টি করে, যার মধ্যে ফোকাস রিং দেখানো সহ আপনি যদি অলসভাবে এই জাতীয় উপাদানে ক্লিক করেন।
ফোকাস স্টার্ট পয়েন্ট, নাম অনুসারে, আমরা যখন Tab বা Shift-Tab টিপুন তখন পরবর্তী ফোকাসযোগ্য উপাদানটি কোথায় খুঁজতে শুরু করবেন তা পরামর্শ দেওয়ার জন্য একটি প্রক্রিয়া প্রদান করে।
এটি বিভিন্ন উপায়ে সেট করা যেতে পারে: যদি কিছুতে ফোকাস থাকে, তবে এটি আগের মতোই ফোকাস নেভিগেশন স্টার্ট পয়েন্টও। এছাড়াও, ঠিক আগের মতই, যদি অন্য কিছুই ফোকাস নেভিগেশন স্টার্ট পয়েন্ট সেট না করে থাকে, তাহলে এটি হবে বর্তমান document বা, যদি উপলব্ধ এবং সমর্থিত, বর্তমানে সক্রিয় dialog । যদি আমরা উপরের উদাহরণের মতো একটি পৃষ্ঠা খণ্ডে নেভিগেট করি, তাহলে এটি এখন ফোকাস স্টার্ট পয়েন্ট সেট করবে। এছাড়াও, আমরা যদি পৃষ্ঠার কোনো উপাদানে ক্লিক করি, তা ফোকাসযোগ্য কিনা তা বিবেচনা না করে, এটি এখন ফোকাস নেভিগেশন স্টার্ট পয়েন্ট সেট করবে। অবশেষে, যে উপাদানটি ফোকাস স্টার্ট পয়েন্ট ছিল তা যদি DOM থেকে সরানো হয়, তাহলে এর প্যারেন্ট ফোকাস স্টার্ট পয়েন্ট হয়ে যায়। আর বেশি ফোকাস নেই হ্যাক-এ-মোল!
অন্যান্য ব্যবহারের ক্ষেত্রে
উপরের উদাহরণ বাদ দিয়ে, আরও অনেক পরিস্থিতি রয়েছে যেখানে এই বৈশিষ্ট্যটি কাজে আসতে পারে।
লুকানো উপাদান
এমন সময় হতে পারে যখন একজন ব্যবহারকারী এমন একটি আইটেমের উপর দৃষ্টি নিবদ্ধ করবে যা visibility: hidden বা display: none । এর একটি উদাহরণ একটি ক্যারোজেলের মধ্যে ক্লিকযোগ্য আইটেম হবে। ক্রোমের পূর্ববর্তী সংস্করণগুলিতে, বর্তমানে ফোকাস করা আইটেমটিকে এইভাবে লুকিয়ে রাখলে ফোকাসকে ডিফল্ট প্রারম্ভিক বিন্দুতে পুনরায় সেট করা হবে, মোটর প্রতিবন্ধী ব্যবহারকারীদের জন্য উপরে উল্লিখিত ক্যারোজেলটিকে একটি বাজে ফাঁদে পরিণত করবে। অনুক্রমিক ফোকাস প্রারম্ভিক বিন্দু সহ, এটি আর হয় না। উপরের যেকোনো একটি পদ্ধতির মাধ্যমে যদি কোনো উপাদান লুকানো থাকে, তাহলে Tab কী টিপে শুধুমাত্র পরবর্তী ফোকাসযোগ্য আইটেমে চলে যাবে।
লিঙ্কগুলি এড়িয়ে যান
স্কিপ লিঙ্কগুলি অদৃশ্য অ্যাঙ্কর যা শুধুমাত্র কীবোর্ডের মাধ্যমে পৌঁছানো যায়। তারা ব্যবহারকারীদের একটি পৃষ্ঠার বিষয়বস্তুতে সরাসরি ঝাঁপ দেওয়ার জন্য নেভিগেশন উপাদানগুলিকে "এড়িয়ে যাওয়ার" অনুমতি দেয় এবং তারা কীবোর্ড এবং ডিভাইস ব্যবহারকারীদের জন্য অত্যন্ত উপকারী হতে পারে৷ WebAIM সাইটে ব্যাখ্যা করা হয়েছে
অনেক জনপ্রিয় ওয়েবসাইট স্কিপ লিঙ্কগুলি প্রয়োগ করে, যদিও আপনি সেগুলি লক্ষ্য করেননি।
যেহেতু স্কিপ লিঙ্কগুলিকে অ্যাঙ্কর নাম দেওয়া হয়েছে, সেগুলি আমাদের মূল বিষয়বস্তুর উদাহরণের মতো একই ফ্যাশনে কাজ করে৷
সতর্কতা এবং সমর্থন
অনুক্রমিক ফোকাস নেভিগেশন স্টার্টিং পয়েন্ট বর্তমানে শুধুমাত্র Chrome 50, Firefox এবং Opera-এ সমর্থিত। এটি সমস্ত ব্রাউজারে সমর্থিত না হওয়া পর্যন্ত আপনাকে আপনার নামযুক্ত অ্যাঙ্কর লক্ষ্যগুলিতে tabindex="-1" (এবং ফোকাস আউটলাইন সরিয়ে) যোগ করতে হবে।
ডেমো
অনুক্রমিক ফোকাস নেভিগেশন প্রারম্ভিক বিন্দু ব্রাউজারের অ্যাক্সেসিবিলিটি আদিম সেটের একটি দুর্দান্ত সংযোজন। এটি গ্রোক করা সহজ এবং প্রকৃতপক্ষে আমাদের ব্যবহারকারীদের অভিজ্ঞতা উন্নত করার সময় আমাদের অ্যাপ্লিকেশন থেকে কোড সরাতে দেয়। ডাবল জয়! এই বৈশিষ্ট্যটি আরও গভীরভাবে অন্বেষণ করতে ডেমোটি দেখুন।