Accessible website মানে শুধু disability থাকা মানুষের জন্য আলাদা কোনো version নয়। এমন website যেখানে keyboard, screen reader, zoom, voice control বা ছোট screen ব্যবহার করেও মূল কাজ করা যায়। ভালো accessibility সাধারণত navigation পরিষ্কার করে, form error কমায় এবং সব user-এর অভিজ্ঞতা সহজ করে। তাই project শেষ হওয়ার পরে “extra feature” হিসেবে নয়, design ও development-এর শুরু থেকেই এটি ধরতে হয়।

চারটি সহজ নীতি দিয়ে শুরু করুন

W3C-এর WCAG guidance accessibility-কে চারটি বড় নীতিতে দেখে: content যেন perceivable, operable, understandable এবং robust হয়। সহজভাবে বললে user যেন তথ্য বুঝতে পারেন, নিজের পছন্দের input দিয়ে কাজ করতে পারেন, interface-এর আচরণ অনুমান করতে পারেন এবং assistive technology-তে content ভেঙে না যায়। বিস্তারিত standard ও checklist W3C Web Accessibility Initiative-এ রয়েছে।

Design ও content-এর প্রাথমিক checklist

  • Readable contrast: Text এবং background-এর পার্থক্য যেন পরিষ্কার হয়। শুধু খুব হালকা grey দিয়ে গুরুত্বপূর্ণ তথ্য দেখাবেন না।
  • Color-এর বাইরে সংকেত: Error বোঝাতে শুধু red color নয়, icon ও পরিষ্কার message দিন। Chart-এ label বা pattern রাখুন।
  • Meaningful alt text: Informative image-এর উদ্দেশ্য সংক্ষেপে লিখুন। Decorative image হলে অপ্রয়োজনীয় বর্ণনা দিয়ে screen reader user-কে আটকে রাখবেন না।
  • Logical heading: Page title-এর পরে section অনুযায়ী H2 ও H3 ব্যবহার করুন। শুধু বড় font দেখানোর জন্য heading tag ব্যবহার করবেন না।
  • Clear link text: বারবার “এখানে ক্লিক করুন” না লিখে link খুললে কী পাওয়া যাবে তা লিখুন।
  • Comfortable target: Mobile-এ button ও link এত ছোট বা কাছাকাছি রাখবেন না যাতে ভুল tap হয়।

Keyboard দিয়ে পাঁচ মিনিটের test

Mouse সরিয়ে শুধু Tab, Shift+Tab, Enter, Space এবং Escape দিয়ে page ব্যবহার করুন। Header থেকে menu, form, modal এবং footer পর্যন্ত focus কোন ক্রমে যায় দেখুন। Focus indicator দৃশ্যমান না হলে user বর্তমানে কোথায় আছেন বুঝবেন না। Dropdown খুললে keyboard দিয়ে option বাছা এবং Escape দিয়ে বন্ধ করা যাচ্ছে কি না যাচাই করুন।

  1. Page reload করে প্রথম focus কোথায় যাচ্ছে দেখুন।
  2. Navigation skip করে মূল content-এ দ্রুত যাওয়ার উপায় আছে কি না দেখুন।
  3. Modal খুললে focus তার ভেতরে থাকে এবং close করলে আগের control-এ ফেরে কি না পরীক্ষা করুন।
  4. Form submit না করে error message পড়া ও সংশোধন করা যাচ্ছে কি না দেখুন।
  5. Keyboard trap হচ্ছে কি না দেখুন—অর্থাৎ কোনো control-এ ঢোকার পরে বেরোনো যাচ্ছে না এমন সমস্যা।

Form-কে সত্যিই usable করুন

Placeholder label-এর বিকল্প নয়; typing শুরু করলে placeholder হারিয়ে যায়। প্রতিটি field-এর visible label রাখুন, required field বোঝান এবং error message-এ সমস্যার সঙ্গে সমাধানের পথও লিখুন। যেমন “Invalid input” না লিখে “১০ সংখ্যার mobile number লিখুন” বেশি কার্যকর। একই তথ্য বারবার চাইবেন না এবং password field-এ paste বন্ধ করবেন না।

Loading, success বা validation message screen reader-এ announce হচ্ছে কি না দেখতে semantic HTML ব্যবহার করুন। Custom component বানানোর আগে native button, input, select ও details element যথেষ্ট কি না ভাবুন। Native control সাধারণত keyboard ও accessibility support অনেকটাই সঙ্গে নিয়ে আসে।

Mobile, zoom ও real-content test

Browser zoom 200% করে horizontal scroll ছাড়া মূল content পড়া যায় কি না দেখুন। Text বড় হলে card, menu ও button overlap করছে কি না যাচাই করুন। Portrait এবং landscape দুটো orientation-এ form পূরণ করুন। Performance-ও এখানে গুরুত্বপূর্ণ—slow page assistive technology ব্যবহারকারীর কাজ আরও কঠিন করতে পারে; তাই Core Web Vitals-এর সহজ গাইড কাজে লাগবে।

Team workflow-এ accessibility রাখুন

Design review-তে contrast ও focus state, content review-তে heading ও link text, development review-তে semantic HTML এবং QA-তে keyboard ও screen-reader smoke test রাখুন। Automated scanner দ্রুত কিছু সমস্যা ধরতে পারে, কিন্তু সব নয়; মানুষের হাতে ব্যবহার পরীক্ষা জরুরি। Product বা service page সাজালে accessibility-র সঙ্গে বিশ্বাসযোগ্য Product Page checklist-ও মিলিয়ে দেখুন। ছোট ছোট নিয়ম definition of done-এ রাখলে accessibility আলাদা project না হয়ে নিয়মিত quality practice হয়ে যায়।