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

1. আপনি শুরু করার আগে

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

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

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

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

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

আপনি কি নির্মাণ করবেন

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

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

আপনি কি শিখবেন

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

  • আপনার অ্যাপের অ্যাক্সেসিবিলিটি অডিট করতে Google Chrome ডেভেলপার টুল, Lighthouse, এবং ax ব্যবহার করুন
  • অনন্য পৃষ্ঠা শিরোনাম সহ একক-পৃষ্ঠা অ্যাপ (এসপিএ) সমস্যাগুলি সমাধান করুন
  • কম দৃষ্টিভঙ্গি ব্যবহারকারীদের জন্য কম রঙের বৈসাদৃশ্যের সমস্যা সমাধান করুন
  • স্ক্রীন রিডার সঠিকভাবে পৃষ্ঠাটি নেভিগেট করার জন্য শব্দার্থিক HTML ব্যবহার করুন
  • স্ক্রিন রিডাররা সমস্ত নিয়ন্ত্রণ অ্যাক্সেস করতে পারে তা নিশ্চিত করতে কৌণিক উপাদান এবং আননেস্ট নিয়ন্ত্রণগুলি ব্যবহার করুন৷
  • স্ক্রিন রিডারদের জন্য ARIA সমর্থন যোগ করুন
  • কৌণিক CDK a11y প্যাকেজ আমদানি এবং ব্যবহার করুন
  • কাস্টম উপাদান স্ক্রিন-রিডার নেভিগেশন জন্য FocusTrap ব্যবহার করুন
  • 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 ।

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

আপনার শুরু বিন্দু কি?

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

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

ডেমো অন্বেষণ

শুরু করতে, আপনার অ্যাপের তিনটি কার্যকারিতার মধ্য দিয়ে হাঁটুন:

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

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

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

আপনি কি ঠিক করতে জানেন কিভাবে?

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

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

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

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

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

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

আপনি MacOS বিল্ট-ইন ভয়েসওভার ব্যবহার করতে পারেন। সিস্টেম পছন্দসমূহ > অ্যাক্সেসিবিলিটি > ভয়েসওভার > সক্রিয় করতে ভয়েসওভারে ক্লিক করুন। ভয়েসওভার টগল করতে, Command কী ধরে রেখে দ্রুত তিনবার TouchID টিপুন।

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

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

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

বাতিঘর এবং ক্রোম বিকাশকারী সরঞ্জাম

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

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

কুঠার

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

লিন্টিং

আপনি স্বয়ংক্রিয় a11y বৈশিষ্ট্যগুলির জন্য আপনার কোড লিন্ট করতে কৌণিক 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 এবং ax এর অডিট এবং ম্যানুয়াল ভয়েসওভার ব্যবহার করে আপনার অ্যাপে নিম্নলিখিত সমস্যাগুলি সনাক্ত করতে পারেন:

82 স্কোর সহ Chrome DevTools Lighthouse অডিট

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

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

4. অনন্য পৃষ্ঠা শিরোনাম সংজ্ঞায়িত করুন

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

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

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

এই বিভাগের শেষে, আপনার অ্যাপ নিম্নলিখিত নিরীক্ষায় উত্তীর্ণ হবে:

  • 🛑 সমস্ত পৃষ্ঠার একই পৃষ্ঠার শিরোনাম আছে

আপনি মন্তব্যের অধীনে এই পদক্ষেপগুলির প্রতিটি খুঁজে পেতে পারেন: TODO: #4. Define unique page titles.

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

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

  1. ভয়েসওভার চালু করুন।
  2. পৃষ্ঠাগুলির মধ্যে নেভিগেট করতে ট্যাব নেভিগেশন ব্যবহার করুন।
  3. পৃষ্ঠার শিরোনাম সর্বদা কৌণিকভাবে 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 in Angular', 'Our Story - A11y in Angular', 'Find Us - A11y in Angular'

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

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

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

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

