حدود ۱۵٪ جمعیت دنیا یه نوع معلولیت دارن. اگه سایت شما برای اونا قابل استفاده نیست، مشتری از دست میدید.

WCAG چیه؟

Web Content Accessibility Guidelines. استاندارد جهانی دسترسی‌پذیری وب.

سطح‌ها

A: پایه
AA: توصیه شده
AAA: حرفه‌ای

چهار اصل POUR

Perceivable: قابل درک
Operable: قابل استفاده
Understandable: قابل فهم
Robust: پایدار

Alt Text تصاویر

<img alt="توصیف تصویر">
برای Screen Reader.

Semantic HTML

Header، Nav، Main، Article، Footer. نه فقط Div.

Keyboard Navigation

هر عملیات باید با Keyboard قابل انجام باشه. بدون Mouse.

Focus Indicator

وقتی Focus روی Element، واضح باشه. outline رو حذف نکنید.

Color Contrast

WCAG AA: نسبت 4.5:1 برای متن. تست با Color Contrast Analyzer.

Font Size

حداقل 16px. Zoom تا 200٪ باید کار کنه.

Skip Links

لینک اول برای Skip به محتوای اصلی. برای Screen Reader.

ARIA

Accessible Rich Internet Applications. اطلاعات اضافه برای Screen Reader:
aria-label، aria-hidden، role.

Form Labels

هر Input یه Label. برای پرشدن آسون.

Error Messages

واضح، مرتبط با Field. کاربر بفهمه چیکار کنه.

Video/Audio

Captions: زیرنویس
Transcript: متن
Audio Description: توصیف صحنه

Screen Reader Test

NVDA: Windows، رایگان
JAWS: Windows، پولی
VoiceOver: Mac، پیش‌فرض
TalkBack: Android

ابزارهای Audit

WAVE: پلاگین مرورگر
axe DevTools: Chrome extension
Lighthouse: Chrome built-in
Pa11y: Command line

Motion و Animation

prefers-reduced-motion:
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

Language

<html lang="fa"> حتماً.
Language changes با lang attribute.

Table

<th> برای Header، caption برای توضیح.

Link Text

"اینجا کلیک کنید" بد. "دانلود PDF گزارش" خوب.

PDF

PDF ها باید Accessible باشن. Adobe Acrobat Pro.

قوانین

ADA: آمریکا
EN 301 549: اروپا
AODA: کانادا

Iranian Context

در ایران قانون خاصی نداره ولی خوب برای همه.

سباهاست

سایت سباهاست خودش Accessible هست.

جمع‌بندی

Accessibility مسئولیت اخلاقی و حرفه‌ای. با کمی توجه، سایت رو برای همه قابل استفاده کنید.