আরও অ্যাক্সেসযোগ্য কৌণিক অ্যাপ তৈরি করুন

১. শুরু করার আগে

কালো কৌণিক লোগো

ওয়েব ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ হল অ্যাক্সেসিবিলিটি, যা ব্যবহারকারীদের অ্যাপগুলি বুঝতে, বুঝতে, নেভিগেট করতে এবং ইন্টারঅ্যাক্ট করতে সাহায্য করে। প্রকৃতপক্ষে, প্রতি ৪ জন মার্কিন প্রাপ্তবয়স্কের মধ্যে ১ জনের এমন একটি প্রতিবন্ধকতা রয়েছে যা তাদের জীবনের প্রধান কার্যকলাপকে প্রভাবিত করে। বিশ্বব্যাপী, বিশ্বের জনসংখ্যার প্রায় ১৫ শতাংশ - ১ বিলিয়নেরও বেশি মানুষ - কোন না কোন ধরণের প্রতিবন্ধকতা ভোগ করে, যার মধ্যে প্রায় ২ থেকে ৪ শতাংশ উল্লেখযোগ্য সমস্যার সম্মুখীন হয়।

একজন ব্যক্তির ওয়েব ব্যবহারকে প্রভাবিত করে এমন সাধারণ অবস্থার মধ্যে রয়েছে অন্ধত্ব বা দৃষ্টিশক্তি হ্রাস, বধিরতা বা শ্রবণশক্তি হ্রাস, সীমাবদ্ধ মোটর দক্ষতা, জ্ঞানীয় অক্ষমতা এবং বর্ণান্ধতা - এবং এটি কেবল একটি আংশিক তালিকা।

এই কোর্সে, a11y হল অ্যাক্সেসিবিলিটির সংক্ষিপ্ত রূপ। লক্ষ্য করুন যে a এর পরে 11টি অক্ষর এবং a y রয়েছে।

অ্যাক্সেসযোগ্য অ্যাপ ডিজাইনের সমস্যা এবং কৌশলগুলির গভীর ভূমিকার জন্য, অ্যাক্সেসযোগ্যতা দেখুন।

তুমি কী তৈরি করবে

  • একটি ডেমোতে সাধারণ ওয়েব অ্যাক্সেসিবিলিটি সমস্যাগুলি সমাধানের জন্য সেরা অনুশীলন এবং অন্তর্নির্মিত কৌশলগুলি ব্যবহার করুন ডাম্পলিং শপ অ্যাঙ্গুলার অ্যাপ
  • সমস্ত অ্যাক্সেসিবিলিটি নির্দেশিকা, WCAG 2.0, এবং ARIA 1.2 পূরণ করুন, এবং এক্স এবং লাইটহাউস অ্যাক্সেসিবিলিটি অডিট পাস করুন।

গোলাপী এবং লাল থিমে ডাম্পলিং টাইম শপের ওয়েবসাইটবেগুনি এবং সবুজ থিমে ডাম্পলিং টাইম শপের ওয়েবসাইট

তুমি কি শিখবে

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

  • আপনার অ্যাপের অ্যাক্সেসিবিলিটি অডিট করতে গুগল ক্রোম ডেভেলপার টুলস, লাইটহাউস এবং অ্যাক্স ব্যবহার করুন।
  • অনন্য পৃষ্ঠার শিরোনাম দিয়ে একক-পৃষ্ঠা অ্যাপ (SPA) সমস্যাগুলি সমাধান করুন
  • কম দৃষ্টিশক্তি ব্যবহারকারীদের জন্য কম রঙের বৈপরীত্যের সমস্যা সমাধান করুন
  • স্ক্রিন রিডাররা পৃষ্ঠাটি সঠিকভাবে নেভিগেট করতে সিমেন্টিক HTML ব্যবহার করুন।
  • স্ক্রিন রিডাররা সমস্ত নিয়ন্ত্রণ অ্যাক্সেস করতে পারে তা নিশ্চিত করতে অ্যাঙ্গুলার ম্যাটেরিয়াল এবং আননেস্ট নিয়ন্ত্রণ ব্যবহার করুন।
  • স্ক্রিন রিডারের জন্য ARIA সাপোর্ট যোগ করুন
  • Angular CDK a11y প্যাকেজটি আমদানি করুন এবং ব্যবহার করুন
  • কাস্টম কম্পোনেন্ট স্ক্রিন-রিডার নেভিগেশনের জন্য ফোকাসট্র্যাপ ব্যবহার করুন
  • CDK LiveAnnouncer এর মাধ্যমে বিজ্ঞপ্তি ঘোষণা করুন
  • হাইকনট্রাস্ট মোড ব্যবহার করে ব্যবহারকারীদের সনাক্ত করুন এবং হাই-কনট্রাস্ট থিমিং বাস্তবায়ন করুন

তোমার যা লাগবে

2. সেট আপ করুন

কোডটি পান

এই প্রকল্পের জন্য আপনার যা কিছু প্রয়োজন তা একটি GitHub সংগ্রহস্থলে আছে। শুরু করতে, কোডটি ক্লোন করুন এবং আপনার পছন্দের ডেভেলপার পরিবেশে এটি খুলুন।

রিপোজিটরিটি ক্লোন করুন এবং অ্যাপটি পরিবেশন করুন

এই কোডল্যাবের মাধ্যমে কাজ করার জন্য VSCode অথবা স্থানীয় IDE হল প্রস্তাবিত পদ্ধতি।

  1. একটি নতুন ব্রাউজার ট্যাব খুলুন এবং https://github.com/googlecodelabs/angular-accessibility এ যান।
  2. রিপোজিটরিটি ফর্ক এবং ক্লোন করুন, এবং cd angular-accessibility/ রিপোজিটরিতে প্রবেশ করান।
  3. স্টার্টার কোড শাখা git checkout get-started দেখুন।
  4. কোডটি VSCode অথবা আপনার পছন্দের IDE তে খুলুন।
  5. সার্ভার চালানোর জন্য প্রয়োজনীয় নির্ভরতা ইনস্টল করতে npm install চালান।
  6. সার্ভার চালানোর জন্য ng serve চালান।
  7. http://localhost:4200 এ একটি ব্রাউজার ট্যাব খুলুন।

৩. একটি বেসলাইন স্থাপন করুন

তোমার শুরুটা কোথায়?

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

বেগুনি এবং সবুজ থিমে ডাম্পলিং টাইম শপের ওয়েবসাইট

ডেমোটি ঘুরে দেখুন

শুরু করতে, আপনার অ্যাপের তিনটি কার্যকারিতা দেখে নিন:

  1. আমাদের দোকান , আমাদের গল্প , এবং আমাদের খুঁজুন রুটগুলি দেখতে এবং ডাম্পলিং কোম্পানি সম্পর্কে বিশদ দেখতে নেভিগেশন বার ব্যবহার করুন।
  2. হালকা এবং অন্ধকার মোড টগল করতে থিম পরিবর্তন করুন।
  3. আপনার অর্ডারের ডাম্পলিং ফিলিং, পরিমাণ এবং রঙ কাস্টমাইজ করুন।
  4. কনসোলে আপনার কাস্টমাইজড অর্ডার লগ করতে "ক্রয়" নির্বাচন করুন।

সাধারণ ওয়েব অ্যাক্সেসিবিলিটি সমস্যা সমাধানের জন্য অ্যাঙ্গুলার ব্যবহার করুন

এই কোডল্যাবে, আপনি এই অ্যাপের বিদ্যমান বৈশিষ্ট্যগুলির অ্যাক্সেসযোগ্যতার উপর ফোকাস করবেন। আপনি আপনার অ্যাপে a11y সমস্যাগুলি চিহ্নিত করে শুরু করবেন, তারপর একটি সমাধান বাস্তবায়ন করে 🛑 কে ✅ এ রূপান্তর করবেন।

তুমি কিভাবে জানো কী ঠিক করতে হবে?

ম্যানুয়াল এবং স্বয়ংক্রিয় পরীক্ষার মিশ্রণ ব্যবহার করে অ্যাক্সেসিবিলিটি সমস্যাটি সনাক্ত করে প্রতিটি উদাহরণ শুরু করুন।

ওয়েবের বর্তমান অবস্থায়, অ্যাক্সেসিবিলিটি ম্যানুয়ালি পরীক্ষা করা বাধ্যতামূলক।

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

ম্যানুয়াল পরীক্ষা

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

স্ক্রিন রিডার চালু করে এবং স্ক্রিন নেভিগেট করে অনুশীলন করুন।

আপনি MacOS বিল্ট-ইন VoiceOver ব্যবহার করতে পারেন। এটি চালু করতে System Preferences > Accessibility > VoiceOver > Enable VoiceOver এ ক্লিক করুন। VoiceOver টগল করতে, Command কী ধরে রেখে দ্রুত তিনবার TouchID টিপুন।

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

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

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

লাইটহাউস এবং ক্রোম ডেভেলপার টুলস

  1. Chrome ডেভেলপার টুলস খুলুন।
  2. লাইটহাউস ট্যাবটি নির্বাচন করুন এবং অ্যাক্সেসিবিলিটি চেকবক্সটি নির্বাচন করুন।
  3. a11y Lighthouse অডিট চালানোর জন্য রিপোর্ট তৈরি করুন ক্লিক করুন।

Chrome DevTools ট্যাবে রিপোর্ট তৈরি করার বোতাম সহ লাইটহাউস উদাহরণ ট্যাব

কুঠার

  1. ax DevTools এক্সটেনশনটি ইনস্টল করুন। এক্সটেনশনটি দেখতে আপনার ব্রাউজারটি পুনরায় চালু করতে হতে পারে।
  2. Chrome ডেভেলপার টুলস খুলুন।
  3. ax DevTools ট্যাবটি নির্বাচন করুন এবং ax DevTools স্ক্যান চালানোর জন্য স্ক্যান অল অফ মাই পেজ নির্বাচন করুন।

লিন্টিং

স্বয়ংক্রিয় a11y বৈশিষ্ট্যের জন্য আপনার কোড লিন্ট করতে আপনি Angular ESLint নিয়ম ব্যবহার করতে পারেন।

eslint.json এ, নিম্নলিখিতগুলি যোগ করুন, যা অ্যাক্সেসিবিলিটির ক্ষেত্রে প্রযোজ্য:

"@angular-eslint/template/accessibility-alt-text": 2,
"@angular-eslint/template/accessibility-elements-content": 2,
"@angular-eslint/template/accessibility-label-for": 2,
"@angular-eslint/template/no-positive-tabindex": 2,
"@angular-eslint/template/accessibility-table-scope": 2,
"@angular-eslint/template/accessibility-valid-aria": 2,
"@angular-eslint/template/click-events-have-key-events": 2,
"@angular-eslint/template/mouse-events-have-key-events": 2,
"@angular-eslint/template/no-autofocus": 2,
"@angular-eslint/template/no-distracting-elements": 2

আরও তথ্যের জন্য, GitHub- এ সর্বশেষ ESLint নিয়মগুলি দেখুন।

তোমার শুরুর বিন্দু

আপনার নতুন পরীক্ষার পদ্ধতি ব্যবহার করে, আপনি Lighthouse এবং axe audits এবং ম্যানুয়াল VoiceOver ব্যবহার করে আপনার অ্যাপে নিম্নলিখিত সমস্যাগুলি সনাক্ত করতে পারেন:

Chrome DevTools লাইটহাউস অডিট ৮২ স্কোর সহ

অ্যাক্সেসিবিলিটি অডিট:

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

৪. অনন্য পৃষ্ঠার শিরোনাম নির্ধারণ করুন

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

অ্যাঙ্গুলার একটি একক-পৃষ্ঠার অ্যাপ এবং ফলস্বরূপ, বেশিরভাগ রূপান্তর, যেমন একটি নতুন পৃষ্ঠায় স্থানান্তর, পৃষ্ঠা পুনরায় লোড করার সাথে জড়িত নয়। সম্প্রতি পর্যন্ত, এর অর্থ ছিল প্রতিটি পৃষ্ঠার একটি অভিন্ন পৃষ্ঠার শিরোনাম ছিল এবং পৃষ্ঠার বিষয়বস্তু বা উদ্দেশ্য বোঝার জন্য কোনও মূল্য প্রদান করে না।

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

এই বিভাগের শেষে, আপনার অ্যাপ নিম্নলিখিত অডিট পাস করবে:

  • 🛑 সকল পৃষ্ঠার শিরোনাম একই

