WCAG - Web Content Accessibility Guidelines
فقط یه سری قانون خشک نیست؛
یه نقشه راهه برای اینکه محصولت واقعاً «برای همه» کار کنه.
اگه سایتت با موس عالیه ولی با Tab نابود میشه، یا اسکرین‌ریدر نمی‌فهمه چی کجاست، عملاً بخشی از کاربرهات رو از دست دادی.
تو این مقاله، ساختار WCAG رو به زبان Frontend Devها و با مثال‌های واقعی React و Next.js بررسی می‌کنیم.
ساختار WCAG به زبان ساده: اصل POUR
- Perceivable
- P : Perceivable => بشه دید / شنید / حس کرد
- O : Operable => بشه باهاش تعامل داشت (مثلاً با کیبورد)
- U : Understandable => قابل فهم باشه
- R : Robust => با همه مرورگرها و تکنولوژی‌های کمکی کار کنه
اصل ۱: Perceivable (قابل درک)
اگه کاربر نبینه، باید بشنوه. اگه نشنوه، باید بخونه.
Alt برای تصاویر:
<Image
src="/chart.png"
alt="Sales chart showing a 20% increase in Q4"
width={400}
height={300}
/>
- اگه تصویر تزئینیه، ""=alt بذار ولی هیچوقت حذفش نکن.
اصل ۲: Operable (قابل تعامل)
همه‌چیز باید با کیبورد هم قابل استفاده باشه، نه فقط موس!
همیشه از تگ‌های نیتیو استفاده کن:
<button onClick="{openMenu}">Menu</button>
اشتباه کلاسیک:
<div onClick="{openMenu}">Menu</div>
مدیریت Focus
:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}
- مثلا در react وقتی مودال باز میشه، فوکوس باید بره روی اولین المان قابل تعامل
// Modal
useEffect(() => {
if (isOpen) {
closeButtonRef.current?.focus();
}
}, [isOpen]
);
اصل ۳: Understandable (قابل فهم)
کاربر نباید حدس بزنه چی شد یا باید چی کار کنه.
فرم‌های واضح با Label:
<label htmlFor="email">Email</label>
<input id="email" type="email" />
پیام‌های خطای قابل فهم:
<p role="alert">Email format is invalid</p>
بدترین حالت:
- Error 422
زبان صفحه:
<html lang="fa">
- برای اینکه Screen Reader بدونه فارسی بخونه یا انگلیسی.
اصل ۴: Robust (سازگار و قابل اعتماد)
کد باید با تمام ابزارهای کمکی و مرورگرها کار کنه
HTML معنایی:
<nav />
<main />
<footer />
کامپوننت‌های بدون معنی:
<div className="nav" />
استفاده درست از ARIA:
<button aria-expanded="{isOpen}">Menu</button>
نکته طلایی:
فقط وقتی از ARIA استفاده کن که HTML خودش اون قابلیت رو نداره.
تغییرات جدید در WCAG 2.2
| عنوان | کد | هدف | توضیح |
|---|---|---|---|
| Focus Appearance | 2.4.11 | وضوح فوکوس | فوکوس باید ضخیم، با کنتراست و قابل تشخیص باشد |
| Dragging Movements | 2.5.7 | دسترسی حرکتی | Drag باید جایگزین کلیکی داشته باشد |
| Target Size (Minimum) | 2.5.8 | لمس راحت | حداقل اندازه هدف: 24×24px |
| Consistent Help | 3.2.6 | ثبات راهنما | Help باید در همه صفحات جای ثابت داشته باشد |
نکته: این معیارها مخصوص تجربه‌ی موبایل و کاربرانی با محدودیت حرکتی یا شناختی‌اند.
سطوح مطابقت WCAG
| سطح | توضیح | توصیه |
|---|---|---|
| A | حداقل سطح دسترس‌پذیری (پایه‌ترین الزامات) | فقط برای MVP یا پروژه‌های اولیه |
| AA | استاندارد واقعی برای اغلب پروژه‌ها | توصیه‌شده برای پروژه‌های Production |
| AAA | سطح ایده‌آل و بسیار سخت | فقط برای پروژه‌های ویژه دسترسی بالا (مثلاً آموزشی یا دولتی) |
هدف حرفه‌ای‌ها همیشه: WCAG 2.2 سطح AA
چک‌لیست عملی WCAG برای React / Next.js
| مورد | وضعیت |
|---|---|
استفاده از HTML معنایی (nav, main, section, footer) |
✅ |
| امکان استفاده کامل از سایت فقط با کیبورد | ✅ |
| ترتیب منطقی Tab (Focus Order درست) | ✅ |
فوکوس واضح با :focus-visible |
✅ |
| عدم حذف outline بدون جایگزین | ✅ |
استفاده از <button> به‌جای div قابل کلیک |
✅ |
| مدیریت Focus در Modal / Drawer | ✅ |
وجود label برای تمام inputها |
✅ |
نمایش خطا با role="alert" یا aria-describedby |
✅ |
| alt مناسب برای تصاویر (Next/Image) | ✅ |
| کنتراست رنگ مطابق WCAG (حداقل 4.5:1) | ✅ |
استفاده حداقلی و صحیح از aria-* |
✅ |
| تست با Lighthouse / axe DevTools | ✅ |
| تست دستی فقط با Tab (بدون موس) | ✅ |