Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Accessibility

এনভেটোতে যেভাবে আমরা এক্সেসিবিলিটি পরীক্ষা করি (টুলস এবং টিপস)

by
Length:ShortLanguages:

Bengali (বাংলা) translation by Shakila Humaira (you can also view the original English article)

একটি এক্সেসিবল বা সর্বজন প্রবেশযোগ্য ওয়েবসাইট তৈরি করা-বা আগের কোনও ওয়েবসাইটকে এক্সেসিবল বানানো বেশ কঠিন ও চ্যালেঞ্জিং একটি কাজ।  একজন প্রতিবন্ধী যেমন কম দৃষ্টি শক্তির মানুষ কিভাবে একটি ওয়েবসাইট ব্যবহার করতে পারে তা বুঝতে পারা বেশ অদ্ভুত একটি প্রক্রিয়া। স্বাভাবিকভাবেই আমাদের ওয়েবসাইট সম্পূর্ণভাবে সবার জন্য প্রবেশযোগ্য বা এক্সেসিবল কিনা তা নিয়ে পরিপূর্ণ সন্তুষ্ট হওয়ার অবকাশ নেই।

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

গুগল লাইটহাউস

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

অনলাইন ইন্টারফেস বা ক্রোম ভেভেলপার টুলসের মাধ্যমে লাইটহাউস চালানো যায়। লাইট হাউস ব্যবহার করার একটি উল্লেখযোগ্য সুবিধা হচ্ছে গুগল আমাদের সাইটের জন্য কি ধরণের এক্সেসিবিলিটি থাকা প্রয়োজন তা সঠিকভাবে জানার সুযোগ করে দেয়।

ক্রোম ডেভেলপার টুলসের মাধ্যমে লাইটহাউস অ্যাক্সেস করতে:

  1. ক্রোম খুলুন।
  2. CMD + Shift + C একসঙ্গে চেপে ডেভেলপার টুলস খুলুন।
  3. Audits ট্যাবে ক্লিক করুন।
  4. Accessibility সিলেক্ট হয়েছে কিনা তা নিশ্চিত হউন।
  5. Run audits এ ক্লিক করুন।
Running Lighthouse via the Chrome developer tools
ক্রোম ডেভেলপার টুলসে লাইটহাউস চলছে।

চালু হওয়ার পর, আমরা সাইটের কোন কোন ক্ষেত্রে আরও এক্সেসিবিলিটি আরও উন্নত করতে হবে সে ব্যাপারটি আরও ভালোভাবে খতিয়ে দেখতে পারবো। 

Lighthouse results for ThemeForest search page
থিমফরেস্ট সার্চ পেইজের জন্য লাইটহাউসের ফলাফল।

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

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

Pa11y

Envato-তে আমাদের ব্যবহার করা আরেকটি চমৎকার টুল pa11y (এক্সিসিবিলিটির সংক্ষিপ্ত রূপ “a11y” দিয়ে যার নামকরণ করা হয়েছে) Pa11y দিয়ে আমরা পূর্ব নির্ধারিত এক্সিসিবিলিটি স্পেসিফিকেশন লেভেল-সেকশন ৫০৮, WCAG 2.0 A, AA অথবা AAA সেট করে সেই অনুযায়ী একটি ওয়েবপেইজকে টেস্ট করতে পারি।

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

Pa11y results page
pa11y এর ফলাফল

এনভেটোতে সাবমিট করা প্রতিটি নতুন কোডের ক্ষেত্রেই স্বয়ংক্রিয়ভাবে pa11y-ci ব্যবহার করে pa11y পরীক্ষা করা হয়। এছাড়াও ডেক্সটপ এপ্লিকেশন  Koa11y ব্যবহার করেও pa11y পরীক্ষা করা যায়।

Koa11y interface
Koa11y ইন্টারফেস

ফায়ারফক্স ডেভেলপার টুলস

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

ফায়ারফক্সে এক্সেসিবিলিটি ইন্সপেক্টর চালু করার জন্য:

  1. ফায়ারফক্স খুলুন।
  2. CMD + Shift + C  একত্রে চেপে ডেভেলপার টুলস ওপেন করুন।
  3. ডেভেলপার কনসোলের উপরের ডানদিক থেকে তিনটি ডট চিহ্নযুক্ত আইকনে ক্লিক করুন।
  4. Accessibility লেখা বক্সটি সিলেক্ট করুন
Enabling the accessibility panel in Firefox developer tools
ফায়ারফক্স ডেভেলপার টুলসে এক্সেসিবিলিটি প্যানেল চালু করা।