আপনি মন্তব্যের নিচে এই প্রতিটি ধাপ খুঁজে পেতে পারেন: TODO: #4. Define unique page titles.

সমস্যাটি চিহ্নিত করুন

এই সমস্যাটি সনাক্ত করতে, আপনার স্ক্রিন রিডারটি চালু করুন এবং পৃষ্ঠার শিরোনামগুলি দেখতে আমাদের দোকান , আমাদের গল্প এবং আমাদের খুঁজুন ট্যাবগুলির মধ্যে নেভিগেট করুন:

  1. ভয়েসওভার চালু করুন।
  2. পৃষ্ঠাগুলির মধ্যে নেভিগেট করতে ট্যাব নেভিগেশন ব্যবহার করুন।
  3. Angular-এ পৃষ্ঠার শিরোনাম সর্বদা a11y কিনা তা যাচাই করুন।

এটি একটি সমস্যা কারণ আপনার পৃষ্ঠার শিরোনামটি অবশ্যই অনন্য হতে হবে যাতে ব্যবহারকারী দ্রুত বুঝতে পারেন যে পৃষ্ঠাটি কী সম্পর্কে, কোনও কিছু না ভেবেই।

একই পৃষ্ঠার শিরোনাম সহ তিনটি ট্যাব খোলা সহ ক্রোম ব্রাউজার: 'a11y in Angular'

অর্থপূর্ণ পৃষ্ঠার শিরোনাম যোগ করুন

যদি কোনও পৃষ্ঠা বা ভিউ পরিবর্তন হয়, তাহলে আপনাকে পৃষ্ঠার শিরোনাম সঠিকভাবে পরিচালনা করতে হবে। এটি ঠিক করার জন্য, আপনি আপনার প্রতিটি পৃষ্ঠার জন্য অনন্য শিরোনাম নির্ধারণ করতে Angular এর অন্তর্নির্মিত Router.title সম্পত্তি ব্যবহার করুন।

  1. তিনটি নির্ধারিত রুটের প্রতিটিতে একটি অনন্য শিরোনাম যোগ করুন:

src/app/app-routing.module.ts 

const routes: Routes = [
  { path: 'shop', component: ShopComponent, title: 'Our Shop – a11y in Angular' },
  { path: 'about', component: AboutComponent, title: 'Our Story - a11y in Angular' },
  { path: 'locate', component: LocationComponent, title: 'Find Us - a11y in Angular' },
  { path: '',   redirectTo: '/shop', pathMatch: 'full' },
  { path: '**', component: ShopComponent },
];

এটি স্বয়ংক্রিয়ভাবে Router's Title Service আমদানি করবে এবং আমাদের রুটে সংজ্ঞায়িত টাইটেল প্রপার্টির সাথে মেলে নেভিগেশনে পৃষ্ঠার শিরোনাম পরিবর্তন পরিচালনা করতে ব্যবহার করবে। আপনি একটি কাস্টম TitleStrategy ব্যবহার করে আরও জটিল পৃষ্ঠার শিরোনাম পরিচালনা করতে পারেন।

পরিবর্তনগুলি যাচাই করুন

আপনার স্ক্রিন রিডারটি আবার চালু করুন এবং আপনার পরিবর্তনগুলি যাচাই করুন। পৃষ্ঠাগুলির এখন অনন্য শিরোনাম থাকা উচিত!

তিনটি ট্যাব সহ ক্রোম ব্রাউজার খোলা আছে, যার অনন্য পৃষ্ঠার শিরোনাম রয়েছে: 'আমাদের দোকান - অ্যাঙ্গুলারে a11y', 'আমাদের গল্প - অ্যাঙ্গুলারে a11y', 'আমাদের খুঁজুন - অ্যাঙ্গুলারে a11y'

অ্যাক্সেসিবিলিটি অডিট:

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

৫. পর্যাপ্ত রঙের বৈসাদৃশ্য নিশ্চিত করুন

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

এই বিভাগের শেষে, আপনার অ্যাপ নিম্নলিখিত অডিট পাস করবে:

  • 🛑 উপাদানগুলিতে পর্যাপ্ত রঙের বৈসাদৃশ্য থাকতে হবে

আপনি মন্তব্যের নিচে এই প্রতিটি ধাপ খুঁজে পেতে পারেন: TODO: #5. Ensure adequate color contrast.

কম-কনট্রাস্ট সমস্যা সনাক্ত করতে Chrome ডেভেলপার টুল ব্যবহার করুন

এই সমস্যাটি সনাক্ত করতে, আপনার অ্যাপের উপাদানগুলি পরীক্ষা করতে Chrome ডেভেলপার টুল ব্যবহার করুন।

  1. মেনু আইকন বোতামগুলি দেখতে পরিদর্শন টুলটি ব্যবহার করুন। আপনি দেখতে পাচ্ছেন যে কন্ট্রাস্টটি 1.85, WCAG প্রয়োজনীয়তার অনেক কম।

Chrome DevTools কম কন্ট্রাস্ট সহ একটি হোম বোতামের উপাদান পরীক্ষা করে

  1. এই বৈসাদৃশ্য-অনুপাতের সমস্যাগুলি দেখতে Lighthouse অথবা ax's scan-এ অ্যাক্সেসিবিলিটি অডিট চালান।

Chrome DevTools লাইটহাউস অডিটের ফলাফলে ত্রুটি: 'ব্যাকগ্রাউন্ড এবং ফোরগ্রাউন্ড রঙের পর্যাপ্ত বৈসাদৃশ্য অনুপাত নেই'

মেটেরিয়াল থিমের রঙ পরিবর্তন করুন

আপনার কম্পোনেন্ট রঙের স্কিম আপনার কাস্টম ম্যাটেরিয়াল থিমে সংজ্ঞায়িত করা হয়েছে। রঙ-বৈসাদৃশ্য অনুপাত নির্দেশিকা পূরণ করার জন্য আপনি আপনার থিমের মান আপডেট করেন।

আপনার ম্যাটেরিয়াল থিম আপডেট করে গাঢ় টেক্সট রঙ ব্যবহার করুন, যার ফলে আপনার আইকনের কনট্রাস্ট অনুপাত বৃদ্ধি পাবে:

src/styles.scss 

$light-primary: mat.define-palette(mat.$pink-palette, $default: A100, $lighter: 100, $text: 900);

আপনি Chrome ডেভেলপার টুলস -এর অন্তর্নির্মিত অ্যাক্সেসিবিলিটি টুলিং ব্যবহার করে এমন একটি রঙ খুঁজে পেতে পারেন যা মান পূরণ করে, অথবা Sass-এ পৃথক রঙের মান আপডেট করতে পারেন।

পরিবর্তনগুলি যাচাই করুন

আপনার উপাদানগুলি আবার পরীক্ষা করুন এবং আপনার পরিবর্তনগুলি যাচাই করুন, আমাদের থিমে এখন পর্যাপ্ত রঙের বৈসাদৃশ্য অনুপাত থাকা উচিত!

Chrome DevTools পর্যাপ্ত কন্ট্রাস্ট সহ একটি হোম বোতামের উপাদান পরীক্ষা করে

অ্যাক্সেসিবিলিটি অডিট

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

৬. সিমান্টিক HTML ব্যবহার করুন

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

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

এই বিভাগের শেষে, আপনার অ্যাপ নিম্নলিখিত অডিট পাস করবে:

  • 🛑 HTML-এর যৌক্তিক ক্রম, নাম এবং ভূমিকা থাকা উচিত

আপনি মন্তব্যের নিচে এই প্রতিটি ধাপ খুঁজে পেতে পারেন: TODO: #6. Use Semantic HTML.

সমস্যাটি চিহ্নিত করুন

  1. ভয়েসওভার চালু করুন।
  2. আমাদের গল্প ট্যাবে ক্লিক করতে ট্যাব নেভিগেশন ব্যবহার করুন।
  3. লক্ষ্য করুন ট্যাব ক্রমটি ক্রমানুসারে নয়।
  4. কিনুন e এ ক্লিক করুন।
  5. লক্ষ্য করুন বোতামটি বোতাম হিসেবে স্বীকৃত নয়।

Chrome DevTools লাইটহাউস অডিটের ফলাফলে ত্রুটি রয়েছে: শিরোনামের উপাদানগুলি ক্রমানুসারে-অবরোহণ ক্রমে নেই সঠিকভাবে ক্রমযুক্ত শিরোনাম যা স্তর এড়িয়ে যায় না তা পৃষ্ঠার শব্দার্থিক কাঠামো প্রকাশ করে, সহায়ক প্রযুক্তি ব্যবহার করার সময় নেভিগেট করা এবং বোঝা সহজ করে তোলে। আরও জানুন।

<div> কে <button> এ পরিবর্তন করা হচ্ছে

কাস্টম <div> এর পরিবর্তে একটি Material বোতাম ব্যবহার করুন:

src/app/shop/shop.component.html 

<button mat-flat-button 
  color="primary" 
  class="purchase-button"
  (click)="fauxPurchase()">
  Purchase
</button>

শিরোনাম উপাদানগুলি ক্রমানুসারে ব্যবহার করুন

শব্দার্থিক HTML ব্যবহার করে টেক্সটটি পুনঃক্রম করুন এবং Angular Material টাইপোগ্রাফি ব্যবহার করে স্টাইলিং প্রয়োগ করুন:

src/app/about/about.component.html 

<h2>Who are we?</h2>
<p class="mat-subheading-2">Have you ever thought, "wow, I love dumplings"?</p>
<p class="right mat-subheading-1">Who hasn't.</p>
<p class="center mat-subheading-1">We took it one step further and created Dumpling Dumpling,</p> 
<p class="center mat-subheading-1">double the dumpling, double the fun.</p>
<div class="spacer"></div>
<h2>How are we different?</h2>
<p class="mat-subheading-2">Handmade in San Francisco, California, we craft fully customizable dumplings. Glitter? Rainbows? Vegan? We do it all.</p>
<p class="right mat-subheading-2">This shop is concept only.</p>

পরিবর্তনগুলি যাচাই করুন

আপনার স্ক্রিন রিডারটি আবার চালু করুন এবং আপনার পরিবর্তনগুলি যাচাই করুন। ভয়েসওভার এখন বোতামটি চিনতে পারে এবং লেখাটি একটি যৌক্তিক ক্রমে পড়া হয়!

অ্যাক্সেসিবিলিটি অডিট:

  • ✅ সকল পৃষ্ঠারই অনন্য পৃষ্ঠার শিরোনাম রয়েছে
  • ✅ রঙের পর্যাপ্ত বৈসাদৃশ্য অনুপাত থাকে
  • ✅ শব্দার্থিক HTML যৌক্তিক মিথস্ক্রিয়া নিশ্চিত করে
  • 🛑 স্ক্রিন রিডারের জন্য নেস্টেড চেকবক্স নির্বাচনযোগ্য নয়
  • 🛑 স্ক্রিন রিডার স্লাইডারের মান পড়ে না
  • 🛑 রঙ চয়নকারীতে স্ক্রিন রিডার ফোকাস ডায়ালগ থেকে বেরিয়ে আসে
  • 🛑 পরিবর্তন, ত্রুটি এবং বিজ্ঞপ্তি ঘোষণা করা হয় না
  • 🛑 হাইকনট্রাস্ট মোড সক্রিয় নেই

৭. অ্যাঙ্গুলার ম্যাটেরিয়াল দিয়ে নির্বাচনযোগ্য নিয়ন্ত্রণ তৈরি করুন

অ্যাক্সেসিবিলিটি পরিষেবাগুলির জন্য একটি জটিল ইন্টারঅ্যাকশন প্যাটার্ন হল নেস্টেড কন্ট্রোল। মেনু সাবআইটেম বা নেস্টেড চেকবক্স সম্পর্কে চিন্তা করুন। আপনি কীভাবে একজন ব্যবহারকারীকে নির্দেশ করবেন যে আপনি বিকল্পগুলির একটি উপগোষ্ঠী নির্বাচন করতে পারেন অথবা একটি প্যারেন্ট মেনু আইটেমে নেভিগেট করতে পারেন?

