فصل 21 از 27 درس 2 از 2

Accessibility

Screen Reader و Reduced Motion

بخشی از آموزش جامع Tailwind CSS

محتوای درس Screen Reader و Reduced Motion

Screen Reader و Reduced Motion را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

دسترس‌پذیری بخشی از تعریف Component است. Focus Visible مسیر Keyboard را نشان می‌دهد، sr-only نام قابل خواندن برای کنترل آیکونی فراهم می‌کند و Reduced Motion حرکت غیرضروری را محدود می‌سازد.

روش پیاده‌سازی

  1. ترتیب Tab و عنصر فعال را بررسی کنید.
  2. برای کنترل بدون متن، نام دسترس‌پذیر فراهم کنید.
  3. حرکت و انیمیشن را با ترجیح کاربر تطبیق دهید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

index.html
<button class="relative rounded-full p-3 hover:bg-slate-100">
  <svg aria-hidden="true" class="size-5"><!-- icon --></svg>
  <span class="sr-only">باز کردن اعلان‌ها</span>
</button>

خروجی مورد انتظار

دکمه آیکونی با Label قابل خواندن برای Screen Reader.

نکات مهم و خطاهای رایج

  • aria-hidden را روی عنصر تعاملی یا متن ضروری قرار ندهید.
  • Focus را به دلیل ظاهر نامطلوب حذف نکنید.

تمرین پیشنهادی

صفحه را بدون Mouse طی کنید و با Screen Reader نام دکمه نمونه را کنترل کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS