দলগুলির জন্য অ্যাক্সেসযোগ্যতা

কিভাবে আপনার দলের প্রক্রিয়ায় অ্যাক্সেসযোগ্যতা অন্তর্ভুক্ত করবেন।

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

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

প্রকল্প ব্যবস্থাপক

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

  • টিমের কাছে অ্যাক্সেসযোগ্যতার প্রশিক্ষণের ব্যবস্থা করুন।
  • সাইট বা অ্যাপ্লিকেশনে ব্যবহারকারীর সমালোচনামূলক যাত্রা সনাক্ত করুন।
  • টিম প্রক্রিয়ায় একটি অ্যাক্সেসিবিলিটি চেকলিস্ট অন্তর্ভুক্ত করার চেষ্টা করুন।
  • যেখানে সম্ভব, ব্যবহারকারী অধ্যয়ন সহ সাইট বা অ্যাপ্লিকেশন মূল্যায়ন করুন।

অ্যাক্সেসিবিলিটি প্রশিক্ষণ

ওয়েব অ্যাক্সেসিবিলিটি সম্পর্কে শেখার জন্য অনেকগুলি বিনামূল্যের সংস্থান রয়েছে৷ বিষয় অধ্যয়ন করার জন্য আপনার দলের জন্য সময় আলাদা করা প্রক্রিয়ার প্রথম দিকে অ্যাক্সেসযোগ্যতা অন্তর্ভুক্ত করা সহজ করে তুলতে পারে।

Google দ্বারা প্রদত্ত কিছু সংস্থান অন্তর্ভুক্ত:

Google দ্বারা ওয়েব অ্যাক্সেসিবিলিটি — একটি বহু-সপ্তাহের ইন্টারেক্টিভ প্রশিক্ষণ কোর্স।

অ্যাক্সেসিবিলিটি ফান্ডামেন্টালস - লিখিত অ্যাক্সেসিবিলিটি গাইড এবং সেরা অনুশীলন।

উপাদান নির্দেশিকা: অ্যাক্সেসযোগ্যতা — অন্তর্ভুক্ত ডিজাইনের জন্য UX সেরা অনুশীলনের একটি সেট।

সমালোচনামূলক ব্যবহারকারীর যাত্রা চিহ্নিত করা

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

প্রাথমিক ব্যবহারকারীর যাত্রা: একজন ব্যবহারকারী তাদের শপিং কার্টে একটি আইটেম যোগ করতে পারেন।

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

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

একটি অ্যাক্সেসিবিলিটি চেকলিস্ট অন্তর্ভুক্ত করা

অ্যাক্সেসযোগ্যতার বিষয়টি বেশ বিস্তৃত, তাই বিবেচনা করার জন্য গুরুত্বপূর্ণ ক্ষেত্রগুলির একটি চেকলিস্ট থাকা আপনাকে নিশ্চিত করতে সাহায্য করতে পারে যে আপনি আপনার সমস্ত ঘাঁটি কভার করছেন।

সেখানে বেশ কয়েকটি অ্যাক্সেসিবিলিটি চেকলিস্ট রয়েছে, কয়েকটি শিল্প উদাহরণের মধ্যে রয়েছে:

WebAIM WCAG চেকলিস্ট ভক্স অ্যাক্সেসিবিলিটি নির্দেশিকা

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

সারি হিসাবে প্রাথমিক ব্যবহারের ক্ষেত্রে এবং কলাম হিসাবে চেকলিস্ট আইটেম সহ একটি টেবিল।

ব্যবহারকারী অধ্যয়ন সঙ্গে মূল্যায়ন

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

যতটা সম্ভব বিভিন্ন ব্যবহারকারী জনসংখ্যার প্রতিক্রিয়া অন্তর্ভুক্ত করার লক্ষ্য রাখুন। ব্যবহারকারীদের বিবেচনা করুন যারা প্রাথমিকভাবে কীবোর্ড দিয়ে নেভিগেট করেন বা স্ক্রিন রিডার বা স্ক্রিন ম্যাগনিফায়ারের মতো সহায়ক প্রযুক্তির উপর নির্ভর করেন।

