.sr-onlyবিশেষত স্ক্রিন পাঠকদের জন্য ব্যবহৃত একটি শ্রেণীর নাম। আপনি যে কোনও শ্রেণীর নাম ব্যবহার করতে পারেন তবে .sr-onlyএটি বেশ সাধারণভাবে ব্যবহৃত হয়। আপনি যদি মনে মনে সম্মতি নিয়ে বিকাশের বিষয়ে চিন্তা না করেন তবে তা মুছে ফেলা যায়। অপসারণ করা থাকলে এটি কোনওভাবেই ইউআইকে প্রভাবিত করবে না কারণ এই শ্রেণীর জন্য সিএসএস ডেস্কটপ এবং মোবাইল ডিভাইস ব্রাউজারগুলিতে দৃশ্যমান নয়।
.sr-onlyএর উদ্দেশ্য ব্যাখ্যা করতে এবং স্ক্রিন পাঠকদের পক্ষে থাকার বিষয়ে এখানে কিছু তথ্য অনুপস্থিত বলে মনে হচ্ছে। প্রথম এবং সর্বাগ্রে, প্রতিবন্ধী ব্যবহারকারীদের সর্বদা মাথায় রাখা খুব গুরুত্বপূর্ণ। প্রতিবন্ধকতা হ'ল 508 টির সম্মতির উদ্দেশ্য: https://www.section508.gov/ , এবং এটি দুর্দান্ত যে বুটস্ট্র্যাপ এটিকে বিবেচনায় নিয়েছে। যাইহোক, .sr-only508 সম্মতি জন্য বিবেচনা করা প্রয়োজন যে সমস্ত ব্যবহার হয় না। আপনার রঙ, ফন্টের আকার, নেভিগেশনের মাধ্যমে অ্যাক্সেসযোগ্যতা, বর্ণনাকারী, আরিয়ার ব্যবহার এবং আরও অনেক কিছু রয়েছে।
তবে হিসাবে হিসাবে .sr-only- সিএসএস আসলে কি করে? সিএসএসের জন্য বেশ কয়েকটি ভিন্ন ভিন্ন রূপ রয়েছে .sr-only। আমি যে কয়েকটি ব্যবহার করি তার মধ্যে একটি নীচে:
.sr-only {
position: absolute;
margin: -1px 0 0 -1px;
padding: 0;
display: block;
width: 1px;
height: 1px;
font-size: 1px;
line-height: 1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
outline: 0;
}
উপরের সিএসএস এই শ্রেণীর সাথে মোড়ানো ডেস্কটপ এবং মোবাইল ব্রাউজারগুলিতে সামগ্রী লুকিয়ে রাখে তবে জেএডাব্লুএস: http://www.freedomsciographic.com/Products/Blindness/JAWS এর মতো স্ক্রিন পাঠক দ্বারা দেখা যায় । উদাহরণস্বরূপ মার্কআপটি নিম্নরূপ:
<a href="#" target="_blank">
Click to Open Site
<span class="sr-only">This is an external link</span>
</a>
অতিরিক্তভাবে, যদি কোনও ডিওএম উপাদানটির প্রস্থ এবং উচ্চতা 0 থাকে তবে ডিওএম দ্বারা উপাদানটি দেখা যায় না। এই কারণেই উপরের সিএসএস ব্যবহার করে width: 1px; height: 1px;। ব্যবহারের display: noneএবং তাই আপনি আপনার সিএসএস সেটিং height: 0এবং width: 0উপাদান করে DOM দ্বারা দেখা যায় না এবং এইভাবে সমস্যাযুক্ত হয়। উপরের সিএসএস ব্যবহার width: 1px; height: 1px;করে সামগ্রীটি ডেস্কটপ এবং মোবাইল ব্রাউজারগুলিতে অদৃশ্য করে তুলতে আপনি যা করেন তা নয় ( overflow: hiddenআপনার সামগ্রীগুলি এখনও স্ক্রিনে প্রদর্শিত হবে) এবং স্ক্রিন পাঠকদের কাছে দৃশ্যমান। ডেস্কটপ ও মোবাইল ব্রাউজারে থেকে বিষয়বস্তু লুকানোর সময় একটি অফসেট যোগ করে সম্পন্ন করা হয় width: 1pxএবং height: 1pxপূর্বে ব্যবহার করে উল্লেখ করেছে:
position: absolute;
margin: -1px 0 0 -1px;
overflow: hidden;
শেষ অবধি, কোনও পর্দা পাঠক তার প্রতিবন্ধী ব্যবহারকারীকে কী দেখায় এবং কীভাবে সম্পর্কিত তা সম্পর্কে খুব ভাল ধারণা পেতে আপনার ব্রাউজারের জন্য পৃষ্ঠা স্টাইলিং বন্ধ করুন। ফায়ারফক্সের জন্য, আপনি এখানে গিয়ে এটি করতে পারেন:
View > Page Style > No Style
আমি আশা করি যে আমি এখানে সরবরাহিত তথ্যগুলি অন্যান্য প্রতিক্রিয়াগুলি ছাড়াও কারও কাছে আরও ব্যবহৃত হয়।