فلش‌کارت‌های آموزشی Accessibility in CSS: Designing for Inclusivity

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

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

عنوان دوره: دوره Accessibility in CSS: Designing for Inclusivity

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

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

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

• 1. مقدمه‌ای بر دسترسی‌پذیری وب (A11y)
• 2. چرا دسترسی‌پذیری در CSS اهمیت دارد؟
• 3. آشنایی با دستورالعمل‌های WCAG
• 4. چهار اصل دسترسی‌پذیری (POUR)
• 5. شناخت انواع ناتوانی‌ها و فناوری‌های کمکی
• 6. نقش HTML معنایی به عنوان پایه دسترسی‌پذیری
• 7. مبانی ARIA و ارتباط آن با CSS
• 8. تفکیک محتوا (HTML)، نمایش (CSS) و رفتار (JS)
• 9. راه‌اندازی محیط توسعه با ذهنیت دسترسی‌پذیری
• 10. افسانه‌های رایج در مورد دسترسی‌پذیری
• 11. درک نسبت کنتراست رنگ (WCAG AA vs. AAA)
• 12. ابزارهای بررسی کنتراست رنگ
• 13. طراحی پالت‌های رنگی دسترس‌پذیر
• 14. خطر استفاده از رنگ به تنهایی برای انتقال اطلاعات
• 15. استفاده از الگوها و آیکن‌ها به عنوان مکمل رنگ
• 16. استایل‌دهی به لینک‌ها: فراتر از رنگ
• 17. حالت کنتراست بالا (High Contrast Mode)
• 18. کار با مدیا کوئری `forced-colors`
• 19. طراحی حالت تاریک/روشن با `prefers-color-scheme`
• 20. ملاحظات مربوط به کوررنگی
• 21. انتخاب فونت‌های خوانا و دسترس‌پذیر
• 22. استفاده از واحدهای نسبی (`rem`, `em`) برای مقیاس‌پذیری متن
• 23. اهمیت `font-size` و تایپوگرافی واکنش‌گرا
• 24. تنظیم `line-height` و `letter-spacing` برای خوانایی بهتر
• 25. مدیریت وزن فونت (`font-weight`) برای جلوگیری از خستگی چشم
• 26. بهترین شیوه‌ها برای ترازبندی متن (`text-align`)
• 27. جلوگیری از مشکلات `text-justify`
• 28. اهمیت فضای خالی (White Space) در طراحی
• 29. استایل‌دهی دسترس‌پذیر به لیست‌ها (`ul`, `ol`)
• 30. استایل‌دهی به نقل‌قول‌ها و ارجاعات
• 31. اهمیت ناوبری با کیبورد
• 32. شبه‌کلاس `:focus`: سنگ بنای دسترسی‌پذیری
• 33. طراحی استایل‌های `focus` واضح و مشخص
• 34. تفاوت `:focus` و `:focus-visible`
• 35. استفاده از `:focus-within` برای استایل‌دهی به والد
• 36. مدیریت ترتیب فوکوس (Focus Order) منطقی
• 37. ویژگی `tabindex`: کاربردهای صحیح و اشتباه
• 38. ایجاد یک "تله فوکوس" (Focus Trap) دسترس‌پذیر برای مودال‌ها
• 39. استایل‌دهی به لینک "پرش به محتوای اصلی" (Skip Link)
• 40. اطمینان از قابل فوکوس بودن تمام عناصر تعاملی
• 41. روش‌های صحیح پنهان کردن محتوا برای صفحه‌خوان‌ها
• 42. تفاوت `display: none` و `visibility: hidden`
• 43. تکنیک `clip-path` برای پنهان‌سازی دسترس‌پذیر
• 44. کلاس کمکی `sr-only` یا `visually-hidden`
• 45. چه زمانی محتوا را به صورت بصری و چه زمانی کاملاً پنهان کنیم
• 46. تأثیر ترتیب DOM بر دسترسی‌پذیری
• 47. Flexbox دسترس‌پذیر: ترتیب بصری در مقابل ترتیب DOM
• 48. خطر استفاده از ویژگی `order` در Flexbox
• 49. CSS Grid دسترس‌پذیر: حفظ ترتیب منطقی محتوا
• 50. طراحی واکنش‌گرا (Responsive Design) با اولویت دسترسی‌پذیری
• 51. ساختار معنایی چیدمان: Header, Nav, Main, Footer
• 52. استایل‌دهی دسترس‌پذیر به منوهای ناوبری
• 53. ساخت منوهای بازشونده (Dropdown) دسترس‌پذیر
• 54. چالش‌های دسترسی‌پذیری منوهای Off-Canvas
• 55. ملاحظات دسترسی‌پذیری برای `position: sticky` و `position: fixed`
• 56. جلوگیری از اسکرول افقی ناخواسته
• 57. چیدمان چندستونی و حفظ ترتیب خواندن
• 58. استفاده از ویژگی‌های منطقی (`margin-inline-start`) برای پشتیبانی از زبان‌های مختلف
• 59. Container Queries و تأثیر آن بر کامپوننت‌های دسترس‌پذیر
• 60. استایل‌دهی به جداول داده (Data Tables) برای خوانایی
• 61. استایل‌دهی دسترس‌پذیر به فیلدهای ورودی (`input`, `textarea`)
• 62. استایل‌دهی به برچسب‌ها (`label`) و ارتباط بصری آنها
• 63. سفارشی‌سازی دسترس‌پذیر Checkbox ها
• 64. سفارشی‌سازی دسترس‌پذیر Radio Button ها
• 65. استایل‌دهی به منوهای کشویی (`select`)
• 66. استایل‌دهی به دکمه‌ها (`button`) و تفاوت با لینک‌ها
• 67. استایل‌دهی به حالت‌های مختلف عناصر: `:disabled`, `[aria-disabled]`
• 68. استفاده از شبه‌کلاس‌های اعتبارسنجی: `:valid`, `:invalid`, `:required`
• 69. نمایش پیام‌های خطا به شیوه‌ای دسترس‌پذیر
• 70. طراحی Tooltip های دسترس‌پذیر با CSS
• 71. استایل‌دهی به کامپوننت آکاردئون (Accordion)
• 72. استایل‌دهی به کامپوننت تب (Tabs)
• 73. استایل‌دهی به عناصر `details` و `summary`
• 74. استفاده از ویژگی `accent-color` برای استایل‌دهی سریع
• 75. استایل‌دهی به نوارهای پیشرفت (Progress Bars)
• 76. استایل‌دهی به تصاویر برای مقیاس‌پذیری و جلوگیری از بهم‌ریختگی
• 77. تکنیک‌های جایگزینی تصویر (Image Replacement)
• 78. استفاده از `object-fit` برای کنترل تصاویر
• 79. دسترسی‌پذیری آیکن‌های SVG
• 80. استایل‌دهی به آیکن فونت‌ها (Font Icons) و مشکلات دسترسی‌پذیری آنها
• 81. استایل‌دهی به `figure` و `figcaption`
• 82. کنترلرهای ویدیوی سفارشی و دسترسی‌پذیری آنها
• 83. استایل‌دهی به زیرنویس‌ها (Captions and Subtitles)
• 84. مدیا کوئری `prefers-reduced-motion`
• 85. طراحی انیمیشن‌های امن و محترمانه
• 86. استفاده از `transform` و `opacity` برای انیمیشن‌های بهینه
• 87. جلوگیری از انیمیشن‌های چشمک‌زن و سریع
• 88. ارائه کنترل‌هایی برای توقف یا پخش انیمیشن
• 89. انیمیشن برای انتقال مفاهیم، نه فقط برای زیبایی
• 90. چالش‌های دسترسی‌پذیری افکت پارالاکس (Parallax)
• 91. استفاده از CSS Custom Properties برای ساخت تم‌های دسترس‌پذیر
• 92. شبه‌کلاس `:has()` و کاربردهای بالقوه در دسترسی‌پذیری
• 93. استایل‌دهی به نشانگرهای لیست با `::marker`
• 94. استایل‌دهی به محتوای تولید شده با `::before` و `::after` و تأثیر آن بر صفحه‌خوان‌ها
• 95. استراتژی‌های چاپ (Print Stylesheets) دسترس‌پذیر
• 96. تست دستی با کیبورد: یک چک‌لیست ضروری
• 97. آشنایی با تست توسط صفحه‌خوان‌ها
• 98. استفاده از ابزارهای توسعه‌دهنده مرورگر برای بازرسی دسترسی‌پذیری
• 99. ابزارهای خودکار برای شناسایی مشکلات CSS
• 100. جمع‌بندی: ایجاد یک راهنمای استایل (Style Guide) با اولویت دسترسی‌پذیری