চালু হওয়ার পর একটি এক্সেসিবিলিটি ট্যাব দেখা যাবে। এটা আমাদেরকে স্ক্রিনরিডার কিভাবে পড়বে সে বিষয়টি দেখার সুবিধা প্রদান করবে।

Firefox accessibility inspector
ফায়ারফক্স এক্সেসিবিলিটি ইন্সপেক্টর

aria-role এর তালিকা বামদিকে আছে, এই ক্ষেত্রে এটা sectionlink অথবা graphic হবে। প্রত্যেকটি উপাদানের নাম থাকা আবশ্যক নয়, কিন্তু এট্রিবিউটের মাধ্যমে কোনও ব্যবহারকারীকে দিকনির্দেশনা প্রদান করা যায়-আমরা কোনও নাম লেখা, ইমেজ অল্টার alt ট্যাগ, অথবা aria-label এট্রিবিউট উপস্থিত থাকলেই কেবল ব্যবহার করতে পারি। এছাড়াও আমরা যেকোনো রোলের উপর মাউস নিয়ে গেলে মার্কআপের ভিতর ফায়ারফক্স সংশ্লিষ্ট এলিমেন্টটিকে হাইলাইট করবে। 

এই ট্রি টা ব্রাউজ করে আপনি বুঝতে পারবেন কন্টেন্ট থেকে মনোযোগ না সরিয়ে আপনার ওয়েবসাইটটি দেখতে কেমন দেখাবে। এটা আমাদের ব্যবহারকারীদের কাছে নতুন কোনও বৈশিষ্ট্য বা ফিচার দৃশ্যমান করলে কেমন দেখাবে তা বোঝার একটি চমৎকার উপায়।

কোড রিভিশন দেয়া

কোড লেখার সময় কোড লিন্টিংয়ের মাধ্যমে আমরা আমাদের আরেক স্তরের চেক সম্পন্ন করি। লিন্টিংয়ের মাধ্যমে কোন কোডগুলো প্রবেশযোগ্য বা এক্সেসিবল না সে সম্পর্কে আমরা স্বয়ংক্রিয় সতর্কবার্তা পেয়ে থাকি।  আমরা আমাদের টাইপস্ক্রিপ্ট লিন্ট করার জন্য মাইক্রোসফটের একটি সাবসেট টাইপস্ক্রিপ্ট লিন্টিং টুল ব্যবহার করে থাকি। এছাড়াও আমরা জাভাস্ক্রিপ্ট লিন্ট করার জন্য eslint-plugin-jsx-a11y প্যাকেজ ব্যবহার করে থাকি। 

উদাহরণস্বরূপ, আমি যদি নিন্মোক্ত ইমেজে alt ট্যাগ যুক্ত করতে ভুলে যাই, তাহলে একটি লিণ্টার আমাকে সতর্ক করে দিতে পারে:

আরেকটি উদাহরণ হচ্ছে এমন উপাদান যুক্ত করলে সতর্ক করা যা একজন স্ক্রিনরিডার ব্যবহারকারীর মনোযোগ সরিয়ে দিতে পারে:

লিন্টিং আমাদেরকে কোনও ওয়েবপেইজ চুড়ান্তভাবে যথাসম্ভব এক্সেসিবল করার জন্য দ্রুত কিছু পরিবর্তন করার বিষয়ে ফিডব্যাক প্রদান করে।

ব্রাউজার এক্সটেনশনসমূহ

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

স্পেকট্রাম

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

ThemeForest home page as seen by someone with Achromatopsia
একজন এক্রোমেটপসিয়া আক্রান্ত রোগী থিমফরেস্ট হোমপেইজটি যেমন দেখে থাকে।

ডার্ক ব্যাকগ্রাউন্ড এন্ড লাইট টেক্সট

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

ThemeForest homepage seen in inverse color
বিপরীত রঙ্গে থিমফরেস্ট হোমপেইজ দেখা যাচ্ছে।

ম্যাক ওএসএক্স ভয়েসওভার

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

CMD + F5 দিয়ে ভয়েসওভার চালু করুন। চালু হয়ে গেলে, নিচের সেটিংসে গেলে বেশ কিছু সুবিধাজনক ফাংশন চালু করতে পারবেন:

  • System Preferences > Accessibility > Speech > Speak selected text when the key is pressed
  • System Preferences > Accessibility > Zoom > Speak text under cursor

পরিশিষ্ট

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

এক্সেসিবিলিটি সম্পর্কে আরও জানুন

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.