کتاب صوتی CSS for Accessibility Design

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره CSS for Accessibility Design

موضوع کلی: برنامه نویسی

موضوع میانی: CSS

📋 سرفصل‌های دوره

• 1. اصول اولیه دسترسی‌پذیری در طراحی وب
• 2. مقدمه بر دسترسی‌پذیری (Accessibility)
• 3. چرا دسترسی‌پذیری مهم است؟
• 4. استانداردهای دسترسی‌پذیری (WCAG)
• 5. مفاهیم کلیدی دسترسی‌پذیری
• 6. انواع ناتوانی‌ها و تأثیر آن‌ها بر تجربه کاربری
• 7. تکنولوژی‌های کمکی (Assistive Technologies)
• 8. ارتباط CSS با دسترسی‌پذیری
• 9. چالش‌های دسترسی‌پذیری در طراحی وب
• 10. بررسی ابزارهای ارزیابی دسترسی‌پذیری
• 11. مبانی CSS برای دسترسی‌پذیری
• 12. ساختار معنایی (Semantic HTML) و نقش آن
• 13. استفاده صحیح از تگ‌های HTML
• 14. اهمیت استفاده از تگ‌های معنایی برای Screen Reader ها
• 15. CSS و ساختار معنایی
• 16. قوانین کلی CSS برای دسترسی‌پذیری
• 17. رنگ و کنتراست
• 18. اهمیت کنتراست رنگی
• 19. حداقل نسبت کنتراست WCAG
• 20. ابزارهای بررسی کنتراست رنگ
• 21. انتخاب پالت رنگی دسترس‌پذیر
• 22. استفاده از رنگ‌ها به صورت غیر از تنها شاخص
• 23. کنتراست برای متن و پس‌زمینه
• 24. کنتراست برای عناصر گرافیکی
• 25. کنتراست برای حالت‌های فوکوس
• 26. کنتراست برای خطوط و مرزها
• 27. نکات پیشرفته در مورد رنگ و کنتراست
• 28. طراحی ریسپانسیو و دسترسی‌پذیری
• 29. اصول طراحی ریسپانسیو
• 30. تأثیر تغییر اندازه صفحه نمایش بر دسترسی‌پذیری
• 31. استفاده از واحدهای نسبی (em, rem, %)
• 32. واحد `vw` و `vh` و ملاحظات دسترسی‌پذیری
• 33. استفاده از Media Queries برای دسترسی‌پذیری
• 34. تنظیمات فونت و اندازه متن
• 35. اهمیت قابلیت تغییر اندازه فونت
• 36. استفاده از واحدهای نسبی برای `font-size`
• 37. تنظیم `line-height` مناسب
• 38. فاصله بین پاراگراف‌ها
• 39. استفاده از `rem` به جای `px` برای فونت
• 40. تنظیم فونت‌های کاربرپسند
• 41. اجتناب از فونت‌های تزئینی و ناخوانا
• 42. مدیریت فونت‌های سفارشی (Custom Fonts)
• 43. تأثیر فونت‌های سفارشی بر دسترسی‌پذیری
• 44. بارگذاری بهینه فونت‌ها
• 45. قابلیت تنظیم اندازه فونت توسط کاربر
• 46. کنترل طرح‌بندی (Layout) و دسترسی‌پذیری
• 47. CSS Grid و دسترسی‌پذیری
• 48. CSS Flexbox و دسترسی‌پذیری
• 49. ترتیب بصری در مقابل ترتیب معنایی
• 50. استفاده از `order` در Flexbox و Grid
• 51. مدیریت ناحیه‌های فوکوس (Focus Management)
• 52. اهمیت فوکوس بصری
• 53. استایل‌دهی به `outline` عناصر فوکوس شده
• 54. اجتناب از حذف `outline`
• 55. نمایش واضح ناحیه فوکوس
• 56. حالت‌های فوکوس برای لینک‌ها و دکمه‌ها
• 57. حالت‌های فوکوس برای عناصر فرم
• 58. استفاده از `tabindex` و ملاحظات آن
• 59. `tabindex="0"`
• 60. `tabindex="-1"`
• 61. `tabindex` مثبت و تأثیر آن
• 62. دسترسی‌پذیری فرم‌ها
• 63. استایل‌دهی به برچسب‌ها (Labels)
• 64. ارتباط `label` با `input`
• 65. نمایش برچسب‌ها به صورت واضح
• 66. مخفی کردن برچسب‌ها به صورت دسترس‌پذیر
• 67. استایل‌دهی به پیام‌های خطا و راهنما
• 68. نمایش واضح پیام‌های خطا
• 69. پیام‌های خطا به صورت متن و رنگ
• 70. استفاده از `aria-describedby`
• 71. استایل‌دهی به عناصر فعال (Interactive Elements)
• 72. دکمه‌ها، لینک‌ها، و ورودی‌ها
• 73. اندازه مناسب عناصر تعاملی
• 74. فضای کافی بین عناصر تعاملی
• 75. حالت‌های مختلف عناصر تعاملی (hover, focus, active)
• 76. محتوای غیرمتنی و دسترسی‌پذیری
• 77. تصاویر و دسترسی‌پذیری
• 78. متن جایگزین (Alt Text) برای تصاویر
• 79. `alt=""` برای تصاویر تزئینی
• 80. استفاده از `longdesc` (در صورت نیاز)
• 81. استفاده از SVG و دسترسی‌پذیری
• 82. دسترسی‌پذیری ویدئو و صدا
• 83. زیرنویس (Captions) برای ویدئوها
• 84. متن رونویسی (Transcripts) برای صدا و ویدئو
• 85. صداهای پس‌زمینه و کنترل آن‌ها
• 86. دسترسی‌پذیری انیمیشن‌ها و جلوه‌های بصری
• 87. استفاده مسئولانه از انیمیشن‌ها
• 88. `prefers-reduced-motion`
• 89. اجتناب از انیمیشن‌های گیج‌کننده یا ناخواسته
• 90. انیمیشن‌های مهم و حیاتی
• 91. هشدارهای بصری و دسترسی‌پذیری
• 92. استفاده از آیکون‌ها و دسترسی‌پذیری
• 93. نکات پیشرفته CSS برای دسترسی‌پذیری
• 94. استفاده از `clip-path` و دسترسی‌پذیری
• 95. استفاده از `mask` و دسترسی‌پذیری
• 96. استفاده از CSS Variables برای مدیریت دسترسی‌پذیری
• 97. مدیریت تم‌های تاریک و روشن (Dark/Light Modes)
• 98. استفاده از `prefers-color-scheme`
• 99. تأثیر تم‌های تاریک بر کنتراست
• 100. استایل‌دهی به عناصر مخفی به صورت دسترس‌پذیر