ইউএক্স ডিজাইনার

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

  • কন্টেন্টে পর্যাপ্ত রঙের বৈসাদৃশ্য রয়েছে।
  • ট্যাব ক্রম সংজ্ঞায়িত করা হয়.
  • নিয়ন্ত্রণগুলিতে অ্যাক্সেসযোগ্য লেবেল রয়েছে৷
  • UI এর সাথে ইন্টারঅ্যাক্ট করার একাধিক উপায় রয়েছে।

কন্টেন্টে ভালো রঙের বৈসাদৃশ্য রয়েছে

বেশিরভাগ সাইটের প্রাথমিক লক্ষ্য হল ব্যবহারকারীর কাছে লিখিত পাঠ্য বা চিত্রের মাধ্যমে কিছু তথ্য পৌঁছে দেওয়া। যাইহোক, যদি এই বিষয়বস্তু কম কনট্রাস্ট হয়, তবে কিছু ব্যবহারকারীদের (বিশেষ করে যাদের দৃষ্টি প্রতিবন্ধকতা আছে) তাদের পক্ষে পড়তে অসুবিধা হতে পারে। এটি তাদের ব্যবহারকারীর অভিজ্ঞতাকে নেতিবাচকভাবে প্রভাবিত করতে পারে। এই উদ্বেগ মোকাবেলা করার জন্য, সমস্ত পাঠ্য এবং চিত্রের জন্য পর্যাপ্ত রঙের বৈসাদৃশ্য রয়েছে তা লক্ষ্য করুন।

ফোরগ্রাউন্ড এবং ব্যাকগ্রাউন্ডের রঙের উজ্জ্বলতা তুলনা করে বৈসাদৃশ্য পরিমাপ করা হয়। ছোট টেক্সটের জন্য (18pt বা 14pt বোল্ডের নিচের যেকোনো কিছু) 4.5:1 এর ন্যূনতম অনুপাত বাঞ্ছনীয়। বড় পাঠ্যের জন্য, এই অনুপাতটি 3:1 এ সামঞ্জস্য করা যেতে পারে।

নীচের ছবিতে, বাম দিকের টেক্সট এই বৈসাদৃশ্য ন্যূনতম পূরণ করে, যেখানে ডান দিকের টেক্সট কম কনট্রাস্ট।

পাশাপাশি টেক্সট নমুনা. একটি যথেষ্ট বৈসাদৃশ্য, একটি কম বৈসাদৃশ্য।

রঙের বৈসাদৃশ্য পরিমাপের জন্য অনেকগুলি সরঞ্জাম রয়েছে, যেমন Google এর উপাদান রঙের টুল , Lea Verou-এর কনট্রাস্ট রেশিও অ্যাপ , এবং Deque's ax

ট্যাব ক্রম সংজ্ঞায়িত করা হয়

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

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

নম্বরযুক্ত ইন্টারেক্টিভ কন্ট্রোল সহ একটি ডিজাইন কম্প।

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

নিয়ন্ত্রণগুলিতে অ্যাক্সেসযোগ্য লেবেল রয়েছে৷

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

অ্যাক্সেসযোগ্য লেবেল ডিজাইন করার সময় অনুসরণ করার জন্য এখানে কয়েকটি সহজ পরামর্শ রয়েছে:

  • সংক্ষিপ্ত হোন - দীর্ঘ বর্ণনা শুনতে ক্লান্তিকর হতে পারে।
  • কন্ট্রোল টাইপ বা স্টেট অন্তর্ভুক্ত না করার চেষ্টা করুন - যদি কন্ট্রোলটি সঠিকভাবে কোড করা হয় তাহলে একটি স্ক্রিন রিডার স্বয়ংক্রিয়ভাবে এটি ঘোষণা করবে।
  • কর্ম ক্রিয়াপদের উপর ফোকাস করুন - "অনুসন্ধান" ব্যবহার করুন "ম্যাগনিফাইং গ্লাস" নয়।
