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

Accessibility

Focus Visible و Keyboard Navigation

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

محتوای درس Focus Visible و Keyboard Navigation

Focus Visible و Keyboard Navigation را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

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

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

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

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

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

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

index.html
<a href="/courses"
  class="rounded-lg px-3 py-2 text-blue-700
         focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-blue-500/25">
  مشاهده دوره‌ها
</a>

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

لینک با Focus واضح برای Keyboard.

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

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

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

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

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