آموزش دسترسی‌پذیری پیشرفته WCAG: تسلط بر الگوهای کامپوننت‌های ARIA - آخرین آپدیت

دانلود Advanced WCAG Accessibility: Master ARIA Component Patterns

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره: الگوهای عملی، جریان‌های کیبورد و رفتار صفحه‌خوان‌ها برای توسعه‌دهندگان و تستر‌های مشغولی که در حال ساخت رابط کاربری ARIA هستند. توضیح ARIA به زبان ساده و تفاوت بین نقش‌ها (roles)، وضعیت‌ها (states) و ویژگی‌ها (properties). خواندن درخت دسترسی‌پذیری در DevTools مرورگرهای کروم و فایرفاکس و شناسایی نقش، نام و وضعیت برای هر المان. اولویت دادن به HTML بومی (native) و توجیه زمان نیاز به ARIA برای کامپوننت‌های سفارشی و پویا. اعمال نقش‌ها، وضعیت‌ها و ویژگی‌های صحیح ARIA برای ساخت ویجت‌های دسترس‌پذیر (مانند combobox، tabs و dialog). پیاده‌سازی تعاملات مورد انتظار کیبورد (کلیدهای Tab، Enter، Space، Arrow keys و Escape) و مدیریت فوکوس. همگام‌سازی وضعیت ARIA با تغییرات بصری/UI از طریق جاوااسکریپت و تایید به‌روزرسانی‌ها با صفحه‌خوان. تعریف روابط با استفاده از aria-controls، aria-describedby و aria-activedescendant و اعتبارسنجی IDها. عیب‌یابی مشکلات دسترسی‌پذیری از طریق پیش‌بینی خروجی صفحه‌خوان بر اساس کدنویسی و رفتار المان. اجتناب از اشتباهات رایج ARIA (برچسب‌گذاری بیش از حد، نقش‌های متضاد، وضعیت‌های قدیمی و استفاده نادرست از aria-hidden). پیشنیازها: تسلط بر HTML، CSS و آشنایی با جاوااسکریپت آشنایی با ابزارهای توسعه مرورگر (Devtools و پنل Accessibility). یک مرورگر مدرن و دسترسی به CodePen برای کدنویسی زنده توانایی دانلود و استفاده از صفحه‌خوان NVDA یک سیستم عامل ویندوزی و مرورگر کروم یا فایرفاکس اعتماد به نفس در درک مفاهیم دسترسی‌پذیری و آشنایی با مبانی Accessibility نیازی نیست متخصص جاوااسکریپت باشید، اما درک اولیه از جاوااسکریپت و نحوه برنامه‌نویسی مفید است

به‌روزرسانی‌ها

2026/02/10 - واحد جدید برای کنترل Tab اضافه شد

2026/02/17 - نمایش عملی کنترل Tab در وب‌سایت Qantas

2026/05/26 - واحد جدید برای کنترل Accordion اضافه شد

کامپوننت‌های پیشرفته ARIA را بدون حدس و گمان بسازید.

برنامه‌های وب مدرن به چیزی فراتر از HTML بومی نیاز دارند. اشتباه در استفاده از ARIA باعث تخریب تجربه کاربری برای افرادی می‌شود که از صفحه‌خوان‌ها و سایر فناوری‌های کمکی استفاده می‌کنند. اما اگر درست اجرا شود، ویجت‌های شما به صورت پیش‌بینی‌پذیر عمل کرده، خوانایی بالایی دارند و حس یک المان بومی را منتقل می‌کنند.

در این دوره، شما یاد می‌گیرید که چگونه با اعتماد به نفس کامپوننت‌های پیچیده و دسترس‌پذیر بسازید. شما نحوه عملکرد واقعی ARIA را کالبدشکافی می‌کنید تا به جای کپی-پیست کردن تکه کدها، بتوانید درباره نقش‌ها، وضعیت‌ها و ویژگی‌ها استدلال کنید.

