কীবোর্ড ফোকাস

অনেকেই নেভিগেশনের প্রধান মাধ্যম হিসেবে কিবোর্ড—অথবা কিবোর্ডের কার্যকারিতা অনুকরণকারী সফটওয়্যার বা হার্ডওয়্যার, যেমন একটি সুইচ ডিভাইস—ব্যবহার করেন। এর কারণ হতে পারে ব্যক্তিগত পছন্দ, কার্যকারিতা, বা হার্ডওয়্যার নষ্ট হয়ে যাওয়া।

যাদের সাময়িক শারীরিক সীমাবদ্ধতা রয়েছে, যেমন কব্জি মচকানো বা কার্পাল টানেলের মতো সূক্ষ্ম সঞ্চালন অক্ষমতা, তারা নেভিগেট করার জন্য কিবোর্ড ব্যবহার করতে পারেন। স্বল্প-দৃষ্টিসম্পন্ন বা অন্ধ ব্যবহারকারীরা তাদের ম্যাগনিফিকেশন বা স্ক্রিন রিডার সফটওয়্যারের সাথে মিলিয়ে নেভিগেট করার জন্য কিবোর্ড ব্যবহার করতে পারেন। তবে, একজন দৃষ্টিসম্পন্ন ব্যবহারকারীর চেয়ে স্ক্রিনে নেভিগেট করার জন্য তারা ভিন্ন কিবোর্ড শর্টকাট কমান্ড ব্যবহার করতে পারেন।

প্রতিবন্ধী নন এমন কিছু ব্যক্তিও কিবোর্ড ব্যবহার করে নেভিগেট করতে পারেন।

এই সমস্ত অক্ষমতা ও পরিস্থিতির জন্য কিবোর্ড সাপোর্ট অত্যন্ত গুরুত্বপূর্ণ। কিবোর্ড অ্যাক্সেসিবিলিটির একটি বড় অংশ ফোকাসকে কেন্দ্র করে গড়ে ওঠে। ফোকাস বলতে স্ক্রিনের সেই উপাদানটিকে বোঝায়, যা কিবোর্ড থেকে সক্রিয়ভাবে ইনপুট গ্রহণ করছে।

এই মডিউলে আমরা এইচটিএমএল (HTML) কাঠামো এবং কিবোর্ড ও ফোকাসযোগ্য এলিমেন্টগুলোর জন্য সিএসএস (CSS) স্টাইলিং-এর উপর মনোযোগ দেব। জাভাস্ক্রিপ্ট মডিউলে ইন্টারেক্টিভ এলিমেন্টগুলোর ফোকাস ম্যানেজমেন্ট এবং কীস্ট্রোক সম্পর্কে আরও তথ্য রয়েছে।

ফোকাস ক্রম

যেসব এলিমেন্টে কিবোর্ড ব্যবহারকারী নেভিগেট করতে পারেন, সেগুলোকে ফোকাসযোগ্য এলিমেন্ট বলা হয়। ফোকাস অর্ডার , যা ট্যাব বা নেভিগেশন অর্ডার নামেও পরিচিত, হলো সেই ক্রম যেখানে এলিমেন্টগুলো ফোকাস পায়। ডিফল্ট ফোকাস অর্ডার অবশ্যই যৌক্তিক, স্বজ্ঞাত এবং একটি পৃষ্ঠার ভিজ্যুয়াল অর্ডারের সাথে সামঞ্জস্যপূর্ণ হতে হবে।

বেশিরভাগ ভাষার ক্ষেত্রে, মনোযোগের ক্রম পৃষ্ঠার উপর থেকে শুরু হয়ে নীচে শেষ হয় এবং বাম থেকে ডানে অগ্রসর হয়। তবে, কিছু ভাষা ডান থেকে বামে পড়া হয়, তাই পৃষ্ঠার প্রধান ভাষার জন্য একটি ভিন্ন মনোযোগের ক্রমের প্রয়োজন হতে পারে।

ডিফল্টরূপে, ফোকাস অর্ডারে স্বাভাবিকভাবে ফোকাসযোগ্য এইচটিএমএল এলিমেন্টগুলো অন্তর্ভুক্ত থাকে, যেমন লিঙ্ক, চেকবক্স এবং টেক্সট ইনপুট। স্বাভাবিকভাবে ফোকাসযোগ্য এইচটিএমএল এলিমেন্টগুলোতে বিল্ট-ইন ট্যাব অর্ডার সাপোর্ট এবং বেসিক কীবোর্ড ইভেন্ট হ্যান্ডলিং অন্তর্ভুক্ত থাকে।

