প্রতিটি ওয়েব ডেভেলপারের জানা উচিত অ্যাক্সেসিবিলিটি বেসিক
আপনি আধুনিক ফ্রেমওয়ার্ক দিয়ে একটি চমৎকার ওয়েবসাইট তৈরি করেছেন, কিন্তু যখন স্ক্রিন রিডার ব্যবহারকারী নেভিগেট করার চেষ্টা করেন, তারা হারিয়ে যান। অথবা যিনি মাউস ব্যবহার করতে পারেন না, তিনি আপনার কাস্টম ড্রপডাউন খুলতে অসমর্থ হন। অ্যাক্সেসিবিলিটি শুধু একটি চেকবক্স নয়—এটি গুণমানসম্পন্ন ওয়েব ডেভেলপমেন্টের একটি মৌলিক অংশ। এই নিবন্ধে, আপনি মূল নীতিমালা এবং ব্যবহারিক কৌশল শিখবেন যা আপনার সাইটকে সবার জন্য ব্যবহারযোগ্য করে তুলবে।
অ্যাক্সেসিবিলিটি কেন গুরুত্বপূর্ণ
অ্যাক্সেসিবিলিটি (প্রায়শই a11y হিসাবে সংক্ষিপ্ত) নিশ্চিত করে যে প্রতিবন্ধী ব্যক্তিরা ওয়েব উপলব্ধি, বুঝতে, নেভিগেট এবং ইন্টারঅ্যাক্ট করতে পারেন। এর মধ্যে দৃষ্টি, শ্রবণ, মোটর এবং জ্ঞানীয় প্রতিবন্ধকতাসম্পন্ন ব্যক্তিরা অন্তর্ভুক্ত। নৈতিক বাধ্যবাধকতার বাইরে, অ্যাক্সেসযোগ্য সাইটগুলি প্রায়শই সার্চ ইঞ্জিনে ভাল র্যাঙ্ক করে, বিস্তৃত দর্শকদের কাছে পৌঁছায় এবং ADA বা WCAG-এর মতো আইনি প্রয়োজনীয়তা মেনে চলে।
তাছাড়া, অ্যাক্সেসিবিলিটি উন্নতি সমস্ত ব্যবহারকারীর উপকার করে। স্পষ্ট শিরোনাম, কীবোর্ড শর্টকাট এবং উচ্চ কনট্রাস্ট উজ্জ্বল সূর্যালোকে, ধীর সংযোগে বা সাময়িকভাবে আহত হাতে থাকা লোকদের সাহায্য করে। এটি সর্বজনীন ডিজাইন সম্পর্কে।
মূল নীতিমালা: POUR
ওয়েব কনটেন্ট অ্যাক্সেসিবিলিটি গাইডলাইনস (WCAG) চারটি নীতির উপর নির্মিত, যা সুবিধামত POUR হিসাবে মনে রাখা হয়:
- Perceivable (উপলব্ধিযোগ্য): তথ্য অবশ্যই এমনভাবে উপস্থাপনযোগ্য হতে হবে যা সমস্ত ব্যবহারকারী উপলব্ধি করতে পারেন। ছবির জন্য টেক্সট বিকল্প, ভিডিওর জন্য ক্যাপশন এবং পর্যাপ্ত কালার কনট্রাস্ট প্রদান করুন।
- Operable (পরিচালনযোগ্য): ব্যবহারকারীদের অবশ্যই ইন্টারফেস পরিচালনা করতে সক্ষম হতে হবে। সমস্ত কার্যকারিতা কীবোর্ডের মাধ্যমে উপলব্ধ রয়েছে তা নিশ্চিত করুন এবং ব্যবহারকারীদের কনটেন্ট পড়ার জন্য পর্যাপ্ত সময় দিন।
- Understandable (বোধগম্য): কনটেন্ট এবং পরিচালনা অবশ্যই বোধগম্য হতে হবে। স্পষ্ট ভাষা, পূর্বানুমেয় নেভিগেশন এবং ইনপুট সহায়তা ব্যবহার করুন।
- Robust (দৃঢ়): কনটেন্ট অবশ্যই বর্তমান এবং ভবিষ্যতের সহায়ক প্রযুক্তির সাথে কাজ করতে হবে। বৈধ, সেমান্টিক HTML লিখুন।
সেমান্টিক HTML দিয়ে শুরু করুন
অ্যাক্সেসিবিলিটির ভিত্তি হল কাজের জন্য সঠিক HTML এলিমেন্ট ব্যবহার করা। স্ক্রিন রিডার অর্থ প্রকাশের জন্য এলিমেন্টের সেমান্টিক্সের উপর নির্ভর করে। একটি <button> একটি বাটন হিসাবে ঘোষিত হয় এবং ডিফল্টভাবে ফোকাসযোগ্য; একটি <div> একটি ক্লিক হ্যান্ডলার সহ নয়।
আপনার ব্যবহার করা উচিত সাধারণ সেমান্টিক এলিমেন্টগুলি:
- নেভিগেশন ব্লকের জন্য
<nav> - প্রধান কনটেন্টের জন্য
<main> - শিরোনামের জন্য
<h1>–<h6>, যৌক্তিক ক্রমে - ক্লিকযোগ্য অ্যাকশনের জন্য
<button> - লিঙ্কের জন্য
<a> - তালিকার জন্য
<ul>,<ol>,<li> - ফর্ম ইনপুটের সাথে যুক্ত
<label>
উদাহরণস্বরূপ, এর পরিবর্তে:
<div>Submit</div>ব্যবহার করুন:
<button type="button">Submit</button>এই সাধারণ পরিবর্তনটি নিয়ন্ত্রণটিকে ফোকাসযোগ্য করে তোলে, এর ভূমিকা ঘোষণা করে এবং কীবোর্ডের মাধ্যমে সক্রিয়করণের অনুমতি দেয়।
কীবোর্ড নেভিগেশন এবং ফোকাস ম্যানেজমেন্ট
অনেক ব্যবহারকারী মাউস ব্যবহার করতে পারেন না। তারা ইন্টারঅ্যাক্টিভ এলিমেন্টের মধ্য দিয়ে চলার জন্য Tab কী-এর উপর নির্ভর করেন। নিশ্চিত করুন যে:
- সমস্ত ইন্টারঅ্যাক্টিভ এলিমেন্ট Tab-এর মাধ্যমে পৌঁছানো যায়।
- Tab ক্রম একটি যৌক্তিক অনুক্রম অনুসরণ করে।
- ফোকাস সর্বদা দৃশ্যমান (প্রতিস্থাপন ছাড়া আউটলাইন সরিয়ে ফেলবেন না)।
- কাস্টম উইজেট (যেমন মোডাল বা ড্রপডাউন) উপযুক্তভাবে ফোকাস ট্র্যাপ করে এবং বন্ধ হলে ফোকাস ফিরিয়ে দেয়।
আপনার মাউস আনপ্লাগ করে এবং শুধুমাত্র কীবোর্ড ব্যবহার করে নেভিগেট করে আপনার সাইট পরীক্ষা করুন। আপনি কি প্রতিটি বৈশিষ্ট্য অ্যাক্সেস করতে পারেন?
ARIA: সতর্কতার সাথে ব্যবহার করুন
ARIA (Accessible Rich Internet Applications) অ্যাট্রিবিউটগুলি অ্যাক্সেসিবিলিটি বাড়াতে পারে যখন নেটিভ HTML কম পড়ে। তবে, ARIA-এর প্রথম নিয়ম হল: আপনি যদি নেটিভ HTML ব্যবহার করতে পারেন তবে ARIA ব্যবহার করবেন না। উদাহরণস্বরূপ, <div role="button">-এর পরিবর্তে <button> ব্যবহার করুন।
যখন আপনার ARIA প্রয়োজন হয়, সাধারণ অ্যাট্রিবিউটগুলির মধ্যে রয়েছে:
- কোনও দৃশ্যমান টেক্সট উপলব্ধ না থাকলে লেবেল প্রদানের জন্য
aria-label। - একটি সংকোচনযোগ্য বিভাগ খোলা কিনা তা নির্দেশ করতে
aria-expanded। - স্ক্রিন রিডার থেকে আলংকারিক উপাদান লুকানোর জন্য
aria-hidden="true"। - কোনও সেমান্টিক ট্যাগ বিদ্যমান না থাকলে একটি এলিমেন্টের উদ্দেশ্য সংজ্ঞায়িত করতে
role।
ভুল ARIA জিনিসগুলি আরও খারাপ করতে পারে, তাই সর্বদা সহায়ক প্রযুক্তির সাথে পরীক্ষা করুন।
রঙ এবং কনট্রাস্ট
পর্যাপ্ত কালার কনট্রাস্ট নিশ্চিত করে যে টেক্সট কম দৃষ্টি বা বর্ণান্ধতা সম্পন্ন ব্যক্তিদের দ্বারা পঠনযোগ্য। WCAG সাধারণ টেক্সটের জন্য কমপক্ষে 4.5:1 এবং বড় টেক্সটের জন্য (18pt+ বা 14pt বোল্ড) 3:1 কনট্রাস্ট অনুপাত সুপারিশ করে। যাচাই করতে WebAIM Contrast Checker-এর মতো সরঞ্জাম ব্যবহার করুন।
এছাড়াও, তথ্য জানানোর জন্য কখনও শুধুমাত্র রঙের উপর নির্ভর করবেন না। উদাহরণস্বরূপ, যদি আপনি একটি ত্রুটি নির্দেশ করতে লাল ব্যবহার করেন, তবে একটি আইকন বা টেক্সট বার্তাও অন্তর্ভুক্ত করুন।
ছবির জন্য টেক্সট বিকল্প
প্রতিটি ছবির একটি alt অ্যাট্রিবিউট থাকা উচিত। মানটি প্রসঙ্গের উপর নির্ভর করে:
- যদি ছবিটি তথ্য conveys করে, সংক্ষেপে বর্ণনা করুন:
alt="A red warning triangle"। - যদি এটি আলংকারিক হয়, একটি খালি alt ব্যবহার করুন:
alt=""। - যদি এটি একটি জটিল চার্ট হয়, কাছাকাছি বা
aria-describedby-এর মাধ্যমে একটি দীর্ঘ বর্ণনা প্রদান করুন।
alt টেক্সট অনুপস্থিত থাকা সবচেয়ে সাধারণ অ্যাক্সেসিবিলিটি ব্যর্থতার একটি। এটি ঠিক করাও সহজ।
অ্যাক্সেসিবিলিটির জন্য আপনার সাইট পরীক্ষা করা
স্বয়ংক্রিয় সরঞ্জামগুলি প্রায় 30% সমস্যা ধরতে পারে। ম্যানুয়াল পরীক্ষা অত্যন্ত গুরুত্বপূর্ণ। এখানে একটি ব্যবহারিক কর্মপ্রবাহ:
- একটি স্বয়ংক্রিয় অডিট চালান: স্পষ্ট সমস্যা খুঁজে পেতে axe DevTools, Lighthouse, বা WAVE ব্যবহার করুন।
- কীবোর্ড পরীক্ষা: শুধুমাত্র Tab, Shift+Tab, Enter, এবং তীর কী ব্যবহার করে আপনার সাইট নেভিগেট করুন।
- স্ক্রিন রিডার পরীক্ষা: VoiceOver (Mac), NVDA (Windows), বা Orca (Linux) চেষ্টা করুন। কনটেন্ট কীভাবে ঘোষিত হয় তা শুনুন।
- জুম এবং কনট্রাস্ট: 200% জুম করুন এবং কনটেন্ট ব্যবহারযোগ্য থাকে কিনা পরীক্ষা করুন। কনট্রাস্ট অনুপাত যাচাই করুন।
- ব্যবহারকারী পরীক্ষা: যখনই সম্ভব, ব্যবহারযোগ্যতা পরীক্ষায় প্রতিবন্ধী ব্যক্তিদের অন্তর্ভুক্ত করুন।
এড়ানো উচিত সাধারণ ভুল
- বাটন এবং লিঙ্কের জন্য
divবাspanব্যবহার করা। - বিকল্প প্রদান না করে ফোকাস আউটলাইন সরিয়ে ফেলা।
- ফোকাসযোগ্য এলিমেন্টে
aria-hidden="true"যোগ করা। - ইনপুটের জন্য একমাত্র লেবেল হিসাবে প্লেসহোল্ডার টেক্সট ব্যবহার করা।
- শব্দ সহ স্বয়ংক্রিয়-চালিত মিডিয়া।
- অপর্যাপ্ত কালার কনট্রাস্ট।
দ্রুত রেফারেন্স: করণীয় এবং বর্জনীয়
| করণীয় | বর্জনীয় |
|---|---|
| সেমান্টিক HTML এলিমেন্ট ব্যবহার করুন | সবকিছুর জন্য div ব্যবহার করবেন না |
| টেক্সট বিকল্প প্রদান করুন | তথ্যমূলক ছবির জন্য alt অ্যাট্রিবিউট খালি রাখবেন না |
| কীবোর্ড পরিচালনযোগ্যতা নিশ্চিত করুন | শুধুমাত্র মাউস ইভেন্টের উপর নির্ভর করবেন না |
| পর্যাপ্ত কনট্রাস্ট বজায় রাখুন | সাদার উপর হালকা ধূসর টেক্সট ব্যবহার করবেন না |
| ফর্ম ইনপুট লেবেল করুন | লেবেল হিসাবে প্লেসহোল্ডার ব্যবহার করবেন না |
সাধারণ জিজ্ঞাসা
WCAG A, AA, এবং AAA-এর মধ্যে পার্থক্য কী?
WCAG কনফরম্যান্স স্তরগুলি ক্রমবর্ধমান অ্যাক্সেসিবিলিটি নির্দেশ করে। স্তর A হল সর্বনিম্ন, AA হল সেই মান যা বেশিরভাগ আইন উল্লেখ করে, এবং AAA হল সর্বোচ্চ স্তর, প্রায়শই সমস্ত কনটেন্টের জন্য অবাস্তব। AA লক্ষ্য করুন।
সমস্ত অ্যাক্সেসিবিলিটি সমস্যা সমাধানের জন্য আমি ARIA ব্যবহার করতে পারি?
না। ARIA শুধুমাত্র তখনই ব্যবহার করা উচিত যখন নেটিভ HTML প্রয়োজনীয় সেমান্টিক্স প্রদান করতে পারে না। ভুল ARIA অ্যাক্সেসিবিলিটির ক্ষতি করতে পারে। সর্বদা প্রথমে সেমান্টিক HTML পছন্দ করুন।
অ্যাক্সেসিবিলিটির জন্য আমি কীভাবে আমার ওয়েবসাইট পরীক্ষা করব?
স্বয়ংক্রিয় সরঞ্জাম (যেমন axe বা Lighthouse) ম্যানুয়াল চেকের সাথে একত্রিত করুন: কীবোর্ড নেভিগেশন, স্ক্রিন রিডার পরীক্ষা এবং কালার কনট্রাস্ট বিশ্লেষণ। যখন সম্ভব প্রতিবন্ধী ব্যবহারকারীদের অন্তর্ভুক্ত করুন।
আপনার সাইটের অ্যাক্সেসিবিলিটি উন্নত করতে প্রস্তুত? আপনার HTML কাঠামো যাচাই করে এবং সাধারণ সমস্যাগুলি পরীক্ষা করে শুরু করুন। দ্রুত JSON ফরম্যাটিং এবং যাচাইয়ের জন্য, আপনার ডেটা পরিষ্কার এবং সু-গঠিত কিনা তা নিশ্চিত করতে আমাদের JSON Formatter ব্যবহার করে দেখুন।