এই বিভাগের শেষে, আপনার অ্যাপ নিম্নলিখিত নিরীক্ষায় উত্তীর্ণ হবে:

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

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

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

এই সমস্যাটি সনাক্ত করতে, আপনার অ্যাপের উপাদানগুলি পরিদর্শন করতে Chrome বিকাশকারী সরঞ্জামগুলি ব্যবহার করুন৷

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

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

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

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

উপাদান থিম রঙ পরিবর্তন করুন

আপনার উপাদান রঙের স্কিম আপনার কাস্টম উপাদান থিমে সংজ্ঞায়িত করা হয়. রঙ-কনট্রাস্ট অনুপাত নির্দেশিকা পূরণ করতে আপনি আপনার থিমের মান আপডেট করেন।

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

src/styles.scss 

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

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

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

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

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

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

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

6. শব্দার্থিক HTML ব্যবহার করুন

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

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

এই বিভাগের শেষে, আপনার অ্যাপ নিম্নলিখিত নিরীক্ষায় উত্তীর্ণ হবে:

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

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

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

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

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

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

একটি উপাদান বোতাম দিয়ে কাস্টম <div> প্রতিস্থাপন করুন:

src/app/shop/shop.component.html 

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

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

শব্দার্থিক এইচটিএমএল ব্যবহার করার জন্য পাঠ্যটি পুনরায় সাজান এবং কৌণিক উপাদান টাইপোগ্রাফি ব্যবহার করে স্টাইলিং প্রয়োগ করুন:

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 যৌক্তিক মিথস্ক্রিয়া নিশ্চিত করে
  • 🛑 নেস্টেড চেকবক্স স্ক্রিন রিডারদের জন্য নির্বাচনযোগ্য নয়
  • 🛑 স্ক্রিন রিডার স্লাইডারের মান পড়তে পারে না
  • 🛑 কালার পিকারে স্ক্রিন রিডার ফোকাস ডায়ালগ থেকে প্রস্থান করে
  • 🛑 পরিবর্তন, ত্রুটি, এবং বিজ্ঞপ্তি ঘোষণা করা হয় না
  • 🛑 হাইকনট্রাস্ট মোড সক্ষম করা নেই

7. কৌণিক উপাদান দিয়ে নির্বাচনযোগ্য নিয়ন্ত্রণ তৈরি করুন

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

কৌণিক-এ, যতটা সম্ভব নিয়ন্ত্রণগুলিকে সরলীকরণ করে নেভিগেবল উপাদানগুলি তৈরি করতে মেনু এবং নিয়ন্ত্রণগুলিকে সরল করুন৷ এই উদাহরণে, আপনি এই মিথস্ক্রিয়া প্যাটার্নের একটি উদাহরণ তৈরি করতে কৌণিক উপাদানের তালিকাবাক্স ব্যবহার করেন।

এই বিভাগের শেষে, আপনার অ্যাপ নিম্নলিখিত নিরীক্ষায় উত্তীর্ণ হবে:

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

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

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

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

  1. ভয়েসওভার চালু করুন।
  2. বিভিন্ন ভরাট স্বাদ নির্বাচন করুন.
  3. লক্ষ্য করুন যে ভয়েসওভার দ্বারা পড়ার সময় পিতামাতার চেকবক্সগুলি বাচ্চাদের নির্দিষ্ট করে না৷ আপনি কিভাবে জানবেন যে Vegan চেকবক্সটি এখন অনির্বাচিত হয়েছে যে আপনি Bok Choy চেকবক্সটি অনির্বাচিত করেছেন?

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

A11y কৌণিক পদার্থে

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

