فلش‌کارت‌های آموزشی ساخت وب‌سایت‌های دسترس‌پذیر با React

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

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

عنوان دوره: دوره ساخت وب‌سایت‌های دسترس‌پذیر با React

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

موضوع میانی: נגישות وب (Web Accessibility)

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

• 1. مفاهیم پایه دسترسی‌پذیری وب (Web Accessibility)
• 2. استانداردهای WCAG 2.1 و niveaux A, AA, AAA
• 3. نقش ARIA در بهبود دسترسی‌پذیری
• 4. تنظیم پروژه React با Create React App
• 5. ساختار پوشه‌های پروژه برای دسترسی‌پذیری
• 6. استفاده از JSX و HTML semantiک در React
• 7. ایجاد کامپوننت‌های قابل reused با دسترسی‌پذیری
• 8. مدیریت فوکس (focus) در کامپوننت‌های React
• 9. trap focus برای مودال‌ها
• 10. استفاده از refs برای دسترسی به عناصر DOM
• 11. تست دسترسی‌پذیری با axe و Lighthouse
• 12. یکپارچه‌سازی eslint-plugin-jsx-a11y در پروژه
• 13. نوشتن تست‌های unit برای دسترسی‌پذیری با Jest و React Testing Library
• 14. مدیرین رنگ و contraste در تم‌های React
• 15. ارائه theme-switcher با حفظ نسبت کنتراست
• 16. استفاده از prefers-reduced-motion در انیمیشن‌های React
• 17. کنترل حرکت و انیمیشن با media queries
• 18. پشتیبانی از کیبورد navigation در منوهای dropdown
• 19. ساخت منوهای آکاردئونی قابل دسترسی
• 20. پیاده‌سازی تب‌ها (tabs) با ARIA attributes
• 21. ساخت اسلایدر carousel با کنترل کیبورد و صفحه لمسی
• 22. مدیریت فرم‌ها: label، placeholder، error messages
• 23. validation فرم‌های دسترسی‌پذیر با React Hook Form
• 24. استفاده از aria-live برای پیام‌های خطای زنده
• 25. مدیریت وضعیت بارگذاری (loading) و skeleton screens با دسترسی‌پذیری
• 26. تولید صفحات خطا (404, 500) با پیام‌های audible
• 27. تمرکز بر ناوبری سایت با skip links
• 28. پیاده‌سازی skip-to-content link visible عند focus
• 29. استفاده از landmark elements (header, nav, main, footer, aside)
• 30. تعیین عنوان صفحه (title) دینامیک در React Router
• 31. مدیریت تغییر مسیر و اعلام تغییر به صفحه-readerها
• 32. استفاده از React Router و اعلان تغییرات route با aria-live
• 33. تست دسترسی‌پذیری در SPA با تست‌های واحد
• 34. بهینه‌سازی عملکرد برای کاربران با محدودیت‌های bandwidth
• 35. lazy loading و suspense با توجه به دسترسی‌پذیری
• 36. استفاده از Web Workers برای پردازش سنگین بدون blocking UI
• 37. پشتیبانی از تشخیص Contrast و تغییر خودکار theme
• 38. استفاده از prefers-color-scheme برای تم dark/light
• 39. اطمینان از toucher target size حداقل 44dp
• 40. طراحی دکمه‌ها و لینک‌های touch-friendly
• 41. مدیریت گروه‌های دکمه‌های رادیویی و checkbox با fieldset/legend
• 42. استفاده از دوربین‌های مجازی (virtual scroll) با دسترسی‌پذیری
• 43. پیاده‌سازی جدول‌های داده‌های sortable با ARIA
• 44. sorting و pagination با کیبورد و screen reader
• 45. استفاده از live regions برای به‌روزرسانی داده‌های زمان واقعی
• 46. مدیریت объявления در چت‌های واقعی (WebSocket)
• 47. پیاده‌سازی autocomplete و combobox با ARIA
• 48. ساخت datepicker دسترسی‌پذیر
• 49. استفاده از کتابخانه‌های UI (Material-UI, Ant Design) با تنظیمات a11y
• 50. تست دسترسی‌پذیری کتابخانه‌های شخص ثالث
• 51. ایجاد یک design system با کامپوننت‌های دسترسی‌پذیر
• 52. تài کردن کامپوننت‌ها با Storybook و افزونه a11y
• 53. تست بصری (visual regression) برای تضمین استایل‌های a11y
• 54. integrating CI/CD pipelines با تست a11y خودکار
• 55. تنظیم pre-commit hooks برای جلوگیری از commit‌های non-accessible
• 56. آموزش تیم و ایجاد چکلیست a11y قبل از deployment
• 57. استفاده از ابزارهای خودکار যেমন pa11y, cypress-a11y
• 58. تست manual با استفاده از screen readerها (NVDA, JAWS, VoiceOver)
• 59. تست با keyboards only
• 60. تست با ابزارهای μεγنسیفیکیشن و صدای تولید
• 61. ارائه گزارش‌های دسترسی‌پذیری به stakeholders
• 62. بهبود مستمر بر اساس بازخورد کاربران معوق
• 63. موارد قانونی و استانداردهای دسترسی‌پذیری در کشورهای مختلف
• 64. تدوین erklارację دسترسی‌پذیری (Accessibility Statement)
• 65. حفظ به‌روزرسانی WCAG در پروژه‌های آینده
• 66. استفاده از آیکون‌های SVG با دسترسی‌پذیری (title, aria-label)
• 67. مدیرین تصاویر decorative با alt=""
• 68. استفاده از تصاویر informative با alt معنادار
• 69. ارائه captions و transcripts برای محتوای multimedia
• 70. پیاده‌سازی audio description برای ویدیوها
• 71. کنترل پخش media با keyboard و screen reader
• 72. استفاده از WebVTT برای captions همگام‌سازی
• 73. اطمینان از عدم استفاده از color-only برای منتقل کردن اطلاعات
• 74. استفاده از الگو و texturas برای تمایز عناصر
• 75. طراحی فرم‌های پیچیده با فیلدهای شرطی و aria-relevant
• 76. مدیریت پیام‌های validation در زمان واقعی
• 77. استفاده از modal dialogs با trap focus و بازگشت focus
• 78. پیاده‌سازی tooltip و توصیف قابل دسترسی
• 79. ساخت tree view و منوهای تو در تو با aria-expanded
• 80. پشتیبانی از drag-and-drop با keyboard fallback
• 81. استفاده از virtualization برای لیست‌های بزرگ با a11y
• 82. مدیریت وضعیت بارگذاری در infinite scroll با aria-busy
• 83. اطمینان از لینک‌های خارجی با opener security و aria-external
• 84. استفاده از rel="noopener noreferrer" و aria-label
• 85. پیاده‌سازی search bar با autocomplete و aria-controls
• 86. ایجاد pagination با aria-current و aria-label
• 87. تنظیم skip links در صفحاتی با header fixed
• 88. تست دسترسی‌پذیری در محیط‌های مختلف (mobile, tablet, desktop)
• 89. بهینه‌سازی metatags برای SEO و دسترسی‌پذیری
• 90. استفاده از structured data (JSON-LD) برای بهبود دسترسی‌پذیری
• 91. ایجاد sitemap قابل دسترسی
• 92. پیاده‌سازی Internationalization (i18n) با حفظ a11y
• 93. مدیریت متون راست‑به‑چپ (RTL) و تاثیر بر دسترسی‌پذیری
• 94. استفاده از dir attribute و ویژگی‌های Unicode bidi
• 95. تست با زبان‌های مختلف و screen readerهای منطقه‌ای
• 96. تهیه راهنمای contributer برای a11y در پروژه‌های متن‌باز
• 97. تنظیم prettier و eslint برای حفظ کد a11y-friendly
• 98. آشنایی با ابزارهای طراحی Figma/Sketch با افزونه‌های a11y
• 99. ایجاد prototip دسترسی‌پذیر قبل از کدنویسی
• 100. مرور نهایی و آماده‌سازی برای انتشار محصول دسترسی‌پذیر