সঠিক শব্দার্থিক HTML উপাদানগুলি ব্যবহার করে আপনি আপনার কীবোর্ড অ্যাক্সেসের বেশিরভাগ বা সমস্ত চাহিদা পূরণ করতে সক্ষম হতে পারেন। তার মানে tabindex সাথে কম সময় কাটানো, এবং আরও খুশি ব্যবহারকারী!
বিনামূল্যের জন্য কীবোর্ড সমর্থন (এবং আরও ভাল মোবাইল অভিজ্ঞতা)
সঠিক শব্দার্থবিদ্যা এবং কীবোর্ড সমর্থন সহ বেশ কয়েকটি অন্তর্নির্মিত ইন্টারেক্টিভ উপাদান রয়েছে। সবচেয়ে বেশি বিকাশকারীরা ব্যবহার করে:
উপরন্তু, contenteditable বৈশিষ্ট্য সহ উপাদানগুলি কখনও কখনও ফ্রিফর্ম টেক্সট এন্ট্রির জন্য ব্যবহৃত হয়।
এই উপাদানগুলি অফার করে এমন অন্তর্নির্মিত কীবোর্ড সমর্থন উপেক্ষা করা সহজ। নীচে অন্বেষণ করার জন্য কিছু উদাহরণ উপাদান আছে. আপনার মাউস ব্যবহার করার পরিবর্তে, সেগুলি চালানোর জন্য আপনার কীবোর্ড ব্যবহার করার চেষ্টা করুন। আপনি নিয়ন্ত্রণগুলির মধ্যে সরানোর জন্য TAB (বা SHIFT + TAB ) ব্যবহার করতে পারেন, এবং আপনি তাদের মানগুলি পরিচালনা করতে ENTER এবং SPACE মতো তীর কী এবং কীগুলি ব্যবহার করতে পারেন৷
যদি আপনার কাছে একটি ফোন হাতে থাকে, আপনি দেখতে পাবেন যে অনেক সময় এই অন্তর্নির্মিত উপাদানগুলি মোবাইলে অনন্য মিথস্ক্রিয়া করে। এই মোবাইল ইন্টারঅ্যাকশনগুলি নিজেকে পুনরুত্পাদন করার চেষ্টা করা অনেক কাজ! যখনই সম্ভব বিল্ট-ইন উপাদানগুলিতে লেগে থাকার আরেকটি ভাল কারণ।
div এর পরিবর্তে button ব্যবহার করুন
একটি সাধারণ অ্যাক্সেসিবিলিটি অ্যান্টি-প্যাটার্ন হল একটি অ-ইন্টারেক্টিভ উপাদান, যেমন একটি div বা একটি span , এটিতে একটি ক্লিক হ্যান্ডলার যোগ করে একটি বোতাম হিসাবে ব্যবহার করা।
কিন্তু অ্যাক্সেসযোগ্য হিসাবে বিবেচনা করার জন্য, একটি বোতাম করা উচিত:
- কীবোর্ডের মাধ্যমে মনোযোগী হন
- সমর্থন নিষ্ক্রিয় করা হচ্ছে
- একটি ক্রিয়া সম্পাদন করতে
ENTERবাSPACEকীগুলিকে সমর্থন করুন৷ - একটি স্ক্রিন রিডার দ্বারা সঠিকভাবে ঘোষণা করা হবে
একটি div বোতাম এই জিনিসগুলির কোনটি নেই। এর মানে button উপাদান আপনাকে বিনামূল্যে যা দেয় তা প্রতিলিপি করতে আপনাকে অতিরিক্ত কোড লিখতে হবে!
উদাহরণস্বরূপ, button উপাদানগুলির একটি ঝরঝরে কৌশল রয়েছে যাকে বলা হয় * সিন্থেটিক ক্লিক অ্যাক্টিভেশন *। আপনি যদি একটি button একটি "ক্লিক" হ্যান্ডলার যোগ করেন, ব্যবহারকারী ENTER বা SPACE চাপলে এটি চলবে। একটি div বোতামে এই বৈশিষ্ট্যটি নেই, তাই আপনাকে keydown ইভেন্টটি শোনার জন্য অতিরিক্ত কোড লিখতে হবে, কীকোডটি ENTER বা SPACE কিনা তা পরীক্ষা করুন এবং তারপরে আপনার ক্লিক হ্যান্ডলার চালান৷ আউচ! যে অনেক অতিরিক্ত কাজ!
এই উদাহরণে পার্থক্য তুলনা করুন। হয় নিয়ন্ত্রণ করতে TAB , এবং তাদের উপর ক্লিক করার চেষ্টা করতে ENTER এবং SPACE ব্যবহার করুন।
আপনার বিদ্যমান সাইট বা অ্যাপ্লিকেশনে div বোতাম থাকলে, button উপাদানগুলির জন্য সেগুলি অদলবদল করার কথা বিবেচনা করুন। button স্টাইল করা সহজ এবং অ্যাক্সেসযোগ্যতার জয়ে পূর্ণ!
লিঙ্ক বনাম বোতাম
আরেকটি সাধারণ অ্যান্টি-প্যাটার্ন হল লিঙ্কগুলিকে জাভাস্ক্রিপ্ট আচরণ সংযুক্ত করে বোতাম হিসাবে বিবেচনা করা।
<a href="#" onclick="// perform some action">
বোতাম এবং লিঙ্ক উভয়ই সিন্থেটিক ক্লিক অ্যাক্টিভেশনের কিছু ফর্ম সমর্থন করে। তাই আপনি যা নির্বাচন করা উচিত?
- যদি উপাদানটিতে ক্লিক করা পৃষ্ঠায় একটি ক্রিয়া সম্পাদন করে,
<button>ব্যবহার করুন। - যদি উপাদানটিতে ক্লিক করা ব্যবহারকারীকে একটি নতুন পৃষ্ঠায় নেভিগেট করে তাহলে
<a>ব্যবহার করুন। এর মধ্যে একক পৃষ্ঠার ওয়েব অ্যাপ রয়েছে যা নতুন সামগ্রী লোড করে এবং ইতিহাস API ব্যবহার করে URL আপডেট করে।
এর কারণ হল যে বোতাম এবং লিঙ্কগুলি স্ক্রিন রিডারদের দ্বারা আলাদাভাবে ঘোষণা করা হয়। সঠিক উপাদান ব্যবহার করে স্ক্রিন রিডার ব্যবহারকারীদের জানতে সাহায্য করে কোন ফলাফল আশা করা যায়।
TODO: DevSite - চিন্তা করুন এবং মূল্যায়ন পরীক্ষা করুন
স্টাইলিং
কিছু অন্তর্নির্মিত উপাদান, বিশেষ করে <input> , স্টাইল করা কঠিন হতে পারে। কিছুটা চতুর CSS দিয়ে আপনি এই সীমাবদ্ধতাগুলির মধ্যে কিছু কাজ করতে সক্ষম হতে পারেন। (হাস্যকরভাবে নাম দেওয়া) WTFForms প্রকল্পে একটি উদাহরণ স্টাইলশীট রয়েছে যা কিছু কঠিন অন্তর্নির্মিত উপাদান স্টাইল করার জন্য বেশ কয়েকটি কৌশল প্রদর্শন করে।
পরবর্তী পদক্ষেপ
অন্তর্নির্মিত HTML উপাদানগুলি ব্যবহার করা আপনার সাইটের অ্যাক্সেসযোগ্যতাকে ব্যাপকভাবে উন্নত করতে পারে এবং আপনার কাজের চাপকে উল্লেখযোগ্যভাবে হ্রাস করতে পারে। আপনার সাইটে ট্যাব করার চেষ্টা করুন এবং কীবোর্ড সমর্থনের অভাব আছে এমন কোনো নিয়ন্ত্রণের সন্ধান করুন। যদি সম্ভব হয়, মানসম্মত এইচটিএমএল বিকল্পগুলির জন্য তাদের স্যুইচ আউট করুন৷
কখনও কখনও আপনি এমন একটি উপাদান খুঁজে পেতে পারেন যার এইচটিএমএল-এ কোন প্রতিরূপ নেই। ঠিক আছে! tabindex ব্যবহার করে কাস্টম ইন্টারেক্টিভ কন্ট্রোলে কীবোর্ড সমর্থন যোগ করতে শিখতে পড়ুন।