Screen Reader এবং Keyboard Navigation Support

Material Design Lite (MDL) গুগলের Material Design নীতির ওপর ভিত্তি করে তৈরি একটি হালকা এবং কার্যকরী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক। MDL ব্যবহারকারীদের জন্য একটি ইন্টারঅ্যাকটিভ এবং আর্কষণীয় ডিজাইন তৈরি করার জন্য সমর্থিত, কিন্তু একসাথে accessibility (অ্যাক্সেসিবিলিটি) এবং keyboard navigation সমর্থন করাও অত্যন্ত গুরুত্বপূর্ণ। এগুলো ব্যবহারকারীদের জন্য ওয়েবসাইট বা অ্যাপ্লিকেশনকে আরও প্রবেশযোগ্য এবং ব্যবহারযোগ্য করে তোলে।

এই টিউটোরিয়ালে, আমরা MDL এ screen reader এবং keyboard navigation সাপোর্ট কীভাবে যোগ করা যায় তা আলোচনা করব, যাতে ওয়েবসাইটটি সবার জন্য উপযুক্ত হয়।

Screen Reader Support

Screen Reader হল একটি সফটওয়্যার প্রোগ্রাম যা অন্ধ বা দৃষ্টি প্রতিবন্ধী ব্যক্তিদের জন্য ওয়েব পেজের কন্টেন্ট পড়ে শোনায়। MDL এ স্ক্রিন রিডার সাপোর্ট যোগ করতে হলে, আপনাকে HTML এ কিছু নির্দিষ্ট ARIA (Accessible Rich Internet Applications) বৈশিষ্ট্য এবং semantic HTML উপাদান ব্যবহার করতে হবে।

১. ARIA Roles ব্যবহার করা

ARIA roles স্ক্রিন রিডার ব্যবহারকারীকে কন্টেন্টের টাইপ এবং কার্যকারিতা সম্পর্কে তথ্য দেয়। MDL কম্পোনেন্টে সঠিক ARIA roles যুক্ত করা হলে, এটি স্ক্রিন রিডারদের মাধ্যমে ভালোভাবে অ্যাক্সেসযোগ্য হবে।

উদাহরণ: Button-এ ARIA Role যুক্ত করা

<button class="mdl-button mdl-js-button mdl-button--raised" aria-label="Submit Form">
  Submit
</button>

এখানে aria-label="Submit Form" স্ক্রিন রিডারকে বলে দিচ্ছে যে, এটি একটি সাবমিট বাটন, যা ব্যবহারকারীদের সুবিধার্থে স্পষ্টভাবে বোঝানো হবে।

২. Focusable Elements-এর জন্য ARIA

যে এলিমেন্টগুলি কীবোর্ড বা স্ক্রীন রিডারের মাধ্যমে ফোকাস করা যাবে, সেগুলোর জন্য aria- attributes* ব্যবহার করা উচিত, যেমন aria-live এবং aria-hidden।

উদাহরণ: আছন্ন (Hidden) এলিমেন্ট

<div aria-hidden="true">
  <p>This text will be hidden from screen readers.</p>
</div>

এটি স্ক্রিন রিডারের কাছে এই উপাদানটি লুকানো থাকবে এবং রিডারের মাধ্যমে এটি পড়া হবে না।

৩. Form Elements-এর জন্য ARIA

ফর্ম উপাদানগুলিতে ARIA বৈশিষ্ট্য যুক্ত করলে স্ক্রিন রিডার ব্যবহারকারীরা সহজেই ফর্মের সাথে ইন্টারঅ্যাক্ট করতে পারেন।

উদাহরণ: Input Field-এর জন্য ARIA

<input type="text" id="username" class="mdl-textfield__input" aria-label="Username" placeholder="Enter your username">

এটি স্ক্রিন রিডারকে বলে দিচ্ছে যে, এটি একটি Username ইনপুট ফিল্ড।

Keyboard Navigation Support

Keyboard Navigation হল এমন একটি প্রক্রিয়া, যেখানে ব্যবহারকারী কীবোর্ডের মাধ্যমে ওয়েব পেজ বা অ্যাপ্লিকেশনের বিভিন্ন উপাদানে নেভিগেট করতে পারে। MDL কিপর্যন্ত keyboard accessibility সাপোর্ট করে, এর কম্পোনেন্টগুলোর জন্য যথাযথ tabindex, focus, এবং event handlers সঠিকভাবে সেট করা গুরুত্বপূর্ণ।

১. Tab Index ব্যবহার করা

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

উদাহরণ: Tab Index এর মাধ্যমে Keyboard Navigation

<button class="mdl-button mdl-js-button mdl-button--raised" tabindex="0">
  Button 1
