ওয়েব অ্যাক্সেসিবিলিটি মানে এমন ওয়েবসাইট তৈরি করা যা প্রতিবন্ধী ব্যক্তিরা কার্যকরভাবে ব্যবহার করতে পারে। এতে স্ক্রীন রিডার, কীবোর্ড-সর্বস্ব নেভিগেশন, ভয়েস নিয়ন্ত্রণ, স্ক্রীন ম্যাগনিফায়ার ব্যবহারকারী বা যারা রঙের দৃষ্টিভঙ্গিতে সীমাবদ্ধ তাদের অন্তর্ভুক্ত করা হয়। ওয়ার্ডপ্রেস ইকোসিস্টেমে, অ্যাক্সেসিবিলিটি অনেক অঞ্চলে একটি আইনগত প্রয়োজন এবং একটি বৃহত্তর দর্শকের কাছে পৌঁছানোর একটি কার্যকরী উপায়—বিশ্বব্যাপী 1 বিলিয়নেরও বেশি মানুষ কোনও না কোনও ধরনের প্রতিবন্ধকতার সম্মুখীন।
এই গাইডে, আমরা আপনার ওয়ার্ডপ্রেস সাইটকে অ্যাক্সেসিবল করতে কার্যকর পদক্ষেপগুলি আলোচনা করছি, ওয়েব কন্টেন্ট অ্যাক্সেসিবিলিটি গাইডলাইনস (WCAG) 2.2-এর AA স্তরের অনুসরণ করে—এটি অ্যাক্সেসিবিলিটি আইনগুলির মধ্যে সবচেয়ে সাধারণভাবে প্রয়োজনীয় মান, যার মধ্যে ADA (মার্কিন যুক্তরাষ্ট্র), EAA (ইইউ), এবং AODA (কানাডা) অন্তর্ভুক্ত রয়েছে।
WCAG 2.2 নীতিগুলি বোঝা
WCAG চারটি নীতির চারপাশে সংগঠিত, যা POUR নামে পরিচিত:
| নীতির নাম | এটি কী বোঝায় | ওয়ার্ডপ্রেস উদাহরণ |
|---|---|---|
| ধরা যায় | ব্যবহারকারীরা দৃষ্টি, শ্রবণ বা স্পর্শের মাধ্যমে বিষয়বস্তু বুঝতে পারে | ছবির জন্য অল্ট টেক্সট, ভিডিওর জন্য ক্যাপশন, যথেষ্ট রঙের বৈপরীত্য |
| কার্যকরী | ব্যবহারকারীরা ইন্টারফেসের সাথে নেভিগেট এবং যোগাযোগ করতে পারে | কীবোর্ড নেভিগেশন, স্কিপ লিঙ্ক, কীবোর্ড ট্র্যাপ নেই |
| বোঝার উপযোগী | ব্যবহারকারীরা বিষয়বস্তু এবং ইন্টারফেস ব্যবহার করার উপায় বুঝতে পারে | স্পষ্ট ভাষা, ধারাবাহিক নেভিগেশন, ত্রুটি বার্তা |
| মজবুত | বিষয়বস্তু ব্রাউজার, ডিভাইস এবং সহায়ক প্রযুক্তির মধ্যে কাজ করে | বৈধ HTML, সঠিক ARIA ভূমিকা, অর্থবহ মার্কআপ |
একটি অ্যাক্সেসিবল থিম নির্বাচন করা
আপনার ওয়ার্ডপ্রেস থিমের HTML কাঠামো এবং CSS আপনার সাইটের অ্যাক্সেসিবিলিটির ভিত্তি গঠন করে। যখন একটি ওয়ার্ডপ্রেস থিম নির্বাচন করছেন, এই অ্যাক্সেসিবিলিটি ফ্যাক্টরগুলি মূল্যায়ন করুন:
- অর্থবহ HTML: থিমটি সবকিছুর জন্য সাধারণ ডিভের পরিবর্তে সঠিক HTML5 উপাদান (হেডার, ন্যাভ, মেইন, আর্টিকেল, আসাইড, ফুটার) ব্যবহার করে
- শিরোনামের শ্রেণীবিভাগ: H1 → H2 → H3 একটি যৌক্তিক ক্রম অনুসরণ করে স্তরগুলি বাদ না দিয়ে
- স্কিপ লিঙ্ক: "বিষয়বস্তুতে স্কিপ করুন" লিঙ্কটি প্রথম ফোকাসযোগ্য উপাদান হিসেবে উপস্থিত, যা কীবোর্ড ব্যবহারকারীদের নেভিগেশন বাইপাস করতে দেয়
- কীবোর্ড নেভিগেশন: সমস্ত ইন্টারেক্টিভ উপাদান (লিঙ্ক, বোতাম, ফর্ম) ট্যাব কী দিয়ে পৌঁছানো এবং ব্যবহারযোগ্য
- ফোকাস সূচক: ফোকাস করা উপাদানগুলির একটি দৃশ্যমান আউটলাইন বা হাইলাইট রয়েছে (outline: none দিয়ে সরানো হয়নি)
- রঙের বৈপরীত্য: টেক্সট WCAG AA বৈপরীত্য অনুপাত পূরণ করে (সাধারণ টেক্সটের জন্য 4.5:1, বড় টেক্সটের জন্য 3:1)
ওয়ার্ডপ্রেস.org-এ "অ্যাক্সেসিবিলিটি-রেডি" ট্যাগযুক্ত থিমগুলি একটি মৌলিক অ্যাক্সেসিবিলিটি পর্যালোচনা পাস করেছে। তবে, এই ট্যাগটি একটি শুরু পয়েন্ট নির্দেশ করে, সম্পূর্ণ WCAG সম্মতি নয়। জনপ্রিয় থিমগুলির মধ্যে, GeneratePress বিশেষভাবে ভাল-কোডেড, পরিষ্কার অর্থবহ HTML এবং সঠিক ARIA ল্যান্ডমার্ক সহ।
ছবির অ্যাক্সেসিবিলিটি
অল্ট টেক্সট
প্রতিটি অর্থবহ ছবির জন্য বর্ণনামূলক অল্ট টেক্সট প্রয়োজন। ওয়ার্ডপ্রেস এটি সহজ করে তোলে—অল্ট টেক্সট ক্ষেত্রটি মিডিয়া লাইব্রেরিতে এবং বিষয়বস্তুতে ছবি সন্নিবেশ করার সময় উপলব্ধ।
| ছবির প্রকার | অল্ট টেক্সট পদ্ধতি | উদাহরণ |
|---|---|---|
| পণ্য ফটো | পণ্যের বর্ণনা করুন | "সোনালী বকলে লাল চামড়ার ক্রসবডি ব্যাগ, সামনের দৃশ্য" |
| স্ক্রীনশট | স্ক্রীনশটটি কী দেখায় তা বর্ণনা করুন | "ওয়ার্ডপ্রেস ড্যাশবোর্ড প্লাগইন পৃষ্ঠা 12টি সক্রিয় প্লাগইন সহ দেখাচ্ছে" |
| ইনফোগ্রাফিক | মূল তথ্যের সারসংক্ষেপ করুন | "তুলনামূলক চার্ট: Elementor বনাম Gutenberg বৈশিষ্ট্য। Elementor এর 100+ উইজেট, Gutenberg এর 90+ ব্লক" |
| সজ্জাসংক্রান্ত ছবি | খালি অল্ট (alt="") | পটভূমির প্যাটার্ন, বিভাজক, সম্পূর্ণ সজ্জাসংক্রান্ত আইকন |
| চার্ট/গ্রাফ | প্রবণতা বা মূল তথ্য পয়েন্ট বর্ণনা করুন | "লাইন চার্ট যা জানুয়ারি থেকে ডিসেম্বর 2025 পর্যন্ত ওয়েবসাইটের ট্রাফিক 45% বৃদ্ধি পাচ্ছে" |
অ্যাক্সেসিবিলিটির জন্য ছবির অপটিমাইজেশন
- টেক্সটের ছবি ব্যবহার করবেন না—এর পরিবর্তে CSS দিয়ে স্টাইল করা আসল টেক্সট ব্যবহার করুন
- ছবিতে এম্বেড করা টেক্সট বৈপরীত্যের প্রয়োজনীয়তা পূরণ করে তা নিশ্চিত করুন
- জটিল ছবির জন্য দীর্ঘ বর্ণনা প্রদান করুন (চার্ট, ডায়াগ্রাম) একটি পার্শ্ববর্তী প্যারাগ্রাফ বা longdesc বৈশিষ্ট্য ব্যবহার করে
- ছবিগুলি উপযুক্ত মাত্রার হওয়া নিশ্চিত করুন যাতে সেগুলি লেআউট পরিবর্তন (CLS) সৃষ্টি না করে
কীবোর্ড নেভিগেশন
অনেক ব্যবহারকারী সম্পূর্ণরূপে ওয়েবসাইটে নেভিগেট করেন
একটি কীবোর্ড—সামনে যেতে Tab, পিছনে যেতে Shift+Tab, লিঙ্ক/বোতাম সক্রিয় করতে Enter, চেকবক্স টগল করতে এবং বোতাম ক্লিক করতে Space, এবং মডাল বন্ধ করতে Escape ব্যবহার করুন।
সাধারণ কীবোর্ড অ্যাক্সেসিবিলিটি সমস্যা
- ফোকাস ট্র্যাপ: মডাল ডায়ালগ যা মূল কনটেন্টে ফিরে ট্যাবিং করতে দেয় না (মডালগুলিকে মডালের ভিতরে ফোকাস আটকাতে হবে, এবং Escape তাদের বন্ধ করতে হবে)
- ফোকাস নির্দেশক অনুপস্থিত: CSS যা ফোকাস করা উপাদানের ডিফল্ট আউটলাইন মুছে দেয় (বিশ্বব্যাপী *:focus { outline: none } কখনও ব্যবহার করবেন না)
- ক্লিক হ্যান্ডলার সহ অ-interactive উপাদান: Divs বা spans যা onClick ইভেন্ট সহ কীবোর্ড অ্যাক্সেসযোগ্য নয় (এর পরিবর্তে বোতাম বা লিঙ্ক ব্যবহার করুন)
- ড্রপডাউন মেনু যা শুধুমাত্র হোভার করার সময় খোলে: কীবোর্ড ব্যবহারকারীরা হোভার অবস্থাগুলি ট্রিগার করতে পারে না। মেনুগুলি ফোকাস/Enter এও খোলা উচিত
- ARIA ছাড়া কাস্টম উপাদান: ট্যাব, অ্যাকর্ডিয়ন এবং ক্যারোসেল যা সঠিক ARIA ভূমিকা এবং কীবোর্ড হ্যান্ডলার ছাড়া তৈরি করা হয়েছে
রঙ এবং কনট্রাস্ট
WCAG AA এই সর্বনিম্ন কনট্রাস্ট অনুপাত প্রয়োজন:
| উপাদান | সর্বনিম্ন অনুপাত | উদাহরণ (পাস) | উদাহরণ (ফেল) |
|---|---|---|---|
| সাধারণ টেক্সট (<18px) | 4.5:1 | #333 on #fff (12.6:1) | #999 on #fff (2.8:1) |
| বড় টেক্সট (≥18px বা ≥14px বোল্ড) | 3:1 | #555 on #fff (7.4:1) | #aaa on #fff (2.3:1) |
| UI উপাদান (বোতাম, ইনপুট) | 3:1 | নীল #2563eb বোতাম (4.6:1) | হালকা নীল #93c5fd (1.8:1) |
| অ-টেক্সট কনটেন্ট (আইকন, সীমানা) | 3:1 | হালকা পটভূমিতে গা dark ় আইকন | সাদা পটভূমিতে হালকা ধূসর আইকন |
কনট্রাস্ট অনুপাত যাচাই করতে WebAIM-এর Contrast Checker বা axe ব্রাউজার এক্সটেনশন ব্যবহার করুন। তথ্য প্রকাশ করতে শুধুমাত্র রঙের উপর নির্ভর করবেন না—রঙ কোডিংয়ের পাশাপাশি টেক্সট লেবেল, প্যাটার্ন বা আইকন ব্যবহার করুন।
ফর্ম অ্যাক্সেসিবিলিটি
ফর্মগুলি অ্যাক্সেসিবিলিটির জন্য সবচেয়ে গুরুত্বপূর্ণ ক্ষেত্রগুলির মধ্যে একটি। Gutenberg ব্লক, Gravity Forms, বা WPForms ব্যবহার করলেও:
- প্রতিটি ইনপুটের জন্য লেবেল দিন: প্রতিটি ইনপুটের সাথে যুক্ত <label> উপাদান ব্যবহার করুন for/id অ্যাট্রিবিউটের মাধ্যমে। প্লেসহোল্ডার টেক্সট লেবেলের বিকল্প নয়
- সম্পর্কিত ক্ষেত্রগুলি গ্রুপ করুন: সম্পর্কিত ইনপুটগুলির জন্য <fieldset> এবং <legend> ব্যবহার করুন (যেমন, শিপিং ঠিকানা ক্ষেত্র)
- ত্রুটি বার্তা প্রদান করুন: যখন বৈধতা ব্যর্থ হয়, তখন কোন ক্ষেত্রটি ত্রুটি রয়েছে তা চিহ্নিত করুন এবং এটি কীভাবে ঠিক করতে হয় তা বর্ণনা করুন। ত্রুটি বার্তাগুলিকে তাদের ক্ষেত্রের সাথে যুক্ত করতে aria-describedby ব্যবহার করুন
- আবশ্যক ক্ষেত্র চিহ্নিত করুন: আবশ্যক অ্যাট্রিবিউট ব্যবহার করুন এবং টেক্সটের মাধ্যমে আবশ্যক ক্ষেত্রগুলি দৃশ্যমানভাবে চিহ্নিত করুন (শুধু একটি তারকা নয়)
- অটোকমপ্লিট সমর্থন করুন: ব্রাউজারগুলি ফর্ম ডেটা স্বয়ংক্রিয়ভাবে পূরণ করতে পারে এমন উপযুক্ত অটোকমপ্লিট অ্যাট্রিবিউট (নাম, ইমেইল, টেল, ঠিকানা-লাইন1) যোগ করুন
কনটেন্ট অ্যাক্সেসিবিলিটি
শিরোনাম কাঠামো
সঠিক শিরোনাম হায়ারার্কি স্ক্রীন রিডার ব্যবহারকারীদের পৃষ্ঠা কাঠামো বুঝতে এবং বিভাগগুলির মধ্যে নেভিগেট করতে সাহায্য করে। নিয়ম:
- প্রতি পৃষ্ঠায় একটি H1 (পৃষ্ঠা/পোস্ট শিরোনাম)
- মুখ্য বিভাগগুলির জন্য H2
- H2 এর মধ্যে উপ-অংশগুলির জন্য H3
- লেভেলগুলি কখনও বাদ দেবেন না (H2 → H4 H3 ছাড়া ভুল)
- দৃশ্যমান স্টাইলিংয়ের জন্য শিরোনাম ব্যবহার করবেন না—এর পরিবর্তে CSS ক্লাস ব্যবহার করুন
লিঙ্ক টেক্সট
সাধারণ লিঙ্ক টেক্সট এড়িয়ে চলুন যা প্রসঙ্গ ছাড়া অর্থহীন:
| দুর্বল লিঙ্ক টেক্সট | অ্যাক্সেসিবল লিঙ্ক টেক্সট |
|---|---|
| "এখানে ক্লিক করুন" | "ওয়ার্ডপ্রেস নিরাপত্তা গাইড পড়ুন" |
| "আরও পড়ুন" | "সম্পূর্ণ Elementor Pro পর্যালোচনা পড়ুন" |
| "আরও জানুন" | "WooCommerce চেকআউট অপ্টিমাইজ করার উপায় শিখুন" |
| "এখানে" | "পারফরম্যান্স বেঞ্চমার্ক রিপোর্ট ডাউনলোড করুন" |
টেবিল
ডেটা টেবিলগুলিতে অন্তর্ভুক্ত করা উচিত:
- <thead> সহ <th> উপাদান কলামের শিরোনামের জন্য (scope="col" সহ)
- <th scope="row"> সারির শিরোনামের জন্য
- টেবিলের উদ্দেশ্য বর্ণনা করে একটি <caption> উপাদান
- সরল কাঠামো—যতটা সম্ভব একত্রিত সেল এড়িয়ে চলুন, কারণ সেগুলি স্ক্রীন রিডারের জন্য ব্যাখ্যা করা কঠিন
আপনার সাইটের অ্যাক্সেসিবিলিটি পরীক্ষা করা
| টুল | প্রকার | এটি কী পরীক্ষা করে |
|---|---|---|
| axe DevTools | ব্রাউজার এক্সটেনশন | স্বয়ংক্রিয় WCA |
স্বয়ংক্রিয় সরঞ্জামগুলি প্রায় 30-50% অ্যাক্সেসিবিলিটি সমস্যাগুলি ধরতে পারে। স্বয়ংক্রিয় সরঞ্জামগুলি সনাক্ত করতে পারে না এমন ইন্টারঅ্যাকশন-ভিত্তিক সমস্যাগুলি চিহ্নিত করতে কীবোর্ড এবং স্ক্রীন রিডার দিয়ে ম্যানুয়াল পরীক্ষা করা প্রয়োজন।
অ্যাক্সেসিবিলিটির জন্য ওয়ার্ডপ্রেস প্লাগইন
- WP অ্যাক্সেসিবিলিটি: স্কিপ লিঙ্ক যোগ করে, সাধারণ অ্যাক্সেসিবিলিটি সমস্যা সমাধান করে, ব্যবহারকারীর পছন্দের জন্য টুলবার যোগ করে
- ওয়ান ক্লিক অ্যাক্সেসিবিলিটি: একটি ফ্রন্টএন্ড অ্যাক্সেসিবিলিটি টুলবার যোগ করে (ফন্ট সাইজ, কনট্রাস্ট, লিঙ্ক হাইলাইট)
- অ্যাক্সেসিবিলিটির সাথে স্টার্টার টেম্পলেট: Astra এবং GeneratePress উভয়েরই তাদের বেস থিমে শক্তিশালী অ্যাক্সেসিবিলিটি ভিত্তি রয়েছে
নোট: অ্যাক্সেসিবিলিটি ওভারলে প্লাগইন (যেগুলি "ফিক্স" বোতাম সহ একটি ভাসমান উইজেট যোগ করে) অ্যাক্সেসিবিলিটি সম্প্রদায় দ্বারা ব্যাপকভাবে সমালোচিত হয়েছে। এগুলি একটি ওয়েবসাইটকে অ্যাক্সেসিবল করে না—এগুলি একটি অতি পৃষ্ঠতল স্তর যোগ করে যা আসলে সহায়ক প্রযুক্তির সাথে হস্তক্ষেপ করতে পারে। ওভারলে উপর নির্ভর করার পরিবর্তে আপনার থিম এবং বিষয়বস্তুতে অ্যাক্সেসিবিলিটি নির্মাণের উপর ফোকাস করুন।
আরও বিস্তারিত জানার জন্য, অফিসিয়াল ডকুমেন্টেশনে দেখুন: WCAG নির্দেশিকা, WordPress অ্যাক্সেসিবিলিটি টিম.
সাধারণ জিজ্ঞাস্য প্রশ্নাবলী
ওয়ার্ডপ্রেস কি বক্স থেকে বেরিয়ে অ্যাক্সেসিবল?
ওয়ার্ডপ্রেস কোর অ্যাক্সেসিবিলিটিতে উল্লেখযোগ্যভাবে উন্নত হয়েছে। প্রশাসনিক প্যানেলটি প্রধানত কীবোর্ড নেভিগেশনযোগ্য এবং ব্লক সম্পাদকটি ARIA লেবেল অন্তর্ভুক্ত করে। তবে, আপনার সাইটের অ্যাক্সেসিবিলিটি আপনার ব্যবহৃত থিম এবং প্লাগইনের উপর ব্যাপকভাবে নির্ভর করে। একটি দুর্বল HTML কাঠামোর থিম ওয়ার্ডপ্রেসের অন্তর্নির্মিত অ্যাক্সেসিবিলিটি বৈশিষ্ট্যগুলিকে দুর্বল করে।
আমি কি আইনগতভাবে একটি অ্যাক্সেসিবল ওয়েবসাইটের প্রয়োজন?
অনেক অঞ্চলে, হ্যাঁ। ADA (মার্কিন যুক্তরাষ্ট্র), ইউরোপীয় অ্যাক্সেসিবিলিটি আইন (ইইউ, জুন 2025 থেকে কার্যকর), AODA (কানাডা), এবং অনুরূপ আইনগুলি ওয়েবসাইটগুলিকে অ্যাক্সেসিবল করতে বাধ্য করে। নির্দিষ্ট প্রয়োজনীয়তা আপনার অবস্থান, ব্যবসার ধরন এবং দর্শকের উপর নির্ভর করে। আপনার পরিস্থিতির জন্য নির্দিষ্ট প্রয়োজনীয়তার জন্য একটি আইনজীবীর সাথে পরামর্শ করুন।
অ্যাক্সেসিবিলিটি কি SEO-কে প্রভাবিত করে?
হ্যাঁ, এখানে উল্লেখযোগ্য ওভারল্যাপ রয়েছে। সঠিক শিরোনাম কাঠামো, বর্ণনামূলক অল্ট টেক্সট, সেমান্টিক HTML, দ্রুত পৃষ্ঠা লোডিং, এবং মোবাইল-ফ্রেন্ডলিনেস উভয়ই অ্যাক্সেসিবিলিটি এবং SEO-এর জন্য উপকারী। WCAG নির্দেশিকা অনুসরণকারী সাইটগুলি সাধারণত আরও ভাল র্যাঙ্ক করে কারণ তারা মৌলিকভাবে আরও ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান করে। SEO সেরা অনুশীলন এর জন্য, আমাদের চেকলিস্ট দেখুন।
পেজ বিল্ডার কি অ্যাক্সেসিবল ওয়েবসাইট তৈরি করতে পারে?
Elementor এবং অন্যান্য পেজ বিল্ডারগুলি সঠিকভাবে ব্যবহৃত হলে অ্যাক্সেসিবল কনটেন্ট তৈরি করতে পারে। মূল বিষয় হল সঠিক শিরোনাম হায়ারার্কি নিশ্চিত করা, ছবির জন্য অল্ট টেক্সট যোগ করা, সেমান্টিক উইজেট ব্যবহার করা (স্টাইল করা ডিভের পরিবর্তে বোতাম), এবং কীবোর্ড নেভিগেশন পরীক্ষা করা। বিল্ডার নিজেই অ্যাক্সেসিবিলিটি নির্ধারণ করে না—আপনি এটি কীভাবে ব্যবহার করেন তা করে।
ওয়ার্ডপ্রেস সাইটগুলিতে সবচেয়ে সাধারণ অ্যাক্সেসিবিলিটি ভুল কী?
ছবির উপর অনুপস্থিত বা অপ্রতুল অল্ট টেক্সট হল সবচেয়ে ঘন ঘন রিপোর্ট করা WCAG লঙ্ঘন। দ্বিতীয় সবচেয়ে সাধারণ হল অপর্যাপ্ত রঙের কনট্রাস্ট। উভয়ই সমাধান করা সহজ—এগুলি মনোযোগ এবং ধারাবাহিক অনুশীলনের প্রয়োজন, প্রযুক্তিগত দক্ষতার পরিবর্তে।
আমি WooCommerce কিভাবে অ্যাক্সেসিবল করব?
WooCommerce-এর ডিফল্ট টেম্পলেটগুলির যথাযথ অ্যাক্সেসিবিলিটি রয়েছে। যাচাই করার জন্য প্রধান ক্ষেত্রগুলি: পণ্য চিত্রের অল্ট টেক্সট, চেকআউট ক্ষেত্রগুলিতে ফর্ম লেবেল, কার্ট এবং চেকআউট প্রক্রিয়ার কীবোর্ড নেভিগেশনযোগ্যতা, এবং ফর্ম ভ্যালিডেশন ব্যর্থতার জন্য অ্যাক্সেসিবল ত্রুটি বার্তা। একটি অ্যাক্সেসিবল থিমকে ভিত্তি হিসেবে ব্যবহার করা WooCommerce-নির্দিষ্ট কাজের পরিমাণ উল্লেখযোগ্যভাবে কমিয়ে দেয়।
অ্যাক্সেসিবল ওয়ার্ডপ্রেস সাইট তৈরি করুন
একটি অ্যাক্সেসিবল থিমের ভিত্তি দিয়ে শুরু করুন। সেমান্টিক HTML এবং WCAG সম্মতি অগ্রাধিকার দেওয়া হালকা ওজনের, ভাল-কোডেড থিমগুলি ব্রাউজ করুন।
অ্যাক্সেসিবল থিম ব্রাউজ করুন →