Angular-এ, যতটা সম্ভব নিয়ন্ত্রণ সহজ করে নেভিগেবল উপাদান তৈরি করতে মেনু এবং নিয়ন্ত্রণগুলিকে সরল করুন। এই উদাহরণে, আপনি এই ইন্টারঅ্যাকশন প্যাটার্নের একটি উদাহরণ তৈরি করতে Angular Material-এর তালিকা বাক্স ব্যবহার করেন।

এই বিভাগের শেষে, আপনার অ্যাপ নিম্নলিখিত অডিট পাস করবে:

  • 🛑 স্ক্রিন রিডারের জন্য নেস্টেড চেকবক্স নির্বাচনযোগ্য নয়

আপনি মন্তব্যের নিচে এই ধাপগুলির প্রতিটি খুঁজে পেতে পারেন: TODO: #7. Create selectable controls with Angular Material.

সমস্যাটি চিহ্নিত করুন

এই সমস্যাটি সনাক্ত করার জন্য আমরা আমাদের স্ক্রিন রিডার চালু করব এবং একটি নেস্টেড চেকবক্স নির্বাচন করার চেষ্টা করব।

  1. ভয়েসওভার চালু করুন।
  2. বিভিন্ন ধরণের ফিলিং ফ্লেভার বেছে নিন।
  3. লক্ষ্য করুন যে VoiceOver যখন প্যারেন্ট চেকবক্সগুলি পড়ে তখন শিশুদের নির্দিষ্ট করে না। আপনি কীভাবে জানবেন যে Vegan চেকবক্সটি অনির্বাচিত হয়েছে, এখন আপনি যখন Bok Choy চেকবক্সটি অনির্বাচিত করেছেন?

ফিলিংস চেকবক্স মেনুতে বিকল্পগুলি রয়েছে: ফিলিংস ভেগান বোক চয় টোফু এবং শিতাকে মাংস মুরগির অসম্ভব মাংস

কৌণিক উপাদানে A11y

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

চেকবক্সগুলিকে ম্যাটেরিয়াল চেকবক্স দিয়ে প্রতিস্থাপন করুন

  1. প্রথমে, আপনার নির্বাচিত ফিলিং ফ্লেভার সংরক্ষণের জন্য আপনার নতুন ফিলিং তালিকা এবং একটি ভেরিয়েবল যোগ করুন:

src/app/shop/shop.component.ts 

@Component(...)
export class ShopComponent implements OnInit {
  fillings: string[] = ['Bok Choy & Chili Crunch', 'Tofu & Mushroom', 'Chicken & Ginger', 'Impossible Meat & Spinach'];
  selectedFillings: string[] = [];

  fauxPurchase(): void {
    let flavor = '';
    this.selectedFillings.forEach(filling => {
      flavor = flavor + " " + filling
    })
  }
}
  1. HTML চেকবক্সের এই অগোছালো গ্রুপিং প্রতিস্থাপন করতে একটি <mat-selection-list> যোগ করুন:

src/app/shop/shop.component.html 

<mat-selection-list [(ngModel)]="selectedFillings" 
  aria-label="Dumpling fillings">
  <mat-list-option *ngFor="let flavor of fillings" 
    [value]="flavor" 
    color="primary">
    {{ flavor }}
  </mat-list-option>
</mat-selection-list>

আপনার TODO মন্তব্যগুলি দেখায় যে আপনি src/app/shop/shop.component.scss এ আপনার স্টাইলিং পরিষ্কার করার জন্য কিছু অব্যবহৃত Sass কোথায় সরিয়ে ফেলতে পারেন।

পরিবর্তনগুলি যাচাই করুন

আপনার স্ক্রিন রিডারটি আবার চালু করুন এবং আপনার পরিবর্তনগুলি যাচাই করুন। আপনার চেকবক্সগুলি এখন নির্বাচনযোগ্য এবং স্ক্রিন রিডারের সাহায্যে আরও স্বজ্ঞাতভাবে নেভিগেট করা যায়!

ফিলিংস চেকবক্স মেনুতে আইটেম সহ: ফিলিংস বোক চয় এবং চিলি ক্রাঞ্চ টোফু এবং মাশরুম চিকেন এবং আদা অসম্ভব মাংস এবং পালং শাকের পরিমাণ

অ্যাক্সেসিবিলিটি অডিট:

  • ✅ সকল পৃষ্ঠারই অনন্য পৃষ্ঠার শিরোনাম রয়েছে
  • ✅ রঙের পর্যাপ্ত বৈসাদৃশ্য অনুপাত থাকে
  • ✅ শব্দার্থিক HTML যৌক্তিক মিথস্ক্রিয়া নিশ্চিত করে
  • ✅ সমস্ত নিয়ন্ত্রণ স্ক্রিন রিডারদের কাছে পৌঁছানো যায়
  • 🛑 স্ক্রিন রিডার স্লাইডারের মান পড়ে না
  • 🛑 রঙ চয়নকারীতে স্ক্রিন রিডার ফোকাস ডায়ালগ থেকে বেরিয়ে আসে
  • 🛑 পরিবর্তন, ত্রুটি এবং বিজ্ঞপ্তি ঘোষণা করা হয় না
  • 🛑 হাইকনট্রাস্ট মোড সক্রিয় নেই

৮. ARIA এর সাথে নিয়ন্ত্রণ লেবেল সরবরাহ করুন

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

ওয়েব অ্যাক্সেসিবিলিটি ইনিশিয়েটিভের অ্যাক্সেসিবিল রিচ ইন্টারনেট অ্যাপ্লিকেশন স্পেসিফিকেশন (WAI-ARIA বা ARIA) নেটিভ HTML দিয়ে পরিচালনা করা যায় না এমন সমস্যাগুলি সমাধান করতে সাহায্য করে। এটি আপনাকে এমন বৈশিষ্ট্যগুলি নির্দিষ্ট করতে দেয় যা অ্যাক্সেসিবিলিটি ট্রিতে একটি উপাদান অনুবাদ করার পদ্ধতি পরিবর্তন করে।

এই বিভাগের শেষে, আপনার অ্যাপ নিম্নলিখিত অডিট পাস করবে:

  • 🛑 স্ক্রিন রিডার স্লাইডারের মান পড়ে না

আপনি মন্তব্যের নিচে এই প্রতিটি ধাপ খুঁজে পেতে পারেন: TODO: #8. Provide control labels with ARIA.

সমস্যাটি চিহ্নিত করুন