</button>
<button class="mdl-button mdl-js-button mdl-button--raised" tabindex="1">
  Button 2
</button>

এখানে tabindex="0" প্রথম বাটনটিকে কীবোর্ডের মাধ্যমে প্রথমে নেভিগেটযোগ্য করবে, এবং tabindex="1" দ্বিতীয় বাটনটিকে পরবর্তী নেভিগেটেবল উপাদান হিসেবে চিহ্নিত করবে।

২. Focusable Elements

MDL কম্পোনেন্টে, যেমন মেনু, ডায়ালগ, স্লাইডার ইত্যাদি, উপযুক্ত focusable elements ব্যবহার করা উচিত যাতে ব্যবহারকারী কীবোর্ডের মাধ্যমে সেগুলোতে ফোকাস করতে পারে।

উদাহরণ: Dialog Box Focusable Elements

<div class="mdl-dialog">
  <div class="mdl-dialog__content">
    <h4>Dialog Box Title</h4>
    <p>Content goes here.</p>
  </div>
  <div class="mdl-dialog__actions">
    <button class="mdl-button mdl-js-button mdl-button--raised" tabindex="0">
      OK
    </button>
    <button class="mdl-button mdl-js-button mdl-button--raised" tabindex="1">
      Cancel
    </button>
  </div>
</div>

এখানে, tabindex="0" প্রথম বাটনটিকে এবং tabindex="1" দ্বিতীয় বাটনটিকে ফোকাসযোগ্য করে তোলে। এতে করে কীবোর্ড ব্যবহারকারীরা সহজে মেনুর মধ্যে নেভিগেট করতে পারবেন।

৩. Focus Visible States

ফোকাস স্থিতি (focus state) ওয়েব কম্পোনেন্টে ব্যবহারকারীদের দেখানোর জন্য প্রয়োজনীয় একটি বৈশিষ্ট্য। এটি ব্যবহারকারীকে জানায় যে, তারা কোন উপাদানে ফোকাস করছেন।

উদাহরণ: Focus Visible

.mdl-button:focus {
  outline: 2px solid #2196F3; /* Focused element with blue border */
}

এটি কীবোর্ড ব্যবহারকারীকে একটি বাটনের উপর ফোকাস থাকার সময় একটি স্পষ্ট আউটলাইন দেখাবে।

MDL এর Screen Reader এবং Keyboard Navigation সহ পারফরম্যান্স অপ্টিমাইজেশন

MDL এ accessibility এবং keyboard navigation সাপোর্ট যুক্ত করতে এবং পারফরম্যান্স অপ্টিমাইজ করতে কিছু টিপস:

1. ARIA ব্যবহার: সঠিক ARIA roles এবং aria-label ব্যবহার করে উপাদানগুলো অ্যাক্সেসযোগ্য করতে পারেন।
2. Keyboard-Friendly Elements: সব ইন্টারঅ্যাকটিভ উপাদান কীবোর্ডের মাধ্যমে ফোকাসযোগ্য করতে tabindex অ্যাট্রিবিউট ব্যবহার করুন।
3. Focus Styles: কীবোর্ড ব্যবহারকারীদের জন্য ফোকাসের স্পষ্ট স্টাইলিং যোগ করুন।
4. Lazy Loading: যেগুলো ভিউপোর্টে আসবে না, সেগুলো লোড না করার মাধ্যমে পেজের পারফরম্যান্স বৃদ্ধি করুন।
5. Aria Live Regions: aria-live ব্যবহারের মাধ্যমে স্ক্রিন রিডার ব্যবহারকারীদের জন্য ডায়নামিক কন্টেন্ট দ্রুত রিড করতে পারেন।

সারাংশ

Material Design Lite (MDL) ওয়েবসাইট এবং অ্যাপ্লিকেশনকে আরও অ্যাক্সেসযোগ্য এবং ব্যবহারকারী-বান্ধব করে তোলে, যদি সঠিকভাবে screen reader এবং keyboard navigation সাপোর্ট যোগ করা হয়। ARIA roles, tabindex, focus states এবং keyboard accessibility ব্যবহার করে আপনি MDL কম্পোনেন্টগুলোকে সমস্ত ব্যবহারকারীর জন্য আরও প্রবেশযোগ্য করতে পারেন। এর ফলে, MDL আপনার ডিজাইনকে আরও ইন্টারঅ্যাকটিভ, ব্যবহারকারী-বান্ধব এবং অ্যাক্সেসযোগ্য করবে, এবং এটি ওয়েব অ্যাক্সেসিবিলিটির সেরা অনুশীলন অনুসরণ করবে।