অ্যাক্সেসযোগ্য (Accessibility)

Estimated reading: 1 minute 12 views Contributors

সারাংশ: ওয়ার্ডপ্রেস থিম সকলের জন্য অ্যাক্সেসযোগ্য হওয়া উচিত, তাদের জন্যও যারা দেখতে বা মাউস ব্যবহার করতে পারেন না।

একটি অ্যাক্সেসযোগ্য থিম তৈরি করতে, আপনার HTML, CSS, এবং জাভাস্ক্রিপ্টের ওয়েব স্ট্যান্ডার্ড সম্পর্কে জ্ঞান থাকতে হবে। তাহলে ওয়েব অ্যাক্সেসযোগ্যতার সেরা অনুশীলন সম্পর্কেও অবহিত হবেন এবং ওয়েব কন্টেন্ট অ্যাক্সেসযোগ্যতা গাইডলাইন, WCAG সম্পর্কে বেসিক জ্ঞান থাকবে।

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

অ্যাক্সেসযোগ্যতা টিম তাদের হ্যান্ডবুকে ডেভেলপমেন্ট, ডিজাইন এবং কন্টেন্টের জন্য অনেক সেরা অনুশীলন এবং রিসোর্সগুলি ডকুমেন্টেড করেছে। হ্যান্ডবুকে, আপনি অ্যাক্সেসযোগ্যতার জন্য পরীক্ষা সম্পর্কেও শিখতে পারেন।

থিমস টিমের wordpress.org থিম ডিরেক্টরিতে জমা দেওয়া থিমগুলির জন্য দুটি সেট অ্যাক্সেসযোগ্যতা প্রয়োজনীয়তা রয়েছে:

সকল থিমের জন্য দরকার
“অ্যাক্সেসযোগ্যতা-প্রস্তুত” ট্যাগ ব্যবহারের জন্য দরকার

অ্যাক্সেসযোগ্যতার জন্য প্রস্তুত প্রয়োজনীয়তাগুলি WCAG-এর উপর ভিত্তি করে তবে ওয়ার্ডপ্রেস থিমের জন্য অভিযোজিত৷

ওয়েব অ্যাক্সেসযোগ্য করার চারটি মূলনীতি

যদিও ওয়েব অ্যাক্সেসিবিলিটি একটি জটিল বিষয় হতে পারে, তবে আসলে চারটি মূলনীতির উপর নির্ভর করে। কোনো ওয়েবসাইটের কন্টেন্ট অবশ্যই হতে হবে:

১. অনুধাবনযোগ্য – কন্টেন্ট সবার কাছেই অ্যাভেইলেবল হতে হবে। এটি নির্দিষ্ট ডিভাইস বা ব্রাউজারের উপর নির্ভর করবে না, বা দৃষ্টি বা শব্দ অনুভবের মতো নির্দিষ্ট শারীরিক অনুভূতির প্রয়োজন হবে না।

২. ম্যানেজেবল – ইউজাররা কীবোর্ড, মাউস বা সহায়ক প্রযুক্তি ব্যবহার করে চূড়ান্ত সাইটে ঘুরে বেড়াতে এবং কার্যকরভাবে ম্যানেজ করতে কার্যকর হবেন।

৩. বোধগম্য – কন্টেন্টটি এমনভাবে উপস্থাপন করা উচিত যাতে বোঝার সহায়তা করে, স্ক্রীন রিডার ইউজারদের জন্য সাইটের একটি মেন্টাল মডেল গঠন সহায়ক হয়। একইভাবে, সাইটের কার্যক্রম (নেভিগেশন মেনু, লিঙ্ক, ফর্ম ইত্যাদি) সহজেই বোধগম্য হওয়া উচিত। মূল কন্টেন্ট এরিয়ার মধ্যে লিঙ্কগুলিকে আন্ডারলাইন করা (underlining links) এর মতো পরিচিত ইউজারের আচরণ অন্তর্ভুক্ত করে একটি থিম তৈরি করা এই ক্ষেত্রে সহায়তা করে।

৪. শক্তিশালী – কন্টেন্টটি ইউজার এজেন্টের বিস্তৃত পরিসরে সমানভাবে অ্যাভেইলেবল হতে হবে। ডিজেবল ইউজাররা ওয়েব অ্যাক্সেস করার জন্য হার্ডওয়্যার এবং সফ্টওয়্যার সমাধানের (সাধারণত “সহায়ক প্রযুক্তি” হিসাবে উল্লেখ করা হয়) ব্যবহার করতে পারে – যার মধ্যে স্ক্রীন রিডিং এবং ভয়েস রিকগনিশন সফ্টওয়্যার, ব্রেইল রিডার এবং সুইচ (সিঙ্গেল ইনপুট ডিভাইস) অন্তর্ভুক্ত।