এই সমস্যাটি শনাক্ত করতে, আপনার স্ক্রিন রিডার চালু করুন এবং আপনার স্লাইডারটি সরান:

  1. ভয়েসওভার চালু করুন।
  2. পরিমাণ স্লাইডারে যান এবং মান পরিবর্তন করুন।
  3. লক্ষ্য করুন যে মান লেবেলটি অনুপস্থিত।

Chrome DevTools লাইটহাউস অডিটের ফলাফলে ত্রুটি: ARIA ইনপুট ফিল্ডের অ্যাক্সেসযোগ্য নাম নেই যখন একটি ইনপুট ফিল্ডের অ্যাক্সেসযোগ্য নাম থাকে না, তখন স্ক্রিন রিডাররা এটিকে একটি জেনেরিক নাম দিয়ে ঘোষণা করে, যা স্ক্রিন রিডারের উপর নির্ভরশীল ব্যবহারকারীদের জন্য এটিকে অব্যবহারযোগ্য করে তোলে। আরও জানুন।

ARIA বৈশিষ্ট্য ব্যবহার করুন

<mat-slider> এ aria-label ব্যবহার করে লেবেল নিয়ন্ত্রণ:

src/app/shop/shop.component.html 

<mat-slider
  aria-label="Dumpling order quantity slider"
  id="quantity"
  name="quantity"
  color="primary"
  class="quantity-slider"
  [max]="13"
  [min]="1"
  [step]="1"
  [tickInterval]="1"
  thumbLabel
  [(ngModel)]="quantity">
</mat-slider>

পরিবর্তনগুলি যাচাই করুন

আপনার স্ক্রিন রিডারটি আবার চালু করুন এবং আপনার পরিবর্তনগুলি যাচাই করুন। আপনি এখন স্লাইডারটি সরাতে পারেন!

স্ক্রিন রিডার ARIA নিয়ন্ত্রণের জন্য পাসিং অডিট সহ Chrome DevTools লাইটহাউস অডিট।

অ্যাক্সেসিবিলিটি অডিট:

  • ✅ সকল পৃষ্ঠারই অনন্য পৃষ্ঠার শিরোনাম রয়েছে
  • ✅ রঙের পর্যাপ্ত বৈসাদৃশ্য অনুপাত থাকে
  • ✅ শব্দার্থিক HTML যৌক্তিক মিথস্ক্রিয়া নিশ্চিত করে
  • ✅ সমস্ত নিয়ন্ত্রণ স্ক্রিন রিডারদের কাছে পৌঁছানো যায়
  • ✅ স্লাইডার একটি লেবেল প্রদানের জন্য ARIA বৈশিষ্ট্য ব্যবহার করে
  • 🛑 রঙ চয়নকারীতে স্ক্রিন রিডার ফোকাস ডায়ালগ থেকে বেরিয়ে আসে
  • 🛑 পরিবর্তন, ত্রুটি এবং বিজ্ঞপ্তি ঘোষণা করা হয় না
  • 🛑 হাইকনট্রাস্ট মোড সক্রিয় নেই

৯. @angular/cdk/a11y এর শক্তি যোগ করুন

এখন পর্যন্ত, আপনি সাধারণ a11y সমস্যাগুলি সমাধানের জন্য বিল্ট-ইন অ্যাঙ্গুলার টুলিং-এর উপর নির্ভর করেছেন। এখন, আসুন CDK-এর a11y মডিউলটি দেখি এবং এটি কীভাবে আমাদের আরও জটিল এবং অ্যাঙ্গুলার-নির্দিষ্ট সমস্যাগুলি সমাধান করতে সাহায্য করতে পারে।

এই বিভাগের শেষে, আপনি Angular a11y মডিউল টুলিং সহ এই কোর্সটি চালিয়ে যাবেন।

আপনি মন্তব্যের নিচে এই ধাপগুলি খুঁজে পেতে পারেন: TODO: #9. Add the power of @angular/cdk/a11y.

মডিউলটি আমদানি করুন

আপনার অ্যাপে মডিউলটি যোগ করুন:

src/অ্যাপ/অ্যাপ.মডিউল.টিএস 

import { A11yModule } from '@angular/cdk/a11y';

@NgModule({
  declarations: [...],
  imports: [
    A11yModule
  ],
  providers: [...],
  bootstrap: [...]
})

'@angular/cdk/a11y' কী করে?

a11y মডিউলটি অ্যাক্সেসযোগ্যতা উন্নত করার জন্য বেশ কয়েকটি সরঞ্জাম সরবরাহ করে এবং বিশেষ করে উপাদান লেখকদের জন্য কার্যকর।

নিম্নলিখিত বিভাগগুলিতে, আপনি তিনটি সাধারণ পরিষেবা যুক্ত করবেন: FocusTrap, LiveAnnouncer, এবং HighContrast।

@angular/cdk/a11y যে সমস্ত অন্যান্য পরিষেবা প্রদান করে সেগুলি সম্পর্কে আরও তথ্যের জন্য, অ্যাক্সেসিবিলিটি দেখুন।

১০. ফোকাসট্র্যাপ দিয়ে ফোকাস নিয়ন্ত্রণ করুন

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

অ্যাঙ্গুলারে, cdkTrapFocus নির্দেশিকা tab- -কী ফোকাসকে একটি উপাদানের মধ্যে আটকে রাখে। এটি মোডাল ডায়ালগের মতো উপাদানগুলির জন্য অ্যাক্সেসযোগ্য অভিজ্ঞতা তৈরি করার জন্য ব্যবহার করা হয়, যেখানে ফোকাস সীমাবদ্ধ থাকতে হবে।

এই বিভাগের শেষে, আপনার অ্যাপ নিম্নলিখিত অডিট পাস করবে:

  • 🛑 রঙ চয়নকারীতে স্ক্রিন রিডার ফোকাস ডায়ালগ থেকে বেরিয়ে আসে

আপনি মন্তব্যের নিচে এই পদক্ষেপগুলি খুঁজে পেতে পারেন: TODO: #10. Control focus with FocusTrap.

সমস্যাটি চিহ্নিত করুন

এই সমস্যাটি শনাক্ত করতে, আপনার স্ক্রিন রিডার চালু করুন এবং রঙ-পিকার ডায়ালগটি খুলুন।

  1. ভয়েসওভার চালু করুন।
  2. রঙ পরিবর্তন করতে ট্যাব নেভিগেশন ব্যবহার করুন।
  3. কালার পিকারে স্বজ্ঞাত ফোকাস অর্ডার এবং ফোকাস ট্র্যাপিং দেখতে চেক করুন।

ডাম্পলিং টাইম শপের ওয়েবসাইট বেগুনি এবং সবুজ থিমে, ডাম্পলিং মোড়ানোর রঙ নির্বাচন করার জন্য খোলা ডায়ালগ সহ

ফোকাসট্র্যাপ যোগ করুন

cdkFocusTrap কাস্টম কম্পোনেন্টগুলিতে ফোকাস অর্ডার ট্র্যাপ এবং নিয়ন্ত্রণ করতে ব্যবহার করা যেতে পারে। mat-dialog-content ব্যবহার করলেই বেশিরভাগ সমস্যা সমাধান করা সম্ভব, একটি ডায়ালগে ফোকাস ট্র্যাপ করে। ডাম্পলিং র‍্যাপার color <mat-selection-list> -এর প্রাথমিক ফোকাস অঞ্চল নির্ধারণ করতে cdkFocusInitial অ্যাট্রিবিউট যোগ করুন।

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.html 

<mat-selection-list #colors aria-label="Dumpling wrapper color" multiple="false" cdkFocusInitial>
  ...
</mat-selection-list>

পরিবর্তনগুলি যাচাই করুন

আপনার স্ক্রিন রিডারটি আবার চালু করুন এবং আপনার পরিবর্তনগুলি যাচাই করুন। ফোকাস এখন প্রাথমিকভাবে ডায়ালগে "রঙ পরিবর্তন করুন" এ সেট করা আছে!

অ্যাক্সেসিবিলিটি অডিট:

  • ✅ সকল পৃষ্ঠারই অনন্য পৃষ্ঠার শিরোনাম রয়েছে
  • ✅ রঙের পর্যাপ্ত বৈসাদৃশ্য অনুপাত থাকে
  • ✅ শব্দার্থিক HTML যৌক্তিক মিথস্ক্রিয়া নিশ্চিত করে
  • ✅ সমস্ত নিয়ন্ত্রণ স্ক্রিন রিডারদের কাছে পৌঁছানো যায়
  • ✅ স্লাইডার একটি লেবেল প্রদানের জন্য ARIA বৈশিষ্ট্য ব্যবহার করে
  • ✅ কালার পিকারে সঠিক ফোকাস ট্র্যাপিং আছে
  • 🛑 পরিবর্তন, ত্রুটি এবং বিজ্ঞপ্তি ঘোষণা করা হয় না
  • 🛑 হাইকনট্রাস্ট মোড সক্রিয় নেই

১১. LiveAnnouncer এর মাধ্যমে পরিবর্তনগুলি ঘোষণা করুন

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

LiveAnnouncer ব্যবহার করা হয় স্ক্রিন-রিডার ব্যবহারকারীদের জন্য বার্তা ঘোষণা করার জন্য যা aria-live অঞ্চল ব্যবহার করে যাতে স্ক্রিন রিডাররা বিজ্ঞপ্তি এবং লাইভ পৃষ্ঠার পরিবর্তন সম্পর্কে অবহিত হয়। aria-live অঞ্চল সম্পর্কে আরও তথ্যের জন্য, W3C এর WAI-ARIA দেখুন। Angular-এ, aria-live বৈশিষ্ট্যের চেয়ে LiveAnnouncer কে একটি পরিষেবা হিসাবে কল করা আরও পরীক্ষামূলক সমাধান।

এই বিভাগের শেষে, আপনার অ্যাপ নিম্নলিখিত অডিট পাস করবে:

  • 🛑 পরিবর্তন, ত্রুটি এবং বিজ্ঞপ্তি ঘোষণা করা হয় না

আপনি মন্তব্যের নিচে এই পদক্ষেপগুলি খুঁজে পেতে পারেন: TODO: #11. Announce changes with LiveAnnouncer.

সমস্যাটি চিহ্নিত করুন

এই সমস্যাটি শনাক্ত করতে, আপনার স্ক্রিন রিডার চালু করুন এবং ফর্ম ফিল্ডগুলি পূরণ না করেই "ক্রয়" নির্বাচন করুন:

  1. ভয়েসওভার চালু করুন।
  2. রঙ পরিবর্তন করতে এবং একটি জাল কেনাকাটা করতে ট্যাব নেভিগেশন ব্যবহার করুন।
  3. লক্ষ্য করুন যে ডায়ালগ থেকে বেরিয়ে আসার সময় কোন রঙ নির্বাচন করা হয়েছে তার কোনও ইঙ্গিত নেই এবং ক্রয়টি পড়া হয়নি।

গোলাপী এবং লাল থিমে ডাম্পলিং টাইম শপের ওয়েবসাইট, ডাম্পলিং মোড়ানোর রঙ নির্বাচন করার জন্য ডায়ালগ খোলা আছে।

আপনার কোডে LiveAnnouncer যোগ করুন।

LiveAnnouncer যোগ করুন, এবং রঙ নির্বাচন এবং জাল ক্রয় উভয়ই একটি স্ট্রিং হিসাবে ঘোষণা করুন। বাস্তব বাস্তবায়নে, আপনি যখন কোনও তৃতীয় পক্ষের পেমেন্ট সিস্টেমে নেভিগেট করেন বা ফর্ম ত্রুটির জন্য এটি পড়তে পারে।

  1. একটি রঙ নির্বাচন করা হলে একটি ঘোষণা যোগ করুন:

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.ts 

import { LiveAnnouncer } from '@angular/cdk/a11y';

@Component(...)
export class ColorPickerDialogComponent implements OnInit {
  constructor(
    public dialogRef: MatDialogRef<ColorPickerDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: ColorDialogData,
    private liveAnnouncer: LiveAnnouncer) { }

  public changeColor(color: string): void {
    this.liveAnnouncer.announce(`Select color: ${color}`);
    this.dialogRef.close();
  }
}
  1. জাল কেনাকাটা করা হলে একটি ঘোষণা যোগ করুন:

src/app/shop/shop.component.ts 

import { LiveAnnouncer } from '@angular/cdk/a11y';

