আপনার পেজকে সবার জন্য ব্যবহারযোগ্য করুন

একটি অ্যাক্সেসিবল পেজ সবাই ব্যবহার করতে পারেন: যাঁরা স্ক্রিন রিডার ব্যবহার করেন, যাঁদের দৃষ্টিশক্তি দুর্বল, যাঁরা স্ক্রিনে নড়াচড়া এড়িয়ে চলেন, অথবা যাঁরা নিছক রোদে দাঁড়িয়ে ফোন দেখছেন। LinkHarbor অনেক কিছু স্বয়ংক্রিয়ভাবে সামলায়; কিছু জিনিস আপনার হাতে। এই লেখাটি দেখায় কোন দিকে খেয়াল রাখবেন।

#LinkHarbor স্বয়ংক্রিয়ভাবে যা করে

• কোনো ভিজিটর তাঁর সিস্টেমে “Reduce motion” (গতি কমানো) চালু করে থাকলে ব্যাকগ্রাউন্ড ভিডিও চলে না, আর স্ক্রল ও প্যারালাক্স ইফেক্ট এবং হোভার অ্যানিমেশন বন্ধ থাকে
• “শিরোনাম” ব্লক একটি আসল শিরোনাম হিসেবে তৈরি হয়, যা স্ক্রিন রিডার দিক ঠিক করতে ব্যবহার করে
• “ইমেজ” আর “গ্যালারি” ব্লকের ছবিগুলো আপনার অল্ট টেক্সটকে বর্ণনা হিসেবে পায়
• বাটনের জন্য নিজে কোনো টেক্সটের রং বেছে না নিলে LinkHarbor বাটনের রঙের সাথে মানানসই একটি রং বেছে নেয়

#ছবির অল্ট টেক্সট

অল্ট টেক্সট বর্ণনা করে একটি ছবিতে কী দেখা যাচ্ছে। স্ক্রিন রিডার এটি পড়ে শোনায়, আর ছবি লোড না হলে এটি দেখা যায়।

“ইমেজ” ব্লক

ব্লক এডিটরে “বিকল্প টেক্সট” ফিল্ড।

“গ্যালারি” ব্লক

প্রতিটি ছবির জন্য সর্বোচ্চ ২০০ অক্ষরের একটি “বিকল্প টেক্সট”।

• ফাইল নয়, কনটেন্ট বর্ণনা করুন: “IMG_2041”-এর বদলে “কাঠের টেবিলে লাতে আর্টসহ ক্যাপুচিনো”
• লেখাসহ ছবির ক্ষেত্রে লেখাটি অল্ট টেক্সটে রাখুন
• সংক্ষেপে রাখুন – সাধারণত একটি বাক্যই যথেষ্ট

ফিল্ডগুলো কোথায় পাবেন তা বিনামূল্যের ব্লকগুলো বিস্তারিত আর কনটেন্ট ব্লক-এ ব্যাখ্যা করা আছে।

#শিরোনাম দিয়ে কাঠামো

লম্বা পেজ বড় টেক্সট দিয়ে নয়, “শিরোনাম” ব্লক দিয়ে ভাগ করুন। স্ক্রিন রিডার ব্যবহারকারীরা এক শিরোনাম থেকে আরেক শিরোনামে লাফিয়ে যান এবং এভাবে দ্রুত যা খুঁজছেন তা পান – যেমন “খোলার সময়” বা “কন্টাক্ট”।

#স্পষ্ট লিংক শিরোনাম

• প্রতিটি লিংক নিজে থেকেই অর্থবোধক হওয়া উচিত: “এখানে ক্লিক করুন”-এর বদলে “PDF হিসেবে মেনু”
• ভিন্ন ভিন্ন গন্তব্যের জন্য একই শিরোনাম এড়িয়ে চলুন
• শিরোনামের শুরুতে ইমোজি পড়ে শোনানো হয়; সংযমের সাথে ব্যবহার করুন

লিংক নিয়ে আরও আছে লিংক যোগ ও সাজানো-এ।

#কনট্রাস্ট আর পাঠযোগ্যতা

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

রং, ব্যাকগ্রাউন্ড আর ফন্ট থিমে ঠিক করেন, দেখুন ডিজাইন।

#কাস্টম CSS সাবধানে ব্যবহার করুন

কাস্টম CSS দিয়ে প্রায় সবকিছু বদলানো যায় – অ্যাক্সেসিবিলিটির জন্য গুরুত্বপূর্ণ জিনিসও। ফোকাস আউটলাইন লুকাবেন না, টেক্সট খুব ছোট করবেন না, আর পরিবর্তনের পর কিবোর্ড দিয়েও পেজটি পরীক্ষা করুন। দেখুন কাস্টম CSS।

#নিজে পরীক্ষা করুন

1. আপনার ফোনে স্ক্রিন রিডার চালু করুন (iPhone-এ VoiceOver, Android-এ TalkBack) এবং আপনার পেজ শুনুন
2. সিস্টেম সেটিংসে টেক্সটের আকার বাড়িয়ে দেখুন সবকিছু পড়া যায় কি না
3. উজ্জ্বল আলোতে আর ডার্ক মোডে পেজটি দেখুন