উপাদান চেকবক্স সঙ্গে চেকবক্স প্রতিস্থাপন

  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 যৌক্তিক মিথস্ক্রিয়া নিশ্চিত করে
  • ✅ সমস্ত নিয়ন্ত্রণ স্ক্রিন রিডারদের দ্বারা পৌঁছানো যায়
  • 🛑 স্ক্রিন রিডার স্লাইডারের মান পড়তে পারে না
  • 🛑 কালার পিকারে স্ক্রিন রিডার ফোকাস ডায়ালগ থেকে প্রস্থান করে
  • 🛑 পরিবর্তন, ত্রুটি, এবং বিজ্ঞপ্তি ঘোষণা করা হয় না
  • 🛑 হাইকনট্রাস্ট মোড সক্ষম করা নেই

8. ARIA-এর সাথে কন্ট্রোল লেবেল প্রদান করুন

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

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

এই বিভাগের শেষে, আপনার অ্যাপ নিম্নলিখিত নিরীক্ষায় উত্তীর্ণ হবে:

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

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

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

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

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

ত্রুটি সহ Chrome DevTools Lighthouse অডিট ফলাফল: 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 Lighthouse অডিট।

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

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

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

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

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

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

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

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

src/app/app.module.ts 

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

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

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

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

নিম্নলিখিত বিভাগে, আপনি তিনটি সাধারণ পরিষেবা যোগ করুন: ফোকাসট্র্যাপ, লাইভঅ্যানাউসার এবং হাইকনট্রাস্ট।

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

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

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

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

এই বিভাগের শেষে, আপনার অ্যাপ নিম্নলিখিত নিরীক্ষায় উত্তীর্ণ হবে:

  • 🛑 কালার পিকারে স্ক্রিন রিডার ফোকাস ডায়ালগ থেকে প্রস্থান করে

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

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

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

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

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

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

cdkFocusTrap কাস্টম উপাদানগুলিতে ফোকাস অর্ডার আটকাতে এবং নিয়ন্ত্রণ করতে ব্যবহার করা যেতে পারে। একটি ডায়ালগে ফোকাস আটকে বেশিরভাগ সমস্যা সমাধানের জন্য mat-dialog-content ব্যবহার করাই যথেষ্ট। কালার পিকার ডায়ালগের মধ্যে ডাম্পলিং র্যাপার রঙ <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 বৈশিষ্ট্য ব্যবহার করে
  • ✅ কালার পিকারের সঠিক ফোকাস ট্র্যাপিং আছে
  • 🛑 পরিবর্তন, ত্রুটি, এবং বিজ্ঞপ্তি ঘোষণা করা হয় না
  • 🛑 হাইকনট্রাস্ট মোড সক্ষম করা নেই

11. LiveAnnouncer এর সাথে পরিবর্তন ঘোষণা করুন

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

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

এই বিভাগের শেষে, আপনার অ্যাপ নিম্নলিখিত নিরীক্ষায় উত্তীর্ণ হবে:

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

আপনি মন্তব্যের অধীনে এই পদক্ষেপগুলি খুঁজে পেতে পারেন: 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 বৈশিষ্ট্য ব্যবহার করে
  • ✅ কালার পিকারের সঠিক ফোকাস ট্র্যাপিং আছে
  • ✅ পরিবর্তন, ত্রুটি এবং বিজ্ঞপ্তি ঘোষণা করা হয়
  • 🛑 হাইকনট্রাস্ট মোড সক্ষম করা নেই

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

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

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

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

এই বিভাগের শেষে, আপনার অ্যাপ নিম্নলিখিত নিরীক্ষায় উত্তীর্ণ হবে:

  • 🛑 হাইকনট্রাস্ট মোড সক্ষম করা নেই

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

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

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

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

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

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

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 বৈশিষ্ট্য ব্যবহার করে
  • ✅ কালার পিকারের সঠিক ফোকাস ট্র্যাপিং আছে
  • ✅ পরিবর্তন, ত্রুটি এবং বিজ্ঞপ্তি ঘোষণা করা হয়
  • ✅ উচ্চ বৈসাদৃশ্য মোড সক্ষম করা হয়েছে

13. অভিনন্দন!

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

সব সমাধান দেখতে, main শাখা চেক আউট.

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

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

আরও জানুন

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

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