@Component(...)
export class ShopComponent implements OnInit {

  constructor(private liveAnnouncer: LiveAnnouncer) { }

  fauxPurchase(): void {
    let flavor = '...';
    const fakePurchase = `Purchase ${this.quantity} ${flavor}dumplings in the color ${this.color}!`;

    this.liveAnnouncer.announce(fakePurchase);
  }
}

পরিবর্তনগুলি যাচাই করুন

আপনার স্ক্রিন রিডারটি আবার চালু করুন এবং আপনার পরিবর্তনগুলি যাচাই করুন। এখন আপনাকে আপনার ত্রুটিগুলি সম্পর্কে অবহিত করা হবে!

অ্যাক্সেসিবিলিটি অডিট:

  • ✅ সকল পৃষ্ঠারই অনন্য পৃষ্ঠার শিরোনাম রয়েছে
  • ✅ রঙের পর্যাপ্ত বৈসাদৃশ্য অনুপাত থাকে
  • ✅ শব্দার্থিক HTML যৌক্তিক মিথস্ক্রিয়া নিশ্চিত করে
  • ✅ সমস্ত নিয়ন্ত্রণ স্ক্রিন রিডারদের কাছে পৌঁছানো যায়
  • ✅ স্লাইডার একটি লেবেল প্রদানের জন্য ARIA বৈশিষ্ট্য ব্যবহার করে
  • ✅ কালার পিকারে সঠিক ফোকাস ট্র্যাপিং আছে
  • ✅ পরিবর্তন, ত্রুটি এবং বিজ্ঞপ্তি ঘোষণা করা হয়
  • 🛑 হাইকনট্রাস্ট মোড সক্রিয় নেই

১২. হাইকনট্রাস্ট মোড সক্ষম করুন

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

HighContrastModeDetector আপনাকে ব্রাউজারটি বর্তমানে হাই-কনট্রাস্ট-মোড পরিবেশে আছে কিনা তা নির্ধারণ করতে দেয়।

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

এই বিভাগের শেষে, আপনার অ্যাপ নিম্নলিখিত অডিট পাস করবে:

  • 🛑 হাইকনট্রাস্ট মোড সক্রিয় নেই

আপনি মন্তব্যের নিচে এই পদক্ষেপগুলি খুঁজে পেতে পারেন: TODO: #12. Enable HighContrast mode.

সমস্যাটি চিহ্নিত করুন

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

  1. ইন্টারনেট এক্সপ্লোরার, মাইক্রোসফ্ট এজ, অথবা ফায়ারফক্সে আপনার অ্যাপটি খুলুন।
  2. হাই কনট্রাস্ট মোড চালু করুন।
  3. লক্ষ্য করুন যে আবেদনটি অপরিবর্তিত রয়েছে।

উচ্চ বৈসাদৃশ্য মোডের জন্য সমর্থন যোগ করুন

styles.scss এ, @angular/cdk/a11y এ প্রদত্ত cdk-high-contrast মিক্সিন ব্যবহার করে হাই কন্ট্রাস্ট মোডে আপনার বোতামগুলিতে একটি আউটলাইন যোগ করুন:

src/app/shop/shop.component.scss 

@use '@angular/cdk';

.purchase-button {
    border-radius: 5px;
    background-color: mat.get-color-from-palette(mat.$pink-palette, A100);

    @include cdk-high-contrast {
      outline: solid 1px;
      background-color: mat.get-color-from-palette(mat.$pink-palette, 50);
    }
}

:host-context(.dark-theme) {
  .purchase-button {
    background-color: mat.get-color-from-palette(mat.$light-green-palette, A100);

    @include cdk-high-contrast {
      outline: solid 1px;
      background-color: mat.get-color-from-palette(mat.$light-green-palette, 50);
    }
  }
}

পরিবর্তনগুলি যাচাই করুন

আপনার অ্যাপটি রিফ্রেশ করুন এবং আপনার পরিবর্তনগুলি যাচাই করুন। আপনি উচ্চ বৈসাদৃশ্য মোডে বোতামটিতে একটি রূপরেখা যোগ করেছেন!

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

অ্যাক্সেসিবিলিটি অডিট:

  • ✅ সকল পৃষ্ঠারই অনন্য পৃষ্ঠার শিরোনাম রয়েছে
  • ✅ রঙের পর্যাপ্ত বৈসাদৃশ্য অনুপাত থাকে
  • ✅ শব্দার্থিক HTML যৌক্তিক মিথস্ক্রিয়া নিশ্চিত করে
  • ✅ সমস্ত নিয়ন্ত্রণ স্ক্রিন রিডারদের কাছে পৌঁছানো যায়
  • ✅ স্লাইডার একটি লেবেল প্রদানের জন্য ARIA বৈশিষ্ট্য ব্যবহার করে
  • ✅ কালার পিকারে সঠিক ফোকাস ট্র্যাপিং আছে
  • ✅ পরিবর্তন, ত্রুটি এবং বিজ্ঞপ্তি ঘোষণা করা হয়
  • ✅ উচ্চ বৈসাদৃশ্য মোড সক্রিয় করা হয়েছে

১৩. অভিনন্দন!

অভিনন্দন, আপনি আপনার অ্যাঙ্গুলার অ্যাপে সাধারণ ওয়েব অ্যাক্সেসিবিলিটি সমস্যাগুলি সমাধান করেছেন! 🎉

সমস্ত সমাধান দেখতে, main শাখাটি দেখুন।

লাল এবং গোলাপী থিমে ডাম্পলিং টাইম শপের ওয়েবসাইটটি এই কোডল্যাবে করা সমস্ত পরিবর্তন দেখায়নীল এবং সবুজ থিমে ডাম্পলিং টাইম শপের ওয়েবসাইটটি এই কোডল্যাবে করা সমস্ত পরিবর্তন দেখায়।১০০/১০০ স্কোর সহ Chrome DevTools লাইটহাউস অডিট

আপনার অ্যাঙ্গুলার অ্যাপ্লিকেশনে আটটি সাধারণ a11y সমস্যা সমাধানের জন্য প্রয়োজনীয় মূল পদক্ষেপগুলি এখন আপনি জানেন।

আরও জানুন

এই কোডল্যাবগুলি দেখুন:

এই উপকরণগুলি পড়ুন: