ব্যবহারকারী পছন্দ ও টোকেন ব্যবস্থা দিয়ে শুরু করুন
ডিফল্ট হিসেবে সিস্টেম সেটিং ব্যবহার করুন (prefers-color-scheme)। যদি একটি সুইচ প্রদান করেন, তাহলে কীবোর্ড-পরিচালনাযোগ্য কন্ট্রোল ব্যবহার করুন যার একটি অ্যাক্সেসিবল নাম আছে এবং সক্রিয় পছন্দটি প্রোগ্রাম্যাটিকভাবে প্রকাশ করে। ম্যানুয়াল সিলেকশনকে সেই ব্রাউজার প্রেক্ষাপটে প্রাধান্য দিন; এটি ব্যক্তিকে অন্য ডিভাইসে বা প্রাইভেট সেশনে অনুসরণ করবে বলে প্রতিশ্রুতি দেবেন না।
রঙের নাম নির্ণয় করুন রূপ অনুসারে নয়, ভূমিকায়: canvas, surface, text, muted text, border, link, accent, error, success, focus, এবং disabled। দুটি থিমেই প্রতিটি ভূমিকা ম্যাপ করুন। এটি একটি লাইট-অনলি ধূসর ডার্ক মোডে লিক হওয়ার ঘটনা বন্ধ করে এবং ফিক্সগুলোকে পুনঃব্যবহারযোগ্য করে তোলে। ডার্ক স্বয়ংক্রিয়ভাবে বেশি অ্যাক্সেসিবল বা সর্বজনীনভাবে পছন্দসই নয়; এটি আরেকটি অভিজ্ঞতা, যেটি ব্যবহারযোগ্য করা দরকার।
সংরক্ষিত পছন্দ প্রথম এবং সিস্টেম প্রেফারেন্স দ্বিতীয়-এর মতো একটি অর্ডার ডকুমেন্ট করুন, যাতে দল একই ফলাফল পরীক্ষা করে।
হোভার, ফোকাস, নির্বাচিত, অবৈধ, ডিজেবল্ড, লোডিং, খালি, এবং ভিজিটেড-লিঙ্ক স্টেটগুলো অন্তর্ভুক্ত করুন, কেবল ডিফল্ট নয়।
রেন্ডার করা থিমে কনট্রাস্ট মাপুন
WCAG 2.2 Success Criterion 1.4.3 সাধারণ পাঠ্য এবং টেক্সট-অন্তর্ভুক্ত ইমেজের জন্য ন্যূনতম 4.5:1 কনট্রাস্ট নির্ধারণ করে, এবং বড় লেখার জন্য 3:1। রাউন্ড করবেন না: 4.499:1 হল 4.5:1 নয়। পাতলা টাইপ তার হিসাব করা রঙের থেকে দুর্বল দেখাতে পারে, তাই আরও শক্তিশালী ফন্ট বা অতিরিক্ত মার্জিন ব্যবহার করুন।
প্রতিটি রেন্ডার করা ফরগ্রাউন্ড এবং পার্শ্ববর্তী ব্যাকগ্রাউন্ড চেক করুন। ছবি, গ্রেডিয়েন্ট, ট্রান্সলুসেন্ট প্যানেল, বা ভিডিও-র ওপর লেখা টেক্সটের ব্যাকগ্রাউন্ড পরিবর্তনশীল; তাই একটি টোকেন-ক্যালকুলেশন একাই পাঠযোগ্যতা প্রমাণ করতে পারে না। একটি অপেক ব্যাকিং, পর্যাপ্ত ওভারলে, বা ভিন্ন প্লেসমেন্ট ব্যবহার করুন, তারপর বাস্তবসম্মত ভিউপোর্টে পরীক্ষা করুন।
WCAG 2.1 Success Criterion 1.4.11 অনুযায়ী, একটি সক্রিয় কন্ট্রোল, দরকারি স্টেট, বা অর্থপূর্ণ গ্রাফিককে শনাক্ত করতে যে ভিজ্যুয়াল ইনফরমেশন দরকার তা পার্শ্ববর্তী রঙের বিরুদ্ধে 3:1 থাকতে হবে।
রঙ পরিবর্তনের সাথে টেক্সট, আইকন, প্যাটার্ন, অবস্থান, বা আরেকটি পরিষ্কার কিউ জোড়ান; ত্রুটি ও নির্বাচিত স্টেট একটি সূক্ষ্ম টিন্টের উপর নির্ভর করে থাকা উচিত নয়।
কীবোর্ড ফোকাস, ফর্ম এবং স্টেট পরিবর্তনগুলি রক্ষিত রাখুন
উভয় থিমে Tab দিয়ে নেভিগেট করুন। লিঙ্ক, বোতাম, ইনপুট, মেনু, ডায়ালগ, কাস্টম উইজেট এবং থিম কন্ট্রোলে ফোকাস দৃশ্যমান থাকতে হবে। ব্রাউজারের outline মুছে ফেলবেন না যদি না তার প্রতিস্থাপন প্রতি সারফেস ও প্রতিটি স্টেটে পরীক্ষা করে দেখা হয়। একটি অফসেট আউটলাইন প্রায়ই ব্লেন্ডিং-গ্লোর তুলনায় পরিষ্কার।
WCAG 2.2 Focus Appearance হলো একটি AAA ক্রাইটেরিয়ন, যা AA মিটিংয়ের প্রমাণ নয়। এটি একটি ব্যবহারযোগ্য লক্ষ্য: একটি ইন্ডিকেটর এরিয়া কমপক্ষে 2 CSS-pixel পরিধি সমান এবং ফোকাসকৃত ও নন-ফোকাসড পিক্সেলের মধ্যে 3:1 কনট্রাস্ট। এছাড়াও যাচাই করুন যে ত্রুটি, প্রয়োজনীয়তা, নির্বাচিত এবং অনুপলব্ধ স্টেটগুলো অর্থ বজায় রাখে।
ইনপুট হিন্ট, প্রবেশ করা মান, লেবেল, হেল্প টেক্সট, ত্রুটি টেক্সট, অবৈধ বর্ডার, চেকবক্স মার্ক, রেডিও সিলেকশন, এবং সাবমিট স্টেট আলাদাভাবে টেস্ট করুন।
চেকআউট বা অন্য কোনো নিয়মিত ফ্লোর জন্য একটি প্রোভাইডার স্যান্ডবক্স ব্যবহার করুন এবং যেখানে প্রযোজ্য সেখানে যোগ্য অ্যাক্সেসিবিলিটি ও সিকিউরিটি রিভিউ নিন। এটি শিক্ষামূলক নির্দেশনা; ন্যায়সংগততা বা সিকিউরিটি মূল্যায়ন নয়।
ইমেজ, এমবেডেড অ্যাসেট, এবং ব্রাউজার-প্রদানকৃত UI হ্যান্ডেল করুন
লোগো, ইলাস্ট্রেশন, স্ক্রিনশট, চার্ট, আইকন, এবং ইমেজে বেক করা টেক্সট উভয় থিমে রিভিউ করুন। পুনঃব্যবহৃত লাইট লোগো লুপতে অদৃশ্য হতে পারে এবং একটি চার্ট লিজেন্ড ব্যর্থ হতে পারে যদিও পার্শ্ববর্তী HTML পাশ করলেও। একটি উদ্দেশ্যানুগ অ্যাসেট বা স্থিতিশীল ব্যাকগ্রাউন্ড সরবরাহ করুন। নির্দেশনা, স্ট্যাটাস, বা ডেটা বহনকারী ইমেজগুলো বুঝতে সক্ষম থাকতে হবে।
লাইট এবং ডার্ক স্কিমের জন্য সমর্থন ঘোষণা করুন, তারপর নির্বাচিত থিমের জন্য পেজ কনটেন্ট স্টাইল করুন। color-scheme প্রপার্টি ব্রাউজার ক্যানভাস, স্ক্রলবার, ফর্ম কন্ট্রোল এবং অন্যান্য ব্রাউজার UI-কে সারিবদ্ধ করে। সংশ্লিষ্ট মেটাডেটা ডকুমেন্টে আগে স্থাপন করুন। এমবেডেড SVG প্যারেন্ট স্কিমের প্রতি সাড়া দিতে পারে; তৃতীয়-পক্ষ iframe এবং উইজেটগুলি end-to-end টেস্ট করুন।
সেমান্টিক HTML কন্ট্রোলকে অগ্রাধিকার দিন। forced-colors আচরণ নেটিভ সেমান্টিক্স ব্যবহার করে, একটি জেনেরিক উপাদানে যোগ করা ARIA রোলে নয়।
ডাউনলোডেড, ক্যাশড, স্লো-লোডিং, এবং ব্যর্থ-ইমেজ স্টেটগুলোর তদন্ত করুন, বিশেষ করে যেখানে টেক্সট বা অ্যাকশন কিউ মিডিয়ার উপর বসে।
forced-colors সম্মান করুন এবং রিলিজকে একটি সিস্টেম হিসেবে টেস্ট করুন
forced-colors মোড একটি সীমিত ব্যবহারকারী-নির্বাচিত প্যালেট প্রয়োগ করে, যেমন Windows High Contrast। ব্রাউজারগুলো রঙ প্রতিস্থাপন করতে পারে, শ্যাডো অপসারণ করতে পারে, এবং টেক্সট ব্যাকপ্লেট যোগ করতে পারে। ওভাররাইড ব্লক করবেন না। যেখানে কোনো কম্পোনেন্ট বাউন্ডারি বা অর্থ হারায় সেখানে টার্গেটেড ফিক্স করুন, যেমন যেখানে শ্যাডো সুবিধা বহন করত সেখানে বাস্তব বর্ডার দিন। এমুলেশন প্রতিটি ডিভাইস, ব্রাউজার, এক্সটেনশন, জুম লেভেল, বা সহায়ক প্রযুক্তি কম্বিনেশনের প্রতিনিধিত্ব করতে পারে না।
রিলিজের আগে লাইট, ডার্ক, এবং forced-colors সেটিংসে রুট এবং ইন্টারঅ্যাকশন ম্যাট্রিক্স রান করুন। Chrome DevTools উভয় কন্ডিশন এমুলেট করতে পারে; রিভিউ ত্বরান্বিত করতে এটি ব্যবহার করুন, তারপর অগ্রাধিকার ফ্লোতে ম্যানুয়ালি নেভিগেট করুন। স্ক্যানারগুলো প্রার্থীদের খুঁজে পায় কিন্তু একা Accessibility নির্ধারণ করতে পারে না। SIU critical থিম অ্যাসেট ও ইন্টারঅ্যাকশনগুলো প্রিফ্লাইট করে, একটি রিলিজ গেট রেকর্ড করে, এবং গুরুতর উপস্থাপন রিগ্রেশনগুলোর জন্য একটি টেস্ট করা রোলব্যাক পাথ রাখে; এটি ডাউনটাইম মনিটরিং নয়।
ল্যান্ডিং, নেভিগেশন, সার্চ, অ্যাকাউন্ট অ্যাক্সেস, ফর্ম, ত্রুটি পেজ, অথেনটিকেটেড স্ক্রিন, এবং materiał কনভার্শন ফ্লো অন্তর্ভুক্ত করুন।
টেস্ট করা URL, ব্রাউজার ভার্সন, সেটিংস, ব্যতিক্রম, মালিক, এবং রোলব্যাক ট্রিগার সংরক্ষণ করুন যাতে রেমিডিয়েশন факт থেকে শুরু হয়।