অ্যাক্সেসযোগ্যতার জন্য কীভাবে পর্যালোচনা করবেন, অ্যাক্সেসযোগ্যতার জন্য কীভাবে পর্যালোচনা করবেন

রব ডডসন

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

এই পোস্টটি এই সমস্যাগুলিকে একটি লজিক্যাল, ধাপে ধাপে একটি বিদ্যমান সাইট পর্যালোচনা করার জন্য বিভক্ত করে।

কীবোর্ড দিয়ে শুরু করুন

যে ব্যবহারকারীরা মাউস ব্যবহার করতে পারেন না বা বেছে নিতে পারেন না, তাদের জন্য কীবোর্ড নেভিগেশন হল স্ক্রিনে সবকিছু পৌঁছানোর প্রাথমিক মাধ্যম। এই শ্রোতাদের মধ্যে স্ক্রিন রিডার ব্যবহারকারীদের পাশাপাশি একটি পুনরাবৃত্তিমূলক স্ট্রেস ইনজুরি (RSI) বা পক্ষাঘাতের মতো মোটর দুর্বলতা রয়েছে এমন ব্যবহারকারীদের অন্তর্ভুক্ত।

একটি ভাল কীবোর্ড অভিজ্ঞতার জন্য, একটি যৌক্তিক ট্যাব অর্ডার এবং স্পষ্টভাবে বোঝানো যায় এমন ফোকাস শৈলীর লক্ষ্য রাখুন।

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

  • কাস্টম ইন্টারেক্টিভ নিয়ন্ত্রণ ফোকাসযোগ্য হতে হবে. আপনি যদি জাভাস্ক্রিপ্ট ব্যবহার করে একটি <div> একটি অভিনব ড্রপ-ডাউনে পরিণত করেন, তাহলে এটি স্বয়ংক্রিয়ভাবে ট্যাব অর্ডারে ঢোকানো হবে না। একটি কাস্টম নিয়ন্ত্রণ ফোকাসযোগ্য করতে, এটি একটি tabindex="0" দিন। tabindex মান 0-এর বেশি হলে ট্যাব অর্ডার পরিবর্তন হয় এবং স্ক্রিন রিডার ব্যবহারকারীদের জন্য বিভ্রান্তিকর হতে পারে।

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

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

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

আপনার ফোকাস নিয়ন্ত্রণ ব্যবহারযোগ্য করুন

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

অফস্ক্রিন সামগ্রী পরিচালনা করুন

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

এই উপাদানগুলি পরিচালনা করার টিপসের জন্য অফস্ক্রিন সামগ্রী পরিচালনা করা দেখুন।

একটি স্ক্রিন রিডার দিয়ে পরীক্ষা করুন

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

সহায়ক প্রযুক্তির দ্বারা শব্দার্থিক মার্কআপ কীভাবে ব্যাখ্যা করা হয় সে সম্পর্কে আপনি যদি অপরিচিত হন, তাহলে বিষয়বস্তুর কাঠামো পড়ুন।

  • সঠিক alt টেক্সট জন্য সমস্ত ছবি চেক করুন. এই অনুশীলনের ব্যতিক্রম হল যখন চিত্রগুলি মূলত উপস্থাপনার উদ্দেশ্যে এবং বিষয়বস্তুর অপরিহার্য অংশ নয়। স্ক্রীন রিডারদের একটি ছবি এড়িয়ে যাওয়া উচিত তা বোঝাতে, মানটিকে একটি খালি স্ট্রিং-এ সেট করুন: alt="" ।
  • একটি লেবেলের জন্য সমস্ত নিয়ন্ত্রণ পরীক্ষা করুন। কাস্টম নিয়ন্ত্রণের জন্য, এর জন্য aria-label বা aria-labelledby ব্যবহারের প্রয়োজন হতে পারে। উদাহরণের জন্য ARIA লেবেল এবং সম্পর্ক দেখুন।
  • একটি উপযুক্ত role জন্য সমস্ত কাস্টম নিয়ন্ত্রণ পরীক্ষা করুন এবং যেকোন প্রয়োজনীয় ARIA বৈশিষ্ট্য যা তাদের অবস্থার সাথে যোগাযোগ করে। উদাহরণ স্বরূপ, একটি কাস্টম চেকবক্সের প্রয়োজন একটি role="checkbox" এবং aria-checked="true|false" এর অবস্থা সঠিকভাবে জানাতে। কিভাবে ARIA কাস্টম নিয়ন্ত্রণের জন্য অনুপস্থিত শব্দার্থবিদ্যা প্রদান করতে পারে তার একটি সাধারণ ওভারভিউয়ের জন্য ARIA-এর ভূমিকা দেখুন।
  • আপনার পৃষ্ঠার মাধ্যমে তথ্যের প্রবাহকে অর্থপূর্ণ করুন। যেহেতু স্ক্রিন রিডাররা DOM ক্রমে পৃষ্ঠাটি নেভিগেট করে, তাই তারা একটি অযৌক্তিক ক্রমে CSS ব্যবহার করে দৃশ্যত আপনি দৃশ্যত স্থান পরিবর্তন করেছেন এমন কোনো উপাদান ঘোষণা করবেন। আপনার যদি পৃষ্ঠায় আগে উপস্থিত হওয়ার জন্য কিছু প্রয়োজন হয়, তবে এটিকে আগে DOM-এ সরান৷
  • পৃষ্ঠার সমস্ত সামগ্রীর জন্য স্ক্রিন রিডার নেভিগেশন সমর্থন করার লক্ষ্য রাখুন। নিশ্চিত করুন যে সাইটের কোনো বিভাগ স্থায়ীভাবে লুকানো বা স্ক্রিন রিডার অ্যাক্সেস থেকে ব্লক করা নেই।
    • যদি কোনও স্ক্রিন রিডার থেকে বিষয়বস্তু লুকানো উচিত , উদাহরণস্বরূপ, যদি এটি অফস্ক্রিন হয় বা শুধুমাত্র উপস্থাপনামূলক হয়, তাহলে সেই বিষয়বস্তুটিকে aria-hidden="true" এ সেট করুন। একটি গভীর ব্যাখ্যার জন্য, গোপন বিষয়বস্তু পড়ুন।

