📌 مفهوم

Screen Readers ابزارهایی هستند که محتوای وب را برای کاربران نابینا یا کم‌بینا می‌خوانند و توضیح می‌دهند.

• این ابزارها متن، تگ‌ها، آرایش و گرافیک‌های وب را تبدیل به صدا یا بریل می‌کنند.

• دسترسی مناسب وب‌سایت به معنای سازگاری با Screen Readers است.

📑 نکات مهم برای دسترسی

1️⃣ تگ‌های معنایی (Semantic HTML)

• استفاده از تگ‌های درست مثل <header>, <nav>, <main>, <footer>, <section>, <article>

• مثال:

<nav>
  <ul>
    <li><a href="#home">خانه</a></li>
    <li><a href="#about">درباره ما</a></li>
  </ul>
</nav>

2️⃣ متن جایگزین برای تصاویر (alt)

• هر تصویر باید متن جایگزین توصیفی داشته باشد.

<img src="logo.png" alt="لوگوی سایت تابزمدیا">

3️⃣ نقش‌ها (ARIA Roles)

• استفاده از aria- attributes* برای مشخص کردن نقش عناصر.

• مثال:

<button aria-label="بستن پنجره">×</button>
<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">اطلاعیه مهم</h2>
</div>

4️⃣ تمرکز (Focus Management)

• استفاده از tabindex و مدیریت فوکوس با کیبورد.

<button tabindex="0">ارسال</button>

5️⃣ محتوای پنهان برای Screen Readers

• استفاده از کلاس‌های مخصوص یا sr-only در Tailwind.

<span class="sr-only">این متن فقط برای Screen Reader است</span>

🏷 Tailwind CSS و Screen Readers

Tailwind کلاس آماده برای متن مخفی ولی قابل دسترسی دارد:

مثال Tailwind:

<button class="bg-blue-500 text-white p-2">
  <span class="sr-only">ارسال فرم</span>
  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
    <path d="M2 10h16M12 4l8 6-8 6"/>
  </svg>
</button>

✅ نتیجه: آیکون فقط نمایش داده می‌شود ولی Screen Reader متن "ارسال فرم" را می‌خواند.