বিষয়বস্তু পুনর্বিন্যাস

Rachel Andrew

আপনার সাইটের অ্যাক্সেসযোগ্যতার জন্য আপনার ডকুমেন্টের কন্টেন্টের ক্রম গুরুত্বপূর্ণ। একজন স্ক্রিন রিডার ডকুমেন্টের ক্রমের উপর ভিত্তি করে কন্টেন্ট পড়ে শোনান, HTML উপাদান ব্যবহার করে সেই কন্টেন্টকে অতিরিক্ত অর্থ প্রদান করেন।

একজন ব্যক্তি টাচস্ক্রিন বা মাউসের পরিবর্তে কীবোর্ড দিয়ে সাইটটি নেভিগেট করেন, ডকুমেন্টের চারপাশে ট্যাব করেন। তারা ডকুমেন্টে থাকা উপাদানগুলির ক্রম অনুসারে লিঙ্ক এবং ফর্ম ফিল্ডের মধ্যে ট্যাবিং করে, একটি সক্রিয় উপাদান থেকে অন্য সক্রিয় উপাদানে লাফিয়ে যান।

অতএব, একটি সুগঠিত ডকুমেন্ট দিয়ে শুরু করা এবং সঠিক HTML উপাদান ব্যবহার করা একটি অ্যাক্সেসযোগ্য সাইট তৈরির একটি গুরুত্বপূর্ণ অংশ। তবে, CSS ব্যবহার শুরু করলে সেই ভালো কাজটি কিছুটা পূর্বাবস্থায় ফেরানো সম্ভব।

উৎস বনাম দৃশ্য ক্রম

ওয়েবসাইট নেভিগেশন প্রায়শই লিঙ্কের তালিকা হিসাবে চিহ্নিত করা হয়। আপনি এগুলিকে একটি অনুভূমিক বারে রূপান্তর করতে Flexbox ব্যবহার করতে পারেন। নিম্নলিখিত উদাহরণে, আমি এই সাধারণভাবে ব্যবহৃত প্যাটার্নটি তৈরি করেছি। উদাহরণে ক্লিক করুন এবং লিঙ্কগুলির মধ্যে ট্যাব করুন। ফোকাসটি বাম থেকে ডানে একটি যৌক্তিক দিকে সরে যায়, যে ক্রমটি আমরা ইংরেজিতে পড়ি।

ধরুন আপনি এই নেভিগেশন প্যাটার্নটি তৈরি করেছেন এবং তারপর আপনাকে Contact Us , যা উৎসের দ্বিতীয় স্থানে রয়েছে, শেষ পর্যন্ত সরাতে বলা হয়েছে। আপনি এর অবস্থান সরাতে Flexbox order প্রপার্টি ব্যবহার করতে পারেন।

পরবর্তী উদাহরণে আইটেমগুলি ট্যাব করার চেষ্টা করুন, যা আইটেমগুলিকে পুনর্বিন্যাস করতে order বৈশিষ্ট্য ব্যবহার করে।

ফোকাসটি শেষ আইটেমে চলে যায় এবং তারপর আবার ফিরে আসে। ট্যাব অর্ডারের ক্ষেত্রে, সেই আইটেমটি দ্বিতীয় আইটেম। তবে দৃশ্যত, এটি শেষ আইটেম।

এই উদাহরণটি CSS ব্যবহার করে কন্টেন্ট পুনর্বিন্যাস এবং পুনর্বিন্যাস করলে আমাদের যে সমস্যার সম্মুখীন হতে হয় তা তুলে ধরে। এই সমস্যার সঠিক সমাধান হল CSS ব্যবহার করে সেই পরিবর্তন অনুকরণ করার পরিবর্তে উৎসের লিঙ্কগুলির ক্রম পরিবর্তন করা।

কোন CSS বৈশিষ্ট্যগুলি পুনর্বিন্যাসের কারণ হতে পারে?

