# ARIA দিয়ে লুকানো এলিমেন্ট ফোকাসযোগ্য হতে পারবে না বা এর ভেতরে ফোকাসযোগ্য এলিমেন্ট থাকতে পারবে না

<https://www.fixreports.com/bn/issues/aria-hidden-focus>

WCAG 4.1.2 নাম, রোল, মান · লেভেল A

ফোকাস পাওয়া যায় এমন এলিমেন্ট স্ক্রিন রিডার থেকে লুকানো, কিন্তু কিবোর্ড দিয়ে তবুও সেগুলোতে পৌঁছানো যায়।

## এই নিয়ম কী যাচাই করে
নিশ্চিত করে যে aria-hidden এলিমেন্টগুলো ফোকাসযোগ্য নয় এবং এদের ভেতরে কোনো ফোকাসযোগ্য এলিমেন্ট নেই.

## কেন এটি গুরুত্বপূর্ণ
কিবোর্ড ব্যবহারকারীরা এমন এলিমেন্টে পৌঁছান, যা স্ক্রিন রিডার ঘোষণা করে না (WCAG 4.1.2)।

## কীভাবে ঠিক করবেন
### যেকোনো ওয়েবসাইটে
1. ফোকাস পাওয়া যায় এমন এলিমেন্ট থাকা কন্টেইনার থেকে aria-hidden সরিয়ে দিন, অথবা লুকানো অফ-ক্যানভাস মেনু ও স্লাইডে tabindex="-1" ও inert অ্যাট্রিবিউট যোগ করুন।

### Shopify-তে
1. ফোকাস পাওয়া যায় এমন এলিমেন্ট থাকা কন্টেইনার থেকে aria-hidden সরিয়ে দিন, অথবা লুকানো অফ-ক্যানভাস মেনু ও স্লাইডে tabindex="-1" ও inert অ্যাট্রিবিউট যোগ করুন।

### WooCommerce ও WordPress-এ
1. ফোকাস পাওয়া যায় এমন এলিমেন্ট থাকা কন্টেইনার থেকে aria-hidden সরিয়ে দিন, অথবা লুকানো অফ-ক্যানভাস মেনু ও স্লাইডে tabindex="-1" ও inert অ্যাট্রিবিউট যোগ করুন।

## সংশোধন কীভাবে যাচাই করবেন
- স্ক্রিন রিডার চালু রেখে Tab চেপে পুরো পেজ ঘুরে দেখুন।

## তথ্যসূত্র
- axe-core নিয়মের ডকুমেন্টেশন (Deque): https://dequeuniversity.com/rules/axe/4.13/aria-hidden-focus
- WCAG 4.1.2-এর ব্যাখ্যা (W3C): https://www.w3.org/WAI/WCAG22/Understanding/name-role-value