এই চারটি নীতিকে মাথায় রেখে ডিজাইন করা একটি থিম একটি অ্যাক্সেসযোগ্য ওয়েবসাইট তৈরিকে সহজ করে।

অনুধাবনযোগ্য এবং বোধগম্য

কালার এবং কালার কন্ট্রেস্ট

ব্যাকগ্রাউন্ড এবং ফোরগ্রাউন্ড কালারের মধ্যে পর্যাপ্ত উচ্চ কালারের কন্ট্রেস্ট থাকায় বিষয়বস্তু পড়া সহজতর হয়। থিম অথারদের অবশ্যই নিশ্চিত করতে হবে যে প্লেইন কন্টেন্ট টেক্সটের জন্য সমস্ত ব্যাকগ্রাউন্ড/ফোরগ্রাউন্ড কালারের কন্ট্রেস্ট ওয়েব কন্টেন্ট অ্যাক্সেসিবিলিটি গাইডলাইনস (WCAG) 2.0-এ কালারের ঔজ্জ্বল্যের জন্য নির্দিষ্ট লেভেল AA কন্ট্রেস্ট অনুপাত (4.5:1) এর মধ্যে রয়েছে।

কালার নিয়ন্ত্রণ, টেক্সটের বিষয়বস্তুর লিঙ্ক বা ত্রুটি বার্তাগুলি সনাক্ত করার একমাত্র উপায় নয়। যদি লিঙ্ক করা টেক্সটে কোনো টেক্সট ডেকোরেশন না থাকে, তবে অন্যান্য কালারের কন্ট্রেস্টের প্রয়োজনীয়তা ছাড়াও, লিঙ্ক টেক্সটের কালার এবং আশেপাশের লিঙ্কহীন টেক্সটের কালারের মধ্যে 3:1 কালারের কন্ট্রেস্ট থাকতে হবে। বিষয়বস্তুর লিঙ্কগুলির জন্য (অন্যান্য টেক্সট দ্বারা বেষ্টিত লিঙ্ক) এবং নেভিগেশন মেনুতে একত্রে গোষ্ঠীভুক্ত লিঙ্কগুলির জন্য আলাদা প্রয়োজনীয়তা রয়েছে৷ লিঙ্কের গোষ্ঠীগুলিকে আন্ডারলাইন করার প্রয়োজন নেই যদি প্রসঙ্গ থেকে স্পষ্ট হয় যে সেগুলি লিঙ্ক।

রিসাইজেবল টেক্সট

ইউজাররা ব্রাউজার সেটিংস সহ নানান উপায়ে টেক্সটের আকার পরিবর্তন করতে পারেন। ইউজাররা যদি টেক্সটকে অরিজিনাল সাইজের ২০০% পর্যন্ত বড় করে, তাহলেও সমস্ত বিষয়বস্তু এবং ফাংশনালিটি অ্যাভেইলেবল থাকতে হবে।

টেক্সটের সাইজের পরিবর্তনের ফলে মাল্টি-ডাইমেনশনাল স্ক্রোলিং চালু হওয়া উচিত নয় বড় করা টেক্সটের ফলে কোনো ওভারফ্লো বা ওভারল্যাপ হওয়া উচিত নয় এই সমস্যাগুলো এড়ানোর জন্য, নিম্নলিখিতগুলি করার সুপারিশ করা হয়:

ফন্টের সাইজ এবং লাইন হাইটের জন্য আপেক্ষিক একক ব্যবহার করুন, বিভিন্ন ব্রাউজার এবং স্ক্রিন উইডথে আপনার থিম পরীক্ষা করুন

ইমেজ

ডেকোরেটিভ ছাড়া ইমেজ

উদাহরণ:

হেডারের লেখা প্রতিস্থাপন করে এমন একটি হেডার ইমেজ
নেভিগেশনের জন্য টেক্সটের পরিবর্তে ব্যবহৃত ইমেজ

img এলিমেন্টের সাথে অন্তর্ভুক্ত ডেকোরেটিভ নয় এমন ইমেজগুলোর একটি alt অ্যাট্রিবিউট থাকা উচিত।

ডেকোরেটিভ ইমেজ

উদাহরণ:

হেডারের লেখার পাশাপাশি ব্যবহৃত হেডার ইমেজ
নেভিগেশন টেক্সট লিঙ্কের সাথে থাকা ইমেজ এবং আইকন

যখন সম্ভব, CSS ব্যবহার করে ডেকোরেশনের জন্য ব্যবহৃত ইমেজগুলো অন্তর্ভুক্ত করা উচিত।