যেকোনো লেআউট পদ্ধতি যা আপনাকে উপাদানগুলিকে এদিক-ওদিক সরাতে সাহায্য করে, তা এই সমস্যার কারণ হতে পারে। নিম্নলিখিত CSS বৈশিষ্ট্যগুলি সাধারণত কন্টেন্ট পুনর্বিন্যাসের সমস্যার কারণ হয়:

• position: absolute এবং দৃশ্যত একটি বস্তুকে প্রবাহের বাইরে নিয়ে যাওয়া।
• ফ্লেক্সবক্স এবং গ্রিড লেআউটে order প্রপার্টি।
• ফ্লেক্সবক্সে flex-direction জন্য row-reverse এবং column-reverse মান।
• গ্রিড লেআউটে grid-auto-flow জন্য dense মান।
• লাইনের নাম বা সংখ্যা অনুসারে, অথবা গ্রিড লেআউটে grid-template-areas সহ যেকোনো অবস্থান।

পরবর্তী উদাহরণে, আমি CSS গ্রিড ব্যবহার করে একটি লেআউট তৈরি করেছি এবং লাইন নম্বর ব্যবহার করে আইটেমগুলিকে অবস্থান করেছি, উৎসে সেগুলি কোথায় আছে তা বিবেচনা না করে।

এই উদাহরণটি ঘুরে দেখুন, এবং দেখুন ফোকাস কীভাবে এদিক-ওদিক ঘুরে যায়। এটি একটি খুব বিভ্রান্তিকর অভিজ্ঞতা তৈরি করে, বিশেষ করে যদি এটি একটি দীর্ঘ পৃষ্ঠা হয়।

সমস্যার জন্য পরীক্ষা করা হচ্ছে

একটি দ্রুত পরীক্ষা হল আপনার পৃষ্ঠাটি কীবোর্ড দিয়ে নেভিগেট করা। আপনি কি সবকিছুতে পৌঁছাতে পারেন? এটি করার সময় কি কোনও অদ্ভুত লাফ দেওয়া হয়?

কন্টেন্ট পুনর্বিন্যাসের একটি দৃশ্যমান প্রদর্শনের জন্য, Chrome এক্সটেনশন, অ্যাক্সেসিবিলিটি ইনসাইটস -এ ট্যাব স্টপ চেকার ব্যবহার করে দেখুন। স্ক্রিনশটটি সেই টুলে CSS গ্রিডের উদাহরণ দেখায়। আপনি দেখতে পাবেন কিভাবে ফোকাসকে লেআউটের চারপাশে লাফিয়ে যেতে হয়।

কন্টেন্ট পুনর্বিন্যাস এবং প্রতিক্রিয়াশীল ওয়েব ডিজাইন

যদি আপনার কন্টেন্টের একটি মাত্র উপস্থাপনা থাকে, তাহলে আপনার এমন একটি যৌক্তিকভাবে সাজানো উৎস বজায় রাখতে সক্ষম হওয়া উচিত যা লেআউটটি প্রতিফলিত করে। বিভিন্ন ব্রেকপয়েন্টে লেআউটটি বিবেচনা করলে এটি আরও কঠিন হতে পারে। উদাহরণস্বরূপ, ছোট স্ক্রিনে লেআউটের নীচে একটি উপাদান সরানো যুক্তিসঙ্গত হতে পারে।

এই মুহূর্তে, সেই নির্দিষ্ট সমস্যার জন্য কোনও ভালো সমাধান নেই। বেশিরভাগ পরিস্থিতিতে, মোবাইল-ফার্স্ট ডেভেলপ করা আপনার উৎস এবং লেআউটকে ক্রমানুসারে রাখতে সাহায্য করতে পারে। মোবাইলের জন্য সঠিক অগ্রাধিকার প্রায়শই আপনার সামগ্রীর জন্য সঠিক। মূল বিষয় হল কখন সামগ্রী পুনর্বিন্যাসের সম্ভাবনা রয়েছে তা জানা। প্রতিটি ব্রেকপয়েন্টে শেষ অভিজ্ঞতা খুব বেশি বিরক্তিকর না হয় তা নিশ্চিত করার জন্য পরীক্ষা করুন।