𝗛𝗼𝘄 𝘁𝗼 𝗪𝗶𝗿𝗲 𝗔𝗥𝗜𝗔 𝗙𝗼𝗿 𝗙𝗼𝗿𝗺 𝗘𝗿𝗿𝗼𝗿𝘀
বেশিরভাগ ফর্ম দৃষ্টিমান ব্যবহারকারীদের জন্য ভালো কাজ করে কিন্তু সহায়ক প্রযুক্তি (assistive technology) ব্যবহারকারী ব্যক্তিদের ক্ষেত্রে ব্যর্থ হয়। একজন দৃষ্টিমান ব্যবহারকারী লাল বর্ডার এবং একটি এরর মেসেজ দেখতে পান। কিন্তু একজন স্ক্রিন রিডার ব্যবহারকারী প্রায়শই কিছুই শুনতে পান না।
আপনি দুটি ARIA অ্যাট্রিবিউট এবং একটি ছোট লাইভ রিজিয়ন (live region) ব্যবহার করে এটি ঠিক করতে পারেন। এই পরিবর্তনটি করতে ৫০ লাইনেরও কম কোড প্রয়োজন।
এখানে দেখানো হলো কীভাবে আপনি আপনার এররগুলোকে ইনপুটগুলোর সাথে যুক্ত করবেন।
১. aria-describedby ব্যবহার করুন
ইনপুটটিকে এরর এলিমেন্টের দিকে নির্দেশ করতে হবে। আপনার ইনপুটে aria-describedby যোগ করুন এবং এর ভ্যালু হিসেবে আপনার এরর div-এর ID সেট করুন।
উদাহরণ:
- ইনপুট ID: email-input
- এরর ID: email-error
- কোড:
aria-describedby="email-error"
এটি স্ক্রিন রিডারকে নির্দেশ দেয় যে ব্যবহারকারী যখন ইনপুটে ফোকাস করবেন, তখন যেন এরর মেসেজটি পড়ে শোনায়। আপনার যদি হেল্প টেক্সটও থাকে, তবে আপনি একাধিক ID যোগ করতে পারেন।
২. aria-invalid ব্যবহার করুন
এই অ্যাট্রিবিউটটি ব্যবহারকারীকে জানায় যে ইনপুটটি ভুল। যখন কোনো এরর দেখা দেয় তখন aria-invalid কে true সেট করুন। এরর চলে গেলে এটি false সেট করুন।
একটি সাধারণ ভুল হলো একটি র্যাপার div-কে লাল রঙ দিয়ে স্টাইল করা কিন্তু শুধুমাত্র ইনপুটে aria-invalid ব্যবহার করা। এটি একটি অমিল তৈরি করে। নিশ্চিত করুন যে আপনার ভিজ্যুয়াল স্টাইল এবং ARIA অ্যাট্রিবিউট একই এলিমেন্টকে টার্গেট করছে।
৩. একটি লাইভ রিজিয়ন যোগ করুন
ব্যবহারকারী টাইপ করার সময় যদি কোনো এরর আসে, তবে তারা সেটি খেয়াল নাও করতে পারেন। আপনার এরর div-এ aria-live="polite" ব্যবহার করুন।
aria-live="polite"স্ক্রিন রিডারকে নির্দেশ দেয় যেন একটি স্বাভাবিক বিরতির সময় এররটি ঘোষণা করা হয়।- জরুরি অবস্থা ছাড়া "assertive" ব্যবহার করবেন না। ফর্ম এরর কোনো জরুরি অবস্থা নয়।
৪. Async ভ্যালিডেশন হ্যান্ডেল করুন আপনি যদি ব্যাকগ্রাউন্ডে কোনো ইউজারনেম বা অ্যাড্রেস চেক করেন, তবে ব্যবহারকারীদের জানতে হবে যে সিস্টেমটি কাজ করছে।
- প্যাটার্ন A: চেক চলাকালীন ইনপুটে
aria-busy="true"ব্যবহার করুন। - প্যাটার্ন B: "Verifying username..." এর মতো স্ট্যাটাস আপডেট ঘোষণা করার জন্য একটি হিডেন লাইভ রিজিয়ন ব্যবহার করুন।
বিভিন্ন স্ক্রিন রিডারের ক্ষেত্রে প্যাটার্ন B বেশি নির্ভরযোগ্য।
টেস্টিং বাধ্যতামূলক। অটোমেটেড টুলগুলো সহায়ক হলেও সেগুলো ম্যানুয়াল টেস্টিংয়ের বিকল্প হতে পারে না। Windows-এ NVDA অথবা macOS-এ VoiceOver ব্যবহার করুন।
আপনার টেস্ট চেকলিস্ট:
- ফিল্ডে ট্যাব (Tab) করুন। লেবেলটি ঘোষণা করা উচিত।
- একটি ভুল ভ্যালু দিন। এররটি ঘোষণা করা উচিত।
- আবার ফিল্ডে ট্যাব করুন। এররটির সাথে লেবেলটিও ঘোষণা করা উচিত।
- এররটি ঠিক করুন। এরর মেসেজটি চলে যাওয়া উচিত।