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

রাচেল অ্যান্ড্রু

আপনার নথিতে বিষয়বস্তুর ক্রম আপনার সাইটের অ্যাক্সেসযোগ্যতার জন্য গুরুত্বপূর্ণ। একটি স্ক্রিন রিডার ডকুমেন্ট অর্ডারের উপর ভিত্তি করে বিষয়বস্তু পড়বে, সেই বিষয়বস্তুকে অর্থ দেওয়ার জন্য আপনি যে HTML উপাদান নির্বাচন করেছেন তা ব্যবহার করে। একটি টাচস্ক্রিন বা মাউসের পরিবর্তে একটি কীবোর্ড ব্যবহার করে সাইট নেভিগেট করা একজন ব্যক্তি নথির চারপাশে ট্যাব করবে৷ এর মানে হল যে তারা সক্রিয় উপাদান থেকে সক্রিয় উপাদানে ঝাঁপিয়ে পড়বে, লিঙ্ক এবং ফর্ম ক্ষেত্রগুলির মধ্যে ট্যাবিং করবে, আবার ডকুমেন্টে যে ক্রমে তারা বিদ্যমান থাকবে সেভাবে।

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

উৎস বনাম ভিজ্যুয়াল অর্ডার

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

আপনি যদি এই ধরণের প্যাটার্ন তৈরি করে থাকেন এবং তারপরে আমাদের সাথে যোগাযোগ করতে বলা হয়, যা উৎসের দ্বিতীয় স্থানে, শেষ পর্যন্ত। আপনি order সম্পত্তি ব্যবহার করতে পারেন যা ফ্লেক্সবক্সে কাজ করে। নীচের উদাহরণে আইটেমগুলির মাধ্যমে ট্যাব করার চেষ্টা করুন, যা আইটেমগুলিকে পুনরায় সাজানোর জন্য order সম্পত্তি ব্যবহার করেছে৷

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

উপরের উদাহরণটি হাইলাইট করে যে আমরা যদি CSS ব্যবহার করে বিষয়বস্তু পুনর্বিন্যাস এবং পুনর্বিন্যাস করি তাহলে আমরা যে সমস্যার মুখোমুখি হই। আপনি যদি এই সমস্যাটি মোকাবেলা করেন তবে সিএসএস ব্যবহার না করে উৎসের ক্রম পরিবর্তন করা সঠিক কাজ হবে।

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

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

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

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

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

সমস্যা জন্য পরীক্ষা

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

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

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

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

এই সময়ে এই সমস্যার জন্য একটি ভাল সমাধান নেই. বেশিরভাগ পরিস্থিতিতে "মোবাইল ফার্স্ট" বিকাশ করা আপনাকে আপনার উত্স এবং বিন্যাসকে ক্রমানুসারে রাখতে সাহায্য করবে৷ আপনি মোবাইলে অগ্রাধিকারের বিষয়ে যে পছন্দগুলি করেন, সেগুলি প্রায়শই সাধারণ বিষয়বস্তুর জন্য দৃঢ় হয়৷ এই ধরনের বিষয়বস্তু পুনর্বিন্যাস করার সম্ভাবনা থাকলে সচেতন হওয়া এবং প্রতিটি ব্রেকপয়েন্টে শেষ অভিজ্ঞতাটি খুব বেশি ঝাঁকুনিপূর্ণ নয় তা পরীক্ষা করা গুরুত্বপূর্ণ।