স্ক্রিন রিডারদের সাথে পরিচিত হন

যদিও এটি একটি স্ক্রিন রিডার শেখা কঠিন বলে মনে হতে পারে, তারা আসলে বেশ ব্যবহারকারী-বান্ধব। সাধারণভাবে, বেশিরভাগ বিকাশকারী মাত্র কয়েকটি সাধারণ কী কমান্ড দিয়ে পেতে পারেন।

আপনি যদি ম্যাকে থাকেন, তাহলে ভয়েসওভার সম্পর্কে এই ভিডিওটি দেখুন, ম্যাক OS এর সাথে আসা স্ক্রিন রিডার৷ আপনি যদি পিসিতে থাকেন, তাহলে NVDA সম্পর্কে এই ভিডিওটি দেখুন, একটি অনুদান সমর্থিত, Windows এর জন্য ওপেন সোর্স স্ক্রিন রিডার৷

aria-hidden কীবোর্ড ফোকাস প্রতিরোধ করে না

এটা বোঝা গুরুত্বপূর্ণ যে ARIA শুধুমাত্র একটি উপাদানের শব্দার্থবিদ্যাকে প্রভাবিত করতে পারে; এটি উপাদানের আচরণের উপর কোন প্রভাব ফেলে না। আপনি aria-hidden="true" দিয়ে স্ক্রীন রিডারদের কাছে লুকানো একটি উপাদান তৈরি করতে পারেন, কিন্তু এটি সেই উপাদানটির জন্য ফোকাস আচরণ পরিবর্তন করে না। অফস্ক্রিন ইন্টারেক্টিভ কন্টেন্টের জন্য, অফস্ক্রিন ইন্টারেক্টিভ কন্টেন্টের জন্য, কীবোর্ড ফ্লো থেকে সত্যিই সরানো হয়েছে তা নিশ্চিত করতে inert অ্যাট্রিবিউট ব্যবহার করুন। পুরানো ব্রাউজারগুলির জন্য, tabindex="-1" এর সাথে aria-hidden="true" একত্রিত করুন।

ইন্টারেক্টিভ উপাদান তাদের উদ্দেশ্য এবং রাষ্ট্র নির্দেশ করা উচিত

একটি নিয়ন্ত্রণ কী করবে সে সম্পর্কে ভিজ্যুয়াল ইঙ্গিত, বা সামর্থ্য প্রদান করা বিভিন্ন ধরণের ডিভাইসে বিভিন্ন ধরণের লোককে আপনার সাইট পরিচালনা এবং নেভিগেট করতে সহায়তা করে৷

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

শিরোনাম এবং ল্যান্ডমার্কের সুবিধা নিন

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