তাদের অ্যাক্সেসযোগ্য লেবেল দ্বারা চিহ্নিত নিয়ন্ত্রণ সহ একটি ডিজাইন কম্প.

আপনি আপনার সমস্ত নিয়ন্ত্রণ লেবেল দিয়ে একটি উপহাস তৈরি করতে বিবেচনা করতে পারেন। এটি বাস্তবায়ন এবং পরীক্ষার জন্য আপনার ডেভেলপমেন্ট টিম এবং QA টিমের সাথে শেয়ার করা যেতে পারে।

UI এর সাথে ইন্টারঅ্যাক্ট করার এবং বোঝার একাধিক উপায়

এটা অনুমান করা সহজ যে সমস্ত ব্যবহারকারীরা প্রাথমিকভাবে একটি মাউস ব্যবহার করে পৃষ্ঠাটির সাথে ইন্টারঅ্যাক্ট করে। ডিজাইন করার সময়, বিবেচনা করুন কিভাবে কেউ একটি কীবোর্ড ব্যবহার করে নিয়ন্ত্রণের সাথে ইন্টারঅ্যাক্ট করবে।

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

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

বিকাশকারী

বিকাশকারীর ভূমিকা হল যেখানে ফোকাস পরিচালনা এবং শব্দার্থবিদ্যা একত্রিত হয়ে একটি শক্তিশালী ব্যবহারকারীর অভিজ্ঞতা তৈরি করে। নীচে কিছু আইটেম রয়েছে যা একজন বিকাশকারীরা তাদের সাইটে বা অ্যাপ্লিকেশনে কাজ করার সময় মনে রাখতে পারেন:

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

লজিক্যাল ট্যাব অর্ডার

নেটিভ উপাদান যেমন input , button , এবং select ট্যাব অর্ডারে বিনামূল্যের জন্য বেছে নিন এবং কীবোর্ডের সাথে স্বয়ংক্রিয়ভাবে ফোকাসযোগ্য। কিন্তু সব উপাদান এই একই আচরণ পায় না! বিশেষ করে, div , এবং span এর মত জেনেরিক উপাদানগুলি ট্যাব অর্ডারে অপ্ট করা হয় না৷ এর অর্থ হল আপনি যদি একটি ইন্টারেক্টিভ নিয়ন্ত্রণ তৈরি করতে একটি div ব্যবহার করেন তবে এটি কীবোর্ড অ্যাক্সেসযোগ্য করার জন্য আপনাকে অতিরিক্ত কাজ করতে হবে।

দুটি বিকল্প হল:

  • নিয়ন্ত্রণ একটি tabindex="0" দিন। এটি অন্তত এটিকে ফোকাসযোগ্য করে তুলবে, যদিও কীপ্রেসের জন্য সমর্থন যোগ করার জন্য আপনাকে সম্ভবত অতিরিক্ত কাজ করতে হবে।
  • যেখানে সম্ভব, কোনো বোতামের মতো নিয়ন্ত্রণের জন্য div বা span পরিবর্তে একটি button ব্যবহার করার কথা বিবেচনা করুন। নেটিভ button উপাদানটি স্টাইল করা খুব সহজ এবং বিনামূল্যে কীবোর্ড সমর্থন পায়।

ফোকাস পরিচালনা

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

ইন্টারেক্টিভ উপাদানগুলির জন্য কীবোর্ড সমর্থন

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

কিভাবে একটি রেডিও গ্রুপ তৈরি করতে হয় তা ব্যাখ্যা করে ARIA অথরিং প্র্যাকটিস গাইড থেকে একটি উদ্ধৃতি।