در پایان این دوره، شما قادر خواهید بود:

  • درک کنید ARIA چیست و تفاوت نقش‌ها، وضعیت‌ها و ویژگی‌ها در چیست

  • نقش‌ها، وضعیت‌ها و ویژگی‌های صحیح را برای ساخت ویجت‌های دسترس‌پذیر، طبق الگوهای راهنمای W3C ARIA Authoring Practices اعمال کنید

  • تعاملات مورد انتظار کیبورد با Tab، Enter، Space، کلیدهای جهت‌نما و Escape را در راستای مدیریت صحیح فوکوس پیاده‌سازی کنید

  • روابط را با ویژگی‌هایی مانند aria-controls، aria-describedby و aria-activedescendant تعریف کرده و پیش‌بینی کنید که صفحه‌خوان چه چیزی را از HTML واقعی اعلام می‌کند

چرا این دوره؟

پیاده‌سازی کامپوننت‌های ARIA دشوار است. من هر روز با تیم‌هایی کار می‌کنم که با همین چالش‌ها روبرو هستند. من کارهای سخت تفسیر دستورالعمل‌ها، تست با چندین صفحه‌خوان و یادگیری از جامعه دسترسی‌پذیری را انجام داده‌ام تا شما بتوانید کامپوننت‌هایی مانند comboboxها، tabs و dialogها را با اطمینان اضافه کنید.

ما از الگوهای راهنمای W3C ARIA Authoring Practicesاستفاده می‌کنیم، اما آن‌ها را به مراحل عملی و متمرکز بر پیاده‌سازی تبدیل می‌کنیم. شما یاد می‌گیرید که ابتدا HTML بومی را ترجیح دهیدو سپس ARIA را فقط در جایی که واقعاً نیاز است، اضافه کنید.

ساختار دوره

هر درس بر روی یک مفهوم ARIA تمرکز دارد و با یک بررسی کوتاه دانش در سناریوهای واقع‌گرایانه به پایان می‌رسد.

اکثر درس‌ها حدود ۵ دقیقه هستند و هیچ‌کدام بیش از ۱۰ دقیقه طول نمی‌کشند.

شما موارد زیر را تجربه خواهید کرد:

  • تجزیه ویجت‌های پیچیده به نقش‌ها، وضعیت‌ها و ویژگی‌ها

  • ساخت و تست قابلیت‌های ARIA با اطمینان کامل

  • کار با مثال‌های قابل اجرا در CodePen که می‌توانید کپی، پیست و بررسی کنید

در ادامه چه می‌بینیم؟

واحدهای جدید به طور منظم با کامپوننت‌های تازه برای ساخت اضافه می‌شوند که همیشه کاربردی و دسترس‌پذیر هستند.

کامپوننت‌های آتی شامل موارد زیر است:

  • تب‌ها (Tabs) - اضافه شده در 2026/02/10

  • آکاردئون (Accordion) - اضافه شده در 2026/05/26

  • هشدار (Alert)

  • دیالوگ/مودال (Dialog)

  • افشاگر/نمایش و پنهان (Disclosure)

  • لیست‌باکس (Listbox)


سرفصل ها و درس ها

شروع کار با دوره ARIA Getting started with this ARIA course

  • مقدمه Introduction

شناخت ARIA چیست و چه زمانی از آن استفاده کنیم Identifying what ARIA is and when to use it

  • مقدمه بخش Section introduction

  • درک اینکه ARIA چیست Understanding what ARIA is

  • یادگیری اصول هسته ARIA Learning the core principles of ARIA

  • درک درخت دسترسی‌پذیری Understanding the accessibility tree

  • خلاصه بخش Section summary

  • مرور دانش Knowledge review

درک مشکلاتی که ARIA برای حل آن‌ها طراحی شده است Understanding the problems ARIA Is designed to solve

  • مقدمه بخش Section introduction

  • شناسایی نقاط ضعف HTML بومی Recognising where native HTML falls short

  • شناسایی زمان و دلیل نیاز به ARIA Identifying when and why ARIA Is needed

  • درک دلیل اولویت ساخت با HTML بومی Understanding why build with native HTML first

  • خلاصه بخش Section summary

  • مرور دانش Knowledge review