একইভাবে, স্ক্রিন রিডাররাও <main> এবং <nav> এর মত গুরুত্বপূর্ণ ল্যান্ডমার্কে যাওয়ার ক্ষমতা অফার করে। এই কারণে আপনার পৃষ্ঠার কাঠামো ব্যবহারকারীর অভিজ্ঞতাকে গাইড করতে কীভাবে ব্যবহার করা যেতে পারে তা বিবেচনা করা গুরুত্বপূর্ণ।

  • h1-h6 অনুক্রম ব্যবহার করুন। আপনার পৃষ্ঠার জন্য একটি রূপরেখা তৈরি করার সরঞ্জাম হিসাবে শিরোনামগুলিকে ভাবুন৷ শিরোনামগুলির অন্তর্নির্মিত স্টাইলিং এর উপর নির্ভর করবেন না। পরিবর্তে, তাদের সাথে আচরণ করুন যেন তারা একই আকারের এবং প্রাথমিক, মাধ্যমিক এবং তৃতীয় বিষয়বস্তুর জন্য শব্দার্থগতভাবে উপযুক্ত স্তর ব্যবহার করুন। তারপর শিরোনামগুলি আপনার ডিজাইনের সাথে মেলে দিতে CSS ব্যবহার করুন।
  • ল্যান্ডমার্ক উপাদান এবং ভূমিকা ব্যবহার করুন যাতে ব্যবহারকারীরা পুনরাবৃত্তিমূলক সামগ্রী বাইপাস করতে পারে৷ অনেক সহায়ক প্রযুক্তি পৃষ্ঠার নির্দিষ্ট অংশে যাওয়ার জন্য শর্টকাট প্রদান করে, যেমন <main> বা <nav> উপাদান দ্বারা সংজ্ঞায়িত। এই উপাদানগুলির অন্তর্নিহিত ল্যান্ডমার্ক ভূমিকা আছে। আপনি <div role="search"> এর মতো পৃষ্ঠায় অঞ্চলগুলিকে স্পষ্টভাবে সংজ্ঞায়িত করতে ARIA role বৈশিষ্ট্য ব্যবহার করতে পারেন। আরও উদাহরণের জন্য শব্দার্থবিদ্যা এবং নেভিগেটিং বিষয়বস্তু দেখুন।
  • role="application" এড়িয়ে চলুন যদি না আপনার এটির সাথে কাজ করার অভিজ্ঞতা থাকে। application ল্যান্ডমার্ক ভূমিকা সহায়ক প্রযুক্তিকে তার শর্টকাটগুলি নিষ্ক্রিয় করতে এবং সমস্ত কী প্রেসের মাধ্যমে পৃষ্ঠায় যেতে বলে। এর মানে হল যে স্ক্রিন রিডার ব্যবহারকারীরা সাধারণত পৃষ্ঠার চারপাশে ঘোরাফেরা করার জন্য ব্যবহার করেন তা আর কাজ করে না এবং আপনাকে সমস্ত কীবোর্ড পরিচালনা করতে হবে।

একটি স্ক্রিন রিডার দিয়ে শিরোনাম এবং ল্যান্ডমার্ক পর্যালোচনা করুন

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

আরও জানতে, ভয়েসওভার এবং এনভিডিএ- এর মৌলিক বিষয়গুলিতে এই নির্দেশমূলক ভিডিওগুলি দেখুন৷

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

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

  • পৃষ্ঠাটি কি ax বা WAVE ব্রাউজার এক্সটেনশন থেকে সমস্ত পরীক্ষা পাস করে? অন্যান্য বিকল্পগুলি উপলব্ধ আছে, তবে এই এক্সটেনশনগুলি যে কোনও ম্যানুয়াল পরীক্ষা প্রক্রিয়ার জন্য একটি দরকারী সংযোজন হতে পারে কারণ তারা ব্যর্থতার বিপরীত অনুপাত এবং ARIA বৈশিষ্ট্যগুলি অনুপস্থিত হওয়ার মতো সূক্ষ্ম সমস্যাগুলি বেছে নিতে পারে।
    • আপনি যদি কমান্ড লাইনে কাজ করতে পছন্দ করেন, axe-cli ax ব্রাউজার এক্সটেনশনের মতো একই বৈশিষ্ট্য সরবরাহ করে, তবে আপনার টার্মিনাল থেকে চালানো যেতে পারে।
  • রিগ্রেশন এড়াতে, বিশেষ করে একটানা ইন্টিগ্রেশন পরিবেশে, আপনার স্বয়ংক্রিয় পরীক্ষা স্যুটে অ্যাক্স-কোরের মতো একটি লাইব্রেরি অন্তর্ভুক্ত করুন। axe-core একই ইঞ্জিন যা ax Chrome এক্সটেনশনকে শক্তি দেয়, কিন্তু একটি কমান্ড লাইন ইউটিলিটিতে।
  • আপনি যদি একটি ফ্রেমওয়ার্ক বা লাইব্রেরি ব্যবহার করেন তবে এটি কি তার নিজস্ব অ্যাক্সেসিবিলিটি টুল সরবরাহ করে? উদাহরণস্বরূপ, কৌণিক জন্য প্রটেক্টর-অ্যাক্সেসিবিলিটি-প্লাগইন । যখনই সম্ভব উপলভ্য সরঞ্জামের সুবিধা নিন।

PWAs পরীক্ষা করতে বাতিঘর ব্যবহার করুন

Lighthouse হল একটি টুল যা আপনার প্রগতিশীল ওয়েব অ্যাপ (PWA) এর কার্যক্ষমতা পরিমাপ করে। এবং, এটি তার অ্যাক্সেসিবিলিটি পরীক্ষাগুলিকে শক্তিশালী করতে অ্যাক্স-কোর লাইব্রেরি ব্যবহার করে।

আপনি যদি ইতিমধ্যেই Lighthouse ব্যবহার করেন, তাহলে আপনার রিপোর্টে অ্যাক্সেসযোগ্যতা পরীক্ষায় ব্যর্থ হওয়ার জন্য দেখুন। আপনার সাইটের সামগ্রিক ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে ত্রুটিগুলি ঠিক করুন৷

অতিরিক্ত সম্পদ