একটি উপাদানে কীবোর্ড সমর্থন যোগ করার বিষয়ে আরও জানতে, Google-এর অ্যাক্সেসিবিলিটি ফান্ডামেন্টাল ডক্সে রোভিং ট্যাবিনডেক্স বিভাগটি দেখুন।

ARIA ভূমিকা এবং বৈশিষ্ট্য প্রয়োজন অনুযায়ী প্রয়োগ করা হয়

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

লেবেলিং উপাদান

নেটিভ ইনপুট লেবেল করার জন্য, আপনি MDN-এ বর্ণিত বিল্ট-ইন <label> উপাদান ব্যবহার করতে পারেন। এটি শুধুমাত্র আপনাকে একটি অনস্ক্রিন ভিজ্যুয়াল সামর্থ্য তৈরি করতে সহায়তা করবে না, এটি ইনপুটটিকে অ্যাক্সেসিবিলিটি ট্রিতে একটি অ্যাক্সেসযোগ্য নামও দেয়৷ এই নামটি তখন সহায়ক প্রযুক্তি (যেমন একটি স্ক্রিন রিডার) দ্বারা বাছাই করা হয় এবং ব্যবহারকারীর কাছে ঘোষণা করা হয়।

দুর্ভাগ্যবশত <label> কাস্টম নিয়ন্ত্রণগুলিতে একটি অ্যাক্সেসযোগ্য নাম দেওয়া সমর্থন করে না (যেমন কাস্টম উপাদান ব্যবহার করে তৈরি করা বা সাধারণ ডিভ এবং স্প্যানের বাইরে)। এই ধরনের নিয়ন্ত্রণের জন্য আপনাকে aria-label এবং aria-labelledby বৈশিষ্ট্যগুলি ব্যবহার করতে হবে।

স্বয়ংক্রিয় পরীক্ষা

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

AXe, Deque সিস্টেম দ্বারা তৈরি, একটি ক্রোম এক্সটেনশন এবং একটি নোড মডিউল হিসাবে উপলব্ধ (একটানা ইন্টিগ্রেশন পরিবেশের জন্য ভাল)। এই সংক্ষিপ্ত A11ycast আপনার উন্নয়ন প্রক্রিয়ায় কুঠার অন্তর্ভুক্ত করার কয়েকটি ভিন্ন উপায় ব্যাখ্যা করে।

Lighthouse হল Google-এর ওপেন সোর্স প্রোজেক্ট যা আপনার প্রগতিশীল ওয়েব অ্যাপের কর্মক্ষমতা অডিট করার জন্য। পরিষেবা কর্মী এবং একটি ওয়েব অ্যাপ ম্যানিফেস্টের মতো জিনিসগুলির জন্য আপনার PWA সমর্থন আছে কিনা তা পরীক্ষা করার পাশাপাশি, Lighthouse অ্যাক্সেসিবিলিটি সমস্যাগুলির জন্য পরীক্ষা সহ সেরা অনুশীলন পরীক্ষার একটি সিরিজও চালাবে৷

উপসংহার

অ্যাক্সেসযোগ্যতা একটি দলীয় প্রচেষ্টা। প্রত্যেকেরই ভূমিকা আছে। এই নির্দেশিকাটি কয়েকটি মূল আইটেম তৈরি করেছে যা প্রতিটি দলের সদস্য দ্রুত বিষয়ের উপর র‌্যাম্প করতে এবং তাদের অ্যাপের সামগ্রিক অভিজ্ঞতা উন্নত করতে ব্যবহার করতে পারে।

অ্যাক্সেসিবিলিটি সম্পর্কে আরও জানতে, আমাদের বিনামূল্যের Udacity কোর্সটি দেখতে ভুলবেন না এবং এখানে web.dev-এ উপলব্ধ অ্যাক্সেসিবিলিটি ডক্সগুলি ব্রাউজ করুন৷