Material Design Lite (MDL) হল গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি একটি ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক। অ্যাক্সেসিবিলিটি বা প্রবেশযোগ্যতা (accessibility) নিশ্চিত করা ওয়েব ডিজাইনের একটি অত্যন্ত গুরুত্বপূর্ণ অংশ, যা সকল ব্যবহারকারী, বিশেষ করে শারীরিক অক্ষমতা বা অন্যান্য বিশেষ প্রয়োজনের মধ্যে থাকা ব্যবহারকারীদের জন্য সুবিধাজনক। MDL তে অ্যাক্সেসিবিলিটি নিশ্চিত করতে কিছু নির্দেশিকা অনুসরণ করা যায়, যাতে ওয়েবসাইট বা অ্যাপ্লিকেশন সকল ব্যবহারকারীর জন্য সুসংগত এবং সহজ হয়।
এই টিউটোরিয়ালে, আমরা Material Design Lite ব্যবহারের সময় অ্যাক্সেসিবিলিটি নিশ্চিত করার জন্য কিছু গুরুত্বপূর্ণ নির্দেশিকা আলোচনা করব।
১. Semantic HTML ব্যবহার করুন
Semantic HTML হল HTML ট্যাগগুলো যথাযথভাবে ব্যবহার করা যাতে স্ক্রীন রিডার বা অন্যান্য সহায়ক প্রযুক্তি সহজে সেগুলি সনাক্ত করতে পারে। যেমন: , , , , ইত্যাদি ট্যাগগুলো ব্যবহার করা।
উদাহরণ: Semantic HTML ব্যবহার
<button class="mdl-button mdl-js-button mdl-button--raised" aria-label="Submit Form">
Submit
</button>
এখানে:
- aria-label অ্যাট্রিবিউটটি স্ক্রীন রিডারের মাধ্যমে বাটনের উদ্দেশ্য ব্যাখ্যা করে, যাতে ভিজ্যুয়ালি অক্ষম ব্যবহারকারীরা বুঝতে পারে বাটনের কাজ।
২. অ্যাক্সেসিবল রঙ কন্ট্রাস্ট
রঙের কন্ট্রাস্ট অ্যাক্সেসিবিলিটির জন্য গুরুত্বপূর্ণ, বিশেষ করে দৃষ্টি প্রতিবন্ধী ব্যক্তিদের জন্য। MDL ব্যবহারের সময় আপনাকে নিশ্চিত করতে হবে যে, টেক্সট এবং ব্যাকগ্রাউন্ডের মধ্যে যথাযথ কন্ট্রাস্ট আছে যাতে সহজে পড়া যায়। WCAG (Web Content Accessibility Guidelines) অনুযায়ী, টেক্সট এবং ব্যাকগ্রাউন্ডের রঙের মধ্যে ৪.৫:১ কন্ট্রাস্ট রেশিও থাকা উচিত।
উদাহরণ: কাস্টম রঙ কন্ট্রাস্ট
.mdl-button {
background-color: #2196F3; /* Blue */
color: #ffffff; /* White text */
}
.mdl-button:hover {
background-color: #1976D2; /* Darker Blue */
}
এটি সঠিক কন্ট্রাস্ট নিশ্চিত করবে, যাতে সাদা রঙের টেক্সট নীল ব্যাকগ্রাউন্ডের উপর পরিষ্কারভাবে দেখা যায়।
৩. ARIA (Accessible Rich Internet Applications) ব্যবহার করুন
ARIA (Accessible Rich Internet Applications) অ্যাট্রিবিউটগুলি ব্যবহৃত হয়, বিশেষ করে যখন আপনি JavaScript বা CSS দিয়ে ডাইনামিক কন্টেন্ট তৈরি করেন। এটি স্ক্রীন রিডারের জন্য ওয়েব উপাদানগুলোর কার্যকলাপ ব্যাখ্যা করে।
উদাহরণ: ARIA ব্যবহার
<div class="mdl-tooltip" aria-label="This is a tooltip" role="tooltip">
Tooltip text
</div>
এখানে:
- aria-label ব্যবহার করে টুলটিপের উদ্দেশ্য ব্যাখ্যা করা হয়েছে।
- role="tooltip" স্ক্রীন রিডারকে জানিয়ে দেয় যে এটি একটি টুলটিপ উপাদান।
৪. ফোকাসিং এবং কীবোর্ড নেভিগেশন
এটা নিশ্চিত করা খুবই গুরুত্বপূর্ণ যে আপনার ওয়েবসাইট বা অ্যাপ্লিকেশন কেবল মাউস নয়, কীবোর্ড দিয়েও নিয়ন্ত্রণ করা যায়। কীবোর্ড ইউজারদের জন্য, ফোকাস স্টাইলিং থাকা প্রয়োজন যাতে তারা কোন উপাদানে ফোকাস করেছে তা দেখতে পারে। MDL সাধারণত ফোকাস এবং কীবোর্ড নেভিগেশনের জন্য স্বয়ংক্রিয়ভাবে কিছু স্টাইলিং প্রদান করে, তবে আপনি অতিরিক্ত কাস্টমাইজেশন করতে পারেন।
উদাহরণ: কীবোর্ড নেভিগেশন নিশ্চিত করা
<button class="mdl-button mdl-js-button mdl-button--raised" tabindex="0">
Click Me
</button>
এখানে:
- tabindex="0" নিশ্চিত করে যে বাটনটি কীবোর্ড নেভিগেশনে অন্তর্ভুক্ত থাকবে এবং ব্যবহারকারী কীবোর্ড ব্যবহার করে এতে ফোকাস করতে পারবে।
৫. চিত্র এবং মিডিয়া উপাদানের জন্য Alt টেক্সট ব্যবহার করুন
Alt টেক্সট ব্যবহারকারীকে চিত্র বা অন্যান্য মিডিয়া উপাদানগুলির উদ্দেশ্য বা কন্টেন্ট বোঝাতে সাহায্য করে। এটি দৃষ্টি প্রতিবন্ধী ব্যবহারকারীদের জন্য গুরুত্বপূর্ণ। MDL চিত্রগুলিতে alt অ্যাট্রিবিউট ব্যবহার করা নিশ্চিত করার জন্য একটি সহজ উপায় সরবরাহ করে।
উদাহরণ: চিত্রে Alt টেক্সট যোগ করা
<img src="image.jpg" alt="A picture of a beach at sunset">
এখানে:
- alt অ্যাট্রিবিউটটি চিত্রের বর্ণনা প্রদান করে, যা স্ক্রীন রিডারে পাঠ্য হিসেবে ব্যবহৃত হয়।
৬. ডাইনামিক কন্টেন্ট এবং অ্যানিমেশনের জন্য ঘোষণাসমূহ
ডাইনামিক কন্টেন্ট এবং অ্যানিমেশন যখন পরিবর্তন হয়, তখন স্ক্রীন রিডার ব্যবহারকারীদের জানানো দরকার। আপনি ARIA live regions ব্যবহার করে এটি করতে পারেন।
উদাহরণ: ARIA Live Region
<div aria-live="polite">
<p id="message">New message received!</p>
</div>
এখানে:
- aria-live="polite" ব্যবহার করা হয়েছে যাতে যখন #message এলিমেন্টের কন্টেন্ট পরিবর্তিত হয়, স্ক্রীন রিডার এটি ঘোষণা করে।
৭. অ্যাক্সেসিবল টেবিল তৈরি
টেবিল তৈরি করার সময়, আপনাকে header এবং row এর জন্য সঠিক HTML ট্যাগ ব্যবহার করতে হবে এবং স্ক্রীন রিডারের জন্য ARIA অ্যাট্রিবিউট ব্যবহার করতে হবে। এটি টেবিলের কন্টেন্ট সহজে পড়তে সাহায্য করবে।
উদাহরণ: অ্যাক্সেসিবল টেবিল
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
</tr>
</tbody>
</table>
এখানে:
- scope="col" টেবিলের কলামের শিরোনাম স্পষ্টভাবে সংজ্ঞায়িত করে, যাতে স্ক্রীন রিডার ব্যবহারকারীরা সহজেই সেগুলি বুঝতে পারে।
৮. ডায়ালগ এবং মডাল উইন্ডো অ্যাক্সেসিবল করা
Dialog এবং Modal উইন্ডো তৈরির সময়, স্ক্রীন রিডার এবং কীবোর্ড ব্যবহারকারীদের জন্য এটি অ্যাক্সেসিবল হতে হবে। MDL মডাল উইন্ডো তৈরি করার সময়, aria-labelledby এবং aria-hidden অ্যাট্রিবিউট ব্যবহার করা যেতে পারে।
উদাহরণ: অ্যাক্সেসিবল Modal
<div class="mdl-dialog" role="dialog" aria-labelledby="dialogTitle" aria-hidden="true">
<h4 id="dialogTitle">Modal Title</h4>
<p>Modal content goes here.</p>
</div>
এখানে:
- aria-labelledby ব্যবহার করে মডাল উইন্ডোর শিরোনাম স্ক্রীন রিডারের জন্য স্পষ্ট করা হয়েছে।
- aria-hidden="true" ব্যবহার করা হয়েছে মডাল উইন্ডোটি লুকানোর জন্য, যতক্ষণ না এটি সক্রিয় হয়।
সারাংশ
Material Design Lite (MDL) একটি আধুনিক এবং সুন্দর ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা ডিজাইন সিম্প্লিসিটি এবং অ্যাক্সেসিবিলিটির ক্ষেত্রে খুবই কার্যকর। অ্যাক্সেসিবিলিটি নিশ্চিত করার জন্য সঠিক HTML, CSS এবং ARIA ট্যাগ ব্যবহার করা, স্ক্রীন রিডার এবং কীবোর্ড নেভিগেশনকে সমর্থন করা অত্যন্ত গুরুত্বপূর্ণ। MDL এর কম্পোনেন্টগুলির মধ্যে tooltips, snackbars, এবং modals সঠিকভাবে কাস্টমাইজ এবং অ্যাক্সেসিবল করার মাধ্যমে আপনার ওয়েবসাইট বা অ্যাপ্লিকেশন সকল ব্যবহারকারীর জন্য আরও সহায়ক হবে।
Read more
