ওয়েবসাইট এক্সেসিবিলিটি: কেন এটা ছাড়া আপনি ক্লায়েন্ট ও ভিজিটর দুটোই হারাচ্ছেন
ওয়েবসাইট এক্সেসিবিলিটি মানে শুধু “প্রতিবন্ধী ভিজিটরদের জন্য কিছু একটা” না। এটা না থাকলে আপনি প্রতিদিন রিয়েল ক্লায়েন্ট আর রিয়েল বিক্রি হারাচ্ছেন, শুধু বুঝতে পারছেন না কেন।
বাংলাদেশের বেশিরভাগ ফ্রিল্যান্সার আর এজেন্সি ডিজাইনের সময় accessibility নিয়ে একবারও ভাবে না। কালার কনট্রাস্ট কম, ছবিতে alt text নেই, ফর্ম কীবোর্ড দিয়ে সাবমিট করা যায় না, এসব ভুল প্রায় প্রতিটা সাইটে থাকে। যতদিন কোনো বায়ার প্রশ্ন না করে, ততদিন কেউ ধরতেও পারে না।
ওয়েবসাইট এক্সেসিবিলিটি আসলে কী
ওয়েবসাইট এক্সেসিবিলিটি মানে এমনভাবে সাইট বানানো, যাতে দৃষ্টি সমস্যা, শ্রবণ সমস্যা, মোটর ডিজঅ্যাবিলিটি বা বয়সজনিত সীমাবদ্ধতা থাকা মানুষও কনটেন্ট পড়তে, বুঝতে আর ব্যবহার করতে পারেন। এর মধ্যে পড়ে স্ক্রিন রিডার সাপোর্ট, কীবোর্ড নেভিগেশন, রঙের কনট্রাস্ট, আর ছবির বিকল্প টেক্সট।
এর জন্য একটা আন্তর্জাতিক স্ট্যান্ডার্ড আছে, নাম Web Content Accessibility Guidelines বা সংক্ষেপে WCAG। বর্তমানে WCAG 2.2 হলো চালু ভার্সন, আর Level AA হলো সেই বেঞ্চমার্ক যা বেশিরভাগ আইন আর ক্লায়েন্ট রিকোয়্যারমেন্টে চাওয়া হয়।
কেন এটা এখন বাংলাদেশি ফ্রিল্যান্সারদের জন্য আরও বেশি জরুরি
যারা আমেরিকা বা ইউরোপের ক্লায়েন্টদের জন্য কাজ করেন, তাদের জন্য এটা এখন শুধু “ভালো প্র্যাকটিস” না, আইনি ঝুঁকির প্রশ্ন। ইউরোপিয়ান ইউনিয়নের European Accessibility Act ২০২৫ সাল থেকে কার্যকর হয়েছে, আর আমেরিকায় ADA (Americans with Disabilities Act) এর আওতায় প্রতি বছর হাজার হাজার ওয়েবসাইট মামলার মুখে পড়ে। ফলে অনেক Western ক্লায়েন্ট এখন সরাসরি Fiverr বা Upwork brief-এ লিখে দেয়, “site must be WCAG compliant”।
যে ফ্রিল্যান্সার এই টার্মগুলো চেনেন না, তিনি সেই কাজ বিড করার আগেই বাদ পড়ে যান। এটা কনভার্শন রেট বা ডিজাইন ট্রেন্ডের প্রশ্ন না, এটা আপনি কাজ পাবেন কি পাবেন না তার প্রশ্ন।
কালার কনট্রাস্ট: সবচেয়ে বেশি ভাঙা নিয়ম
প্রায় প্রতিটা ওয়েবসাইটে যে accessibility নিয়ম সবচেয়ে বেশি ভাঙা হয়, সেটা হলো কালার কনট্রাস্ট। ধূসর টেক্সট সাদা ব্যাকগ্রাউন্ডে, হালকা প্লেসহোল্ডার টেক্সট, বা লো-কনট্রাস্ট আইকন বাটন, এগুলো দেখতে “মিনিমাল” লাগলেও আসলে অনেক ভিজিটরের কাছে পড়াই যায় না।
WCAG 2.2 Level AA অনুযায়ী সাধারণ টেক্সটের জন্য কমপক্ষে 4.5:1 কনট্রাস্ট রেশিও লাগবে, আর বড় টেক্সট বা UI এলিমেন্টের জন্য 3:1। এই রেশিও চেক করার জন্য ফ্রি টুল আছে, ডিজাইনার হিসেবে এটা প্রতিটা প্রজেক্টে চেক করা উচিত, বিশেষ করে কালার প্যালেট ঠিক করার ধাপেই। এই বিষয়ে বিস্তারিত ওয়েবসাইট কালার প্যালেট নির্বাচন নিয়ে লেখা গাইডে পাবেন।
Alt Text এবং ছবির accessibility
প্রতিটা ইনফরমেশনাল ছবির একটা স্পষ্ট alt text থাকা উচিত, যা ছবিটা কী দেখাচ্ছে তা বর্ণনা করে। “image001.jpg” বা খালি alt attribute রেখে দেওয়া সবচেয়ে সাধারণ ভুল, স্ক্রিন রিডার ব্যবহারকারীর কাছে তখন ছবিটা পুরোপুরি অদৃশ্য থেকে যায়।
এখানে একটা বাড়তি সুবিধাও আছে, Google ইমেজ সার্চেও alt text র্যাংকিং সিগন্যাল হিসেবে কাজ করে। তাই accessibility ঠিক করলে ইমেজ SEO এমনিতেই ভালো হয়ে যায়, এটা দুই দিক থেকেই লাভজনক কাজ।
কীবোর্ড নেভিগেশন এবং ফর্ম accessibility
মাউস ছাড়া, শুধু Tab কী দিয়ে সাইট ব্যবহার করা গেলে বোঝা যায় accessibility কতটা ঠিক আছে। অনেক সাইটে কাস্টম বাটন বা ড্রপডাউন মেনু আছে যা কীবোর্ড দিয়ে ফোকাস করাই যায় না, বা ফোকাস করলেও কোনো ভিজ্যুয়াল ইঙ্গিত (outline) দেখা যায় না।
ফর্মের ক্ষেত্রে সমস্যা আরও বড়। প্রতিটা ইনপুট ফিল্ডের সাথে একটা label প্রপারলি যুক্ত থাকা দরকার, placeholder টেক্সটকে label হিসেবে ব্যবহার করা যাবে না। ফর্ম ডিজাইনে এই ধরনের ভুল কীভাবে লিড হারায়, তা নিয়ে আগের একটা কন্টাক্ট ফর্ম ডিজাইন গাইডে বিস্তারিত লেখা আছে।
Semantic HTML এবং হেডিং স্ট্রাকচার
প্রতিটা পেজে একটাই H1 থাকা উচিত, আর H2, H3 গুলো লজিক্যাল ক্রমে সাজানো থাকা উচিত। শুধু বড় ফন্ট দেখানোর জন্য heading ট্যাগ ব্যবহার করা, বা heading স্কিপ করে সরাসরি H4-এ চলে যাওয়া, স্ক্রিন রিডার ইউজারদের জন্য পুরো পেজ স্ট্রাকচার ভেঙে দেয়। semantic ট্যাগ যেমন nav, header, main, footer ব্যবহার করাও এখানে গুরুত্বপূর্ণ, কারণ এগুলো স্ক্রিন রিডারকে বলে দেয় পেজের কোন অংশ কী কাজ করছে।
দ্রুত Accessibility চেকলিস্ট
একটা সাইট পাবলিশ করার আগে এই পয়েন্টগুলো অন্তত একবার চেক করা উচিত।
কীভাবে শুরু করবেন
নতুন করে পুরো সাইট বানাতে হবে না, ধাপে ধাপে ঠিক করাই যথেষ্ট।
- একটা ফ্রি কনট্রাস্ট চেকার দিয়ে হোমপেজের মূল টেক্সট আর বাটনগুলো চেক করুন
- ছবির alt text গুলো একবার রিভিউ করে খালি বা অর্থহীন alt ঠিক করুন
- ফর্মের প্রতিটা ফিল্ডে label ট্যাগ আছে কিনা যাচাই করুন
- শুধু Tab কী দিয়ে পুরো সাইট একবার ব্রাউজ করে দেখুন
10+ বছর ধরে WordPress সাইট বানানো আর 950+ Fiverr ক্লায়েন্ট প্রজেক্টের অভিজ্ঞতা থেকে বলা যায়, accessibility ঠিক করা কোনো একবারের কাজ না, প্রতিটা নতুন সেকশন যোগ করার সময় এটা চেক করার অভ্যাস তৈরি করাই আসল সমাধান।
যদি নিজে ডিজাইন না করে প্রফেশনাল হাতে সঠিকভাবে accessible ল্যান্ডিং পেজ বানিয়ে নিতে চান, দেখে নিতে পারেন ল্যান্ডিং পেজ ডিজাইন সার্ভিস। আর যারা নিজে শিখে এই স্কিলগুলো রপ্ত করতে চান, WordPress আর ডিজাইনের পুরো ফাউন্ডেশনের জন্য আছে WordPress Pro: From Beginner to Expert কোর্স।