আপনি ফোকাস অর্ডার আপডেট করে এমন যেকোনো এলিমেন্টকে অন্তর্ভুক্ত করতে পারেন যেগুলো সাধারণত ফোকাস পায় না, যেমন—নন-ইন্টারেক্টিভ HTML এলিমেন্ট, কাস্টম কম্পোনেন্ট, বা ARIA যুক্ত এলিমেন্ট, এবং এর মাধ্যমে স্বাভাবিক ফোকাসের অর্থকে অগ্রাহ্য করতে পারেন।

ট্যাবইনডেক্স

ফোকাস অর্ডার শুরু হয় সেইসব এলিমেন্ট থেকে যাদের একটি ধনাত্মক tabindex অ্যাট্রিবিউট আছে (যদি থাকে) এবং এটি ক্ষুদ্রতম ধনাত্মক সংখ্যা থেকে বৃহত্তম সংখ্যার দিকে অগ্রসর হয় (যেমন ১, ২, ৩)। এরপর এটি DOM-এ তাদের ক্রম অনুসারে শূন্য tabindex যুক্ত এলিমেন্টগুলোর মধ্য দিয়ে অগ্রসর হয়। ঋণাত্মক tabindex যুক্ত যেকোনো এলিমেন্টকে স্বাভাবিক ফোকাস অর্ডার থেকে বাদ দেওয়া হয়।

যখন সাধারণত ফোকাস-অযোগ্য এলিমেন্টগুলিতে ট্যাবইনডেক্স শূন্য ( tabindex="0" ) প্রয়োগ করা হয়, তখন সেগুলি DOM-এ যেভাবে প্রদর্শিত হয় সেই অনুযায়ী পেজের স্বাভাবিক ফোকাস ক্রমে যুক্ত হয়। তবে, স্বাভাবিকভাবে ফোকাসযোগ্য HTML এলিমেন্টগুলির মতো নয়, এগুলিকে সম্পূর্ণরূপে অ্যাক্সেসযোগ্য করার জন্য আপনাকে অতিরিক্ত কীবোর্ড সাপোর্ট প্রদান করতে হবে।

একইভাবে, যদি আপনার এমন কোনো এলিমেন্ট থাকে যা সাধারণত ফোকাসযোগ্য কিন্তু নিষ্ক্রিয়—যেমন একটি বাটন যা ইনপুট ফিল্ড পূরণ না করা পর্যন্ত অকার্যকর থাকে—তাহলে আপনার এই এলিমেন্টটিতে একটি নেগেটিভ ট্যাবইনডেক্স ( tabindex="-1" ) যোগ করা উচিত। একটি নেগেটিভ ট্যাবইনডেক্স যোগ করা হলে তা সহায়ক প্রযুক্তি এবং কীবোর্ডকে সংকেত দেয় যে এই বাটনটিকে স্বাভাবিক ফোকাস ক্রম থেকে সরিয়ে দেওয়া উচিত। কিন্তু চিন্তা করবেন না—প্রয়োজনে আপনি জাভাস্ক্রিপ্ট ব্যবহার করে এলিমেন্টটিতে ফোকাস ফিরিয়ে আনতে পারবেন।

এই উদাহরণে, এমন এলিমেন্টগুলোতে tabindex অ্যাট্রিবিউট যোগ করা হয়েছে যেগুলো স্বাভাবিকভাবে ফোকাস পায় না। ফোকাস অর্ডারের উপর এর ক্ষমতা দেখানোর জন্য tabindex ব্যবহার করে এলিমেন্টগুলোর ক্রম পরিবর্তন করা হয়েছে। এটি এমন একটি উদাহরণ যা করা উচিত নয়!

লিঙ্কগুলি এড়িয়ে যান

আজকাল বেশিরভাগ ওয়েবসাইটের মূল হেডারে মেনু লিঙ্কের একটি লম্বা তালিকা থাকে, যা প্রতিটি পেজে একই রকম থাকে। সাধারণ নেভিগেশনের জন্য এটি চমৎকার হলেও, শুধুমাত্র কিবোর্ড ব্যবহারকারীদের জন্য একাধিকবার ট্যাব না চেপে ওয়েবসাইটের মূল কন্টেন্টে সহজে পৌঁছানো কঠিন হয়ে পড়ে।

