১. শুরু করার আগে
ওয়েব ডেভেলপমেন্টের একটি অপরিহার্য অংশ হলো অ্যাক্সেসিবিলিটি, যা নিশ্চিত করে যে ব্যবহারকারীরা অ্যাপগুলো উপলব্ধি করতে, বুঝতে, ব্যবহার করতে এবং সেগুলোর সাথে ইন্টারঅ্যাক্ট করতে পারে। প্রকৃতপক্ষে, মার্কিন যুক্তরাষ্ট্রের প্রতি ৪ জন প্রাপ্তবয়স্কের মধ্যে ১ জনের এমন প্রতিবন্ধকতা রয়েছে যা তাদের প্রধান দৈনন্দিন কার্যকলাপকে প্রভাবিত করে। বিশ্বব্যাপী, বিশ্বের জনসংখ্যার প্রায় ১৫ শতাংশ—অর্থাৎ ১ বিলিয়নেরও বেশি মানুষ—কোনো না কোনো ধরনের প্রতিবন্ধকতায় ভুগছেন, যাদের মধ্যে প্রায় ২ থেকে ৪ শতাংশ গুরুতর সমস্যার সম্মুখীন হন।
যেসব সাধারণ অবস্থা একজন ব্যক্তির ওয়েব ব্যবহারকে প্রভাবিত করে, সেগুলোর মধ্যে রয়েছে অন্ধত্ব বা স্বল্প দৃষ্টি, বধিরতা বা শ্রবণশক্তির দুর্বলতা, সীমিত শারীরিক দক্ষতা, জ্ঞানীয় অক্ষমতা এবং বর্ণান্ধতা—এবং এটি কেবল একটি আংশিক তালিকা।
এই কোর্সে, a11y হলো অ্যাক্সেসিবিলিটির সংক্ষিপ্ত রূপ। লক্ষ্য করুন যে, a- এর পরে ১১টি অক্ষর এবং একটি y রয়েছে।
অ্যাক্সেসযোগ্য অ্যাপ ডিজাইন করার বিষয় ও কৌশল সম্পর্কে বিস্তারিত জানতে, অ্যাক্সেসিবিলিটি দেখুন।
আপনি যা তৈরি করবেন
- একটি ডেমো ডাম্পলিং শপ অ্যাঙ্গুলার অ্যাপে সাধারণ ওয়েব অ্যাক্সেসিবিলিটি সমস্যাগুলি সমাধান করতে সেরা অনুশীলন এবং অন্তর্নির্মিত কৌশল ব্যবহার করুন।
- সকল অ্যাক্সেসিবিলিটি নির্দেশিকা, WCAG 2.0, এবং ARIA 1.2 মেনে চলে এবং axe ও Lighthouse অ্যাক্সেসিবিলিটি অডিটে উত্তীর্ণ হয়।
আপনি যা শিখবেন
আপনি অ্যাঙ্গুলার অ্যাপের আটটি সাধারণ অ্যাক্সেসিবিলিটি সমস্যা, যা ব্যবহারকারীদের প্রভাবিত করে, সেগুলি কীভাবে শনাক্ত করতে হয় এবং কীভাবে সমাধান করতে হয়, সে সম্পর্কে জানতে পারবেন। আরও নির্দিষ্টভাবে বললে, আপনি:
- আপনার অ্যাপের অ্যাক্সেসিবিলিটি নিরীক্ষা করতে গুগল ক্রোম ডেভেলপার টুলস, লাইটহাউস এবং অ্যাক্স ব্যবহার করুন।
- অনন্য পেজ টাইটেলের মাধ্যমে সিঙ্গেল-পেজ অ্যাপ (SPA)-এর সমস্যাগুলো সমাধান করুন।
- স্বল্প দৃষ্টিসম্পন্ন ব্যবহারকারীদের জন্য কম রঙের বৈসাদৃশ্যের সমস্যা সমাধান করুন
- স্ক্রিন রিডাররা যাতে পৃষ্ঠাটিতে সঠিকভাবে নেভিগেট করতে পারে, তা নিশ্চিত করতে সিমান্টিক এইচটিএমএল ব্যবহার করুন।
- স্ক্রিন রিডাররা যাতে সমস্ত কন্ট্রোল অ্যাক্সেস করতে পারে, তা নিশ্চিত করতে অ্যাঙ্গুলার ম্যাটেরিয়াল এবং আননেস্ট কন্ট্রোল ব্যবহার করুন।
- স্ক্রিন রিডারদের জন্য ARIA সাপোর্ট যোগ করুন
- Angular CDK a11y প্যাকেজটি ইম্পোর্ট এবং ব্যবহার করুন
- কাস্টম কম্পোনেন্ট স্ক্রিন-রিডার নেভিগেশনের জন্য ফোকাসট্র্যাপ ব্যবহার করুন
- CDK LiveAnnouncer-এর মাধ্যমে নোটিফিকেশন ঘোষণা করুন
- হাই-কনট্রাস্ট মোড ব্যবহার করে ব্যবহারকারীদের শনাক্ত করুন এবং হাই-কনট্রাস্ট থিমিং প্রয়োগ করুন।
আপনার যা যা লাগবে
- Angular, SCSS, Typescript, git এবং Chrome Developer Tools সম্পর্কে জ্ঞান
২. প্রস্তুত হন
কোডটি নিন
এই প্রোজেক্টের জন্য আপনার প্রয়োজনীয় সবকিছু একটি গিটহাব রিপোজিটরিতে রয়েছে। কাজ শুরু করতে, কোডটি ক্লোন করুন এবং আপনার পছন্দের ডেভেলপমেন্ট এনভায়রনমেন্টে এটি খুলুন।
রিপোজিটরি ক্লোন করুন এবং অ্যাপটি পরিবেশন করুন।
এই কোডল্যাবটি করার জন্য ভিএসকোড (VSCode) অথবা কোনো লোকাল আইডিই (IDE) ব্যবহার করার পরামর্শ দেওয়া হচ্ছে।
- একটি নতুন ব্রাউজার ট্যাব খুলুন এবং https://github.com/googlecodelabs/angular-accessibility -এ যান।
- রিপোজিটরিটি ফর্ক ও ক্লোন করুন এবং রিপোজিটরির ভেতরে
cd angular-accessibility/ডিরেক্টরিতে প্রবেশ করুন। - স্টার্টার কোড ব্রাঞ্চটি চেক আউট করুন
git checkout get-started. - VSCode বা আপনার পছন্দের IDE-তে কোডটি খুলুন।
- সার্ভার চালানোর জন্য প্রয়োজনীয় ডিপেন্ডেন্সিগুলো ইনস্টল করতে
npm installচালান। - সার্ভারটি চালু করতে
ng serveচালান। - ব্রাউজারে http://localhost:4200 ট্যাবটি খুলুন।
৩. একটি ভিত্তি স্থাপন করুন
আপনার সূচনা বিন্দু কী?
আপনার কাজের সূচনা হবে এই কোডল্যাবের জন্য ডিজাইন করা একটি সাধারণ রেস্তোরাঁ অ্যাপ দিয়ে। এই কোডল্যাবের ধারণাগুলো দেখানোর জন্য কোডটিকে সরল করা হয়েছে এবং এতে কার্যকারিতা খুব কম।
ডেমোটি অন্বেষণ করুন
শুরু করার জন্য, আপনার অ্যাপের তিনটি কার্যকারিতা বর্ণনা করুন:
- আমাদের দোকান , আমাদের গল্প , এবং আমাদের খুঁজুন রুটগুলো দেখতে ও ডাম্পলিং কোম্পানিটি সম্পর্কে বিস্তারিত জানতে নেভিগেশন বারটি ব্যবহার করুন।
- লাইট ও ডার্ক মোড টগল করতে থিম পরিবর্তন করুন।
- আপনার অর্ডারের ডাম্পলিংয়ের পুর, পরিমাণ এবং রঙ নিজের পছন্দমতো বেছে নিন।
- কনসোলে আপনার কাস্টমাইজ করা অর্ডারটি নথিভুক্ত করতে 'পারচেজ' নির্বাচন করুন।
সাধারণ ওয়েব অ্যাক্সেসিবিলিটি সমস্যা সমাধানে অ্যাঙ্গুলার ব্যবহার করুন
এই কোডল্যাবে, আপনি এই অ্যাপের বিদ্যমান ফিচারগুলোর অ্যাক্সেসিবিলিটির উপর মনোযোগ দেবেন। আপনি প্রথমে আপনার অ্যাপের অ্যাক্সেসিবিলিটি সংক্রান্ত সমস্যাগুলো চিহ্নিত করবেন, তারপর একটি সমাধান বাস্তবায়নের মাধ্যমে সেই 🛑 সমস্যাটিকে ✅-এ পরিণত করবেন।
কী ঠিক করতে হবে তা আপনি কীভাবে জানবেন?
ম্যানুয়াল এবং স্বয়ংক্রিয় পরীক্ষার মিশ্রণ ব্যবহার করে অ্যাক্সেসিবিলিটি সমস্যাটি শনাক্ত করার মাধ্যমে প্রতিটি উদাহরণ শুরু করুন।
ওয়েবের বর্তমান অবস্থায়, ম্যানুয়ালি অ্যাক্সেসিবিলিটি পরীক্ষা করা বাধ্যতামূলক।
আপনার কাছে এমন টুল আছে যা অ্যাক্সেসিবিলিটির সমস্যা শনাক্ত করতে পারে, কিন্তু কোনো টুলই একটি অ্যাপকে সম্পূর্ণ অ্যাক্সেসিবল হিসেবে প্রত্যয়ন করতে পারে না। ম্যানুয়াল টেস্টিং নিশ্চিত করে যে আপনি অ্যাক্সেসিবিলিটির বিভিন্ন ধারণা পরীক্ষা করছেন, যার মধ্যে বিষয়বস্তুর যৌক্তিক ক্রম এবং ফিচারের সমতা অন্তর্ভুক্ত।
ম্যানুয়াল টেস্টিং
এই কোর্সে অ্যাক্সেসিবিলিটি ম্যানুয়ালি পরীক্ষা করার জন্য, আপনার কম্পিউটারের বিল্ট-ইন স্ক্রিন রিডার চালু করুন এবং কিবোর্ড নেভিগেশনের মাধ্যমে আপনার অ্যাপটি নেভিগেট করুন। আরও তথ্যের জন্য, ‘সিম্যান্টিকস এবং স্ক্রিন রিডার’ দেখুন।
স্ক্রিন রিডার চালু করে স্ক্রিনে নেভিগেট করার মাধ্যমে অনুশীলন করুন।
আপনি MacOS-এর বিল্ট-ইন VoiceOver ব্যবহার করতে পারেন। এটি চালু করতে System Preferences > Accessibility > VoiceOver > Enable VoiceOver-এ ক্লিক করুন। VoiceOver চালু বা বন্ধ করতে, Command কী চেপে ধরে TouchID দ্রুত তিনবার চাপুন।
এই কোর্সে, আপনি প্রধানত ম্যানুয়ালি সমস্যাগুলো পরীক্ষা করবেন এবং নির্দিষ্ট স্বয়ংক্রিয় বৈশিষ্ট্যগুলো যাচাই করার জন্য স্বয়ংক্রিয় টুল ব্যবহার করবেন।
স্বয়ংক্রিয় পরীক্ষা
আপনার অ্যাপকে স্বয়ংক্রিয় করতে এবং নিরীক্ষা করতে আপনি কয়েকটি ডেভেলপমেন্ট টুলও ব্যবহার করেন। এই টুলগুলো আপনাকে কোনো ছবিতে অল্ট টেক্সটের উপস্থিতি বা কোনো টেক্সটের রঙের কনট্রাস্ট রেশিওর মতো বিষয়গুলো পরীক্ষা করার সুযোগ দেয়। আপনি এই টুলগুলোকে লিন্টার হিসেবে ভাবতে পারেন; এগুলো অল্ট টেক্সটের উপস্থিতি শনাক্ত করতে পারে, কিন্তু এর বিষয়বস্তু যৌক্তিক এবং মূল্যবান কিনা তা আপনাকে ম্যানুয়ালি পরীক্ষা করতে হবে।
লাইটহাউস এবং ক্রোম ডেভেলপার টুলস
- ক্রোম ডেভেলপার টুলস খুলুন।
- লাইটহাউস ট্যাবটি নির্বাচন করুন এবং অ্যাক্সেসিবিলিটি চেকবক্সটি নির্বাচন করুন।
- একটি অ্যাক্সেসিবিলিটি লাইটহাউস অডিট চালানোর জন্য 'জেনারেট রিপোর্ট'- এ ক্লিক করুন।
কুঠার
- axe DevTools এক্সটেনশনটি ইনস্টল করুন। এক্সটেনশনটি দেখতে আপনার ব্রাউজারটি পুনরায় চালু করার প্রয়োজন হতে পারে।
- ক্রোম ডেভেলপার টুলস খুলুন।
- axe DevTools ট্যাবটি নির্বাচন করুন এবং একটি axe DevTools স্ক্যান চালানোর জন্য 'Scan all of my page' বিকল্পটি বেছে নিন।
লিন্টিং
আপনি স্বয়ংক্রিয়ভাবে অ্যাক্সেসযোগ্য অ্যাট্রিবিউটগুলোর জন্য আপনার কোড লিন্ট করতে অ্যাঙ্গুলার 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 নিয়মাবলী দেখুন।
আপনার শুরুর বিন্দু
আপনার নতুন পরীক্ষা পদ্ধতি ব্যবহার করে, আপনি লাইটহাউস ও অ্যাক্স অডিট এবং ম্যানুয়াল ভয়েসওভারের মাধ্যমে আপনার অ্যাপে নিম্নলিখিত সমস্যাগুলি শনাক্ত করতে পারেন:
প্রবেশগম্যতা নিরীক্ষা:
- 🛑 সব পৃষ্ঠার শিরোনাম একই
- 🛑 উপাদানগুলোতে পর্যাপ্ত রঙের বৈসাদৃশ্য থাকতে হবে
- 🛑 HTML-এ যৌক্তিক ক্রম, নাম এবং ভূমিকা থাকা উচিত।
- 🛑 নেস্টেড চেকবক্সগুলো স্ক্রিন রিডারের জন্য নির্বাচনযোগ্য নয়।
- 🛑 স্ক্রিন রিডার স্লাইডারের মানগুলো পড়তে পারে না
- 🛑 কালার পিকার-এ স্ক্রিন রিডার ফোকাস করলে ডায়ালগটি বন্ধ হয়ে যায়।
- 🛑 পরিবর্তন, ত্রুটি এবং বিজ্ঞপ্তি জানানো হয় না।
- 🛑 হাই-কনট্রাস্ট মোড চালু করা নেই
৪. স্বতন্ত্র পৃষ্ঠার শিরোনাম নির্ধারণ করুন
অনন্য ও সংক্ষিপ্ত পৃষ্ঠার শিরোনাম প্রদান করলে অ্যাক্সেসিবিলিটি (a11y) পরিষেবা ব্যবহারকারীরা একটি ওয়েব পৃষ্ঠার বিষয়বস্তু ও উদ্দেশ্য দ্রুত বুঝতে পারেন। দৃষ্টি প্রতিবন্ধী ব্যবহারকারীদের জন্য পৃষ্ঠার শিরোনাম অত্যন্ত গুরুত্বপূর্ণ, কারণ স্ক্রিন-রিডিং সফটওয়্যার দ্বারা ঘোষিত এটিই প্রথম পৃষ্ঠার উপাদান।
অ্যাঙ্গুলার একটি সিঙ্গেল-পেজ অ্যাপ হওয়ায়, নতুন পেজে যাওয়ার মতো বেশিরভাগ ট্রানজিশনে পেজ রিলোড হয় না। সম্প্রতি পর্যন্ত, এর মানে ছিল যে প্রতিটি পেজের একটি অভিন্ন পেজ টাইটেল থাকতো, যা পেজের বিষয়বস্তু বা উদ্দেশ্য বোঝার ক্ষেত্রে কোনো কাজে আসতো না।
Angular v14-এ, রাউটারে স্বয়ংক্রিয়ভাবে স্বতন্ত্র পেজ টাইটেল নির্ধারণের জন্য একটি বিল্ট-ইন মেথড যুক্ত করা হয়েছে। এটি ডেভেলপারদের পেজ টাইটেল সংক্রান্ত সর্বোত্তম অনুশীলনগুলো অনুসরণ নিশ্চিত করার জন্য একটি সুবিন্যস্ত পদ্ধতি প্রদান করে।
এই অংশের শেষে, আপনার অ্যাপটি নিম্নলিখিত নিরীক্ষায় উত্তীর্ণ হবে:
- 🛑 সব পৃষ্ঠার শিরোনাম একই
আপনি এই প্রতিটি ধাপ এই মন্তব্যের অধীনে খুঁজে পাবেন: TODO: #4. Define unique page titles.
সমস্যাটি চিহ্নিত করুন
এই সমস্যাটি শনাক্ত করতে, আপনার স্ক্রিন রিডার চালু করুন এবং পৃষ্ঠার শিরোনামগুলো দেখতে Our Shop , Our Story , এবং Find Us ট্যাবগুলোর মধ্যে নেভিগেট করুন:
- ভয়েসওভার চালু করুন।
- পৃষ্ঠাগুলির মধ্যে যাতায়াত করতে ট্যাব নেভিগেশন ব্যবহার করুন।
- অ্যাঙ্গুলারে পেজের শিরোনামটি যেন সবসময় অ্যাক্সেসযোগ্য থাকে, তা যাচাই করুন।
এটি একটি সমস্যা, কারণ আপনার পৃষ্ঠার শিরোনাম অবশ্যই অনন্য হতে হবে , যাতে একজন ব্যবহারকারী পৃষ্ঠাটির মধ্যে দিয়ে না গিয়েই দ্রুত বুঝতে পারে যে পৃষ্ঠাটি কী বিষয়ক।
অর্থপূর্ণ পৃষ্ঠার শিরোনাম যোগ করুন
যদি কোনো পেজ বা ভিউ পরিবর্তিত হয়, তবে আপনি পেজের শিরোনামটি সঠিকভাবে পরিচালনা করতে চাইবেন। এটি করার জন্য, আপনি আপনার প্রতিটি পেজের জন্য স্বতন্ত্র শিরোনাম নির্ধারণ করতে অ্যাঙ্গুলারের বিল্ট-ইন Router.title প্রপার্টি ব্যবহার করেন।
- নির্ধারিত তিনটি রুটের প্রতিটিতে একটি অনন্য শিরোনাম যোগ করুন:
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 ব্যবহার করে আরও জটিল পেজ টাইটেল পরিচালনা করতে পারেন।
পরিবর্তনগুলি যাচাই করুন
আপনার স্ক্রিন রিডারটি আবার চালু করুন এবং আপনার পরিবর্তনগুলো যাচাই করুন। পৃষ্ঠাগুলোর এখন স্বতন্ত্র শিরোনাম থাকা উচিত!
প্রবেশগম্যতা নিরীক্ষা:
- ✅ প্রতিটি পৃষ্ঠার স্বতন্ত্র শিরোনাম রয়েছে
- 🛑 উপাদানগুলোতে পর্যাপ্ত রঙের বৈসাদৃশ্য থাকতে হবে
- 🛑 HTML-এ যৌক্তিক ক্রম, নাম এবং ভূমিকা থাকা উচিত।
- 🛑 নেস্টেড চেকবক্সগুলো স্ক্রিন রিডারের জন্য নির্বাচনযোগ্য নয়।
- 🛑 স্ক্রিন রিডার স্লাইডারের মানগুলো পড়তে পারে না
- 🛑 কালার পিকার-এ স্ক্রিন রিডার ফোকাস করলে ডায়ালগটি বন্ধ হয়ে যায়।
- 🛑 পরিবর্তন, ত্রুটি এবং বিজ্ঞপ্তি জানানো হয় না।
- 🛑 হাই-কনট্রাস্ট মোড চালু করা নেই
৫. রঙের পর্যাপ্ত বৈসাদৃশ্য নিশ্চিত করুন।
আপনার ডিজাইনটি দেখতে আকর্ষণীয় মনে হতে পারে, কিন্তু বর্ণান্ধতার মতো দৃষ্টি প্রতিবন্ধী ব্যক্তিরা যদি আপনার কন্টেন্ট পড়তে না পারেন, তবে তার কোনো মূল্য নেই। ওয়েব কন্টেন্ট অ্যাক্সেসিবিলিটি গাইডলাইনস (WCAG 2.0) বেশ কিছু কালার কনট্রাস্ট রেশিও নির্ধারণ করে, যা কন্টেন্টের অ্যাক্সেসিবিলিটি নিশ্চিত করে। অ্যাঙ্গুলারে এবং ওয়েবে, আপনি এমন কালার প্যালেট নির্ধারণ করতে পারেন যা নিশ্চিত করে যে আপনার কম্পোনেন্টগুলো এই মানগুলো পূরণ করে এবং স্বল্প-দৃষ্টি ও বর্ণান্ধ ব্যবহারকারীদের কাছে দৃশ্যমান হয়।
এই অংশের শেষে, আপনার অ্যাপটি নিম্নলিখিত নিরীক্ষায় উত্তীর্ণ হবে:
- 🛑 উপাদানগুলোতে পর্যাপ্ত রঙের বৈসাদৃশ্য থাকতে হবে
আপনি এই প্রতিটি ধাপ কমেন্টের অধীনে খুঁজে পাবেন: TODO: #5. Ensure adequate color contrast.
কম-কন্ট্রাস্ট সমস্যা শনাক্ত করতে ক্রোম ডেভেলপার টুলস ব্যবহার করুন।
এই সমস্যাটি শনাক্ত করতে, ক্রোম ডেভেলপার টুলস ব্যবহার করে আপনার অ্যাপের এলিমেন্টগুলো পরিদর্শন করুন।
- মেনু আইকন বাটনগুলো দেখতে ইন্সপেক্ট টুলটি ব্যবহার করুন। আপনি দেখতে পাবেন যে এর কনট্রাস্ট হলো ১.৮৫, যা WCAG-এর নির্ধারিত মানের চেয়ে অনেক কম।
- এই কনট্রাস্ট-রেসিও সমস্যাগুলো দেখতে লাইটহাউস বা অ্যাক্স-এর স্ক্যানে অ্যাক্সেসিবিলিটি অডিটটি চালান।
উপাদানের থিমের রঙ পরিবর্তন করুন
আপনার কম্পোনেন্টের কালার স্কিম আপনার কাস্টম ম্যাটেরিয়াল থিমে নির্ধারণ করা থাকে। কালার-কনট্রাস্ট রেশিওর নির্দেশিকা মেনে চলার জন্য আপনাকে আপনার থিমের ভ্যালু আপডেট করতে হবে।
আপনার ম্যাটেরিয়াল থিমটি আপডেট করে টেক্সটের রঙ আরও গাঢ় করুন, যা আপনার আইকনগুলোর কনট্রাস্ট রেশিও বাড়িয়ে দেবে:
src/styles.scss
$light-primary: mat.define-palette(mat.$pink-palette, $default: A100, $lighter: 100, $text: 900);
আপনি Chrome Developer Tools- এর অন্তর্নির্মিত অ্যাক্সেসিবিলিটি টুলিং ব্যবহার করে মানসম্মত একটি রঙ খুঁজে নিতে পারেন, অথবা Sass-এ স্বতন্ত্র রঙের মান আপডেট করতে পারেন।
পরিবর্তনগুলি যাচাই করুন
আপনার উপাদানগুলো পুনরায় পরিদর্শন করুন এবং পরিবর্তনগুলো যাচাই করুন, আমাদের থিমে এখন পর্যাপ্ত রঙের বৈসাদৃশ্য অনুপাত থাকা উচিত!
প্রবেশযোগ্যতা নিরীক্ষা
- ✅ প্রতিটি পৃষ্ঠার স্বতন্ত্র শিরোনাম রয়েছে
- ✅ রঙগুলোর মধ্যে পর্যাপ্ত বৈসাদৃশ্য অনুপাত রয়েছে
- 🛑 HTML-এ যৌক্তিক ক্রম, নাম এবং ভূমিকা থাকা উচিত।
- 🛑 নেস্টেড চেকবক্সগুলো স্ক্রিন রিডারের জন্য নির্বাচনযোগ্য নয়।
- 🛑 স্ক্রিন রিডার স্লাইডারের মানগুলো পড়তে পারে না
- 🛑 কালার পিকার-এ স্ক্রিন রিডার ফোকাস করলে ডায়ালগটি বন্ধ হয়ে যায়।
- 🛑 পরিবর্তন, ত্রুটি এবং বিজ্ঞপ্তি জানানো হয় না।
- 🛑 হাই-কনট্রাস্ট মোড চালু করা নেই
৬. সিমান্টিক এইচটিএমএল ব্যবহার করুন
নেটিভ এইচটিএমএল এলিমেন্টগুলো বেশ কিছু স্ট্যান্ডার্ড ইন্টারঅ্যাকশন প্যাটার্ন ধারণ করে, যা অ্যাক্সেসিবিলিটির জন্য গুরুত্বপূর্ণ। যদিও একটি প্যারাগ্রাফকে স্প্যান হিসেবে এবং একটি ডিভকে বাটন হিসেবে স্টাইল করা যায়, সিমান্টিক এইচটিএমএল এলিমেন্টগুলো নিশ্চিত করে যে স্ক্রিন রিডার এবং কীবোর্ড নেভিগেশন আপনার এইচটিএমএল-এর ইন্টারঅ্যাকশন ও কন্ট্রোলগুলো বুঝতে পারে।
অ্যাঙ্গুলার কম্পোনেন্ট তৈরি করার সময়, সুপ্রতিষ্ঠিত আচরণগুলো পুনরায় প্রয়োগ না করে, সম্ভব হলে এই নেটিভ এলিমেন্টগুলো সরাসরি পুনরায় ব্যবহার করা উচিত। এটি নিশ্চিত করে যে পেজটির একটি ভালো কন্টেন্ট কাঠামো ও স্বাভাবিক প্রবাহ রয়েছে এবং ট্যাবগুলো একটি যৌক্তিক ক্রমে সাজানো আছে, যা ব্যবহারকারীদের কিবোর্ডের কার্যকর ব্যবহারের মাধ্যমে ওয়েবসাইটটি নেভিগেট করতে সহায়তা করে।
এই অংশের শেষে, আপনার অ্যাপটি নিম্নলিখিত নিরীক্ষায় উত্তীর্ণ হবে:
- 🛑 HTML-এ যৌক্তিক ক্রম, নাম এবং ভূমিকা থাকা উচিত।
আপনি এই প্রতিটি ধাপ কমেন্টগুলোর নিচে খুঁজে পাবেন: TODO: #6. Use Semantic HTML.
সমস্যাটি চিহ্নিত করুন
- ভয়েসওভার চালু করুন।
- ট্যাব নেভিগেশন ব্যবহার করে ‘আমাদের গল্প’ ট্যাবে ক্লিক করে যান।
- লক্ষ্য করুন, ট্যাবগুলোর ক্রম অনুক্রমিক নয়।
- ক্রয় করুন -এ ক্লিক করুন।
- লক্ষ্য করুন, বাটনটি বাটন হিসেবে স্বীকৃত হচ্ছে না।
একটি <div> কে একটি <button> এ পরিবর্তন করা
কাস্টম <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>
পরিবর্তনগুলি যাচাই করুন
আপনার স্ক্রিন রিডারটি আবার চালু করুন এবং আপনার পরিবর্তনগুলো যাচাই করুন। ভয়েসওভার এখন বাটনটি শনাক্ত করতে পারছে এবং লেখাগুলো একটি যৌক্তিক ক্রমে পড়া হচ্ছে!
প্রবেশগম্যতা নিরীক্ষা:
- ✅ প্রতিটি পৃষ্ঠার স্বতন্ত্র শিরোনাম রয়েছে
- ✅ রঙগুলোর মধ্যে পর্যাপ্ত বৈসাদৃশ্য অনুপাত রয়েছে
- ✅ সিমান্টিক এইচটিএমএল যৌক্তিক মিথস্ক্রিয়া নিশ্চিত করে
- 🛑 নেস্টেড চেকবক্সগুলো স্ক্রিন রিডারের জন্য নির্বাচনযোগ্য নয়।
- 🛑 স্ক্রিন রিডার স্লাইডারের মানগুলো পড়তে পারে না
- 🛑 কালার পিকার-এ স্ক্রিন রিডার ফোকাস করলে ডায়ালগটি বন্ধ হয়ে যায়।
- 🛑 পরিবর্তন, ত্রুটি এবং বিজ্ঞপ্তি জানানো হয় না।
- 🛑 হাই-কনট্রাস্ট মোড চালু করা নেই
৭. অ্যাঙ্গুলার ম্যাটেরিয়াল ব্যবহার করে নির্বাচনযোগ্য কন্ট্রোল তৈরি করুন
অ্যাক্সেসিবিলিটি সার্ভিসের জন্য একটি জটিল ইন্টারঅ্যাকশন প্যাটার্ন হলো নেস্টেড কন্ট্রোল। মেনুর সাব-আইটেম বা নেস্টেড চেকবক্সের কথা ভাবুন। আপনি একজন ব্যবহারকারীকে কীভাবে বোঝাবেন যে তিনি অপশনগুলোর একটি উপগোষ্ঠী নির্বাচন করতে পারেন বা একটি প্যারেন্ট মেনু আইটেমে যেতে পারেন?
অ্যাঙ্গুলারে, কন্ট্রোলগুলোকে যথাসম্ভব সরল করার মাধ্যমে মেনু এবং কন্ট্রোলগুলোকে সরল করে নেভিগেবল কম্পোনেন্ট তৈরি করুন। এই উদাহরণে, আপনি এই ইন্টারঅ্যাকশন প্যাটার্নের একটি উদাহরণ তৈরি করতে অ্যাঙ্গুলার ম্যাটেরিয়ালের লিস্টবক্স ব্যবহার করেছেন।
এই অংশের শেষে, আপনার অ্যাপটি নিম্নলিখিত নিরীক্ষায় উত্তীর্ণ হবে:
- 🛑 নেস্টেড চেকবক্সগুলো স্ক্রিন রিডারের জন্য নির্বাচনযোগ্য নয়।
আপনি এই প্রতিটি ধাপ কমেন্টের নিচে খুঁজে পাবেন: TODO: #7. Create selectable controls with Angular Material.
সমস্যাটি চিহ্নিত করুন
এই সমস্যাটি শনাক্ত করার জন্য আমরা আমাদের স্ক্রিন রিডার চালু করব এবং একটি নেস্টেড চেকবক্স নির্বাচন করার চেষ্টা করব।
- ভয়েসওভার চালু করুন।
- বিভিন্ন স্বাদের ফিলিং বেছে নিন।
- লক্ষ্য করুন যে, ভয়েসওভার যখন পড়ে শোনায়, তখন প্যারেন্ট চেকবক্সগুলো চাইল্ড চেকবক্সগুলোকে নির্দিষ্ট করে না। আপনি কীভাবে জানবেন যে বক চয় চেকবক্সটি আনসিলেক্ট করার পর ভেগান চেকবক্সটিও আনসিলেক্ট হয়ে গেছে?
অ্যাঙ্গুলার ম্যাটেরিয়ালে A11y
আপনি সিমান্টিক চেকবক্সটিকে অ্যাঙ্গুলার ম্যাটেরিয়াল চেকবক্স দিয়ে প্রতিস্থাপন করেন, যেটিতে এই ইন্টারঅ্যাকশন প্যাটার্ন সম্পর্কে অন্তর্নির্মিত জ্ঞান রয়েছে। এটা মনে রাখা গুরুত্বপূর্ণ যে, কম্পোনেন্টগুলোকে ম্যাটেরিয়াল দিয়ে প্রতিস্থাপন করলেই অ্যাক্সেসিবিলিটির নিশ্চয়তা পাওয়া যায় না। অন্য যেকোনো কম্পোনেন্টের মতোই, আপনাকে ম্যানুয়ালি পরীক্ষা করতে হবে, কারণ ম্যাটেরিয়ালকে অ্যাক্সেস-অযোগ্যভাবে প্রয়োগ করার অনেক উপায় রয়েছে।
চেকবক্সগুলোকে ম্যাটেরিয়াল চেকবক্স দিয়ে প্রতিস্থাপন করুন
- প্রথমে, আপনার নতুন ফিলিংয়ের তালিকা এবং নির্বাচিত ফিলিংয়ের ফ্লেভারগুলো সংরক্ষণের জন্য একটি ভ্যারিয়েবল যোগ করুন:
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
})
}
}
- 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 কোড কোথায় সরিয়ে ফেলা যায়।
পরিবর্তনগুলি যাচাই করুন
আপনার স্ক্রিন রিডারটি আবার চালু করুন এবং আপনার পরিবর্তনগুলো যাচাই করুন। আপনার চেকবক্সগুলো এখন নির্বাচনযোগ্য এবং স্ক্রিন রিডারের মাধ্যমে আরও সহজে ব্যবহার করা যাচ্ছে!
প্রবেশগম্যতা নিরীক্ষা:
- ✅ প্রতিটি পৃষ্ঠার স্বতন্ত্র শিরোনাম রয়েছে
- ✅ রঙগুলোর মধ্যে পর্যাপ্ত বৈসাদৃশ্য অনুপাত রয়েছে
- ✅ সিমান্টিক এইচটিএমএল যৌক্তিক মিথস্ক্রিয়া নিশ্চিত করে
- ✅ স্ক্রিন রিডারের মাধ্যমে সমস্ত কন্ট্রোল অ্যাক্সেস করা যায়
- 🛑 স্ক্রিন রিডার স্লাইডারের মানগুলো পড়তে পারে না
- 🛑 কালার পিকার-এ স্ক্রিন রিডার ফোকাস করলে ডায়ালগটি বন্ধ হয়ে যায়।
- 🛑 পরিবর্তন, ত্রুটি এবং বিজ্ঞপ্তি জানানো হয় না।
- 🛑 হাই-কনট্রাস্ট মোড চালু করা নেই
৮. ARIA সহ নিয়ন্ত্রণ লেবেল সরবরাহ করুন।
আপনি আপনার অ্যাঙ্গুলার অ্যাপের সিমান্টিক এইচটিএমএল এবং ম্যাটেরিয়াল কম্পোনেন্টগুলো পরিবর্তন করেছেন, কিন্তু স্ক্রিন রিডার দ্বারা সম্পূর্ণরূপে নেভিগেট করার জন্য কিছু কম্পোনেন্টের নির্দিষ্ট অ্যাট্রিবিউটের প্রয়োজন।
ওয়েব অ্যাক্সেসিবিলিটি ইনিশিয়েটিভ-এর অ্যাক্সেসিবল রিচ ইন্টারনেট অ্যাপ্লিকেশনস স্পেসিফিকেশন (WAI-ARIA বা ARIA) এমন সব সমস্যার সমাধানে সাহায্য করে যা নেটিভ HTML দিয়ে সামলানো যায় না। এটি আপনাকে এমন অ্যাট্রিবিউট নির্দিষ্ট করার সুযোগ দেয়, যা অ্যাক্সেসিবিলিটি ট্রি-তে কোনো এলিমেন্টের অনুবাদের পদ্ধতিকে পরিবর্তন করে।
এই অংশের শেষে, আপনার অ্যাপটি নিম্নলিখিত নিরীক্ষায় উত্তীর্ণ হবে:
- 🛑 স্ক্রিন রিডার স্লাইডারের মানগুলো পড়তে পারে না
আপনি এই প্রতিটি ধাপ কমেন্টের অধীনে খুঁজে পাবেন: TODO: #8. Provide control labels with 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 অ্যাট্রিবিউট ব্যবহার করে।
- 🛑 কালার পিকার-এ স্ক্রিন রিডার ফোকাস করলে ডায়ালগটি বন্ধ হয়ে যায়।
- 🛑 পরিবর্তন, ত্রুটি এবং বিজ্ঞপ্তি জানানো হয় না।
- 🛑 হাই-কনট্রাস্ট মোড চালু করা নেই
৯. @angular/cdk/a11y-এর শক্তি যোগ করুন।
এখন পর্যন্ত, আপনি সাধারণ অ্যাক্সেসিবিলিটি (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' কী কাজ করে?
অ্যাক্সেসিবিলিটি মডিউলটি অ্যাক্সেসিবিলিটি উন্নত করার জন্য বেশ কিছু টুল সরবরাহ করে এবং এটি বিশেষত কম্পোনেন্ট লেখকদের জন্য উপযোগী।
পরবর্তী বিভাগগুলিতে, আপনি তিনটি প্রচলিত পরিষেবা যোগ করবেন: FocusTrap, LiveAnnouncer, এবং HighContrast।
@angular/cdk/a11y দ্বারা প্রদত্ত অন্যান্য সমস্ত পরিষেবা সম্পর্কে আরও তথ্যের জন্য, অ্যাক্সেসিবিলিটি দেখুন।
১০. ফোকাসট্র্যাপ দিয়ে ফোকাস নিয়ন্ত্রণ করুন
যখন কোনো ডায়ালগ বা মোডাল খোলা থাকে, তখন ব্যবহারকারী শুধুমাত্র সেটির ভেতরেই ইন্টারঅ্যাক্ট করেন। ডায়ালগের বাইরে ফোকাস চলে যেতে দিলে বিভিন্ন প্রেক্ষাপট মিশে যায় এবং এমন একটি অবস্থার সৃষ্টি হয় যেখানে ব্যবহারকারী বুঝতে পারেন না যে তিনি পেজের ঠিক কোন অংশে আছেন।
অ্যাঙ্গুলারে, cdkTrapFocus ডিরেক্টিভটি কোনো এলিমেন্টের মধ্যে tab- কী ফোকাসকে আটকে রাখে। মোডাল ডায়ালগের মতো কম্পোনেন্টগুলোর জন্য অ্যাক্সেসিবল অভিজ্ঞতা তৈরি করতে এটি ব্যবহার করা হয়, যেখানে ফোকাসকে সীমাবদ্ধ রাখা আবশ্যক।
এই অংশের শেষে, আপনার অ্যাপটি নিম্নলিখিত নিরীক্ষায় উত্তীর্ণ হবে:
- 🛑 কালার পিকার-এ স্ক্রিন রিডার ফোকাস করলে ডায়ালগটি বন্ধ হয়ে যায়।
আপনি এই ধাপগুলো কমেন্টের নিচে পাবেন: TODO: #10. Control focus with FocusTrap.
সমস্যাটি চিহ্নিত করুন
এই সমস্যাটি শনাক্ত করতে, আপনার স্ক্রিন রিডার চালু করুন এবং কালার-পিকার ডায়ালগটি খুলুন।
- ভয়েসওভার চালু করুন।
- রঙ পরিবর্তন করতে ট্যাব নেভিগেশন ব্যবহার করুন।
- কালার পিকারে স্বজ্ঞাত ফোকাস অর্ডার এবং ফোকাস ট্র্যাপিং পরীক্ষা করে দেখুন।
ফোকাসট্র্যাপ যোগ করুন
কাস্টম কম্পোনেন্টগুলিতে ফোকাসের ক্রম নিয়ন্ত্রণ করতে 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>
পরিবর্তনগুলি যাচাই করুন
আপনার স্ক্রিন রিডারটি আবার চালু করুন এবং আপনার পরিবর্তনগুলি যাচাই করুন। এখন ডায়ালগ বক্সে ফোকাস প্রাথমিকভাবে 'রঙ পরিবর্তন করুন' (Change Color) বিকল্পের উপর সেট করা হয়েছে!
প্রবেশগম্যতা নিরীক্ষা:
- ✅ প্রতিটি পৃষ্ঠার স্বতন্ত্র শিরোনাম রয়েছে
- ✅ রঙগুলোর মধ্যে পর্যাপ্ত বৈসাদৃশ্য অনুপাত রয়েছে
- ✅ সিমান্টিক এইচটিএমএল যৌক্তিক মিথস্ক্রিয়া নিশ্চিত করে
- ✅ স্ক্রিন রিডারের মাধ্যমে সমস্ত কন্ট্রোল অ্যাক্সেস করা যায়
- ✅ স্লাইডার লেবেল প্রদানের জন্য ARIA অ্যাট্রিবিউট ব্যবহার করে।
- ✅ কালার পিকারের ফোকাস সঠিকভাবে সেট করা আছে
- 🛑 পরিবর্তন, ত্রুটি এবং বিজ্ঞপ্তি জানানো হয় না।
- 🛑 হাই-কনট্রাস্ট মোড চালু করা নেই
১১. লাইভঅ্যানাউন্সারের মাধ্যমে পরিবর্তনগুলো ঘোষণা করুন।
পৃষ্ঠার কোনো কিছু পরিবর্তিত হলে স্ক্রিন রিডারদের জানানো প্রয়োজন। কল্পনা করুন, আপনি একটি ফর্ম জমা দিতে বা কোনো কেনাকাটা সম্পন্ন করতে চেষ্টা করছেন, কিন্তু জানেন না যে একটি ত্রুটি দেখা দিয়েছে যা ফর্মটি জমা দিতে বাধা দিচ্ছে। এটা খুবই হতাশাজনক!
স্ক্রিন-রিডার ব্যবহারকারীদের জন্য বার্তা ঘোষণা করতে LiveAnnouncer ব্যবহৃত হয়। এটি একটি aria-live রিজিয়ন ব্যবহার করে, যার মাধ্যমে স্ক্রিন রিডারদের নোটিফিকেশন এবং লাইভ পেজ পরিবর্তন সম্পর্কে জানানো নিশ্চিত করা হয়। aria-live রিজিয়ন সম্পর্কে আরও তথ্যের জন্য, W3C-এর WAI-ARIA দেখুন। Angular-এ, aria-live অ্যাট্রিবিউটের চেয়ে LiveAnnouncer-কে সার্ভিস হিসেবে কল করা একটি অধিক পরীক্ষাযোগ্য সমাধান।
এই অংশের শেষে, আপনার অ্যাপটি নিম্নলিখিত নিরীক্ষায় উত্তীর্ণ হবে:
- 🛑 পরিবর্তন, ত্রুটি এবং বিজ্ঞপ্তি জানানো হয় না।
আপনি এই ধাপগুলো কমেন্টের নিচে পাবেন: TODO: #11. Announce changes with LiveAnnouncer.
সমস্যাটি চিহ্নিত করুন
এই সমস্যাটি শনাক্ত করতে, আপনার স্ক্রিন রিডার চালু করুন এবং ফর্মের ক্ষেত্রগুলি পূরণ না করেই ক্রয় (Purchase) নির্বাচন করুন:
- ভয়েসওভার চালু করুন।
- ট্যাব নেভিগেশন ব্যবহার করে রঙ পরিবর্তন করুন এবং একটি নকল ক্রয় সম্পন্ন করুন।
- লক্ষ্য করুন যে, ডায়ালগ বক্স থেকে বের হওয়ার সময় কোন রঙ নির্বাচন করা হয়েছিল তার কোনো ইঙ্গিত থাকে না এবং ক্রয়টি পড়া হয় না।
আপনার কোডে LiveAnnouncer যোগ করুন
LiveAnnouncer যোগ করুন এবং রঙ নির্বাচন ও নকল ক্রয় উভয়কেই একটি স্ট্রিং হিসেবে ঘোষণা করুন। বাস্তবায়নে, কোনো তৃতীয় পক্ষের পেমেন্ট সিস্টেমে যাওয়ার সময় বা ফর্মের ত্রুটির ক্ষেত্রে এটি পড়া যেতে পারে।
- রঙ নির্বাচন করা হলে একটি ঘোষণা যোগ করুন:
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();
}
}
- ভুয়া কেনাকাটা করা হলে একটি ঘোষণা যোগ করুন:
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);
}
}
পরিবর্তনগুলি যাচাই করুন
আপনার স্ক্রিন রিডারটি আবার চালু করুন এবং আপনার পরিবর্তনগুলো যাচাই করুন। এখন আপনাকে আপনার ভুলগুলো সম্পর্কে জানানো হচ্ছে!
প্রবেশগম্যতা নিরীক্ষা:
- ✅ প্রতিটি পৃষ্ঠার স্বতন্ত্র শিরোনাম রয়েছে
- ✅ রঙগুলোর মধ্যে পর্যাপ্ত বৈসাদৃশ্য অনুপাত রয়েছে
- ✅ সিমান্টিক এইচটিএমএল যৌক্তিক মিথস্ক্রিয়া নিশ্চিত করে
- ✅ স্ক্রিন রিডারের মাধ্যমে সমস্ত কন্ট্রোল অ্যাক্সেস করা যায়
- ✅ স্লাইডার লেবেল প্রদানের জন্য ARIA অ্যাট্রিবিউট ব্যবহার করে।
- ✅ কালার পিকারের ফোকাস সঠিকভাবে সেট করা আছে
- ✅ পরিবর্তন, ত্রুটি এবং বিজ্ঞপ্তি জানানো হয়
- 🛑 হাই-কনট্রাস্ট মোড চালু করা নেই
১২. হাই-কনট্রাস্ট মোড চালু করুন
মাইক্রোসফট উইন্ডোজে হাই কনট্রাস্ট মোড নামে একটি অ্যাক্সেসিবিলিটি ফিচার রয়েছে। এই মোডটি ওয়েব অ্যাপসহ সকল অ্যাপের চেহারা পরিবর্তন করে কনট্রাস্ট ব্যাপকভাবে বাড়িয়ে দেয়। অ্যাঙ্গুলারে, আপনার অ্যাপে ব্যবহারকারীর পছন্দকে সম্মান করা উচিত।
HighContrastModeDetector আপনাকে নির্ধারণ করতে সাহায্য করে যে ব্রাউজারটি বর্তমানে একটি হাই-কনট্রাস্ট-মোড পরিবেশে আছে কিনা।
ইন্টারনেট এক্সপ্লোরার, মাইক্রোসফট এজ এবং ফায়ারফক্স এই মোডটি সমর্থন করে। গুগল ক্রোম উইন্ডোজ হাই কনট্রাস্ট মোড সমর্থন করে না। এই পরিষেবাটি ক্রোম হাই কনট্রাস্ট ব্রাউজার এক্সটেনশন দ্বারা যুক্ত হাই-কনট্রাস্ট মোড শনাক্ত করতে পারে না।
এই অংশের শেষে, আপনার অ্যাপটি নিম্নলিখিত নিরীক্ষায় উত্তীর্ণ হবে:
- 🛑 হাই-কনট্রাস্ট মোড চালু করা নেই
আপনি এই ধাপগুলো কমেন্টের নিচে পাবেন: TODO: #12. Enable HighContrast mode.
সমস্যাটি চিহ্নিত করুন
এই সমস্যাটি শনাক্ত করতে, ইন্টারনেট এক্সপ্লোরার, মাইক্রোসফট এজ বা ফায়ারফক্সে আপনার অ্যাপটি খুলুন, হাই কনট্রাস্ট মোড চালু করুন এবং পরিবর্তনের অভাব লক্ষ্য করুন:
- আপনার অ্যাপটি ইন্টারনেট এক্সপ্লোরার, মাইক্রোসফট এজ বা ফায়ারফক্সে খুলুন।
- হাই কনট্রাস্ট মোড চালু করুন।
- লক্ষ্য করুন যে অ্যাপ্লিকেশনটি অপরিবর্তিত রয়েছে।
হাই কনট্রাস্ট মোডের জন্য সমর্থন যোগ করুন
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);
}
}
}
পরিবর্তনগুলি যাচাই করুন
আপনার অ্যাপটি রিফ্রেশ করুন এবং আপনার পরিবর্তনগুলি যাচাই করুন। আপনি হাই কনট্রাস্ট মোডে বাটনটিতে একটি আউটলাইন যোগ করেছেন!
প্রবেশগম্যতা নিরীক্ষা:
- ✅ প্রতিটি পৃষ্ঠার স্বতন্ত্র শিরোনাম রয়েছে
- ✅ রঙগুলোর মধ্যে পর্যাপ্ত বৈসাদৃশ্য অনুপাত রয়েছে
- ✅ সিমান্টিক এইচটিএমএল যৌক্তিক মিথস্ক্রিয়া নিশ্চিত করে
- ✅ স্ক্রিন রিডারের মাধ্যমে সমস্ত কন্ট্রোল অ্যাক্সেস করা যায়
- ✅ স্লাইডার লেবেল প্রদানের জন্য ARIA অ্যাট্রিবিউট ব্যবহার করে।
- ✅ কালার পিকারের ফোকাস সঠিকভাবে সেট করা আছে
- ✅ পরিবর্তন, ত্রুটি এবং বিজ্ঞপ্তি জানানো হয়
- ✅ হাই কনট্রাস্ট মোড চালু আছে
১৩. অভিনন্দন!
অভিনন্দন, আপনি আপনার অ্যাঙ্গুলার অ্যাপে ওয়েব অ্যাক্সেসিবিলিটির সাধারণ সমস্যাগুলো সমাধান করেছেন! 🎉
সমস্ত সমাধান দেখতে main শাখাটি দেখুন।
আপনার অ্যাঙ্গুলার অ্যাপ্লিকেশনের আটটি সাধারণ অ্যাক্সেস সংক্রান্ত সমস্যা সমাধানের জন্য প্রয়োজনীয় মূল পদক্ষেপগুলো এখন আপনি জানেন।
আরও জানুন
এই কোডল্যাবগুলো দেখুন:
- অ্যাঙ্গুলার এবং ফায়ারবেস দিয়ে একটি ওয়েব অ্যাপ্লিকেশন তৈরি করা
- Chrome DevTools ব্যবহার করে কম-কন্ট্রাস্ট টেক্সট শনাক্ত করুন এবং ঠিক করুন
এই উপকরণগুলো পড়ুন: