মোবাইলে ওয়েবসাইট খোলা এখন স্বাভাবিক অভ্যাস। তবু অনেক সাইটে লেখা এত ছোট, মেনু এত সরু, ছবি এত ভারী বা ফর্ম এত বিভ্রান্তিকর যে পাঠক কয়েক সেকেন্ডেই ফিরে যান। মোবাইলবান্ধব সাইট মানে শুধু ডেস্কটপ পেজকে ছোট করে দেখানো নয়। এর অর্থ হলো, যে পর্দা, ব্রাউজার, জুম, ইনপুট পদ্ধতি বা সহায়ক প্রযুক্তিই ব্যবহার করা হোক, মানুষ যেন তথ্য পড়তে এবং কাজ করতে পারে। এই গাইডে ছোট ব্যবসা, ব্যক্তিগত ব্লগ বা সংস্থার ওয়েবসাইটের মালিকদের জন্য Responsive Design এবং Accessibility-এর বাস্তব পদ্ধতি দেওয়া হলো। লক্ষ্য হলো পরিষ্কার, নমনীয়, দ্রুত বোঝা যায় এমন অভিজ্ঞতা; কোনো নির্দিষ্ট আইনি সম্মতি বা সার্চ র্যাঙ্কিংয়ের নিশ্চয়তা নয়।
Responsive Design আসলে কী
MDN-এর Responsive Design গাইড মনে করিয়ে দেয়, HTML স্বভাবতই কিছুটা তরল: পেজের আকার বদলালে লেখা নতুন প্রস্থে ভেঙে যায়। সমস্যা শুরু হয় যখন আমরা নির্দিষ্ট প্রস্থের বাক্স, অতি লম্বা লাইন বা এমন ছবি বসাই যা পাত্রের বাইরে বেরিয়ে যায়। Responsive Design হলো এমন নকশা-পদ্ধতি, যেখানে লেআউট উপলব্ধ জায়গা, ডিভাইস ও ব্যবহারকারীর সেটিং অনুযায়ী মানিয়ে নেয়। এটি আলাদা কোনো একক প্রযুক্তি নয়; নমনীয় গ্রিড, তরল মিডিয়া, আপেক্ষিক মাপ এবং প্রয়োজনমতো media query মিলিয়ে তৈরি একটি অভ্যাস।
একটি গুরুত্বপূর্ণ নীতি হলো, ডিভাইসের মডেল ধরে নকশা না করা। “এই ফোনের জন্য ৩৭৫ পিক্সেল” বা “এই ল্যাপটপের জন্য ১৩৬৬ পিক্সেল”—এমন অনুমান দ্রুত পুরোনো হয়। ব্রাউজার উইন্ডো সরু হতে পারে, কেউ ২০০ বা ৪০০ শতাংশ জুম করতে পারেন, আবার বড় অক্ষর ব্যবহারের জন্য মোবাইলের accessibility setting চালু থাকতে পারে। কনটেন্ট কোথায় অসুবিধায় পড়ছে, সেই জায়গায় breakpoint দিন; জনপ্রিয় স্ক্রিন-সাইজের তালিকা মুখস্থ করে নয়।
Mobile-first দিয়ে শুরু করুন
প্রথমে একটি সরু পর্দায় মূল কাজটি সহজ করুন। লোগো, শিরোনাম, পরিচয়, প্রধান বোতাম ও প্রয়োজনীয় নেভিগেশন রাখুন; পাশের তথ্য নিচে নামিয়ে দিন। এক কলামের প্রাথমিক CSS-কে ভিত্তি ধরে চওড়া জায়গায় media query দিয়ে দুই বা তিন কলাম যোগ করা যায়। MDN-ও সরু ডিভাইসে single-column দিয়ে শুরু করে পর্যাপ্ত জায়গা পাওয়া গেলে বহু-কলাম করার এই mobile-first পদ্ধতির কথা বলে। এতে ছোট পর্দায় অপ্রয়োজনীয় জিনিস লুকিয়ে রেখে মূল তথ্য হারিয়ে ফেলার ঝুঁকি কমে।
@media (min-width: 48rem)-এর মতো আপেক্ষিক একক ব্যবহার করুন। px একেবারে নিষিদ্ধ নয়, কিন্তু সবকিছু কঠিন pixel width করলে জুম ও বড় ফন্টের সময় লেআউট ভেঙে যেতে পারে। max-width: 70rem; margin-inline: auto; padding-inline: 1rem; ধরনের container বড় স্ক্রিনে লাইনের দৈর্ঘ্য নিয়ন্ত্রণ করে। Flexbox ও CSS Grid সাধারণত নমনীয়; সন্তানদের flex: 1 বা grid-এর fr একক জায়গা ভাগ করতে সাহায্য করে। কোনো কার্ডে দীর্ঘ বাংলা শিরোনাম এলে তা কেটে ফেলার বদলে পরের লাইনে যেতে দিন।
Viewport, reflow এবং horizontal scroll
HTML-এ viewport meta tag রাখুন: <meta name="viewport" content="width=device-width, initial-scale=1">। এটি মোবাইল ব্রাউজারকে পেজের CSS প্রস্থ ডিভাইসের সঙ্গে মিলিয়ে নিতে সাহায্য করে। কিন্তু zoom বন্ধ করতে user-scalable=no বা অতিরিক্ত কঠিন maximum-scale ব্যবহার করবেন না; যাঁদের বড় লেখা দরকার তাঁদের নিয়ন্ত্রণ থাকা উচিত।
W3C-এর Reflow নির্দেশনা অনুযায়ী, সাধারণ কনটেন্টকে ৩২০ CSS পিক্সেল প্রস্থের সমতুল্য অবস্থায় তথ্য বা কাজ হারানো ছাড়াই এক দিকের স্ক্রলে পড়া সম্ভব হওয়া উচিত। এর মানে প্রতিটি টেবিল বা মানচিত্রকে জোর করে ভাঙতে হবে না; অর্থপূর্ণভাবে দুই-মাত্রিক থাকা ডেটা টেবিল, মানচিত্র, গেম বা বড় ডায়াগ্রামের ব্যতিক্রম থাকতে পারে। তবে টেবিলের চারপাশে স্ক্রল-ইঙ্গিত, ছোট পর্দায় বিকল্প সারাংশ বা স্তূপীকৃত তথ্য দিলে বোঝা সহজ হয়। ফিক্সড header, বিজ্ঞাপন বা floating chat যেন জুম করা লেখা ও keyboard focus ঢেকে না দেয়।
বাংলা পাঠযোগ্যতা আগে
বাংলা লেখার জন্য এমন font বাছুন যার যুক্তাক্ষর, কারচিহ্ন ও মাত্রা পরিষ্কার। ওয়েবফন্ট ব্যবহার করলে font-display: swap দিন, যাতে ফন্ট আসা পর্যন্ত অদৃশ্য লেখা না থাকে। একটি বাংলা font-এর সঙ্গে fallback হিসেবে sans-serif বা আপনার পরীক্ষিত বাংলা fallback লিখুন। শুধু ইংরেজি অক্ষরে সুন্দর দেখায় বলে font বাছবেন না; দীর্ঘ বাংলা অনুচ্ছেদ, শিরোনাম, সংখ্যা, বিরামচিহ্ন এবং bold অবস্থায় দেখে নিন।
মূল লেখায় পর্যাপ্ত line-height রাখুন—সাধারণভাবে 1.6 থেকে শুরু করে বাস্তব ফোনে পরীক্ষা করা যায়। অতি সরু column-এ এক লাইনে দুটি শব্দ রেখে পড়া কঠিন করবেন না, আবার বড় পর্দায় পুরো স্ক্রিনজুড়ে লম্বা লাইনও রাখবেন না। অনুচ্ছেদ ছোট রাখুন, একটি অনুচ্ছেদে একটি ভাব বলুন, এবং হালকা ধূসর লেখায় contrast নষ্ট করবেন না। ব্যবহারকারী browser zoom করলে লেখা বড় হবে, নতুন লাইনে reflow হবে এবং কোনো বাক্য কাটা যাবে না।
Semantic HTML ও heading-এর সিঁড়ি
সাজসজ্জার জন্য শুধু div ব্যবহার না করে অর্থপূর্ণ HTML নিন: header, nav, main, article, section, footer, button এবং a। একটি পেজে পরিষ্কার প্রধান h1 রাখুন, তারপর বিষয়ভিত্তিক h2, তার ভেতরে দরকার হলে h3। শুধু বড় দেখানোর জন্য heading বাদ দিয়ে bold paragraph করবেন না। স্ক্রিন রিডার ব্যবহারকারী heading list শুনে পেজে দ্রুত চলেন; তাই heading-এর লেখা সংক্ষিপ্ত কিন্তু অর্থবহ হওয়া দরকার। “আরও জানুন” পাঁচ জায়গায় না লিখে “ডেলিভারি নীতি পড়ুন” লিখুন।
মেনু খোলার বোতাম সত্যিকারের button হোক, ক্লিকযোগ্য div নয়। বোতামে কাজের নাম এবং খোলা বা বন্ধের অবস্থা programmatically বোঝা যায় এমনভাবে দিন। লিঙ্কের নতুন ট্যাব খোলা হলে আগে জানানো ভালো। tabindex দিয়ে স্বাভাবিক keyboard ক্রম বদলানোর বদলে DOM-এর ক্রম ঠিক করুন। W3C WAI tutorials ডেভেলপার, ডিজাইনার ও content author—সবার জন্য ছবি, টেবিল, ফর্মসহ সাধারণ কাজের accessibility পদ্ধতি দেখায়।
Keyboard, focus ও স্পর্শ
মাউস বা touch না ব্যবহার করে Tab, Shift+Tab, Enter, Space এবং arrow key দিয়ে কাজটি করুন। WCAG keyboard নির্দেশনা বলে, নির্দিষ্ট সময়ের চাপ ছাড়া সব কার্যকারিতার keyboard সমতুল্য থাকা দরকার। custom dropdown, carousel, modal, accordion বা search box-এ শুধু click event লিখে থেমে যাবেন না। Escape-এ modal বন্ধ করা, focus কোথায় ফিরবে এবং tab ক্রম কেমন হবে—এসব নির্ধারণ করুন।
Focus outline সরিয়ে ফেলবেন না। বরং :focus-visible-এ স্পষ্ট দুই রঙের outline দিন, যা পটভূমি থেকে আলাদা এবং নিজেই যথেষ্ট দৃশ্যমান। sticky header যেন focus করা লিঙ্ক ঢেকে না দেয়; প্রয়োজন হলে scroll-margin-top ব্যবহার করুন। touch target খুব ছোট হলে ভুল চাপ বাড়ে, তাই বোতামে পর্যাপ্ত padding ও ফাঁক রাখুন। ভিন্ন আঙুলের আকার, zoom এবং landscape অবস্থায় পরীক্ষা করুন।
ফর্ম, label ও error message
প্রতিটি input-এর পাশে দৃশ্যমান label রাখুন এবং for-এর মান input-এর id-এর সঙ্গে মিলান। placeholder-কে label-এর বিকল্প বানাবেন না; ব্যবহারকারী লিখতে শুরু করলে placeholder হারিয়ে যায়। প্রয়োজনীয় ঘর হলে “আবশ্যক” লিখুন, কেবল লাল তারকা দিয়ে নির্ভর করবেন না। ফোন, ইমেইল, ঠিকানা বা পাসওয়ার্ডের জন্য স্পষ্ট নির্দেশনা দিন এবং ভুলের উদাহরণ দেখান।
Submit-এর পরে শুধু “ভুল হয়েছে” লিখবেন না। কোন ঘরে কী ভুল এবং কীভাবে ঠিক করতে হবে, তা text-এ জানান; error summary থাকলে প্রতিটি বার্তার সঙ্গে ঘরে লিঙ্ক দিন। server-side validation রাখুন, কারণ JavaScript ব্যর্থ হলেও মানুষকে কাজ শেষ করতে হবে। সফল ফলাফল এবং loading অবস্থাও বোঝান। keyboard focus এমন জায়গায় আনুন যাতে ব্যবহারকারী ফলাফল বা প্রথম ভুল ঘরটি পান, কিন্তু তাঁর লেখা হারাবেন না।
ছবির alt এবং decorative image
তথ্যবহুল ছবির alt-এ ছবিটি কেন দরকার সেই অর্থ লিখুন, ফাইলের নাম নয়। কোনো দোকানের পণ্যের ছবি হলে পণ্যের ধরন, রঙ বা ছবিতে দৃশ্যমান প্রাসঙ্গিক বৈশিষ্ট্য বলুন; “ছবি” শব্দটি আলাদা করে যোগ করা জরুরি নয়। লিঙ্কের ভেতরের ছবিই যদি লিঙ্কের নাম দেয়, alt-এ কাজের নাম রাখুন। চার্টে মূল তথ্য alt-এ সংক্ষেপে দিন এবং পাশে ডেটা বা দীর্ঘ বর্ণনা দিন।
শুধু সাজসজ্জার রেখা, texture বা একই তথ্য পুনরাবৃত্তি করা ছবিতে alt="" ব্যবহার করুন, যাতে screen reader অপ্রয়োজনীয় ঘোষণা না করে। CSS background-এ রাখা decoration-এ সাধারণত alt লাগে না, কিন্তু সেখানে তথ্য লুকিয়ে রাখবেন না। WAI Images Tutorial সহ WAI-এর tutorial-গুলো ছবিকে context অনুযায়ী meaningful, functional বা decorative হিসেবে লেখার পদ্ধতি ব্যাখ্যা করে।
Responsive images ও ভিডিও
ছবিকে container-এর বাইরে যেতে দেবেন না: img, picture, video { max-width: 100%; height: auto; }। কিন্তু শুধু বড় ছবিকে ছোট করে দেখালে মোবাইল অযথা বেশি ডেটা ডাউনলোড করে। MDN Responsive Images অনুযায়ী srcset এবং sizes দিয়ে একই ছবির বিভিন্ন প্রস্থ দিন, যাতে ব্রাউজার viewport, pixel density, zoom ও নেটওয়ার্ক বিবেচনা করে উপযুক্ত ফাইল নেয়। picture ব্যবহার করে সরু পর্দায় আলাদা crop বা portrait art direction দেওয়া যায়; শেষ fallback হিসেবে অর্থপূর্ণ img ও alt রাখুন।
ছবির intrinsic width-height জানালে layout shift কমে। WebP বা AVIF ব্যবহার করতে পারেন, তবে fallback, compression ও বাস্তব ফোনে মান দেখুন। lazy loading-এর আগে প্রথম viewport-এর প্রয়োজনীয় ছবি দেরি করাবেন না। বড় infographic-এর পাঠ্য শুধু ছবিতে আটকে রাখবেন না; HTML summary বা downloadable data দিন। ভিডিওতে প্লে-নিয়ন্ত্রণ, transcript এবং প্রি-রেকর্ডেড কথোপকথন ও গুরুত্বপূর্ণ শব্দের synchronized captions দিন। W3C captions guidance captions-এ বক্তা, অর্থপূর্ণ sound effect ও প্রয়োজনীয় audio তথ্য রাখার কথা বলে।
রং ও contrast
রঙকে একমাত্র সংকেত বানাবেন না। “লাল ঘরটি ঠিক করুন” বললে color-vision deficiency থাকা ব্যক্তি আটকে যেতে পারেন; label, icon এবং text-ও দিন। স্বাভাবিক আকারের লেখা ও তার background-এর contrast ratio অন্তত 4.5:1, আর বড় লেখা হলে অন্তত 3:1 রাখার WCAG AA নির্দেশনা W3C-এর Contrast Minimum ব্যাখ্যায় আছে। এখানে বড় text-এর সংজ্ঞা font ও weight-এর ওপর নির্ভর করে; পাতলা বা অস্বাভাবিক font-কে বড় ধরে ছাড় নেবেন না। লোগো, pure decoration বা inactive control-এর ব্যতিক্রম আছে, কিন্তু সাধারণ body text-এর ক্ষেত্রে নয়।
Contrast checker দিয়ে text, link, placeholder, disabled-looking হলেও পড়তে হয় এমন লেখা, focus outline এবং ছবির ওপর বসানো heading পরীক্ষা করুন। hover-এ শুধু রং বদলালে keyboard focus ও স্পষ্ট underline রাখুন। dark mode যোগ করলে দুই theme-এই পরীক্ষা করুন। background image বদলালে text-এর পেছনে solid বা gradient layer দিন; যে ছবির ওপর লেখা বসাবেন তা সব crop-এ যথেষ্ট contrast রাখে কি না দেখুন। contrast পাস করলেই accessibility সম্পূর্ণ হয় না—font, spacing, ভাষা, hierarchy ও বাস্তব ব্যবহারও গুরুত্বপূর্ণ।
Motion, captions ও পড়ার নিয়ন্ত্রণ
Auto-playing carousel, parallax, bouncing banner ও scroll-এ হঠাৎ উড়ে আসা card মনোযোগ নষ্ট করতে পারে, কারও মাথা ঘুরতে পারে। অপ্রয়োজনীয় animation বাদ দিন; দরকার হলে Pause বা Motion off নিয়ন্ত্রণ দিন। prefers-reduced-motion সম্মান করুন:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
W3C-এর Animation from Interactions ব্যাখ্যা করে, preference বা control দিয়ে non-essential motion বন্ধ করা যায়; essential তথ্য বা কাজের animation-এর বিষয় আলাদা। কোনো সংবাদে স্বয়ংক্রিয়ভাবে moving ticker থাকলে Pause দিন, ফ্ল্যাশিং এড়িয়ে চলুন। ভিডিও autoplay হলে শব্দ বন্ধ ও দৃশ্যমান control রাখুন; audio-এর বিকল্প transcript এবং prerecorded synchronized captions দিন।
দ্রুত পরীক্ষা করার বাস্তব তালিকা
- ফোনে portrait ও landscape দুটিতে পেজ খুলুন। ২. browser zoom ২০০ শতাংশ করুন, তারপর আরও বড় text setting চালু করুন। ৩. ৩২০ CSS পিক্সেল-সমতুল্য সরু view-তে horizontal scroll আছে কি না দেখুন; ব্যতিক্রমী table বা map হলে তার ব্যবহার ব্যাখ্যা করুন। ৪. ইচ্ছা করে দীর্ঘ বাংলা শিরোনাম, ইংরেজি শব্দ, বড় সংখ্যা এবং error message বসান। ৫. কেবল keyboard দিয়ে Tab করে সব লিঙ্ক, menu, modal, form ও carousel ব্যবহার করুন; focus হারায় কি না দেখুন। ৬. ছবির alt সাময়িকভাবে পড়ে দেখুন, decorative ছবি skip হচ্ছে কি না যাচাই করুন। ৭. screen reader বা অন্তত accessibility tree দিয়ে heading, label, button name এবং error সম্পর্ক পরীক্ষা করুন। ৮. contrast tool-এ normal ও large text মাপুন। ৯.
prefers-reduced-motionচালু করে animation বন্ধ হচ্ছে কি না দেখুন। ১০. ধীর মোবাইল নেটওয়ার্কে ছবি, font, ভিডিও ও layout shift পরীক্ষা করুন।
প্রকাশের পরও উন্নতি করুন
Accessibility একবারের checkbox নয়। নতুন theme, বিজ্ঞাপন, plugin, popup, form field বা campaign banner যোগ হলে আগের ভারসাম্য ভাঙতে পারে। একটি ছোট checklist version control-এ রাখুন এবং release-এর আগে কয়েকটি বাস্তব device, browser zoom ও keyboard pass করুন। যাঁরা আপনার সাইট ব্যবহার করেন তাঁদের মধ্যে keyboard, screen reader, low vision বা motor limitation থাকা মানুষ থাকলে তাঁদের অভিজ্ঞতা শুনুন; কিন্তু কাউকে নিজের ব্যক্তিগত তথ্য প্রকাশে চাপ দেবেন না।
পরিমাপের dashboard থাকলে কেবল bounce rate বা device ভাগ নয়, support message, failed form, search query এবং কোন জায়গায় মানুষ আটকে যায় তা দেখুন। Accessibility tool-এর automated report সহায়ক, চূড়ান্ত প্রমাণ নয়; automated test অনেক context, ভাষা এবং keyboard সমস্যা ধরতে পারে না। এই গাইডের কৌশলগুলো WCAG-এর কিছু সাফল্য-মানদণ্ড বোঝার ও বাস্তবায়নের সহায়তা, আইনি পরামর্শ বা compliance guarantee নয়। আপনার দেশ, খাত, চুক্তি ও ব্যবহারকারীর প্রয়োজন অনুযায়ী বিশেষজ্ঞ মূল্যায়ন লাগতে পারে।
সবশেষে, mobile-first মানে ছোট স্ক্রিনকে কম গুরুত্বপূর্ণ ভাবা নয়; এটি কনটেন্টের অগ্রাধিকার পরিষ্কার করার সুযোগ। নমনীয় container, reflow হওয়া বাংলা লেখা, দৃশ্যমান focus, অর্থপূর্ণ heading, label ও error, সঠিক alt, contrast, captions এবং reduced-motion preference—এই ছোট সিদ্ধান্তগুলো একসঙ্গে সাইটকে বেশি মানুষের জন্য ব্যবহারযোগ্য করে। ডিভাইসের নাম অনুমান না করে কনটেন্টের প্রয়োজন দেখুন, নিয়মিত পরীক্ষা করুন, এবং মানুষকে zoom, keyboard ও পছন্দের সাহায্য-প্রযুক্তি ব্যবহার করার স্বাধীনতা দিন।
No comments:
Post a Comment