অপ্রয়োজনীয় বা অতিরিক্ত লিঙ্কের সমষ্টি এড়িয়ে যাওয়ার একটি উপায় হলো স্কিপ লিঙ্ক যোগ করা। স্কিপ লিঙ্ক হলো অ্যাঙ্কর লিঙ্ক, যা ব্যবহারকারীকে ওয়েবসাইটের অন্য কোনো পৃষ্ঠা বা বাহ্যিক রিসোর্সে না পাঠিয়ে, সেই বিভাগের আইডি ব্যবহার করে সরাসরি একই পৃষ্ঠার একটি ভিন্ন অংশে নিয়ে যায়। সাধারণত, কোনো ওয়েবসাইটে প্রবেশ করার পর ব্যবহারকারীর সামনে আসা প্রথম ফোকাসযোগ্য উপাদান হিসেবে স্কিপ লিঙ্ক যোগ করা হয় এবং ডিজাইনের প্রয়োজন অনুযায়ী, ব্যবহারকারী ট্যাব ব্যবহার করে সেখানে না যাওয়া পর্যন্ত এটি দৃশ্যমান বা দৃশ্যত অদৃশ্য থাকতে পারে।

যখন কোনো ব্যবহারকারী ট্যাব কী চাপেন এবং সেখানে একটি সক্রিয় স্কিপ লিঙ্ক থাকে, তখন কিবোর্ড ফোকাসটি স্কিপ লিঙ্কে চলে যায়। ব্যবহারকারী স্কিপ লিঙ্কে ক্লিক করে হেডার সেকশন এবং মূল নেভিগেশন এড়িয়ে যেতে পারেন। যদি তারা স্কিপ লিঙ্কে ক্লিক না করে DOM-এ ট্যাব চেপে নিচে নামতে থাকেন, তবে তাদের পরবর্তী ফোকাসযোগ্য এলিমেন্টে পাঠিয়ে দেওয়া হবে।

অন্যান্য সব লিঙ্কের মতোই, স্কিপ লিঙ্কেও এর উদ্দেশ্য সম্পর্কে প্রাসঙ্গিক তথ্য থাকা জরুরি। "Skip to main content" (মূল কন্টেন্টে যান) এই বাক্যটি যোগ করলে ব্যবহারকারী জানতে পারেন যে লিঙ্কটি তাকে কোথায় নিয়ে যাচ্ছে। আপনার লিঙ্কগুলিতে অতিরিক্ত প্রাসঙ্গিক তথ্য দেওয়ার জন্য অনেকগুলো কোড অপশন রয়েছে, যেমন aria-labelledby , aria-label , অথবা উদাহরণে দেখানো অনুযায়ী <a> এলিমেন্টের টেক্সট কন্টেন্টে এটি যোগ করা।

ফোকাস সূচক

আপনি এইমাত্র যেমনটা শিখলেন, কিবোর্ড অ্যাক্সেসিবিলিটির ক্ষেত্রে ফোকাস অর্ডার একটি গুরুত্বপূর্ণ দিক। সেই ফোকাসটি কীভাবে স্টাইল করা হবে, তা নির্ধারণ করাও জরুরি। কারণ, ফোকাস অর্ডার চমৎকার হলেও, সঠিক স্টাইলিং ছাড়া একজন ব্যবহারকারী কীভাবে জানবেন যে তিনি পেজটির কোথায় আছেন?

ব্যবহারকারীদের পৃষ্ঠার কোথায় তারা সর্বদা আছেন, তা জানানোর জন্য একটি দৃশ্যমান ফোকাস ইন্ডিকেটর অত্যন্ত গুরুত্বপূর্ণ। এটি বিশেষ করে আপনার দৃষ্টিসম্পন্ন এবং শুধুমাত্র কিবোর্ড ব্যবহারকারী ব্যবহারকারীদের জন্য জরুরি। ‘ফোকাস নট অবস্কিউরড (মিনিমাম)’ নিশ্চিত করে যে ফোকাস ইন্ডিকেটরটি অন্য কোনো উপাদানের নিচে চাপা পড়বে না।

ব্রাউজারের ডিফল্ট স্টাইলিং

