অ্যাক্সেসিবিলিটি
আমরা কীবোর্ড, স্ক্রিন রিডার, কম দৃষ্টিশক্তি এবং কম প্রযুক্তি ব্যবহারকারীদের জন্য কীভাবে তৈরি করি। একটি সৎ, তারিখযুক্ত স্ন্যাপশট।
আনুষ্ঠানিক অ্যাক্সেসিবিলিটি বিবৃতি
- লক্ষ্য মান
- সম্পূর্ণ অভিজ্ঞতা জুড়ে WCAG 2.2 AA। ফোকাস উপস্থিতি (মোটা উচ্চ-কনট্রাস্ট রিং, অবরুদ্ধ নয়) এবং ফর্ম লেবেলিং + ত্রুটি পুনরুদ্ধারে AAA চিকিৎসা। W3C সুপারিশের বিরুদ্ধে ট্র্যাক করা হয়েছে, প্যারাফ্রেজ নয়।
- শেষ অভ্যন্তরীণ অডিট
- 2026-04-19। হোমপেজ, print-size, /standards/ হাব + ৯টি কর্তৃপক্ষ পৃষ্ঠা এবং ৪৫টি পেমেন্ট-স্কিম ল্যান্ডিং পৃষ্ঠার বিরুদ্ধে আমাদের নিজস্ব দলের ম্যানুয়াল পাস।
- বাহ্যিক অডিট
- কমিশন করা হয়েছে, রিপোর্ট মুলতুবি। /accessibility/audit/-এ প্রতিকার নোট সহ আগমনে প্রকাশিত হবে, ত্রুটি অক্ষত, কোনো বাছাই নেই।
- পুনরায় পরীক্ষার ক্যাডেন্স
- মাসিক স্পট-চেক + যেকোনো প্রধান UI পরিবর্তনের পরে সম্পূর্ণ ম্যানুয়াল পাস। স্বয়ংক্রিয় চেক (কনট্রাস্ট লিন্টিং, WCAG 2.2 নতুন-মানদণ্ড স্ক্যান) প্রতিটি ডিপ্লয়মেন্টে চালিত হয়।
- যোগাযোগ + SLA
- hello@abundera.ai, আমরা ২ ব্যবসায়িক দিনের মধ্যে অ্যাক্সেসিবিলিটি রিপোর্ট স্বীকার করি, ৫ দিনের মধ্যে ট্রায়াজ করি, এবং কীবোর্ড / স্ক্রিন-রিডার / জ্ঞানীয় বাধাকে অগ্রাধিকার সমস্যা হিসেবে বিবেচনা করি (ফিচার কাজের আগে শিপ করা হয়)।
সাফল্য মানদণ্ড অনুযায়ী WCAG 2.2 AA সম্মতি
২.২-এ নতুন মানদণ্ড যেগুলো আমরা সক্রিয়ভাবে পর্যবেক্ষণ করছি। স্ট্যাটাস আমরা অভ্যন্তরীণভাবে যা যাচাই করেছি তা প্রতিফলিত করে; বাহ্যিক অডিট এটি প্রতিস্থাপন করবে।
| SC | মানদণ্ড | স্তর | স্ট্যাটাস |
|---|---|---|---|
| 2.4.11 | ফোকাস অবরুদ্ধ নয় (ন্যূনতম) | AA | উত্তীর্ণ, ফোকাস রিং সর্বদা দৃশ্যমান, স্টিকি হেডারের নীচে লুকানো নয় |
| 2.4.12 | ফোকাস অবরুদ্ধ নয় (উন্নত) | AAA | জেনারেটর পৃষ্ঠে উত্তীর্ণ; কিছু ড্রয়ারে অ্যানিমেশনের সময় সংক্ষিপ্ত ওভারল্যাপ আছে |
| 2.4.13 | ফোকাস উপস্থিতি | AAA | উত্তীর্ণ, ৩ px আউটলাইন + ২ px অফসেট + যেকোনো ব্যাকগ্রাউন্ডে box-shadow ব্যাকআপ |
| 2.5.7 | ড্র্যাগিং আন্দোলন | AA | উত্তীর্ণ, কোনো প্রয়োজনীয় ড্র্যাগ-অনলি ইন্টারঅ্যাকশন নেই; বিজনেস-কার্ড ডিজাইনার প্রতিটি ড্র্যাগের জন্য কীবোর্ড বিকল্প প্রদান করে |
| 2.5.8 | লক্ষ্য আকার (ন্যূনতম) | AA | উত্তীর্ণ, প্রতিটি ইন্টারেক্টিভ লক্ষ্যে ২৪×২৪ CSS px ন্যূনতম যাচাই করা হয়েছে; বেশিরভাগ ২৮×২৮ বা ৪০×৪০-এ |
| 3.2.6 | সামঞ্জস্যপূর্ণ সহায়তা | A | উত্তীর্ণ, সহায়তা / যোগাযোগ প্রতিটি পৃষ্ঠায় একই জায়গায় প্রদর্শিত হয় (ফুটার + নেভ) |
| 3.3.7 | অতিরিক্ত প্রবেশ | A | উত্তীর্ণ, কোনো ফর্ম ব্যবহারকারীকে একই সেশনে ইতিমধ্যে প্রদান করা ডেটা পুনরায় প্রবেশ করাতে বলে না |
| 3.3.8 | অ্যাক্সেসযোগ্য প্রমাণীকরণ (ন্যূনতম) | AA | N/A, কোনো জ্ঞানীয় কার্যকরী পরীক্ষা নেই; Abundera QR লগইন প্রয়োজন করে না |
মোশন এবং ফোর্সড-কালারস সমর্থন
- prefers-reduced-motion: reduce, অ্যাম্বিয়েন্ট অর্ব ফ্লোট এবং ফেড-ইন ট্রানজিশন দমন করা হয়। কার্যকরী ট্রানজিশন সংক্ষিপ্ত থাকে। macOS Reduce Motion এবং Windows "Show animations" অক্ষম দিয়ে যাচাই করা হয়েছে।
- forced-colors: active (Windows High Contrast Mode), ফোকাস রিং সিস্টেম Highlight রং ব্যবহার করে; বর্ডার সিস্টেম CanvasText ইনহেরিট করে। Windows 11 High Contrast-এ Edge-এ যাচাই করা হয়েছে।
পরিচিত সীমাবদ্ধতা
- JAWS এখনো পরীক্ষা করা হয়নি। পরবর্তী AT রাউন্ড Windows 11-এ Edge-এ JAWS লক্ষ্য করে।
- বিজনেস কার্ড ডিজাইনার ড্র্যাগ-টু-পজিশন প্রিভিউয়ের জন্য ডিজাইনে মাউস-ফার্স্ট। প্রতিটি কন্ট্রোলে কীবোর্ড বিকল্প আছে, কিন্তু লাইভ-ফিডব্যাক লুপ এখনও ভিজ্যুয়াল। কালার ইনপুট, প্রিসেট গ্রিড, এবং হেক্স ফিল্ডে এখন স্পষ্ট ARIA বাইন্ডিং আছে (2026-04-19)।
- বাহ্যিক অডিট রিপোর্ট মুলতুবি। উপরে টেবিলের স্ব-প্রত্যয়িত স্ট্যাটাস রিপোর্ট পৌঁছালে অডিটরের ফলাফল দ্বারা প্রতিস্থাপিত হবে।
- কিছু থার্ড-পার্টি অ্যাসিস্টিভ টেকনোলজি (Dragon NaturallySpeaking, Android-এ Speech-to-text) আমাদের রিগ্রেশন ম্যাট্রিক্সে নেই; আমরা কমিউনিটি রিপোর্ট গ্রহণ করি এবং প্রতি-টিকেটে ঠিক করি।
অ্যাক্সেসিবিলিটি চেঞ্জলগ
- 2026-04-19 (PM), TalkBack লাইভ-রিজিয়ন ডাবল-ফায়ার ঠিক করা হয়েছে:
#qr-previewর্যাপার থেকেaria-live="polite"সরানো হয়েছে; ঘোষণাগুলো এখন শুধু স্ক্যানেবিলিটিrole="status"ব্যাজ থেকে আসে, প্রতি জেনারেটে একবার। BCD মডাল: কালার পিকাররা সঠিক<label for>বাইন্ডিং পেয়েছে (ব্যাকগ্রাউন্ড, টেক্সট, অ্যাকসেন্ট, গ্রেডিয়েন্ট); প্রিসেট-গ্রিড কন্টেইনারrole="group"+aria-labelপেয়েছে। অ্যাক্সেসিবিলিটি টেবিলগুলো<caption>+scope="col"/"row"পেয়েছে, WCAG 2.2 AA + AT ম্যাট্রিক্স এখন VoiceOver, NVDA, এবং TalkBack-এ সঠিকভাবে ঘোষিত হয়। - 2026-04-19 (AM), ফোকাস ইন্ডিকেটর আপগ্রেড করা হয়েছে (৩ px + box-shadow ব্যাকআপ)। forced-colors + prefers-reduced-motion সমর্থন যোগ করা হয়েছে। লক্ষ্য-আকার অডিট:
.saved-profile-delete,.type-search-clear,.compat-toggle-btn≥ ২৮ px-এ বাড়ানো হয়েছে। হেডিং-লেভেল স্কিপ ঠিক করা হয়েছে (vCard/MECARD সাবহেড h4 → h3)। আনুষ্ঠানিক WCAG 2.2 AA বিবৃতি + AT ম্যাট্রিক্স প্রকাশিত। - 2026-04-18, ম্যানুয়াল WCAG 2.2 AA বেসলাইন পাস নথিভুক্ত করা হয়েছে। পরিষ্কার হায়ারার্কির জন্য চার-স্তম্ভ ট্রাস্ট স্ট্রিপ ভাঁজ করা হয়েছে।
- 2026-03-08, প্রাথমিক /accessibility/ পৃষ্ঠা প্রকাশিত।
আমরা কীসের প্রতিশ্রুতি দিই
- সম্পূর্ণ কীবোর্ড ট্র্যাভার্সাল। প্রতিটি জেনারেটর কন্ট্রোল, প্রতিটি মডাল, এবং প্রতিটি এক্সপোর্ট ফ্লো মাউস ছাড়াই অ্যাক্সেসযোগ্য।
- দৃশ্যমান ফোকাস অবস্থা। ফোকাস করা ইনপুট, বোতাম এবং লিঙ্কগুলো স্পষ্ট রিং দেখায়। আমরা শুধুমাত্র রঙের উপর নির্ভর করি না।
- প্রতিটি ফিল্ডে লেবেল। ফর্ম ইনপুটে সম্পর্কিত
<label>উপাদান বাaria-labelবৈশিষ্ট্য আছে। প্লেসহোল্ডার টেক্সট কখনো একমাত্র লেবেল হিসেবে ব্যবহার করা হয় না। - QR প্রিভিউ এবং টোস্টের জন্য ARIA লাইভ রিজিয়ন। স্ক্রিন রিডাররা "QR তৈরি হয়েছে" এবং টোস্ট বার্তা শুনতে পায় যখন সেগুলো ফায়ার হয়, শুধু যখন ফোকাস তাদের কাছে চলে যায় তখন নয়।
- আইকন-অনলি বোতামের জন্য টেক্সট বিকল্প। প্রতিটি SVG-অনলি বোতামে
aria-label। - রঙ-স্বাধীন স্ট্যাটাস অর্থ। স্ক্যানেবিলিটি ব্যাজ এবং কম্প্যাট চিপস রঙকে গ্লিফ এবং টেক্সট লেবেলের সাথে যুক্ত করে।
- স্পষ্ট এক্সপোর্ট ফরম্যাট নাম। ডাউনলোড বোতাম "Download PNG", "Download SVG" ইত্যাদি বলে, শুধু "Download" নয়।
- বড় মোবাইল ট্যাপ টার্গেট। WCAG 2.5.8 অনুযায়ী অপ্রতিকূল পয়েন্টারে ইন্টারেক্টিভ উপাদানগুলো কমপক্ষে ৪৪ × ৪৪ CSS পিক্সেল।
- রিডিউসড-মোশন সম্মান।
prefers-reduced-motion: reduce-এর অধীনে ট্রানজিশন অক্ষম।
আমরা এখনও কোথায় পিছিয়ে আছি
- JAWS এখনো পরীক্ষা করা হয়নি। JAWS লাইসেন্স অর্জিত, পরবর্তী AT রাউন্ডের জন্য টেস্টার স্লট বুক। অন্যান্য সমস্ত প্রধান (VoiceOver macOS + iOS, NVDA, Narrator, TalkBack) সর্বশেষ রিগ্রেশন পাস করেছে।
- বিজনেস কার্ড ডিজাইনার ডিজাইনে মাউস-হেভি (ড্র্যাগ-টু-পজিশন, ক্যানভাস প্রিভিউ)। প্রতিটি কন্ট্রোলের জন্য কীবোর্ড বিকল্প আছে কিন্তু লাইভ-প্রিভিউ ফিডব্যাক লুপ এখনও ভিজ্যুয়াল-ফার্স্ট। কালার কন্ট্রোলগুলো এখন সঠিক
<label for>বাইন্ডিং + প্রিসেট পিকারেrole="group"ব্যবহার করে (2026-04-19)। - জটিল জেনারেটর ফ্লো (ব্যাচ CSV, মাল্টি-স্টেপ উইজার্ড) ভালো স্কিপ-লিঙ্ক কাঠামো ব্যবহার করতে পারে। পরিকল্পিত।
- বর্ণনামূলক টেবিল সারসংক্ষেপ। অ্যাক্সেসিবিলিটি + কম্প্যাটিবিলিটি টেবিলে এখন
<caption>+scopeবৈশিষ্ট্য আছে (2026-04-19)। প্রতিটি সারির জন্য দীর্ঘ সারি-স্তরের বর্ণনামূলক সারসংক্ষেপ এখনও পরিকল্পিত।
অ্যাসিস্টিভ-টেক সাপোর্ট ম্যাট্রিক্স
ইঞ্জিনিয়ারিং আর্টিফ্যাক্ট, PR বিবৃতি নয়। প্রতিটি সারি একটি বাস্তব ব্রাউজার + AT + প্ল্যাটফর্ম সংমিশ্রণ যার উপর আমরা শারীরিকভাবে হাত রেখেছি। স্ট্যাটাস সর্বশেষ ম্যানুয়াল পাস প্রতিফলিত করে; সতর্কতাগুলো এমন কিছু রেকর্ড করে যা এখনও সম্পূর্ণ পাস ব্লক করে।
| ব্রাউজার | AT | প্ল্যাটফর্ম | শেষ পাস | স্ট্যাটাস | পরিচিত সতর্কতা |
|---|---|---|---|---|---|
| Safari | VoiceOver | macOS 15 | 2026-04-19 | উত্তীর্ণ | কমান্ড প্যালেট "Shortcuts" তালিকা প্রথমবার খোলার সময় আইটেম দুইবার পড়ে; কসমেটিক, ব্লকিং নয় |
| Safari | VoiceOver | iOS 18 | 2026-04-19 | উত্তীর্ণ | রোটর কিছু ডায়নামিকভাবে-ইনসার্টেড চিপ পুনর্বিন্যাস করে; ইন্টারঅ্যাকশনে পুনরায় ঘোষণা ক্রম পুনরুদ্ধার করে |
| Firefox | NVDA | Windows 11 | 2026-04-19 | উত্তীর্ণ | , |
| Chrome | NVDA | Windows 11 | 2026-04-19 | উত্তীর্ণ | , |
| Chrome | ChromeVox | ChromeOS 128 | 2026-03-30 | স্পট-চেক করা হয়েছে | সম্পূর্ণ রিগ্রেশন বাকি; পরবর্তী রিলিজের জন্য পুনরায় কিউ |
| Chrome | TalkBack | Android 14 | 2026-04-19 | উত্তীর্ণ | QR প্রিভিউতে লাইভ-রিজিয়ন ডাবল-ফায়ার (ডিবাউন্সের মাঝে দুইবার "QR preview updated" ঘোষিত) 2026-04-19-এ ঠিক: প্রিভিউ র্যাপার থেকে aria-live সরানো হয়েছে; ঘোষণাগুলো এখন শুধু স্ক্যানেবিলিটি role="status" ব্যাজ থেকে আসে, প্রতি জেনারেটে একবার। |
| Edge | Narrator | Windows 11 | 2026-04-12 | উত্তীর্ণ | ফোর্সড-কালারস মোড (এই রিলিজে নতুন): ফোকাস রিং ঠিক আছে, কিন্তু কিছু চিপ বর্ডার স্বচ্ছতায় ভেঙে পড়ে, কিউড |
| Safari | JAWS | Windows 11 | , | পরীক্ষা করা হয়নি | পরবর্তী AT রাউন্ডের জন্য নির্ধারিত; JAWS লাইসেন্স অর্জিত, টেস্টার স্লট বুক |
| Any | Dragon NaturallySpeaking | Windows 11 | , | পরীক্ষা করা হয়নি | কমিউনিটি রিপোর্ট গ্রহণ করা হচ্ছে; একটি ডেডিকেটেড রিগ্রেশন না আসা পর্যন্ত প্রতি-টিকেটে ঠিক করা |
কীবোর্ড ম্যাপ
- Tab / Shift+Tab: ফোকাসযোগ্য উপাদানগুলির মধ্য দিয়ে সামনে / পিছনে যান।
- Enter / Space: বোতাম এবং টগল সক্রিয় করুন।
- অ্যারো কী: রেডিও গ্রুপের ভিতরে বিকল্পগুলির মধ্যে সরুন (টাইপ সিলেক্টর, টেমপ্লেট পিকার, ট্যাব বার)।
- Escape: মডাল বন্ধ করুন (বিজনেস কার্ড ডিজাইনার, প্রিফ্লাইট, প্রিন্ট সার্ভিস, ইমেজ ক্রপ)।
- Home / End ওভারফ্লো মেনুর ভিতরে প্রথম / শেষ আইটেমে যান।
অভ্যন্তরীণ অডিট, 2026-04-19
হোমপেজ, /print-size/, নতুন /standards/ হাব + ৯টি কর্তৃপক্ষ পৃষ্ঠা এবং ৪৫টি পেমেন্ট-স্কিম ল্যান্ডিং পৃষ্ঠার (যেগুলো শেয়ার্ড টেমপ্লেট থেকে ইনহেরিট করে) বিরুদ্ধে ম্যানুয়াল WCAG 2.2 AA পাস। আমরা কী যাচাই করেছি, কী ঠিক করেছি, এবং কী খোলা আছে:
উত্তীর্ণ হিসেবে যাচাই করা হয়েছে
- স্কিপ লিঙ্ক লক্ষ্য বিদ্যমান, স্কিপ লিঙ্ক (
href="#generator") প্রতিটি পৃষ্ঠা ভেরিয়েন্টে একটি দৃশ্যমান উপাদানে রিজলভ হয়। - ফোকাস-ভিজিবল স্টাইল,
:focus-visibleএকটি ২px আউটলাইন সহ বৈশ্বিকভাবে ঘোষিত, এবং একটি রঙিন বর্ডার + শ্যাডো সহ প্রতি-ইনপুট ওভাররাইড।site/css/style.c17bfd85.css-এর লাইন ৩৪ এবং ৮৮-এ CSS অডিটের মাধ্যমে নিশ্চিত করা হয়েছে। - সমস্ত ফর্ম ইনপুটে লেবেল আছে, জেনারেটরের প্রতিটি
<input>/<select>/<textarea>-এ হয় একটি স্পষ্ট<label for="...">বা একটি র্যাপিং<label>আছে। প্লেসহোল্ডার-কে-লেবেল কোথাও ব্যবহার করা হয়নি। - বোতামে অ্যাক্সেসযোগ্য নাম আছে, প্রতিটি
<button>-এ হয় টেক্সট কন্টেন্ট বা একটিaria-labelআছে। SVG-অনলি বোতামগুলো (হ্যামবার্গার, শেয়ার, ইনস্টল) সবইaria-labelবহন করে। - সজাতীয় SVG লুকানো হিসেবে চিহ্নিত, প্রতিটি সজাতীয় আইকনে
aria-hidden="true"যাতে স্ক্রিন রিডাররা তাদের জ্যামিতি ঘোষণার পরিবর্তে এড়িয়ে যায়। - সঠিক ARIA ভূমিকা, টাইপ সিলেক্টরে
role="radiogroup"এবং প্রতিটি বিকল্পেrole="radio"+aria-checked; প্যানেল ট্যাবেrole="tablist"/role="tab"+aria-selected। - টেক্সট কনট্রাস্ট, প্রাথমিক টেক্সট
#08090a-এ#f5f5f5(≈ ১৭:১, WCAG AAA)। একই ব্যাকগ্রাউন্ডে মিউটেড টেক্সট#a3a3a3হল ≈ ৮:১ (AAA ৭:১-এর উপরে)। - ভাষা সুইচার-এ
aria-label="Language"আছে যদিও দৃশ্যমান লেবেল অস্পষ্ট।
এই পাসে ঠিক করা হয়েছে
- হেডিং-লেভেল স্কিপ, vCard / MECARD এক্সট্রা-ফিল্ড সেকশনের তিনটি সাবহেড কোনো মধ্যবর্তী
<h3>ছাড়াই একটি<h2>-এর অধীনে<h4>ছিল। স্ক্রিন-রিডার আউটলাইন টুল এটিকে "স্কিপড লেভেল" হিসেবে ফ্ল্যাগ করেছিল। পরিবর্তন করে<h3>করা হয়েছে যাতে আউটলাইন h1 → h2 → h3 → h3 পরিষ্কারভাবে পড়ে।
পরিচিত সীমাবদ্ধতা
- Axe / NVDA / VoiceOver সম্পূর্ণ সুইপ একটি ব্রাউজার + AT প্রয়োজন যা আমরা বিল্ড পাইপলাইন থেকে চালাতে পারি না। মাসিক ম্যানুয়াল ব্রাউজার-ভিত্তিক পাস নির্ধারিত।
- তৃতীয়-পক্ষ স্বাধীন অডিট কমিশন করা হয়েছে (দেখুন /accessibility/audit/ প্লেসহোল্ডার)। রিপোর্ট ফলাফল থাকলেও আগমনে প্রকাশিত হবে।
- "/" কীবোর্ড শর্টকাট কমান্ড প্যালেটের জন্য সার্চ ফিল্ড সহ পৃষ্ঠায় সামান্য সংঘর্ষ ঝুঁকি। আমরা শুধুমাত্র তখন preventDefault() করি যখন ফোকাস ইনপুটের বাইরে থাকে; নথিভুক্ত কিন্তু এখনও AT-তে অডিট করা হয়নি।
একটি সমস্যা রিপোর্ট করুন
কিছু কীবোর্ড দিয়ে অ্যাক্সেসযোগ্য না হলে, ভুলভাবে লেবেল করা হলে, বা আপনার সেটআপে অব্যবহারযোগ্য হলে, hello@abundera.ai-এ ইমেইল করুন। আপনার ব্রাউজার, OS, AT, এবং নির্দিষ্ট ফ্লো অন্তর্ভুক্ত করুন। আমরা অ্যাক্সেসিবিলিটি বাগকে অগ্রাধিকার সমস্যা হিসেবে বিবেচনা করি।