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

Rachel Andrew

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

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

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

উৎস বনাম চাক্ষুষ ক্রম

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

ধরা যাক আপনি এই নেভিগেশন প্যাটার্নটি তৈরি করেছেন এবং তারপরে আমাদের সাথে যোগাযোগ করতে বলা হয়েছিল, যা উৎসের দ্বিতীয় স্থানে রয়েছে, শেষ পর্যন্ত। আপনি এটির অবস্থান সরাতে ফ্লেক্সবক্স 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 গ্রিডের উদাহরণ দেখায়। আপনি দেখতে পারেন কিভাবে ফোকাস লেআউটের চারপাশে লাফ দিতে হবে।

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

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

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