আজকাল প্রতিটি আধুনিক ওয়েব ব্রাউজারের নিজস্ব ডিফল্ট ভিজ্যুয়াল স্টাইলিং থাকে, যা আপনার ওয়েবসাইট বা অ্যাপের ফোকাসযোগ্য এলিমেন্টগুলোতে প্রয়োগ করা হয়; এর মধ্যে কিছু অন্যগুলোর চেয়ে বেশি দৃশ্যমান। ব্যবহারকারী যখন ট্যাব ব্যবহার করে পৃষ্ঠাটি স্ক্রল করেন, তখন এলিমেন্টটি কিবোর্ড ফোকাস পেলে এই স্টাইলিংটি প্রয়োগ করা হয়।

আপনি যদি ব্রাউজারকে ফোকাস স্টাইলিং পরিচালনা করার অনুমতি দেন, তবে আপনার কোড পর্যালোচনা করে নিশ্চিত করা জরুরি যে আপনার থিম ব্রাউজারের ডিফল্ট স্টাইলিংকে ওভাররাইড করবে না। একটি ওভাররাইড প্রায়শই আপনার স্টাইল শীটে "outline: 0" বা "outline: none" হিসাবে লেখা হয়। কোডের এই ছোট্ট অংশটি ব্রাউজারের ডিফল্ট ফোকাস ইন্ডিকেটর স্টাইলিং সরিয়ে দিতে পারে, যা ব্যবহারকারীদের জন্য আপনার ওয়েবসাইট বা অ্যাপে নেভিগেট করা খুব কঠিন করে তোলে।

সুপারিশ করা হয় না — কোনো রূপরেখা নেই

a:focus {
  outline: none; /* don't do this! */
}

প্রস্তাবিত — শৈলীযুক্ত রূপরেখা

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

কাস্টম শৈলী

অবশ্যই, আপনি ডিফল্ট ব্রাউজার স্টাইলের বাইরে গিয়ে আপনার থিমের সাথে মানানসই একটি কাস্টম ফোকাস ইন্ডিকেটর তৈরি করতে পারেন। কাস্টম ফোকাস ইন্ডিকেটর তৈরি করার সময়, সৃজনশীল হওয়ার জন্য আপনার কাছে অনেক স্বাধীনতা থাকে!

ফোকাস নির্দেশকের আকৃতি বিভিন্ন রূপ নিতে পারে; যেমন একটি আউটলাইন, বর্ডার, আন্ডারলাইন, বক্স, ব্যাকগ্রাউন্ড পরিবর্তন, বা অন্য কোনো সুস্পষ্ট শৈলীগত পরিবর্তন, যা কিবোর্ডের ফোকাস ওই এলিমেন্টটির ওপর সক্রিয় আছে তা বোঝাতে শুধু রঙের ওপর নির্ভর করে না।

ফোকাস ইন্ডিকেটরটি যাতে দেখা যায়, তা নিশ্চিত করতে আপনি এর স্টাইল পরিবর্তন করতে পারেন। উদাহরণস্বরূপ, যখন কোনো পৃষ্ঠার ব্যাকগ্রাউন্ড সাদা হয়, তখন আপনি বাটনের ফোকাস ইন্ডিকেটরটির ব্যাকগ্রাউন্ড নীল করে দিতে পারেন। আবার যখন পৃষ্ঠাটির ব্যাকগ্রাউন্ড নীল হবে, তখন আপনি সেই একই বাটনের ফোকাস স্টাইলটির ব্যাকগ্রাউন্ড সাদা করে দিতে পারেন।

আপনি এলিমেন্টের ধরনের ওপর ভিত্তি করে ফোকাস এলিমেন্টের স্টাইল পরিবর্তন করতে পারেন। উদাহরণস্বরূপ, আপনি বডি লিঙ্কের জন্য ডটেড আন্ডারলাইন ব্যবহার করতে পারেন, কিন্তু বাটন এলিমেন্টের জন্য গোলাকার বর্ডার বেছে নিতে পারেন।

একটি পৃষ্ঠায় কতগুলো ফোকাস ইন্ডিকেটর স্টাইল থাকবে, সে বিষয়ে কোনো নির্দিষ্ট নিয়ম নেই—তবে অপ্রয়োজনীয় বিভ্রান্তি এড়াতে এর সংখ্যাটি যুক্তিসঙ্গত রাখার ব্যাপারে নিশ্চিত হন।