شناسایی نقش‌ها و ویژگی‌های اصلی ARIA Identifying core ARIA roles and attributes

  • مقدمه بخش Section introduction

  • درک نقش‌های رایج ARIA Understanding common ARIA roles

  • اعمال وضعیت‌های ARIA برای بازتاب تعاملات UI Applying ARIA states to reflect UI interactions

  • اعمال ویژگی‌های ARIA برای تعریف روابط و مشخصات Applying ARIA properties to define relationships and characteristics

  • ساخت ویجت‌ها با نقش‌ها، وضعیت‌ها و ویژگی‌ها Building widgets with roles, states, and properties

  • جلوگیری از اشتباهات رایج Preventing common pitfalls

  • خلاصه بخش Section summary

  • مرور دانش Knowledge review

ساخت یک Combobox با نتیجه Listbox (انتخاب تک‌گانه) Building a Combobox with Listbox result (single select)

  • مقدمه بخش Section introduction

  • معرفی کامپوننت و بررسی آناتومی Introducing the component and exploring the anatomy

  • تجربه شکاف دسترسی‌پذیری Experiencing the accessibility gap

  • شناسایی اجزای کامپوننت Identifying the component parts

  • افزودن نقش‌های ARIA Adding the ARIA roles

  • افزودن وضعیت‌های ARIA Adding the ARIA states

  • افزودن ویژگی‌های ARIA Adding the ARIA properties

  • پیاده‌سازی رفتار کیبورد Implementing keyboard behaviour

  • افزودن رفتارهای تکمیلی Adding additional behaviour

  • بهبود تجربه صفحه‌خوان Improving the screen reader experience

  • افزودن رفتارهای فراتر از ARIA Adding behaviour beyond ARIA

  • درک آنچه آموختید Understanding what you have learnt

  • خلاصه بخش Section summary

  • تمرین عملی Hands on exercise

  • مرور دانش Knowledge review

ساخت کنترل Tab Building a Tab control

  • مقدمه بخش Section introduction

  • معرفی کامپوننت و بررسی آناتومی Introducing the component and exploring the anatomy

  • تجربه شکاف دسترسی‌پذیری Experiencing the accessibility gap

  • شناسایی اجزای کامپوننت Identifying the component parts

  • افزودن نقش‌های ARIA Adding the ARIA roles

  • افزودن وضعیت‌های ARIA Adding the ARIA states

  • افزودن ویژگی‌های ARIA Adding the ARIA properties

  • پیاده‌سازی رفتار کیبورد Implementing keyboard behaviour

  • افزودن رفتارهای تکمیلی Adding additional behaviour

  • بهبود تجربه صفحه‌خوان Improving the screen reader experience

  • درک آنچه آموختید Understanding what you have learnt

  • خلاصه بخش Section summary

  • مرور دانش Knowledge review

  • نمایش ویژه در دنیای واقعی Bonus real-world demonstration

ساخت کنترل Accordion Building an Accordion control

  • مقدمه بخش Section introduction

  • معرفی کامپوننت و بررسی آناتومی Introducing the component and exploring the anatomy

  • تجربه شکاف دسترسی‌پذیری Experiencing the accessibility gap

  • شناسایی اجزای کامپوننت Identifying the component parts

  • پیاده‌سازی ARIA Implementing ARIA

  • افزودن نقش‌های ARIA Adding the ARIA roles

  • افزودن وضعیت‌های ARIA Adding the ARIA states

  • افزودن ویژگی‌های ARIA Adding the ARIA properties

  • پیاده‌سازی رفتار کیبورد Implementing keyboard behaviour

  • بهبود تجربه صفحه‌خوان Improving the screen reader experience

  • درک آنچه آموختید Understanding what you have learnt

  • خلاصه بخش Section summary

  • مرور دانش Knowledge review

تثبیت آموخته‌ها Locking in what you've learned

  • شما موفق شدید! You've made it!

  • گام بعدی چیست؟ Where to next?

  • ارتباط با من Reach out to me

  • نظرسنجی بازخورد و ارزیابی مدرس Feedback survey and teacher evaluation

نمایش نظرات

آموزش دسترسی‌پذیری پیشرفته WCAG: تسلط بر الگوهای کامپوننت‌های ARIA
جزییات دوره
2 hours
61
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
85
4.7 از 5
ندارد
دارد
دارد
Ross Mullen
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Ross Mullen Ross Mullen

متخصص دسترسی دیجیتال