Material Design Lite (MDL) একটি হালকা এবং সহজে কাস্টমাইজযোগ্য ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা গুগলের Material Design নীতির ওপর ভিত্তি করে তৈরি। এটি ওয়েবসাইট ডিজাইন এবং ডেভেলপমেন্টের জন্য ব্যবহৃত হয়। MDL-এর মাধ্যমে আপনি accessible navigation এবং forms তৈরি করতে পারেন, যা ব্যবহারকারীদের জন্য সহজে ব্যবহৃত হয় এবং Web Accessibility নীতির সাথে সম্পূর্ণ সামঞ্জস্যপূর্ণ।
এই টিউটোরিয়ালে, আমরা দেখব কিভাবে MDL ব্যবহার করে accessible navigation এবং forms তৈরি করা যায়, যা সকল ব্যবহারকারীর জন্য সুবিধাজনক এবং অনুসরণযোগ্য হবে।
Accessible Navigation তৈরি করা
Accessible Navigation একটি ওয়েবসাইটে সহজে নেভিগেট করার জন্য গুরুত্বপূর্ণ। এটি ব্যবহারকারীদেরকে পেজের বিভিন্ন অংশে পৌঁছাতে সহায়তা করে। MDL ব্যবহার করে আপনি খুব সহজে accessible navigation তৈরি করতে পারেন, যেখানে semantic HTML, ARIA roles, এবং keyboard navigation সমর্থিত থাকবে।
১. Basic Accessible Navigation Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible Navigation</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>
<!-- Main Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#home" aria-label="Go to Home">Home</a>
<a class="mdl-navigation__link" href="#about" aria-label="Go to About">About</a>
<a class="mdl-navigation__link" href="#services" aria-label="Go to Services">Services</a>
<a class="mdl-navigation__link" href="#contact" aria-label="Go to Contact">Contact</a>
</nav>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
ব্যাখ্যা:
- aria-label: এই অ্যাট্রিবিউটটি ব্যবহারকারীকে ট্যাবুলার ইন্টারফেসে সঠিক তথ্য দেয়, যেমন কি লিঙ্কটি করবে, যাতে স্ক্রীন রিডার ব্যবহারকারীরা সঠিকভাবে বুঝতে পারে।
- mdl-navigation__link: MDL এর ক্লাস যা লিঙ্কগুলোর জন্য ব্যবহৃত হয়।
এটি একটি সহজ এবং অ্যাক্সেসিবল নেভিগেশন বার তৈরি করবে, যেখানে প্রতিটি লিঙ্কের aria-label ব্যবহার করা হয়েছে, যাতে স্ক্রীন রিডার ব্যবহারকারীরা সহজে বুঝতে পারে প্রতিটি লিঙ্কের উদ্দেশ্য।
২. Keyboard Navigation এবং Focus Management
<nav class="mdl-navigation">
<a href="#home" class="mdl-navigation__link" tabindex="0" aria-label="Go to Home">Home</a>
<a href="#about" class="mdl-navigation__link" tabindex="0" aria-label="Go to About">About</a>
<a href="#services" class="mdl-navigation__link" tabindex="0" aria-label="Go to Services">Services</a>
<a href="#contact" class="mdl-navigation__link" tabindex="0" aria-label="Go to Contact">Contact</a>
</nav>
ব্যাখ্যা:
- tabindex="0": এটি ওয়েব পেজের নেভিগেশন লিঙ্কগুলোর জন্য কীবোর্ড নেভিগেশন সক্রিয় করে। ব্যবহারকারী Tab কী দিয়ে লিঙ্কগুলোতে যেতে পারেন।
- aria-label: প্রতিটি লিঙ্কের উদ্দেশ্য এবং কার্যকারিতা স্ক্রীন রিডার ব্যবহারকারীদের জন্য পরিষ্কার করা হয়।
Accessible Forms তৈরি করা
Accessible Forms হলো এমন ফর্ম যা সকল ব্যবহারকারী, বিশেষত screen reader ব্যবহারকারী এবং কীবোর্ড ব্যবহারকারী, জন্য সহজে ব্যবহারযোগ্য এবং অ্যাক্সেসিবল। MDL-এ আপনি form controls, labels, এবং error messages যোগ করে একটি অ্যাক্সেসিবল ফর্ম তৈরি করতে পারেন।
১. Basic Accessible Form Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible Form</title>
<!-- MDL CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>
<!-- Accessible Form -->
<form action="#" method="post">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="name" name="name" required>
<label class="mdl-textfield__label" for="name">Full Name</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="email" id="email" name="email" required>
<label class="mdl-textfield__label" for="email">Email Address</label>
</div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" type="submit">
Submit
</button>
</form>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>
ব্যাখ্যা:
- mdl-textfield: MDL এর ক্লাস যা ফর্ম ইনপুট ফিল্ডের জন্য ব্যবহৃত হয়।
- floating-label: এটি লেবেলকে ইনপুট ফিল্ডের মধ্যে রাখে এবং ইউজারের সাথে ইন্টারঅ্যাকশন করার সময় লেবেলটি মুভ করে।
- required: এটি ফর্ম ফিল্ডকে বাধ্যতামূলক করে তোলে, যাতে ব্যবহারকারী সঠিকভাবে তথ্য প্রদান করে।
এই ফর্মটি MDL ব্যবহার করে সহজেই তৈরি করা হয়েছে এবং floating labels এবং required fields এর মাধ্যমে অ্যাক্সেসিবল করা হয়েছে।
২. Error Handling and Focus Management
<form action="#" method="post">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-invalid">
<input class="mdl-textfield__input" type="text" id="name" name="name" required aria-invalid="true">
<label class="mdl-textfield__label" for="name">Full Name</label>
<span class="mdl-textfield__error">This field is required</span>
</div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" type="submit">
Submit
</button>
</form>
ব্যাখ্যা:
- is-invalid: এটি ইনপুট ফিল্ডে ত্রুটি দেখাতে ব্যবহৃত হয়।
- aria-invalid="true": এটি স্ক্রীন রিডার ব্যবহারকারীদের জানাতে সহায়তা করে যে এই ফিল্ডে ত্রুটি রয়েছে।
- mdl-textfield__error: এটি ত্রুটির বার্তা প্রদর্শন করে যখন ব্যবহারকারী ভুল ইনপুট দেয়।
এটি error handling এবং focus management সহ একটি ফর্ম তৈরি করবে, যা স্ক্রীন রিডার ব্যবহারকারীকে ত্রুটি শনাক্ত করতে সহায়তা করবে।
MDL Forms এবং Navigation এর জন্য Best Practices
- Semantic HTML: ফর্ম এবং নেভিগেশন এলিমেন্টগুলোর জন্য সঠিক semantic HTML ট্যাগ ব্যবহার করুন, যেমন
<form>,<nav>, এবং<button>। - ARIA Roles: aria-label, aria-invalid, এবং aria-live প্রোপার্টি ব্যবহার করে অ্যাক্সেসিবিলিটি উন্নত করুন।
- Keyboard Navigation: tabindex এবং accesskey ব্যবহার করে কীবোর্ড নেভিগেশন সহজ করুন।
- Error Handling: ফর্ম ইনপুট ত্রুটি শনাক্ত করার জন্য aria-invalid এবং error messages ব্যবহার করুন।
সারাংশ
Accessible Navigation এবং Forms তৈরি করা MDL-এ খুবই সহজ এবং এটি web accessibility নীতির সাথে পুরোপুরি সামঞ্জস্যপূর্ণ। MDL কম্পোনেন্টগুলির মাধ্যমে আপনি ওয়েবসাইটের নেভিগেশন এবং ফর্মগুলো অ্যাক্সেসিবল এবং ব্যবহারকারী-বান্ধব করতে পারবেন। ARIA roles, semantic HTML, এবং keyboard navigation সমর্থন সহ, MDL আপনার ওয়েবসাইটের ইউজার এক্সপেরিয়েন্সকে আরও উন্নত এবং অ্যাক্সেসিবল করে তোলে।
Read more