img এলিমেন্টের সাথে অন্তর্ভুক্ত ডেকোরেশনের জন্য ব্যবহৃত ইমেজগুলোর একটি খালি alt অ্যাট্রিবিউট থাকা উচিত: alt=””।

টেক্সটের সাথে দেখানো ডেকোরেশনের জন্য ব্যবহৃত ইমেজগুলো স্ক্রিন রিডার থেকে aria-hidden ব্যবহার করে লুকানো উচিত।

ফিচারড ইমজ

মিডিয়া লাইব্রেরিতে ফিচারড ইমেজের জন্য alt অ্যাট্রিবিউট সংজ্ঞায়িত করা আছে।

যদি ফিচারড ইমেজটি লিঙ্ক করা না থাকে, তবে alt অ্যাট্রিবিউট ইমেজটির বর্ণনা দেওয়া উচিত
যদি ফিচারড ইমেজটি কোনো পোস্টের সাথে লিঙ্ক করা থাকে, তবে alt টেক্সট হিসেবে পোস্টের টাইটেল ব্যবহার করা উচিত

অপারেবল

কন্ট্রোল

সকল কন্ট্রোল অবশ্যই সকল স্ক্রিন সাইজে কিবোর্ডের মাধ্যমে ব্যবহারযোগ্য হতে হবে। এর মধ্যে মেনু ওপেন এবং ক্লোজ করার বাটন, সাবমেনু, যেকোনো ধরনের ডায়ালগ, মোডাল এবং পপআপ সহ আরও অন্যান্য নিয়ন্ত্রণ অন্তর্ভুক্ত।

হেডিংস

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

লিঙ্ক

লিঙ্কের টেক্সট

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

লিঙ্ক আন্ডারলাইন করা এবং লিঙ্কের স্টেটগুলা স্টাইল করা

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

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

স্কিপ লিঙ্ক

স্কিপ লিঙ্কগুলি এমন একটি প্রক্রিয়া প্রদান করে যা ইউজারদের যেকোনো পেজে প্রবেশ করার পরে সরাসরি বিষয়বস্তু বা নেভিগেশনে নেভিগেট করতে সক্ষম করে। উদাহরণস্বরূপ, একটি স্কিপ টু কন্টেন্ট লিঙ্ক ইউজারকে একটি হেডার এরিয়া এড়িয়ে সরাসরি মেইন কন্টেন্টে যেতে দেয়।

একাধিক মেনু এবং কন্টেন্ট এরিয়া সহ ডিজাইনগুলিতে, একাধিক স্কিপ লিঙ্ক ব্যবহার করা যেতে পারে:

Skip to the main navigation
Skip to content
Skip to footer

উপরের লিঙ্কগুলি প্রাথমিকভাবে একটি উপযুক্ত CSS কৌশল ব্যবহার করে অফ-স্ক্রিনে অবস্থান করা যেতে পারে তবে স্ক্রিন রিডার ইউজারদের জন্য অ্যাভেইলেবল থাকা উচিত এবং দৃষ্টিশক্তিসম্পন্ন কীবোর্ড নেভিগেটরদের জন্য ফোকাস করার সময় দৃশ্যমান হওয়া উচিত।

ফর্ম

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

ফর্ম জমা দেওয়ার পরে

পোস্ট-সাবমিশন প্রতিক্রিয়া – যে কোনও ত্রুটি বার্তা সহ – সর্বদা বোধগম্য হওয়া উচিত। যদি সম্ভব হয়, ত্রুটি বার্তাগুলি পোস্ট-সাবমিশন পেজের শীর্ষে তৈরি করা উচিত যাতে ইউজাররা অবিলম্বে কোন সমস্যা সম্পর্কে অবগত হয়। কন্তেক্সটের বাইরে পড়লে ত্রুটির বার্তাগুলিও অর্থপূর্ণ হওয়া উচিত।

রিবাস্ট

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

রিসোর্স

ওয়ার্ডপ্রেস অ্যাক্সেসিবিলিটি টিমের অফিসিয়াল ব্লগ হচ্ছে “Make WordPress Accessible,” যা ওয়ার্ডপ্রেস যতটা সম্ভব বেশি মানুষের কাছে অ্যাক্সেসযোগ্য করার উদ্দেশ্যে কাজ করে। যে কেউই ডিসকাশন, বাগ স্ক্রাব, এবং মিটিং এ যোগদান করতে পারেন। ইমেলের মাধ্যমে আলোচনা অনুসরণ করতে পারেন অথবা পোস্ট এবং কমেন্টের জন্য ফিড সাবস্ক্রাইব করতে পারেন।